Đã đăng vào thg 11 24, 2017 3:43 SA 2 phút đọc

862

Xây dựng ứng dụng Viblo trên android bằng kotlin sử dụng lib jsoup (Phần 1)

Bài đăng này đã không được cập nhật trong 3 năm

Với chúng ta thì trang web viblo.asia đã quá quen thuộc rồi, nhưng việc xem nó trên di động không thích hợp cho lắm vì có nhiều thành phần không cần thiết - > Từ những điều đó mình đã lên ý tưởng viết 1 app Viblo bằng kotlin và sử dụng thư viện jsoup Sau đây mình sẽ viết 1 series các bài viết hướng dẫn thực hiện ý tưởng này

1. MainActivity

1.1. activity_main.xml!

Cấu trúc gồm 1 BottomNavigationView mình đặt lên trên cùng và 1 FrameLayout Trong đó BottomNavigationView sẽ có 3 tab là Post , Questions và Discussions
Full code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical"
    tools:context="com.asia.viblo.view.activity.home.MainActivity">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationHome"
        android:layout_width="match_parent"
        android:layout_height="@dimen/size_56"
        android:layout_gravity="start"
        app:elevation="@dimen/size_1"
        app:itemBackground="@drawable/bg_bottom_navigation"
        app:itemIconTint="@color/selector_color_bottom_navigation"
        app:itemTextColor="@color/selector_color_bottom_navigation"
        app:menu="@menu/menu_navigation_items"/>

    <FrameLayout
        android:id="@+id/frameHome"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

1.2. menu_navigation_items.xml

Tạo 1 file menu giao diện cho BottomNavigationView ở thư mục res -> menu -> menu_navigation_items.xml Gồm 3 tab Post , Questions và Discussion

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/itemPost"
        android:icon="@drawable/ic_post"
        android:title="Post"/>
    <item
        android:id="@+id/itemQuestions"
        android:icon="@drawable/ic_questions"
        android:title="Questions"/>
    <item
        android:id="@+id/itemDiscussion"
        android:icon="@drawable/ic_discussion"
        android:title="Discussions"/>
</menu>

1.3. MainActivity

Full code : MainActivity.kt

Khởi tạo listener cho BottomNavigationView

  private fun initBottomNavigationView() {
        bottomNavigationHome.setOnNavigationItemSelectedListener { item ->
            val fragment: Fragment = when (item.itemId) {
                R.id.itemPost -> PostFragment()
                R.id.itemQuestions -> QuestionsFragment()
                R.id.itemDiscussion -> DiscussionsFragment()
                else -> PostFragment()
            }
            supportFragmentManager.beginTransaction().replace(R.id.frameHome, fragment).commit()
            true
        }
        bottomNavigationHome.selectedItemId = R.id.itemPost
    }

2. BaseFragment

Cấu trúc của 1 fragment extend BaseFragment gồm có :

1 Spinner ở trên cùng
Phần content ở giữa
Ở cuối cùng là 1 layout : include_layout_next_back_page.xml để chuyển trang

