天真无谐

悠悠 2022-08-03 12:38 165阅读 0赞

# 一、前言 #

好长时间没写blog了，主要还是工作上的事有点多，周末又得在家开发自己的app,所以时间真的不够用了，当然今天这篇文章主要就要说一下，工作两年的我如何从产品角度去做一个app,以及app的发布流程等。

# 二、支持我 #

在开始讲解这个项目之前，希望能够先去各大市场下载一个apk看看，首先是为了支持我一下，其次呢就是我在后面会介绍一些功能和技术实现，所以先使用一下，这样会找到对应的功能点，谢谢

**二维码扫描下载：**

![Image 1][]

**1、豌豆荚市场：搜索：天真无谐**

PC上的链接：[http://www.wandoujia.com/apps/com.wjdiankong.happymahua][http_www.wandoujia.com_apps_com.wjdiankong.happymahua]

**2、应用宝市场，搜索：天真无谐**

PC端链接：[http://sj.qq.com/myapp/detail.htm?apkName=com.wjdiankong.happymahua][http_sj.qq.com_myapp_detail.htm_apkName_com.wjdiankong.happymahua]

**3、百度手机助手，搜索：天真无谐**

PC端的链接：[http://shouji.baidu.com/soft/item?docid=7864245&from=&f=search\_app\_%E5%A4%A9%E7%9C%9F%E6%97%A0%E8%B0%90%40list\_1\_title%401%40header\_all\_input][http_shouji.baidu.com_soft_item_docid_7864245_from_f_search_app_E5_A4_A9_E7_9C_9F_E6_97_A0_E8_B0_90_40list_1_title_401_40header_all_input]

**4、360手机助手，搜索：天真无谐**

PC端链接：[http://zhushou.360.cn/detail/index/soft\_id/3052244?recrefer=SE\_D\_%E5%A4%A9%E7%9C%9F%E6%97%A0%E8%B0%90][http_zhushou.360.cn_detail_index_soft_id_3052244_recrefer_SE_D_E5_A4_A9_E7_9C_9F_E6_97_A0_E8_B0_90]

**5、Google Play Store市场，搜索：天真无谐**

PC端链接：[https://play.google.com/store/apps/details?id=com.wjdiankong.happymahua\_gp][https_play.google.com_store_apps_details_id_com.wjdiankong.happymahua_gp]

# 三、项目背景 #

首 先介绍一下自己的项目吧，这个项目叫做：天真无谐，主要是展现一些笑话类的资讯(包括段子，图片，Gif)，类似于糗事百科那样的app，这个项目的启动 时间是2015年02.14，也就是情人节那天，所以到现在正式上线差不多6个月了，都是周末在家弄的，所以算起来大概用了1个多月的时间。当时也没想说 做了这个app来赚钱啥的，就是当时感觉自己快工作两年了，应该有一个自己的app了，而且也是需要熟悉如何开发一个app,以及将其发布的流程。

# 四、项目介绍 #

再 来大体介绍一下技术实现吧：这个项目的Server端采用的是SSB框架，主要还是SpringMVC技术，感觉比Struts好用多了，方便快捷，本身 不是做Server端的，主要是大学毕业设计用到了Server端的技术，所以这里就在复习一下啦，数据库用的是MySql。

至于Client端，详细分析一下，因为是自己的项目，当时没有想到找小伙伴们合作弄，所以自己就身兼数职：产品狗，设计狮，程序猿，测试猫，运营猪等角色，下面就来详细介绍一下每个角色我是怎么扮演的，不过先来看一下app的功能和界面吧：

## 1、功能介绍 ##

### 1)、应用的开启页面 ###

这个页面内容就是：醒人每句

就是用户登录之后可以设计自己的最喜欢的座右铭：后台随机下发一个用户的语句用于每次用户的展示。

想法：能够提高用户的成就感，让用户感觉自己说的话可以被其他人看到。很开心

### 2)、首页 ###

首页已经采用大众化的轮播切换的新闻样式，这里有六个Tab:

最新推荐：最新的搞笑图片+段子

段子手：在用户不是Wifi的情况下这个Tab会优先展示，他只有文本笑话，不会太消耗流量

搞笑：就是搞笑图片的Tab

清纯妹子：就是妹子图片(你们懂得)

性感美女：就是性感美女图片(你么也是懂得)

动态图：就是Gif搞笑的动态图(这个比较消耗流量，所以在Wifi的情况下会调节他的顺序)

所以后台会对这些Tab的展示顺序，展示开关做控制的

### 3)、详情页 ###

详情页面就是可以进行评论内容，点赞啥的动作了，而且点击图片可以进行大图浏览

这个页面没什么好说的啦

### 4)、用户中心页面 ###

这个页面就是用户中心，用户在这里可以编辑自己的信息，同时可以查看自己的历史行为动作

也是大众化的页面

### 5)、设置页面 ###

这个页面也是大众化的页面，可以设置一些属性等功能

当然还有其他页面，这里就不在详细说明了

![Center][]       ![Center 1][]      ![Center 2][]

![Center 3][]        ![Center 4][]

## 2、各个角色说明 ##

好了。大体上看完了功能了，下面就来给大家分享一下我是如何扮演这些角色的：

### 1)  第一个角色：产品狗 ###

关 于产品狗这个角色，其实很模糊的，大家普遍认为就是如何将一个app设计的让用户喜欢用就OK了，主要就是有想法，能了解用户的喜好和行为，所以关于这个 角色，我们都可以去胜任的，当然只是胜任的成功与失败的问题了。我在设计这个app的时候，主要是借鉴(说得好听点，不好听就是抄袭)了其他很多类似 app的功能，但是我们不能只顾一味的借鉴呢，也要做的比他们好，比他们有亮点才行了，不然就是抄袭了。哈哈~~关于亮点这里有三个地方：

**1.1)、保存Gif的帧图片**

播放Gif图片的时候可以暂停/继续，然后可以保存每帧的图片，因为我在看其他Gif类的app的时候，我有时候真的想去截取当前动画的图片，所以我就加上了这个功能。

![Image 1][]

**1.2)、增加语音播报功能**

就是在对段子笑话的时候，有时候我们很不想去阅读段子，文字太多，看着也烦。所以这里就提供了语音自动播报文字的功能，而且增加了各地方言语音，更是搞笑(特别是河南和粤语，我自己真的每次都在听，很好听的)

![Image 1][]

**1.3)、本地图片/Gif保存文件的查看**

这个功能其实我当时在看糗百的时候想到的，图片下载功能都支持是没有问题的，但是下载之后我们如果再想去找的话，可能需要去指定的文件夹去看，那样很是费劲的，如果在app内部就可以查看我已经下载好的图片很是方便的。

![Image 1][]

所以上述的三点也算是我的app的三个亮点，也希望大家能够多多支持，我也是从产品角度去考虑问题的。关于其他的功能的话，这里就不在多说了，都是大同小异，没什么好说的了。

### 2) 第二个角色： 设计狮 ###

关于设计师这个角色，其实不想产品狗那么好扮演了，因为他不是所有人都能搞定的，首先你得有艺术感，其实你得会一些设计工具。那么我是怎么搞的呢？

其实也不难，为啥呢？因为我很有艺术感的(真的，好多人都这么说的)，那些设计工具呢，大学的时候辅修的是美术系，所以PS就不难了(简单的功能还是可以的)

不过有些图片资源还是需要从网上查找的，这里提供一些app的图片资源地址，有些是免费的，有些是收费的：

[http://findicons.com/][http_findicons.com]

[https://www.iconfinder.com/][https_www.iconfinder.com]

[http://www.flaticon.com/][http_www.flaticon.com]

[http://www.iconarchive.com/][http_www.iconarchive.com]

[http://www.playpcesor.com/2014/11/Flatty-Shadow-Flat-icon-download-free.html][http_www.playpcesor.com_2014_11_Flatty-Shadow-Flat-icon-download-free.html]

[http://www.premiumpixels.com/page/1/?s=icon][http_www.premiumpixels.com_page_1_s_icon]

[http://www.bestpsdfreebies.com/category-freebie/icons/][http_www.bestpsdfreebies.com_category-freebie_icons]

[https://github.com/google/material-design-icons/blob/master/README.md][https_github.com_google_material-design-icons_blob_master_README.md]

希 望能够帮到你们呢，但是有些图片我们弄下来之后不一定是我们想要的，比如一个icon的我们想改变他的颜色，那么这时候就需要PS工具来实现了，好吧，这 里我不可能说怎么改，因为篇幅太长了，所以大家学习PS是没有坏处的，至少可以把自己ps的能给人看的样子呢。当然最好还是能找一个设计师小伙伴，因为至 少他们专业点，我是因为当时这个项目比较封闭，不想惊动太多人啦。所以就自己亲自操刀了。哈哈~~

### 3) 第三个角色：测试猫 ###

这 个角色其实和产品狗一样，任何人都可以胜任，只要会写一些测试的case就可以了，或者是不写，因为app是你开发的，很多功能点你知道哪里可能会出 bug..不过也有很多隐藏的bug不好复现，所以自己得多用呢，我是每次都在公交车或者地铁里在用，白天用，晚上改bug...生活如此惬意

### 4) 第四个角色：运营猪 ###

这个角色怎么说呢？其实也是可以都胜任的，而且这个角色也是有点模糊的，他就是负责用户的行为数据的收集，然后分析用户的行为数据等，以及还负责发包的流程。关于数据的收集，这里就不多介绍了。国内的话一般是友盟统计，国外的话一般是GA统计

关于发包的流程我后面会详细说

### 5) 第五个角色：程序猿 ###

终于说道这个角色了，满血复活啦，因为我就是干这个的，不得详细的介绍一下呀，而且我也是很无私的，介绍我在这个项目中用到的技术，哈哈~~虽然不是很高深的技术：

**1、开源控件**

在这个项目中我用到的开源控件很多，这里我就来详细介绍一下

**1）首页：**

1.1）首先是下拉刷新数据的，现在很多app都是采用顶部动画的样式，但是Google提供了自己的下拉刷新控件， 个人感觉很好用，也很酷炫的：

**SwipeRefreshLayout**

地址：https://github.com/hanks-zyh/SwipeRefreshLayout

1.2）首页轮播的Tab样式，这个网上也是很多例子

**PagerSlidingTab**

地址：https://github.com/astuetz/PagerSlidingTabStrip

1.3）首页的悬浮快捷菜单，类似于Google+

**FloatingActionsMenu**

地址: https://github.com/telly/FloatingAction

1.4）ListView的展示动画

**ListViewAnimations**

地址：https://github.com/nhaarman/ListViewAnimations

1.5）TextView中的文本自动对齐

**JustifyTextView**

地址：https://github.com/xsingHu/JustifyTextView

1.6）图片的圆形处理

**CircularImageView**

地址：https://github.com/lopspower/CircularImageView

1.7）数据加载样式

**ProgressWheel**

地址：https://github.com/nithinkmichael/Android-ProgressWheel-master

1.8）选择icon的翻转动画

**FlipImageView**

地址：https://github.com/castorflex/FlipImageView

**2）详情页**

2.1）播放Gif的控件

**gifdrawable**

地址：https://github.com/nemothekid/gifdrawable-android

**3）设置页**

3.1）菜单点击的水波纹效果，类似于360安全卫士的菜单

**RippleEffect**

地址：https://github.com/traex/RippleEffect

3.2）自定义的滑动开关,类似于苹果的开关效果

**SlideSwitch**

地址：https://github.com/Leaking/SlideSwitch

3.3）显示数值的进度条样式，在设置字体大小样式的时候出现

**discreteSeekBar**

地址：https://github.com/AnderWeb/discreteSeekBar

3.4）带有数值的进度条样式，在升级的的时候会出现

**NumberProgressBar**

地址：https://github.com/daimajia/NumberProgressBar

3.5）动画样式的对话框

**SweetAlertDialog**

地址：https://github.com/lzyzsd/SweetAlertDialog

3.6）清除缓存的对话框

**SmoothProgressBar**

地址：https://github.com/castorflex/SmoothProgressBar

**4）本地图片浏览页面**

4.1）瀑布流样式

**StaggeredGridView**

地址：https://github.com/maurycyw/StaggeredGridView

**5）图片浏览页面**

5.1）放大和缩小图片

**PhotoView**

地址：https://github.com/chrisbanes/PhotoView

**6）用户中心页面**

6.1）拉下头部放大效果样式

**PullZoomView**

地址：https://github.com/Frank-Zhu/PullZoomView

**(控件就这么多了，如果你们发现了我还没有说到的控件，或者你们在app中没有找到的话，就给我留言，我看看能不能给你们源码)**

**2、技术功能**

2.1）本地内容缓存，主要使用ObjectInputStream将信息写入到SD中做保存，在没有网络的时候，进行加载

2.2）在分享页面的二维码分享，有一个二维码产生功能，那个其实网上有生成二维码的demo,将一个字符串生成二维码，主要是在二维码中间加上我们自己的logo,但是以为有什么高神的技术，结果其实很简单的，就是直接用ps将logo和二维码图片合成就OK了，原因很简单，二维码的识别错误容忍率在50%左右，所以只要你的logo图片不要太大就好啦

**3、用到的第三方SDK**

3.1）分享SDK,这个网上有很多的demo的，没有难度啦

3.2）使用友盟SDK进行数据统计

**技术就讲到这里了，如果大家发现有什么地方有困惑的话，可以联系我啦，我会解答一下。**

# 五、遇到的问题 #

下面来说一下我在开发过程中遇到的问题

**1、服务端的问题就是在使用SpringMVC的时候，返回JSON处理**

**2、客户端这边遇到的问题就是多张图片的上传功能**

**3、运维遇到的问题就是怎么在远端服务器部署项目**

**4、设计上的问题就是如何改变一个icon的背景色**

**5、发布包的问题就是准备资源的时候各大市场的需求不一样**

发包流程总结

国内的话，我就发布了以下市场：

1、360手机助手

2、应用宝

3、百度手机助手

4、安卓市场/91市场

5、安智市场

发包的过程中需要准备的就是前提资源：

1、身份证明：一般是身份证照片，手持身份证照片

2、应用的详细描述文案

3、应用的logo图片(一般是512\*512的)

4、应用的截图(一般不能超过5张)

5、各个渠道的apk包(因为要统计各个渠道的安装情况和日后各个渠道的用户数据，所以要打不同的渠道包)

国 际的话，一般是发布GooglePlayStore了，但是我们一般不发国际，因为你都上不了GP网站，除非翻墙啦，因为我是想尝试所有的发包流程，所以 就体验了一下，在GP上发布apk的话，是需要money的，是29$,还好，当然需要用VISA的信用卡支付的，所以你还得去申请一个信用卡。GP上统 计数据一般用GA的SDK,广告的话一般是Admob/Inmobi等。

# 六、总结 #

经 历了六个月的时间，终于做出来属于自己的一个app,心里还是很开心的，但是这个过程真的很辛苦，从Server端写接口，到Client端调通数据，还 有后面的搭建服务器，部署项目，最后的发包，真的说不出来的那种体验，或许大家真的该体验一下，特别是在这个过程中，有无数次的想放弃，但是最终都坚持下 来了，这种磨练真的是一种成长，说个简单的例子：

开通GP账户我用了半个月的时间，去办信用卡，然后申请账号，被拒绝，在申请，这个过程，很伤的

发包过程，每个市场发包流程不一样，审核制度也不一样，来回打回几次，在提交，这个过程，挫败感真的很让你伤心的

我有时候连续好几个礼拜都是不开心的度过，特别是那种挫败感让你想放弃。

但是我还是想说，只要有目标，一定要坚持下来，所以如果你想开发一个app的话，真的给你的建议就是，要做好百分百的准备，不然你真的招架不住的。

最后再说一句，如果你们在使用的过程中发现有bug或者是建议，希望能够给我提，或者是在使用的过程中遇到不解的地方也希望能够联系我，我将给与解答。

最后谢谢大家的支持，能够下一个app看看~~

**支持我的话就扫一扫啦：**

![Image 1][]

**PS: App内部有我的联系方式，如果想联系我的话，可以私聊我啦**

[Image 1]: 
[http_www.wandoujia.com_apps_com.wjdiankong.happymahua]: http://www.wandoujia.com/apps/com.wjdiankong.happymahua
[http_sj.qq.com_myapp_detail.htm_apkName_com.wjdiankong.happymahua]: http://sj.qq.com/myapp/detail.htm?apkName=com.wjdiankong.happymahua
[http_shouji.baidu.com_soft_item_docid_7864245_from_f_search_app_E5_A4_A9_E7_9C_9F_E6_97_A0_E8_B0_90_40list_1_title_401_40header_all_input]: http://shouji.baidu.com/soft/item?docid=7864245&amp;from=&amp;f=search_app_%E5%A4%A9%E7%9C%9F%E6%97%A0%E8%B0%90%40list_1_title%401%40header_all_input
[http_zhushou.360.cn_detail_index_soft_id_3052244_recrefer_SE_D_E5_A4_A9_E7_9C_9F_E6_97_A0_E8_B0_90]: http://zhushou.360.cn/detail/index/soft_id/3052244?recrefer=SE_D_%E5%A4%A9%E7%9C%9F%E6%97%A0%E8%B0%90
[https_play.google.com_store_apps_details_id_com.wjdiankong.happymahua_gp]: https://play.google.com/store/apps/details?id=com.wjdiankong.happymahua_gp
[Center]: https://img-blog.csdn.net/20150801180351401?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20150801180401167?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220731/6e1ac193c43a442a9aebcda107bbfee8.png
[Center 3]: https://img-blog.csdn.net/20150801180435346?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: /images/20220731/d6de20d9380443f4af0d4918bf8633e9.png
[http_findicons.com]: http://findicons.com/
[https_www.iconfinder.com]: https://www.iconfinder.com/
[http_www.flaticon.com]: http://www.flaticon.com/
[http_www.iconarchive.com]: http://www.iconarchive.com/
[http_www.playpcesor.com_2014_11_Flatty-Shadow-Flat-icon-download-free.html]: http://www.playpcesor.com/2014/11/Flatty-Shadow-Flat-icon-download-free.html
[http_www.premiumpixels.com_page_1_s_icon]: http://www.premiumpixels.com/page/1/?s=icon
[http_www.bestpsdfreebies.com_category-freebie_icons]: http://www.bestpsdfreebies.com/category-freebie/icons/
[https_github.com_google_material-design-icons_blob_master_README.md]: https://github.com/google/material-design-icons/blob/master/README.md