網頁

2020年10月25日 星期日

手機 App 程式設計- AppInventor2 -手機看直播

題目

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

或者由使用者輸入網址, 按「瀏覽」按鈕,瀏覽器打開相對應的網址。使用者按了「加入節目選單」按鈕,可將 節目網址和節目名稱,加入到  節目清單 內。(不過重新打開程式,使用者加入的內容仍然不見)。

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

進入 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

1Screen元件就是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」即不會出現相關影片畫面。
4. 全螢幕視窗化:修改網址。
原本:
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 類別。










完整程式拼塊