iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1
自我挑戰組

從積木開始學程式系列 第 13

[DAY>13<]製作一個登入系統_1(程式流程思考)

這次我們要做一個登入的系統,
我們會利用到Firebase來做帳號密碼儲存的容器。

https://ithelp.ithome.com.tw/upload/images/20181028/20108017WIlbkdnWSb.png

首先我們會建立一個帳號密碼的介面,
使用到的元件如下:
Label
InputText
Button

隱藏式元件:
RealtimeDB
Alert


程式流程的部分:

  • 當輸入帳號以及密碼都正確時,會跳出登入成功的畫面!
    https://ithelp.ithome.com.tw/upload/images/20181028/20108017ZKMEYKYtUD.png

  • 當輸入帳號及密碼時發現其中一項不正確,就會跳出登入失敗的畫面!
    https://ithelp.ithome.com.tw/upload/images/20181028/20108017zJs4POa59U.png

程式寫法:
我們會利用帳號的InputText來作為Keyword
密碼的InputText作為值
當按下登入按鈕時,我們會利用keyword上去database找尋並回傳值
當收到值之後利用logic進行比對 回傳的值是否等於值
如果正確就呼叫Alert顯示登入成功!
如果不正確就會呼叫Alert顯示登入失敗!


然後新增帳號的介面也需要做
一樣新增另一個Screen並且加入下方元件

使用到的元件如下:
Label
InputText
Button

隱藏式元件:
RealtimeDB
Alert

https://ithelp.ithome.com.tw/upload/images/20181028/20108017O4JOVBnxaE.png


程式流程的部分:

  • 當註冊成功出現此畫面
    https://ithelp.ithome.com.tw/upload/images/20181028/20108017cLGbqqiKKB.png

  • 當使用者發生重複帳號註冊
    https://ithelp.ithome.com.tw/upload/images/20181028/20108017aXNF8YuXdN.png

  • 當輸入的兩次密碼不相同
    https://ithelp.ithome.com.tw/upload/images/20181028/20108017tQuOoOYFZN.png

程式寫法:
我們會利用帳號的InputText來作為Keyword
密碼的InputText作為值
當按下註冊按鈕時,
先確定是否兩次輸入的密碼是否相符
密碼的InputText 是否等於 密碼的InputText2
如果等於就代表相符進入下一步
如果不等於代表不相符,請再次確認輸入的密碼

下一步:
再來利用keyword上去database找尋並回傳值
當收到值之後利用logic進行比對

  • 確認帳號使否有人註冊
    當確認帳號回傳為空,即代表此帳號無人註冊 ->註冊成功
    當確認帳號發生回傳值不等於空,即代表此帳號有人註冊 -> Alert跳出"重複帳號註冊"

明天繼續後面的設置喔!


上一篇
[DAY>12<]在APP內加上Lottie動畫 (Animation介紹與應用)
下一篇
[DAY>14<]製作一個登入系統_2(Firebase資料結構建置)
系列文
從積木開始學程式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言