0x1 简述

终于来到本系列的最后一节咯，本节撸个早报APP来调用下上节编写的接口~

写完这个系列都有种自己是「全栈」工程师的错觉了~

---

0x2 产品原型设计环节

APP的功能虽说比较简单，但是竟然说了全栈，意思意思用Axure RP 8 大概的制作下原型（装波逼）， 涉及到五个页面，依次是：「今日新闻」，「新闻筛选」，「早报」，「新闻编辑」和「新闻详情」， 具体页面逻辑与交互详情如下：

---

0x3 本该有的设计环节

本来打算用Sketch意思意思设计下APP界面，不过赶脚比较简单，而且感觉没啥必要~ 所以直接跳过~（不要问：为何不让UI妹子帮忙设计一下？）

直接用Android自带的控件堆一个吧，APP主色肯定是蕾姆蓝哇。

---

0x4 手撸APP环节

打开尘封已久的Android Studio，这一个我终于想起自己的主业：『Android开发仔』， 而不是一个打杂网管，果真摸鱼一时爽，一直摸鱼一直爽。

1、项目结构

基于Kotlin+烂大街的MVC模式编写，项目工程结构如图所示：

为了方便管理，把库依赖，抽取到一个单独的gradle文件中：

接着build.gradle按需添加即可，比如：

 implementation depend_lib["kotlin-stdlib-jdk7"]
复制代码

行吧，项目用到的东西大概就这些，接着开始撸页面。

---

2、自定义Toolbar

默认会使用系统自定义的ActionBar，需要修改下styles.xml，把默认的：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"><!-- 改为 -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
复制代码

接着布局中添加Toolbar：

    <android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="0dp"app:title="抠腚男孩"android:background="@color/colorPrimaryDark"app:titleTextColor="@color/colorPrimary"android:layout_height="?attr/actionBarSize"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"/>
复制代码

运行后的效果：(看到网上很多要加setSupportActionBar(toolbar)设置下，应该是为了兼容5.0以下的系统)

接着需要定制下toolbar，添加两个按钮，分别进入新闻筛选页和早报页展示页。在app/res/menu目录 下新建一个main_menu.xml文件，添加菜单相关的配置：

<menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"tools:context="ui.MainActivity"><itemandroid:id="@+id/action_choose"android:icon="@drawable/ic_bar_choose"android:orderInCategory="80"android:title="筛选新闻"app:showAsAction="ifRoom"/><itemandroid:id="@+id/action_morning"android:icon="@drawable/ic_bar_morning"android:orderInCategory="90"android:title="早报"app:showAsAction="ifRoom"/>
</menu>
复制代码

接着设置下调用下toolbar的inflateMenu()方法加载下：

toolbar.inflateMenu(R.menu.main_menu)
复制代码

运行后的页面：

接着添加下item的点击事件：

        toolbar.setOnMenuItemClickListener {when(it.itemId) {R.id.action_choose -> {}R.id.action_morning -> {}}true}
复制代码

接着讲所有页面的toolbar都进行类似的配置，接着是网络层和数据层。

3、网络层与数据层

直接定义一个News类，新建新闻接口会传递遗传JSON，直接实现Serializable接口：

class News : Serializable {var id: Int? = 0var title: String? = nullvar url: String? = nullvar create_time: String? = nulloverride fun toString() = "News(id=$id, title=$title, url=$url, create_time=$create_time)"
}
复制代码

响应结果集：

class BaseResult<T> : Serializable {var code: String? = nullvar msg: String? = nullvar data: T? = null
}
复制代码

API接口：

interface CPAPIService {/* 查看新闻 */@GET("news/show")fun fetchNews(@Query("kind") kind: Int,@Query("count") count: Int,@Query("page") page: Int): Flowable<BaseResult<ArrayList<News>>>/* 查询新闻条数 */@GET("news/{kind}/count")fun fetchNewsCount(@Path("kind") kind: Int): Flowable<BaseResult<Int>>/* 删除新闻 */@FormUrlEncoded@POST("news/destroy")fun deleteNewsByNid(@Field("kind") kind: Int,@Field("nid") nid: Int): Flowable<BaseResult<String>>/* 更新筛选新闻 */@FormUrlEncoded@POST("news/update")fun updateNews(@Field("news") news: String): Flowable<BaseResult<String>>/* 生成日报 */@FormUrlEncoded@POST("news/insert_morning")fun generateNews(@Field("date") date: String): Flowable<BaseResult<String>>/* 获取微信传播复制模板 */@GET("news/show_copy_model")fun fetchCopyNews(@Query("date") date: String): Flowable<BaseResult<String>>
}
复制代码

