網頁

2020年10月28日 星期三

手機 App 程式設計- AppInventor2 -手機看直播,使用 TinyDB(微型資料庫)元件

題目

1.設計可以從節目清單挑選直播節目,使用瀏覽器打開相對應的網址。

2.使用者輸入網址, 按「瀏覽」按鈕,瀏覽器打開相對應的網址。使用者按了「加入節目選單」按鈕,可將 節目網址和節目名稱,加入到 節目清單內。

3.重新打開程式,使用者加入的節目仍然存在。

4.使用者可以刪除自己加入的節目。

類似 加入我的最愛 的功能。

本題 是修改自阿旺師磨書坊  :手機 App 程式設計- AppInventor2 -手機看直播

進入 Appinventor 

Google 輸入 appinventor
選 MIT App Inventor 。


選 「Create Apps」。


你應該先看此篇文章 「手機 App 程式設計- AppInventor2 -手機看直播」,先完成此專案,如 名稱為 :watch_live_tv。

開啟原來的舊專案,如 watch_live_tv,按一下,打開此專案。
另存新專案(Save project  as... ),名稱為 : watch_live_db (此專案有使用到 TinyDB(微型資料庫)元件)。

輸入專案的 名稱,如 watch_live_db,按 「OK」鈕。
 專案的名稱只能使用大小寫字母、數字及「 _」符 號,名稱的第一個字元必須是英文字母,不能使用中文字。

Designer   (畫面編排)


增加2個元件:
 1.Button_cleardb,類別為 User Interface。
屬性  Text : 清除資料庫中自己加入的節目。

2.TinyDB1,類別為 Storage。
不用改屬性值。

完整 Blocks程式拼塊









直播網址

華視新聞直播
https://www.youtube.com/watch?v=yUTy1U1wTwE

民視新聞直播
https://www.youtube.com/watch?v=XGEmg3vhrzU

中視新聞直播
https://www.youtube.com/watch?v=TCnaIE_SAtM

台視新聞直播
https://www.youtube.com/watch?v=xL0ch83RAK8

三立新聞直播
https://www.youtube.com/watch?v=FoBfXvlOR6I

TVBS新聞直播
https://www.youtube.com/watch?v=2mCSYvcfhtc

東森新聞直播
https://www.youtube.com/watch?v=R2iMq5LKXco

公視
https://www.youtube.com/watch?v=JAzRXylm3M0

大愛一臺
https://www.youtube.com/watch?v=oV_i3Hsl_zg

蠟筆小新
https://www.youtube.com/results?search_query=蠟筆小新

柯南
https://www.youtube.com/results?search_query=柯南

註:
1.YouTube的新聞直播頻道網址常變更,各電視台的直播網址,有可能跟上面不一樣。請自己先在YouTube搜尋,再填入程式內。
2.在 BlueStacks 的文字方塊內要輸入文字或 貼上網址,若沒反應,請將輸入法切換,例如切換到嘸蝦米輸入法,就可輸入文字或貼上網址了。

程式說明

initialize global : 用來宣告一個全域(global)變數,後面的欄位可自由使用各種資料形態。全域變數可用在程式中所有的副程式或是事件。

 global default_program_number :預設要加入節目的個數,本例為11個,你可以決定要加入幾個。

add_program_to_list 此程序 是加入預設的11個節目,你可以自己加入節目,並不一定要11個。

when Screen1.initialize  , 當開始執行此應用程式 要做的事。

TinyDB 元件可用來儲存資料在手機內,即使關掉此App 程式,資料仍然存在。
每當儲存一筆資料時,需要指定這筆資料的標籤。以後才可以根據這個標籤來取用這筆資料。如果某個標籤下沒有任何資料,則傳回  valueIfTagNotThere的值。
資料標籤所存的資料 可以為數值、字串、清單。本例子使用的是清單。

call TinyDB1 .GetValue :從 TineyDB1,取 標籤為 "program"的資料,若其下沒有資料,傳回valueIfTagNotThere下的字串,本例子是 空字串
使用 isempty 來判斷 program標籤 傳回值是否為空的。

如果是空的,呼叫 add_program_to_list 此程序 以加入預設的11個節目。
如果不是空的,從 TineyDB1,取 標籤為 "program"的資料 並放入到 global program 此全域變數內。從 TineyDB1,取 標籤為 "url "的資料 並放入到 global url 此全域變數內。

