独立双端App《瓦格相机》的开发过程分享

前言

Hello大家好，我是灯灯，独立开发者灯灯，也是天天学藏语的灯灯，哈哈哈...
好了屁话少说，今天和大家分享一下最近自己独立制作一款应用的经验历程，希望能对刚刚起步的新手们、还有独立开发者们有所帮助。

什么样的应用

我想做的是一款能够将照片转换成文字拼成的图片应用，也就是，图片中的每一个像素点都将会被文字取代，同时对应色彩、密集程度等。
之所以想做这样的应用是因为早在我高中的时候，我就用VB做过一个类似的应用，当时朋友们很喜欢，经常问我要这个软件。如今PC时代已经离我而去，自然就想在移动平台也做一个。
其实之前我已经用Python脚本写了一个，效果还算不错，大家可以前往使用：
图片转文字Python版本GitHub

构思与设计

软件的需求很简单，因为是自己独立开发而且软件结构比较简单，就没有设计流程图之类的。
初步构思，软件只有几个界面：

• 首页：让用户打开图片或者拍照
• 素材库：瀑布流，提供一些素材
• 裁剪：让用户对图片进行裁剪
• 设置：让用户对要生成图片的文字进行输入
• 生成：得出结果，保存、社交分享

所以整体还是很简单的，核心技术肯定是生成页面，其余只是布局和第三方开源库（原谅我这么懒）的问题。
然后，设计师登场（还是我）。
我不怎么会用Sketch，于是还是用PS进行设计，一开始想采用唯美清新文艺小青年风格，整体浅绿色调，给人一种马卡龙配色的感觉。等我设计完，在不同手机查看的时候发现由于色温关系，不同手机显示效果差异极大，非常恶心。
一怒之下重新设计，这一次决定采用白色、橙色为主色调的卡通风格。

效果图

图标是自己用PS绘制的，采用了MBE风格，形象就是一只照相机...
至于名字，我一贯地总是想到什么就是什么。

技术方案

设计完后没有急着立马动手，先想了下每个页面的技术方案。

• 首页：毫无难度
• 素材库：collectionView，自己再写个简单的php接口
• 裁剪：不会，求救GitHub开源库，我坚信一定有很多
• 设置：毫无难度
• 生成：算法已经用Python做过了，照搬就行了
• 分享：友盟或者ShareSDK

于是，经过我在GitHub上苦苦的搜寻，和一遍遍地Demo尝试，最终确定下来用这些开源库：

• 安卓：
  android-gif-drawable 用来显示Gif加载动画
  SimpleCropView 用来裁剪照片
  PhotoView 用来全屏显示图片
  ShareSDK 用来分享，友盟的AndroidStudio不支持
• iOS：
  TKImageView 用来裁剪照片
  UIImage-Resize 用来缩放图片
  uiimage-from-animated-gif 用来显示加载动画
  友盟分享 社交分享

着手开发

这一次我没有先选择开发iOS端(以往总是先做iOS)，选择了先做Android，原因是一开始测试核心代码的时候iOS没有写成功，安卓成功了。
先把PS设计图用CutterMan(切图神器)生成切图，然后就动手开发。
安卓端使用AndroidStudio开发，一遍遍构建Activity，构建xml布局，码字、测试...
遇到的棘手问题又：

• 图像在Activity间的传递问题，我转换成bytes传递，经常发生崩溃的情况，不得已全部将图片压缩后再传输，知道原因的朋友可以留言告诉我下。
• 像素读取的时候的横竖问题，x和y轴总是搞反，大家可以参考python版代码看下到底该如何写宽高。
• ShareSDK的集成问题，由于不需要它的UI，采用直接分享接口，数据传递遇到了很多bug，总之，在AndroidStudio上，友盟和sharesdk都一塌糊涂，大家慎用。

安卓端基本做完后，着手开发iOS，第一步还是去解决核心图像算法，这一次终于成功解决，而且iOS生成的图片效果要比安卓好得多，不知道为什么。
iOS上的项目依赖我还是用的CocoaPods，暂时没有尝试其他的，代码采用OC。
然后开始搭建界面，我不喜欢用storyboard或者xib，所有界面都是用代码按照比例计算布局写的。
iOS上问题不大，比起安卓反而容易，前前后后安卓和iOS双端总共花了3天左右的时间完成。

上线之前的准备

不是开发完了就能发布的，还有很多很多事情要做。

• 制作应用预览图(宣传图)
• 申请分享需要的AppKey，包括微信、QQ、新浪
• 制作简单的应用官网
• 制作素材库需要的php接口

好在做这些事情已经得心应手，申请AppKey的过程提醒下大家：新浪最麻烦，需要demo、官网，其他的不需要demo和官网。

宣传图

自适应的“官网”，也就是下载页面 www.winterfeel.com/vug：

手机版官网

针对官网补充一些技巧，因为微信是无法直接下载apk和跳转AppStore的，所以在JS代码中我进行了检测，如果发现是微信，则弹出一个提示，引导用户用浏览器打开进行下载。

php接口由于接口简单，只是一个查询返回json，我就只用了原生php写了个select语句，没有采用任何框架。

结束的话

至此，这款小小的独立App已经差不多开发完成了，然后就是提交给各大应用商店以及苹果了，苹果总是很顺利的发布，安卓我就不想多说了，只上了应用宝和360。
整个软件可以说是很简单的小应用，但是开发中涉及到的问题还是很多的，尤其是作为独立开发者，所有的一切都得自己做的时候，还是很麻烦的。
我想，除了我这样闲的没事做的人应该也没有多少人会去做这样的一个应用吧，毕竟做完也没几个人下载，哈哈，毕竟

大四不考研，天天像过年

如果整个历程能够对大家所有帮助的话，希望大家支持下这个独立小应用。
如果你也喜欢自己做程序，如果你有好想法、缺伙伴，交个朋友一起玩！

个人微信，添加注明简书

瓦格相机 - 官方网站 欢迎大家下载试玩
GitHub Python版代码