OkHttpClient构造：

object CPOkHttp {private const val HTTP_CONNECT_TIMEOUT = 15Lprivate const val HTTP_READ_TIMEOUT = 30Lprivate const val HTTP_WRITE_TIMEOUT = 15Lvar httpClient: OkHttpClient by Delegates.notNull()fun init() {val logging = HttpLoggingInterceptor { message -> Timber.tag("OkHttps").d(message) }logging.level = HttpLoggingInterceptor.Level.BODYval builder = OkHttpClient.Builder()httpClient = with(builder) {connectTimeout(HTTP_CONNECT_TIMEOUT, TimeUnit.SECONDS)readTimeout(HTTP_READ_TIMEOUT, TimeUnit.SECONDS)writeTimeout(HTTP_WRITE_TIMEOUT, TimeUnit.SECONDS)addInterceptor(logging)build()}}
}
复制代码

Retrofit构造：

class CPRetrofit private constructor() {private val baseUrl = "服务器地址"var retrofit: Retrofit? = nullcompanion object {@Volatileprivate var instance: CPRetrofit? = nullfun init(): CPRetrofit {if (instance == null) {synchronized(CPRetrofit::class.java) {if (instance == null) {instance = CPRetrofit()}}}return instance!!}}init {CPOkHttp.init()val builder = Retrofit.Builder()retrofit = with(builder) {client(CPOkHttp.httpClient)addConverterFactory(GsonConverterFactory.create())addCallAdapterFactory(RxJava2CallAdapterFactory.create())baseUrl(baseUrl)build()}}
}
复制代码

然后在Application类中完成初始化：

class App : Application() {companion object {var instance: App by Delegates.notNull()var apis by Delegates.notNull<CPAPIService>()}override fun onCreate() {super.onCreate()instance = thisapis = CPRetrofit.init().retrofit?.create(CPAPIService::class.java) as CPAPIService}
}
复制代码

接着写一个工具方法，用来处理一些常见的网络请求异常：

fun processRequestException(e: Throwable) {when (e) {is ConnectException, is SocketException -> shortToast(getTextRes(R.string.network_connected_exception))is SocketTimeoutException -> shortToast(getTextRes(R.string.network_socket_time_out))is JsonSyntaxException -> shortToast(getTextRes(R.string.network_json_syntax_exception))is UnknownHostException -> shortToast(getTextRes(R.string.network_unknown_host))else -> Timber.d(e)}
}
复制代码

接着就可以直接用了，比如查询新闻条数：

    private fun fetchNewsCount() {val subscribe: Disposable = App.apis.fetchNewsCount(1).compose(RxSchedulers.compose()).subscribe ({ result ->shortToast("今天的新闻有${result.data}条")}, {throwable -> processRequestException(throwable) })mSubscriptions.add(subscribe)}
复制代码

4、页面编写

准备工作大概就这些，然后就是整理逻辑，下拉刷新，上拉加载更多，列表左滑干嘛，又划 干嘛等，都比较简单，只贴一个MainActivity作为参考吧，其他页面类似：

