| 實作 code

這三天的 project 我都藏在這啦。

• 連結 | Android 專案

  • @commit : 4a8dc19

• 連結 | Server 端

| 登入

• （一）連結｜簡單界面
• （二）連結｜串接第三方 api
• （三）簡單伺服器接收帳密資訊

  • Android 端

    

  • Server 端

    

| 實作概念

ㄅ歉啦～這篇會參雜著後端的概念，是說 Android 這邊也可以學著怎麼用 Retrofit 去發請求唷！

• Android 端

  這邊是使用 Retrofit 去發請求（request）給後端，發請求的意思大概就像是叫某個僕人（server）幫你做一些事情。這邊我請我的僕人幫我檢查帳號密碼，如果帳號密碼都是我預設好的 admin，那僕人你就回傳給我說 "success"，否則就跟回傳給我 "failed"。
  而我 Android 這邊就判斷回傳回來的字串，去做上鎖或是解鎖的動作。

  • 使用 Retrofit 發請求

    1. 設定 Server 的基本位址（BaseURL）

       今天 Android 這邊想要發請求給 Server，應該要先知道這個僕人家住哪邊，需要他的位址，才能夠找到他，對吧！而在這邊我是使用 區域網路，手機（Android）跟電腦（Server）連著同一個 wifi，所以我的手機可以透過內部區網連線找到電腦，這部分也留待明天的後端補充啦～這邊我只是改 BASE_URL 後面的 IP 位址，明天也會教學如何找到自己的區網位址唷

       object ApiClient {
           var BASE_URL:String="http://192.168.58.137:3000"
           val getClient: ApiInterface
               get() {
               val retrofit = Retrofit.Builder()
                   .baseUrl(BASE_URL)
                   .addConverterFactory(GsonConverterFactory.create())
                   .build()
               return retrofit.create(ApiInterface::class.java)
           }
       }
       

    2. 建立要發請求的 URL

       下面的 URL 就是 /users/login，我會往主機的這個位址送，送給他帳號跟密碼，帳密我是用 data class 包起來一整包送過去～
       server 那邊就會監聽 /users/login 這個位址，如果有人觸發了這個位址，那他就會做他該做的事情（驗證）

       interface ApiInterface {
           @POST("/users/login")
           fun loginAccount(
               @Body body : DataModel.loginBody
           ): Call<ResponseBody>
       
       }
       

    3. 建立登入按鈕的監聽器（clickListener）

       個人是覺得用 Retrofit 發一個請求，要寫一堆 code （如下）有點不習慣ＱＱ沒關係，習慣成自然
       下面 code 第一行就是發請求給 server，一行搞定沒錯沒錯。而之後的程式碼都是接收 server 回傳回來的 callback，callback 是啥呢？有機會後面再談～

       val call: Call<ResponseBody> = ApiClient.getClient.loginAccount(DataModel.loginBody(account, password))
       
       call.enqueue(object : Callback<ResponseBody> {
           override fun onResponse(call: Call<ResponseBody>?, response: Response<ResponseBody>?) {
               if(response!!.isSuccessful){ // 2XX
                   var res = response.body()!!.string()
                   if(res == "success"){
                       Toast.makeText(context, "登入成功", Toast.LENGTH_SHORT).show()
                       view.img_lock.setImageResource(R.drawable.ic_lock_open_black_24dp)
                   }else{
                       Toast.makeText(context, "登入失敗", Toast.LENGTH_SHORT).show()
                       view.img_lock.setImageResource(R.drawable.ic_lock_outline_black_24dp)
                   }
                   Toast.makeText(context, res, Toast.LENGTH_SHORT).show()
               }else{
                   // 404
               }
           }
           override fun onFailure(call: Call<ResponseBody>?, t: Throwable?) {
               Log.d("what", t.toString())
               Toast.makeText(context, "Server isn't working", Toast.LENGTH_SHORT).show()
       
           }
       })
       

• Server 端

  這邊使用到了 express 架一個伺服器（就是上面說的僕人），這邊先不多提如何架設，明天文章再補充～當彩蛋（咦？）
  這個僕人會去接收請求，幫忙檢查帳密是否都是 admin，並且傳給 Android 端。當然拉，因為只是要 demo 所以後端處理得很簡單，這樣後端的處理是不行的！絕對不行！對後端有點興趣的歡迎發摟明天的後端基本概念篇唷～

| 實作小確幸

嘿對，這次沒有太多坑踩的。

覺得有趣是學了 Android ，還結合之前學過的一些後端概念，整合起來的感覺蠻有趣的。這邊 Retrofit 跟後端的用法在這邊是用很簡單的概念去 demo，哈囉世界等級的概念而已，沒有使用到太深的東西，還請包容唷