財經新聞瀏覽器

 

哈囉哈囉~ 歡迎來到「數據貓頭鷹」APP 教學範例

今天要教大家如何8分鐘做出一個財經新聞瀏覽器唷!

<<在開始之前先看一下小手冊吧!點我點我!>>

先來看看完成結果會長什麼樣子呢~

 


 那我們就準備開始吧~

、APP的內容呈現與說明

1.畫面顯示

2. 動作

(1) 點選不同按鈕時,將網站內容顯示於下方瀏覽器當中

(2) APP開啟時,自動顯示第一個網站內容

 

二、製做畫面

1. 按鈕:共需要四個按鈕分別寫上對應的新聞名稱,因為要橫向排列,需要先產生對齊物件

(1) 產生水平對齊物件(Horizational Arrangrement)

 

(2) 將寬度(Width)設定填滿(Fill parent)

 

(3) 產生四個按鈕,並放置到水平對齊物件當中

 

(4) 調整四個按鈕的寬度(Width)設定為25%(25 percent) 或是 填滿(Fill parent)

 

(5) 再將按鈕顯示文字修改為四個新聞的名稱

 

2. 瀏覽器:產生瀏覽器物件,將高度(Height)與寬度(Width)都設為填滿(Fill parent)

 

三、製作控制流程

1. 進入控制流程設計畫面:點選畫面左上方『Blocks』按鈕即可

 

2. 設定動作:點選按鈕開啟網站

(1) 四個網站的網址

經濟日報:https://money.udn.com/money/index

工商時報:https://www.chinatimes.com/newspapers/2602

自由經濟版:http://news.ltn.com.tw/list/breakingnews/business

東森財經:https://news.ebc.net.tw/News/business

 

(2) 設定按鈕點下時,開啟預設網址

i. 點選按鈕(Button1)圖案後會顯示可以設定的動作程序,選擇被點選(.Click)

 

ii. 選擇瀏覽器物件圖案後會顯示可以設定的動作程序,再選擇開啟網址(Go To Url),並將此程序放進被點選(.Click)的裡面

 

iii. 選擇文字物件,再選擇第一個空白,將此物件串接到瀏覽器後方的url當中,同時將第一個經濟日報的網址填入。

 

iv. 依序將剩餘的三個按鈕與網址以一樣的方式完成按鈕的動作

 

3. 設定動作:APP開啟時,預設開啟第一個網站

(1) 點選畫面1(Screen1),選擇初始化程序(.Initialize)

 

(2) 設定開啟瀏覽器與設定網址之程序(中間夾層與剛剛的按鈕步驟相同唷!)

 

四、產出APP

1. 點選畫面上方『Export』,選擇第一個選項產生QR-code下載網址,即可將設計的內容產生成APK檔案,完成後會產生一個QR-code,用手機掃描後就可以下載囉!

(網址只有2個小時的時效哦)

 

2. 安裝完成後畫面

 

有任何意見/疑問歡迎到粉絲專業:數據貓頭鷹CMoney留言私訊小編唷