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.Toolbar
android: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">
<item
android:id="@+id/action_choose"
android:icon="@drawable/ic_bar_choose"
android:orderInCategory="80"
android:title="筛选新闻"
app:showAsAction="ifRoom"/>
<item
android: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? = 0
var title: String? = null
var url: String? = null
var create_time: String? = null
override fun toString() = "News(id=$id, title=$title, url=$url, create_time=$create_time)"
}
复制代码
响应结果集:
class BaseResult<T> : Serializable {
var code: String? = null
var msg: String? = null
var 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 = 15L
private const val HTTP_READ_TIMEOUT = 30L
private const val HTTP_WRITE_TIMEOUT = 15L
var httpClient: OkHttpClient by Delegates.notNull()
fun init() {
val logging = HttpLoggingInterceptor { message -> Timber.tag("OkHttps").d(message) }
logging.level = HttpLoggingInterceptor.Level.BODY
val 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? = null
companion object {
@Volatile
private var instance: CPRetrofit? = null
fun 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 = this
apis = 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? = null
private 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.LEFT
return 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_main
override 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 = 0
fetchNews()
}
mAdapter = NewsAdapter(this)
mAdapter?.setItemRemoveListener(mItemRemoveListener)
mTouchHelper.attachToRecyclerView(rec_list)
rec_list.adapter = mAdapter
rec_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()) {
++mCurPage
fetchNews()
}
}
}
}
})
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.data
if(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 = false
shortToast("没有更多了...")
}
}
}, {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:公号目前只是坚持发早报,在慢慢完善,有点心虚,只敢贴个小图,想看早报的可以关注下~