iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

學習 Android Kotlin 隨筆系列 第 5

[ Day 5 ] 上線~Android 新手登入囉!(番外篇)快速建立 Express server 來幫我寫作業

  • 分享至 

  • xImage
  •  

| 實作 code

| 登入文章

  • (一)連結|簡單界面
  • (二)連結|串接第三方 api
  • (三)連結|簡單伺服器接收帳密資訊

| 簡單 server 概念

大標題寫作業的意思,是幫忙做麻煩的資料處理,自己的作業,還是要自己寫!

這篇是延續前面的登入功能,寫後端用 Express 架設伺服器。不會提到 Android 的部分喔!當然只是為了Android 展示用,所以也不會提到操作 database 的部分!

Server 的概念基本上就是把前端想做的資料處理,都放到後端來做。前端(Android)只要負責發請求 (request),以及等待回傳的結果 (response),剩下的中間過程就是交給後端囉!後端 server 主要是程式邏輯跟運算,通常還會去跟資料庫索取資料~以下是後端的大致概念,code 可以參考以上的 github 連結。

我的 server 僕人啊~請完成我所有願望吧!

  1. 下載 node.js

    首先要先下載 node.js,載完之後打上 node -v 以及 npm -v 確定兩個套件都能夠執行成功(會顯示版本)

  2. 下載 express-generator

    這個套件是為了方便迅速架設 express 架構的伺服器

    npm install express-generator
    
  3. 架設 server

    到終端機打上下面的 code

    express .
    

    沒錯沒錯,一行指令就能夠迅速架設一個伺服器出來了,會產生下列結構的資料夾

    .
    ├── /bin
    ├── /model
    ├── /public
    ├── /routes
    ├── /views
    ├── app.js
    └── package.json
    

    接著打入 npm install,這行的指令就是他會照著 package.json 裡面提到該下載的套件,去把他們通通抓下來,產生 node_modules 的資料夾。另外,在 nodejs 想要什麼套件,就是使用 npm install <套件名稱> 去下載

  4. 監聽特定的 port

    server 搞定了之後,他必須要去監聽某一個類似窗口的東西 (port),當外面有人發出了請求來敲這個窗口,就會觸發到我們 server 去做點事情啦~

    app.js 下面加入這行,這邊我們要 server 去監聽 3000 這個窗口 (port)

    • /app.js
      let PORT = 3000
      app.listen(PORT, () => console.log(`Server listening on port ${PORT}`));
      
  5. 在 server 寫好 API 的服務

    上述步驟如果都完成了的話,可以執行 node app.js,此時伺服器就會在我們的本地端 (localhost) 啟動囉!
    server 要去做什麼服務,是照著 URL 路徑去區分的。但因為有這麼多的服務要做,中間會經過一個 routes 先去把外界的任務分類過,這算是讓架構更為完整。像是跟 users 有關的資料操作(譬如登入、註冊),就進到 /users 的分流底下,這邊可以自己依照需求分流,就不贅述囉!

    • /route/users.js
      // 只要外界發出請求是: POST http://localhost:3000/users/login 
      // 表示說他要到 本地端的 PORT 3000 的那個 Server,透過 router 進到 /users 底下的 API /login
      // 就會進以下程式碼
      router.post('/login', function (req, res, next) {
          if(req.body['account'] == "admin" && req.body['password'] == "admin"){
              res.send("success")
          }else{
              res.send("failed")
          }
      });
      

    這樣我就可以在 server 處理帳密驗證囉!如果相符合,則回傳 “success” ,否則 "failed"

| 小鈴鐺提醒

  1. 安裝 Nodemon

    這邊另外推薦下載 nodemon 這個套件 (npm install nodemon),使用 nodemon app.js 去啟動他。
    因為 server 一起動之後會一直跑,不會停止,當我們的程式碼有改的時候,如果使用 node 就需要先停止 server 再重新啟動,很麻煩。有了 nodemon 之後,只要修改完 code 並且按下儲存,就會自動更新新的程式碼了

  2. 登入流程

    上述的登入流程,先把帳號密碼預設為 admin 是為了要 demo 用,基本上的操作會是進去資料庫找,找看看是否有這組帳密,再拿出來比對。
    另外,如果是註冊帳密的功能,把密碼塞進資料庫也會再經過加密處理,不會存明碼進去喔!


上一篇
[ Day 4 ] 上線~Android 新手登入囉!(三)用 Retrofit 來使喚我的伺服器僕人
下一篇
[ Day 6 ] 探討 Fragment 從年少輕狂,到老年退休生活!(一)旋轉跳躍,我跌一圈
系列文
學習 Android Kotlin 隨筆30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言