class MainActivity : BaseActivity() {private var mCurPage = 0    //当前页private var mCanLoadMore = true  //能否加载更多private var mAdapter: NewsAdapter? = nullprivate var mData = ArrayList<News>()private var mTouchHelper = ItemTouchHelper(object : ItemTouchHelper.Callback() {override fun getMovementFlags(p0: RecyclerView, p1: RecyclerView.ViewHolder) : Int {val swiped = ItemTouchHelper.RIGHT or ItemTouchHelper.LEFTreturn makeMovementFlags(0, swiped)}override fun onMove(p0: RecyclerView, p1: RecyclerView.ViewHolder, p2: RecyclerView.ViewHolder): Boolean {return false}override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {//左滑删除，右滑加入筛选池when (direction) {ItemTouchHelper.RIGHT -> {insertChoose(mData[viewHolder.adapterPosition])}}mAdapter?.remove(viewHolder.adapterPosition)}})private var mItemRemoveListener = object : NewsAdapter.onItemRemoveListener {override fun onItemRemove(pos: Int) {removeNews(mData[pos].id!!)mData.removeAt(pos)}}override fun prepare() {}override fun inflateLayoutId() = R.layout.activity_mainoverride fun init() {toolbar.inflateMenu(R.menu.menu_main)toolbar.setOnMenuItemClickListener {when (it.itemId) {R.id.action_choose -> startActivity(Intent(this@MainActivity, ChooseActivity::class.java))R.id.action_morning -> startActivity(Intent(this@MainActivity, MorningActivity::class.java))}true}srl_refresh.setColorSchemeColors(ContextCompat.getColor(this, R.color.colorPrimaryDark))srl_refresh.setOnRefreshListener {mCurPage = 0fetchNews()}mAdapter = NewsAdapter(this)mAdapter?.setItemRemoveListener(mItemRemoveListener)mTouchHelper.attachToRecyclerView(rec_list)rec_list.adapter = mAdapterrec_list.layoutManager = LinearLayoutManager(this)rec_list.addOnScrollListener(object : RecyclerView.OnScrollListener() {override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {super.onScrollStateChanged(recyclerView, newState)val layoutManager = recyclerView.layoutManager as LinearLayoutManager?if (newState == RecyclerView.SCROLL_STATE_IDLE) {if (mCanLoadMore) {if (layoutManager!!.itemCount - recyclerView.childCount <= layoutManager.findFirstVisibleItemPosition()) {++mCurPagefetchNews()}}}}})fetchNewsCount()fetchNews()}private fun fetchNews() {val subscribe: Disposable = App.apis.fetchNews(1, 100, mCurPage).compose(RxSchedulers.compose()).doOnSubscribe { srl_refresh.isRefreshing = true }.doFinally { srl_refresh.isRefreshing = false }.subscribe ({ news ->var newsData = news.dataif(mCurPage == 0) {if(newsData != null || newsData?.size != 0) {mData.clear()mData.addAll(news.data!!)mAdapter?.refresh(news.data!!)mCanLoadMore = true}} else{if(newsData != null && newsData.size != 0) {mData.addAll(news.data!!)mAdapter?.addAll(news.data!!)} else {mCanLoadMore = falseshortToast("没有更多了...")}}}, {throwable -> processRequestException(throwable) })mSubscriptions.add(subscribe)}/* 获取新闻数量 */private fun fetchNewsCount() {val subscribe: Disposable = App.apis.fetchNewsCount(1).compose(RxSchedulers.compose()).subscribe ({ result ->shortToast("今天的新闻有${result.data}条")}, {throwable -> processRequestException(throwable) })mSubscriptions.add(subscribe)}/* 移除新闻 */private fun removeNews(nid: Int) {val subscribe: Disposable = App.apis.deleteNewsByNid(1, nid).compose(RxSchedulers.compose()).subscribe ({ result ->shortToast(result.msg!!)}, {throwable -> processRequestException(throwable) })mSubscriptions.add(subscribe)}/* 新闻添加到筛选池 */private fun insertChoose(news: News) {val subscribe: Disposable = App.apis.updateNews(Gson().toJson(news)).compose(RxSchedulers.compose()).subscribe ({}, {throwable -> processRequestException(throwable) })mSubscriptions.add(subscribe)}
}
复制代码

---

0x5 结果展示环节

编写完运行下APP，演示下，我如何利用挤地铁的时间来完成早报的编辑：

1、筛选有意思的新闻到筛选池中

流程讲解：

• 1.进入APP查询爬取到的新闻数，加载100条新闻，上拉可加载更多。
• 2.左滑删除新闻，右滑把新闻加入筛选池，同时删除。
• 3.长按某条新闻可以查看新闻的详情，详情页右上角可以复制新闻URL。

2、进入筛选池筛选生成早报的15条新闻

流程讲解：

• 1.点击不开心的菜单图标可进入新闻筛选页。
• 2.左滑删除新闻，右滑进入新闻编辑页，长按可查看新闻详情。
• 3.点击加号可以手动添加新闻，直接进入新闻编辑页。

