App Inventor學習記錄164-2-連續登入 7天功能試作

接著上一篇的登入時間記錄,到明天還有多久的計時,我們已經可以抓到登入當天的零點時刻來當基準,接著就來試作一下連續登入 7天的功能。

記錄一下:
App Inventor學習記錄164-2-連續登入 7天功能試作


這次範例的試作進度如下。

要測試的時候,如果要等上 1天的話,實在是不太可能。
所以在一開始的地方,設定了一個秒數,把 1天的時間,設定成指定的秒數。
這裡就先設定為 5秒。

設成 5秒之後,下面的標籤就會列出以這個時間當零點,加上倍數的時間上去。

程式開始的時候,就會先檢查第一天的登入狀態,如果沒有登入過的的話,對話框就會出現登入第一天,然後在最右邊用來顯示當天是否已登入的標籤,就會改成 true。如果已經登入過了的話,對話框就會出現已經登錄過的提示訊息。

第 2天~第7天按鈕的做法都類似。

如果第 1天有登入,但是第 2天沒有登入,等到第 3天要登入的時候,就會出現前一天沒有登錄的提示訊息。

照使用習慣上來說,應該讓系統自動的去判斷,但在試作階段,為了讓自己比較好區分,所以才改成要按下各自的按鈕,才能進行登錄的動作。


畫面編排的部份如下。

畫面編排的部份,就用水平配置拉了幾個區塊,分別對應 1~7天的時間。
每個區塊中的東西都是相同的,用來顯示時間的標籤,按鈕,用來顯示登入狀態的標籤。
為了方便等一下的記錄,所以這裡把加入同一個清單群組的標籤或是按鈕,都先框起來。紅色的字就是該群組對應的清單名稱。


全部的程式碼如下。


第 1部份的程式碼記錄。

變數_按鈕按下的時間的毫秒數,以這個時間當成登入當天的 0點來計算。
變數_目前時間的毫秒數,用這個變數來比較位在那一個時間段中。

變數_連結時間的判斷,初始值是一個空清單。
這個清單等一下會拿來放第 1天~第 7天的毫秒數。


第 2部份的程式碼記錄。

變數_標籤群組,這個清單放的就是用來顯示時間的標籤元件。
變數_按鈕群組,這個清單放的是第 1天到~第 7天的按鈕。


第 3部份的程式碼記錄。

變數_登入狀態標籤群組,這個清單放的就是用來登入狀態的標籤。
變數_登入清單狀態,這個清單放的就是每天的登入狀態。


第 4部份的程式碼記錄。

建立一個叫標籤顯示設定的時間的程式。
在這個程式中會把清單_標籤群組中的標籤的文字,都加上時間。
假設我們 textbox 1.text文字輸入盒內的內容是 5的話,那麼清單_標籤群組中的標籤照順序就會是 s+5秒、s+10秒、s+15秒….、s+35秒,這裡的 s指的就是變數_按鈕按下的時間的毫秒數這個時刻。
但是在上一篇有說到,時刻是一個很長串的文字組合,所以在最前方,我們再加上 call clock 1.formatdatatime的方塊,把時刻轉成MM/dd/yyyy hh時:mm分:ss秒,也就是月日年時分秒的格式。這裡的時間格式組合,大家可以測試一下,英文的部份是有區分大小寫的。


第 5部份的程式碼記錄。

建立登入狀態顯示的程式。
在這個程式中,我們會把清單_登入狀態標籤群組中的標籤文字的內容,逐一對照顯示成清單_登入清單狀態的內容。
假設,我們清單_登入狀態標籤群組中的標籤元件是標籤 1、標籤 2、標籤 3、而清單_登入清單狀態是 [a,b,c]。
那麼這個程式執行之後,標籤 1的文字就是 a、標籤 2的文字就是 b,標籤 3的文字就是 c。

最後,把 label 48的文字顯示成清單_登入清單狀態,這個只是為了檢查。


第 6部份的程式碼記錄。

建立登入狀態重置的程式。
這個程式執行之後,就會把清單_登入清單狀態中的資料變成[false,false,false,false,false,false,false]。


第 7部份的程式碼記錄。

這個部份就不細說,只介紹一下這個的判斷過程。
建立時間判斷的程式,加入昨天是第幾天,今天是第幾天的參數。
首先,我們要先判斷一下前一天是否已經有登錄,如果沒有登入的話,就提示前一天未登入。

如果前一天已經有登錄過了,再分成 2種情況判斷。
第 1種情況,超出今天的登錄時間。系統提供已超出時間。
第 2種情況,還在今天的時間範圍中。這個情況下,再拆成已登入和未登入的狀態。

這樣說明的挺麻煩的,我應該要去做一個流程圖才對……
總之,這部份就是這樣。


第 8部份的程式碼說明。

當按鈕 1,設定秒數按鈕按下之後。
如果文字輸入盒的文字不為空白的話。(屬性已有勾選 number only)
變數_按鈕按下的時間的毫秒數,設定成系統當下時間時刻的毫秒數。
然後顯示在標籤_按下的時間上

清單_連結時間的判斷設定為空清單,先把之前的記錄給清除。
然後再用 call clock1 add second的方塊,取得 8個時間,加到清單_連結時間的判斷中。

呼叫之前寫好的標籤顯示設定的時間以及登入狀態顯示這兩個小程式。
清單 tinydb1的所有內容。

把 label 48標籤 48的文字設定成清單_登入清單狀態。


第 9部份的程式碼記錄。

計時器 2已經有在屬性的地方勾選 TimerEnabled,所以計時器就一直是啟動的狀態。
也就是說,變數_目前時間的毫秒數,會不斷的更新並顯示在 label 12上。


第 10部份的程式碼記錄。

當 button 4第一天按鈕按下的時候。
判斷登入清單狀態中的第 1項,是不是 true。這裡要判斷的情況只有兩種,還挺好處理的。
第 1天的按鈕比較簡單。


第 11部份的程式碼記錄。

button 5~button 10,依照順序分別對照著第 2~第 7天的按鈕。
按下按下之後,就呼叫時間判斷的程式。


這一次的試作,流程判斷的部份做的很不好,主要是因為用空想的,很容易搞混。我決定來去找一個好用的流程圖工具,照順序判斷下去,思路也會比較清楚。

這次的 aia檔的下載連結如下:
NO_164_2_Daily_Login.aia

app inventor交流討論群組連結如下(掃描 QR code或是點擊連結皆可)
https://line.me/ti/g2/Loxwrcc2iNRS5-Qd4SFXxQ?utm_source=invitation&utm_medium=link_copy&utm_campaign=default

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發佈留言