Full code : BaseFragment.kt
Tạo listener chọn trang
- textPageNext để đến trang tiếp theo
- textPageBack để trở lại trang trước đó
- textPagePresent khi ấn vào đây sẽ hiển thị dialog chọn trang theo ý muốn của mình

 open fun initListener() {
        textPageNext.setOnClickListener {
            val pageNext = SharedPrefs.instance[keyPagePresent, String::class.java].toInt() + 1
            loadData(getLink(mPosition), pageNext.toString())
        }
        textPageBack.setOnClickListener {
            val pageBack = SharedPrefs.instance[keyPagePresent, String::class.java].toInt() - 1
            loadData(getLink(mPosition), pageBack.toString())
        }
        textPagePresent.setOnClickListener {
            val builder = AlertDialog.Builder(context)
            val dialogSelectPage = DialogSelectPage(context, null, this) as LinearLayout
            dialogSelectPage.txtTitle.text = getString(R.string.text_dialog_title)
            dialogSelectPage.txtMessage.text = String.format(
                    getString(R.string.text_dialog_message, "1", SharedPrefs.instance[keyMaxPage, String::class.java]))
            dialogSelectPage.editPage.setText(SharedPrefs.instance[keyPagePresent, String::class.java])
            builder.setView(dialogSelectPage)
            mAlertDialog = builder.show()
        }

Khởi tạo Spinner

open fun initSpinner() {
        initSpinner(null)
    }
    
 open fun initSpinner(params: String?) {
        if (!checkErrorNetwork(context)) return
        showProgressDialog()
        if (TextUtils.isEmpty(params)) {
            FeedBarAsyncTask(this).execute(getLink(mPosition))
        } else {
            FeedBarAsyncTask(this).execute(getLink(mPosition), params)
        }
    }

Function showProgressDialog khi đang load data

open fun showProgressDialog() {
        if (mProgressDialog.isShowing) {
            mProgressDialog.dismiss()
        }
        mProgressDialog.show()
    }

Function loadData

open fun loadData(url: String) {
        loadData(url, "")
    }

    open fun loadData(url: String, page: String) {
        if (!checkErrorNetwork(context)) return
        showProgressDialog()
    }

Hiển thị trang hiện tại trên tổng số trang

open fun getPagePresent(pagePresentStr: String, pageMaxStr: String): String {
        return pagePresentStr + "/" + pageMaxStr
    }

Function abstract fun getLink(type: Int): String để lấy link url

3. PostFragment

3.1. PostFragment.kt

Full code : PostFragment.kt
Lấy url cần để load data

 override fun getLink(type: Int): String {
      return when (type) {
          0 -> baseUrlViblo
          1 -> baseUrlSeries
          2 -> baseUrlEditorsChoice
          3 -> baseUrlTrending
          4 -> baseUrlVideos
          else -> baseUrlViblo
      }
  }

Khởi tạo RecyclerView với adapter PostAdapter.kt

private fun initRecyclerPost() {
      mPostAdapter = PostAdapter(context, mPostList, this, this)
      recyclerPost.adapter = mPostAdapter
      recyclerPost.layoutManager = LinearLayoutManager(context)
  }

Cập nhât recycler view khi dữ liệu từ interface OnUpdatePostData.kt trả về

 override fun onUpdatePostData(postList: List<Post>?) {
      if (postList != null) {
          mPostList.clear()
          mPostList.addAll(postList)
          mPostAdapter.notifyDataSetChanged()
      }
      mProgressDialog.dismiss()
      updateViewNextBackBottom()
  }

3.2 fragment_post.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context="com.asia.viblo.view.fragment.post.PostFragment">

    <Spinner
        android:id="@+id/spinnerPost"
        android:layout_width="@dimen/size_170"
        android:layout_height="@dimen/size_30"
        android:layout_margin="@dimen/size_10"
        android:visibility="invisible"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerPost"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <include
        android:id="@+id/viewNextBack"
        layout="@layout/include_layout_next_back_page"/>
</LinearLayout>

4. LoadPostAsyncTask

Full code : LoadPostAsyncTask.kt

4.1. Lưu vị trí trang hiện tại và trang lớn nhất

 try {
            val document = Jsoup.connect(baseUrl + page).get()
            val elements = document?.select(getCssQuery(baseUrl, TypeQuery.PAGE))
            elements!!
                    .map { it.select("li") }
                    .forEach { data ->
                        data.asSequence()
                                .map { it.getElementsByTag("a").text() }
                                .filterNotTo(pageList) { TextUtils.isEmpty(it) }
                    }
        } catch (ex: Exception) {
            ex.printStackTrace()
        }
        SharedPrefs.instance.put(keyMaxPage, if (pageList.isNotEmpty()) pageList.last() else "0")
        if (params.size == 1) {
            SharedPrefs.instance.put(keyPagePresent, "1")
        }

4.2. Dùng interface để trả dữ liệu về PostFragment.kt

 override fun onPostExecute(result: List<Post>?) {
        super.onPostExecute(result)
        mOnUpdatePostData.onUpdatePostData(result)
    }

4.3. Function getLinkPage()

Lấy ra trang cần load data nếu

trang truyền vào từ params < pageMax thì lấy trang đó
trang truyền vào từ params > pageMax thì lấy pageMax

 private fun getLinkPage(baseUrl: String?, page: String?): String {
        var pageCheck = page
        try {
            if (page != null) {
                val pageMaxStr = SharedPrefs.instance[keyMaxPage, String::class.java]
                if (!TextUtils.isEmpty(pageMaxStr)) {
                    val pageMax = pageMaxStr.toInt()
                    val pagePresent = page.toInt()
                    if (pagePresent > pageMax) {
                        pageCheck = pageMaxStr
                    }
                }
            }
        } catch (ex: Exception) {
            ex.printStackTrace()
        }
        if (!TextUtils.isEmpty(pageCheck)) {
            SharedPrefs.instance.put(keyPagePresent, pageCheck)
        }
        return when (baseUrl) {
            baseUrlViblo -> "/?page="
            else -> "?page="
        } + pageCheck
    }

5. Model

5.1. BaseModel.kt

package com.asia.viblo.model

import java.io.Serializable

/**
 * Created by FRAMGIA\vu.tuan.anh on 09/11/2017.
 */
open class BaseModel : Serializable {
    var avatar = ""
    var name = ""
    var time = ""
    var authorUrl = ""
    var title = ""
    var score = ""
    var views = ""
    var comments = ""
    var tags: MutableList<String> = arrayListOf()
    var tagUrlList: MutableList<String> = arrayListOf()
}

5.2. Post.kt

package com.asia.viblo.model.post

import com.asia.viblo.model.BaseModel

/**
 * Created by FRAMGIA\vu.tuan.anh on 27/10/2017.
 */
open class Post : BaseModel() {
    var postUrl = ""
    var clips = ""
    var posts = ""
    var reputation = ""
    var followers = ""
    var post = ""
    var isVideo = false
}

Hình ảnh

Hình 2

Code

Github

Tài liệu tham khảo

https://androidcoban.com/su-dung-thu-vien-jsoup-boc-html-trong-android.html https://viblo.asia/ https://kotlinlang.org/docs/reference/

Link apk

https://www.mediafire.com/file/5ln4272ix13w6nv/viblo.v24.11.2017.apk