3、在新闻编辑中对新闻进行二次编辑

流程讲解：

• 1.如果从新闻列表过来的，自动填充新闻信息，新增那里进来则空白；
• 2.编辑新闻链接后，按小键盘的完成，加载url，实时预览；
• 3.此处配合锤子Big Band使用，非常酸爽。
• 4.编辑完成后点击右上角保存按钮即可保存。

4、凑够15条以上的新闻点击生成早报

流程讲解：

• 1.当筛选池中的新闻大于等于15条时，点击顶部生成按钮，会弹出生成对话框，确定是否生成；
• 2.点击确定，如果没生成则生成，生成后跳早报页；如果已生成，跳早报页，
• 注：每天的早报页只能生成一次！！！

5、早报页复制文字版早报

流程讲解

• 1.长按早报文本可以直接复制到剪贴板，然后到微信群里直接粘贴即可；
• 2.右上角可以选择查看某一天的早报；

6、复制公众号文章版早报

APP上能做的事情就上面这些，so，即使我没有带电脑回家，我还是能整理早报的，转发早报的。 （这就是为何我这两天公号没更新，依旧能在微信群里发文字版早报）。公号发文章还是离不开电脑的~ 直接访问：http://域名/news/show_wc_model?date=20190305，可以看到下面这样的公号复制模板。

接着打开微信公号，复制粘贴一波即可，然后是新闻详情列表，直接把链接： http://域名/news/show_news_list?date=20190305，添加到原文链接即可。 另外这个原文链接是要添加使用域名，不然只能以预览的模式打开~

---

0x∞ 本系列结语

断断续续，把这个系列肝完了，有种把早报自动化做成了产品的赶脚。其实在刚开始写这个系列有点怂， 觉得自己没准备好：后台我TM不会又没人带着我玩，代码粗制滥造写出来会被diss等。后面还是硬着头皮，看着书， 撸着文档把这个最小化的可行产品给组装出来了。其中最大的收获就是：只有做出实实在在的东西，思路才会清晰， 才能得到锻炼，视野也会更加开阔！还有一些骚话留到个人总结那里再说吧。

另外不是说这个东西弄出来就完了，后续还是要迭代优化的，比如目前我就发现了下面这些问题：

• 新闻源：

目前新闻源仅仅是爬取澎湃新闻+新浪微博某些新闻号的微博，新闻数量比较少。 新闻来源分类问题，目前全部塞一个表里，想查看微信的新闻，需要滚动好几页， 页面中添加一个tab选项卡，可以选择查看某个新闻源的新闻，而不是全塞一个页面里。

• 同质化新闻

相同类型的新闻有时很多，比如今天一排下去都是两会的... 而且还有一些很无聊的也能算新闻的新闻，要办法尽可能对这种无用新闻进行过滤。

• 手动添加新闻不方便

一种快速获得有趣新闻的方法就是：偷新闻，就是去截取一些专门发早报的公号发的早报， 然后咧，相比起普通的公号，多一个原文链接的东东。常规的操作是复制新闻，打开浏览器， 搜索，然后打开第一个结果，复制链接，然后打开CodingBoy，粘贴链接。这一步其实可以简化， 在添加新闻编辑页直接添加一个搜索按钮，直接获取新闻搜索结果的第一个URL，然后自动填充。

当然，远不止上述这些问题，后面慢慢迭代优化吧~

问：代码开源吗？

答：抱歉，目前不打算开源，涉及到我自己服务器的一些信息，而且代码比较简单，没啥必要。 照着文章撸一遍，你也很容易就做出来哈。当然，有兴趣研究这个，我们可以私下讨论讨论。

行吧，关于本节就说哪买多，有兴趣的话可以翻阅前年写个几篇文章：

• 偷个懒，公号抠腚早报80%自动化——1.批量生成微信封面图
• 偷个懒，公号抠腚早报80%自动化——2.手撕爬虫定时爬新闻
• 偷个懒，公号抠腚早报80%自动化——3.Flask速成大法
• 偷个懒，公号抠腚早报80%自动化——4.用Flask搭个简易(陋)后台

行吧，就说这么多~

---

Tips：公号目前只是坚持发早报，在慢慢完善，有点心虚，只敢贴个小图，想看早报的可以关注下~

---