設定 ListPicker1(清單選擇器)的元素為 global  program的值,即把program 此清單的內容給 ListPicker1.Elements。
when Button_addtolist click,當使用者按 了「加入節目選單」此鈕所引發的事件程序。
如果 chek_url 的值為true  (表示使用者沒有輸入網址)
 然後 出現 「請輸入網址!」訊息
否則 如果 TextBox_program.Text 為empty (空字串) ,然後 出現「請輸入節目名稱」訊息
否則 (表示 網址 和節目名稱 都有輸入) ,將 TextBox_program.Text  (節目名稱)加入到 global program此變數內。將 TextBox_url.Text  (網址)加入到 global url 此變數內。
call TinyDB1.StoreValue 的意義:
在TinyDB1資料庫內的 標籤 program 儲存 global program 此變數的資料。
說明:tag 參數必須是為文字字串;valueToStore 要儲存的資料 可以為字串、數值或清單。

在TinyDB1資料庫內的 標籤 url 儲存 global url 此變數的資料。

當 「清除資料庫中自己加入的節目」按鈕被按時,先出現 Notifier1「確定要刪除嗎?」的對話方塊,視窗標題為 「刪除」,下面有2 個按鈕,左邊是「確定」,右邊是「取消」。(取消的按鈕,回傳值是 false。

Notifier 通知元件可在程式中顯示特定的警示訊息。
call Notifier1.ShowChooseDialog : 顯示一個對話方塊,有2個自訂文字的按鈕及1個選擇項的Cancel按鈕。

當使用者按下某個按鈕,將會觸發 AfterChooseing() 的事件。
使用者按的按鈕其  button Text 的值會被存在「choice」中, 所以只要比對「choice」的值是否等於 那個 buttonText 就知道那個按鈕被按。
以本例來說,如果第1個按鈕被按,choice 的值是"確定" ,第2個按鈕被按,choice 的值是"取消"。

When Notifier1.AfterChoosing 事件程序說明

compare texts 比較二個字串, choice =  "確定" ,也就是 choice 的值是否為 "確定" 。
如果 choice =  "確定" ,然後

設定區域變數 user_add_start_index (使用者自行加入節目的開始位置)為 default_program_number +1 (以本例來說 是 11+1=12) 
 global default_program_number 此變數為 預設要加入節目的個數,本例為11個。

設定區域變數remove_number (使用者自行加入節目的個數,也就是要從資料庫刪除自己加入的節目個數) 
 global program此清單的長度 - 預設要加入節目的個數,等於要刪除元素的次數。
如果global program清單的長度為13,表示使用者自己加入的節目數為 2 (13-11=2 )個。
所以要清除2 次。

initialize local (name) to:
本指令可讓您新增一個只能用在某個副程式中的變數,也就是區域(local)變數。

如果 remove_number >0 ( 使用者有自己加入節目 才做 )
for each 迴圈,用來重複執行相同程序,是屬於固定次數迴圈,也就是知道要做幾次。
(另1種是條件式迴圈 while test .. do,不知迴圈要做幾次  )
拼塊中的 number 是計數的變數名稱,當程式進入迴圈,會將 number設定為起始值,然後將  number 和結束值作比較,若number 小於等於 結束值,會執行  do 區塊內的程式。


remove list item :從某個清單(list) 中刪除指定位置(index)的元素。

每次從清單的  user_add_start_index 此位置,刪除元素,重複執行 此步驟,直到 number 值比結束值大。

TinyDB1.ClearAll : 清除所有TinyDB內儲存的資料。

若要清除某個標籤,語法為 TinyDB1.ClearTag,tag 參數必須是為文字字串。

程式改良

可以使用 Storage(資料儲存)/File(檔案管理)元件,來讀取外部的文字檔,內有節目名稱和其對應的網址。這樣使用者不用去改寫程式,祇要有此文字檔,就可用手機來看直播和追劇。
讀取檔案(ReadFrom)。
讀取的文字放在 TextBox_Result.Text 內。
以\n 為分隔字元,將讀進來的文字分成很多行。

每一行再以分隔字元,如 逗號,分成幾個部分,如節目名稱、網址。