題目
設計可以從節目清單挑選直播節目,使用瀏覽器打開相對應的網址。
或者由使用者輸入網址, 按「瀏覽」按鈕,瀏覽器打開相對應的網址。使用者按了「加入節目選單」按鈕,可將 節目網址和節目名稱,加入到 節目清單 內。(不過重新打開程式,使用者加入的內容仍然不見)。
類似 加入我的最愛 的功能。
進入 Appinventor
Google 輸入 appinventor
選 MIT App Inventor 。
選 「Create Apps」。
開新專案
My projects / Start new project
輸入專案的 名稱,如 watch_live,按 「OK」鈕。
專案的名稱只能使用大小寫字母、數字及「 _」符 號,名稱的第一個字元必須是英文字母,不能使用中文字。
預設為 Phone size,若要在平板電腦上執行,就改成 Tablet size。
Designer (畫面編排)
元件相關屬性表
元件
|
類別
|
屬性
|
功能
|
Screen1
|
|
Title: 手機看直播AppName:watch_live,可以改成 手機看直播(出現在手機上面的App名稱) Icon : 可以上傳1個背景透明的
icon圖。 Google 輸入 : tv icon cc0
|
1個Screen元件就是1個螢幕(畫面)
|
ListPicker1
|
User Interface
|
Text: 節目選單
|
清單選擇器
|
HorizontalArrangement1
|
Layout(介面配置)
|
Width:Fill Parent
|
水平配置元件,讓裏面的元件可以水平對齊
|
Label_url
|
User Interface
|
Text:手動輸入網址:
|
標籤
|
TextBox_url
|
User Interface
|
Text: http://
Width:Fill Parent
|
文字方塊,可以輸入 網址
|
Button_go
|
User Interface
|
Text: 瀏覽
|
按鈕
|
HorizontalArrangement2
|
Layout
|
Width:Fill Parent
|
水平配置元件
|
Label_program
|
User Interface
|
Text: 節目名稱:
|
標籤
|
TextBox_program
|
User Interface
|
Text: (清空) Hint: (清空) Width:Fill Parent
|
文字方塊,可以輸入 節目的名稱
|
Button_addtolist
|
User Interface
|
Text: 加入節目選單
|
按鈕,按下去可以把網址和節目名稱加入到節目清單內
|
ActivityStarter1
|
Connectivity
|
|
呼叫另一項活動(Activity),此例是呼叫另1個程式。
|
Notifier1
|
User Interface
|
|
對話框元件,出現訊息後自動消失
|
說明:
ListPicker (清單選擇器),方便使用者從清單挑選項目,不用自己輸入內容。外觀像是一個按鈕,按下去會出現清單快顯視窗。
ActivityStarter(Activity-Starter 活動啟動器),使用此元件 ,可讓應用程式呼叫另一項活動(Activity)。
完整 Blocks程式拼塊
程式說明
將 全域變數 program的初始值設定為空的list(清單)。
initilalize global 類別 為 Built-in/Variables。
create empty list 類別 為 Built-in /Lists。
說明:
List (清單)是一群變數的集合,每一個資料稱為項目元素(item),內容可以是數值、文字、邏輯運算子..等類型。清單項目是循序儲存在清單中,利用項目元素在清單中的位置編號(index,索引),來存取此項目元素。Appinventor 2 清單的索引值是從1開始,其他程式語言的陣列,索引值是從0開始。
在程式設計時,若不知道清單的初始值或元素個數,使用 create empty list 建立一個空清單。
將 "華視新聞直播" 此項目(item) 加入到 global program 此list (清單)內。
get global 類別 為 Built-In/Variables。
add items to list 類別 為 Built-In/Lists。
如果要取得清單指定的元素值,可利用 Built-in /Lists類別中的 Select list item 拼塊。
ListPicker1.SelectionIndex : 當使用者點選 ListPicker 元件快顯視窗中的項目, 傳回 ListPicker 元件所指定清單所對應的元素索引值。例如點選第1個項目,傳回 SelectionIndex 值為1。
ListPicker1.Selection : 當使用者點選 ListPicker 元件快顯視窗中的項目, 傳回 ListPicker 元件所指定清單所對應的元素。以本例來說,若使用者點選第1個項目,傳回 Selection 值為 華視新聞直播 。
設定 ListPicker1.Elements (清單選擇器的元素) 為 global program 此list (清單)的內容。
ActivityStarter 元件可以讓您的應用程式呼叫另一項活動(Activity),此例是呼叫另1個程式。
打開瀏覽器並到指定網頁,網址由使用者輸入,即 TextBox_url.Text
Action: android.intent.action.VIEW
DataUri: TextBox_url.Text
ActivityStarter1.StartActivity : 啟動欲呼叫的activity。
YouTube 超連結參數
如果 是選 YouTube ( com.google.android.youtube.tv ) 此應用程式來看節目,自動是全螢幕播放,
也就是不用去設定 youtube 超連結的參數。
1. autoplay : 自動播放,「autoplay=1」為自動播放。
2.vq: HD 畫質,「vq=hd720」為 720P 畫質,「vq=hd1080」為 1080P 畫質,不設定則為一般畫質。
3. rel: 播完後無相關影片畫面,「rel=0」即不會出現相關影片畫面。
https://www.youtube.com/watch?v=HvqBnBVNRuw
修改為:
https://www.youtube.com/embed/HvqBnBVNRuw
註: 使用 https://www.youtube.com/watch?v=HvqBnBVNRuw,在手機上轉為橫的,會自動變為全螢幕 播放,所以都不用改。
註:有些新聞台使用https://www.youtube.com/embed/HvqBnBVNRuw 會有錯誤。
註:在appinventor2 若使用下列方式有錯誤:
https://www.youtube.com/watch_popup?v=HvqBnBVNRuw
不同的參數 「&」串連,如將網址修改為:
https://www.youtube.com/embed/HvqBnBVNRuw?autoplay=1&vq=hd1080
想要看 蠟筆小新 有關的影片
https://www.youtube.com/results?search_query=蠟筆小新
想要看 哆啦a夢 有關的影片
https://www.youtube.com/results?search_query=哆啦a夢
想要看 新聞直播 有關的影片
https://www.youtube.com/results?search_query=新聞直播
需要輸入的文字(直播網址)
華視新聞直播
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
哆啦a夢
https://www.youtube.com/results?sp=mAEB&search_query=%E5%93%86%E5%95%A6a%E5%A4%A2
柯南
https://www.youtube.com/results?search_query=%E6%9F%AF%E5%8D%97
加入成功!
註:
1.YouTube的新聞直播頻道網址常變更,各電視台的直播網址,有可能跟上面不一樣。請自己先在YouTube搜尋,再填入程式內。
2.在 BlueStacks 的文字方塊內要輸入文字或 貼上網址,若沒反應,請將輸入法切換,例如切換到嘸蝦米輸入法,就可輸入文字或貼上網址了。
程式進一步改良
當使用者沒有輸入網址,也就是 TextBox_url 是空的 或者等於 http://,按「瀏覽」按鈕(當 Button_go.Click) ,應該要出現錯誤訊息。
當使用者沒有輸入網址,也就是 TextBox_url 是空的 或者等於 http:// 或者 使用者沒有輸入節目名稱,也就是 TextBox_program 是空的 ,按「加入節目選單」按鈕(當 Button_addtolist.Click) ,都應該要出現錯誤訊息。
程式拼塊如下:
說明:
is empty :判斷字串是否為空白。
compare texts :比較字串,以本例來說 要判斷 Textbox_url 的 Text 是否等於 http:// 此預設字串。如果是 true,表示 使用者沒有輸入網址。
這2個拼塊是屬於 Text(字串)類別。
to result 的使用 (有傳回值的程序)
將 當使用者沒有輸入網址,也就是 TextBox_url 是空的 或者等於 http:// ,寫成一個有傳回值的程序 (即函數 的觀念 )。
to result 拼塊是屬於 Procedures 類別。
完整程式拼塊