阅读 1609

偷个懒,公号抠腚早报80%自动化——5.意思意思撸个APP收下尾

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,然后自动填充。

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

问:代码开源吗?

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

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

行吧,就说这么多~


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


关注下面的标签,发现更多相似文章
评论