2021年6月14日 星期一

手機程式設計——App Inventor II 點擊恐龍(含手耭連結測試)

 手機程式設計——App Inventor II 點擊恐龍(含手耭連結測試)

MIT 行動學習中心已發表 App Inventor 2 (本文後簡稱 AI2),
將其整合在網頁中即可使用,可說是與 Scratch 愈來愈像了。

使用上非常簡單,只要連結到下列網址
http://ai2.appinventor.mit.edu/
再以google帳號(本校學生郵局帳號)登入即可。

登入後,我們就以科丁小學課本的程式範例,
~點到手抽筋~
來作一個開場練習。


在這個程式裡,我們要設計一隻能開口、閉口的恐龍,
當按了開始鈕後,在一定時間內(10秒),
恐龍被按壓時,會張口;放開按壓時,會閉口,
程式會自動記錄,在時間內,恐龍被按壓的次數。

在畫面編排中,我們用到了幾個基本元件,條列如下:
按鈕—>開始按鈕
圖像—>恐龍圖片(開口、閉口)
(文字)標籤—>顯示次數及時間

比較特別的是,為了讓所有文字標籤能放在同一行,
我們在介面配置中,選用了水平配置,來達成這一目的。

最後,為了要有計時的功能,
我們再加入感測器元件中的計時器

將上述元件依序排列後,調整各自必要的屬性及內容,
就完成如上圖中的畫面編排

接下來,我們再根據程式運作需求,
繼續進行程式設計的內容。

程式主要可分成3大部分。

一、起始設定及開始按鈕

一開始,我們先設定2個全域變數:次數時間
開始按鈕按下後,程式便開始執行
並將次數與時間的值,設給文字標籤

二、計時器運作時機

當時間變數 >0的情況下,計時器會啟動運作,並倒數計時(每次0.1秒)
當到時間變數=0時,計時器停止作用。

三、點擊恐龍的判斷及反應

實際上,計時器是從恐龍第1次被點選時,才開始啟動的。
在時間範圍內,只要恐龍被點到,就會顯示開口圖像,
並且點擊次數會加1,一直到時間結束為止。

當程式設計完成後(或是在設計過程中),
如果我們想連接手機,測試一下成果,
你必須先在手機上安裝AI Companion的APP程式。
(Adroid系統—>google play商店 ;iOS系統—>apple store)

然後在AI2的設計畫面中,點選連線功能中的AI Companion選項

此時,電腦會顯示一個QRcod的連結圖,如下:

接著,我們就可以開啟手機上的AI Companion APP,
按Scan QR code,就可以執行我們所設計出來的手機程式了。

在執行過程中,如果有任何問題,都可以隨時修正,
修正完便可立即看到結果喔!非常方便。


如果程式已經設計完成,
我們就可以用下列的方式,來安裝到手機中。


或下載到電腦,再轉傳到手機裡安裝,如下。




那萬一,我們沒有手機可以測試怎麼辦?
那就請看下一篇手機模擬器的教學文吧!

手機程式設計——App Inventor II 模擬器安裝與執行

2021年6月10日 星期四

手機程式設計——App Inventor II 模擬器安裝與執行

 手機程式設計——App Inventor II 模擬器安裝與執行

當我們沒有手機用來測式編寫的APP Inventor應用程式時,
可以利用手機模擬器來測試。
要使用這個功能,你必須在你自己的電腦中安裝aiStarter這個模擬器。

你可以連結到下列網址,來下載

接著執行下載的安裝檔,按照安裝程序指示進行安裝。
安裝完後,會在電腦桌面上出現aiStarter這個模擬器的圖示。

以滑鼠點擊aiStarter執行,會出現如下畫面

把aiStarter畫面縮小(不要關閉,關閉就無法使用模擬器了)

開啟aiStarter後,當你在AppInventor II設計APP程式時,
就可以用模擬器的功能,來測試你的APP程式了.

模擬器執行時,需要等待一點時間,大約1~2分鐘,
這時請先不要做其他動作,靜待模擬器啟動完成。

在啟動過中,如果出現升級(更新)提示時,請依下列圖示操作:

按下確定升級後,請注意工作列上會出現另一個手機模擬器的程式

點開後,會出現模擬手機的畫面,請點選OK

再點選Install

升級完成後,請點選Done。(不要選Open喔!)

等模擬手機的部分都完成後,再按下升級完成的按鈕。

升級完成後,再重置連線

然後再次開啟模擬器,就可以在模擬的手機上,執行你的APP程式了。

下列畫面是在執行等待載入所有資源,時間會稍久,大約2~3分鐘不等。


APP成功模擬畫面如下:
提醒一下:在手機模擬器上輸入資料,要用模擬上的手機輸入功能,
不是在電腦鍵盤上操作喔!

如果,手機模擬器無法正常運作,
則請先關閉aiStarter,再重新啟動aiStarter。
然後重複模擬器的升級動作,或重置連線後再試試。

有關這個BMI計算的APP程式的教材,是參考科丁小學的課本改編而成,
教材連結如下:

有興趣的同學,趁著畢業後的空閒時間,
好好來試試吧!說不定你就是未來的APP設計師喔!

2021年6月9日 星期三

電腦基本運作:程式語言

 電腦基本運作:程式語言

電腦的運作,必須靠程式語言來溝通。
程式語言是一種用來與電腦溝通的演算法

所謂演算法是指:
一連串的指令,來告訴電腦如何採取行動。
更精確來說,是一連串指示電腦的動作順序的系列安排

在理解演算法之前,我們先來看看底下這個簡單的遊戲。

遊戲目標:交換黑棋白棋的位置
遊戲規則一每個棋子可以滑動至相鄰的空格內。
遊戲規則二也可跳過相鄰的棋子至下一個空格。
如果這盤棋要由你(妳)來指揮電腦下,
你要如何來下指令呢?

底下這兩群指令,你會選用哪一個?

2號格白棋移到3號格內
4號格黑棋跳到2號格內

★白棋移一格
黑棋跳一格

你(妳)覺得哪群指令比較適合來指揮電腦運作呢?
如果你還不曉得怎麼分,再試試看下面這兩個:

逃生門緊急使用步驟
1. 拉開蓋子
2. 將門把推到開啟位置並鬆手
3. 向外把門推開

飛機洗手間使用規則
*禁止吸煙
*禁止飲食
*當安全帶警示燈亮起時請勿使用洗手間

比較好的指令是能讓人(或電腦)一步一步的執行動作,
這就是我們上面所提到的演算法」。
演算法告訴你如何一步一步執行任務,
而不是只是告訴你什麼可以做,什麼不能做。
因此演算法是在談論「如何」做,而不是做「什麼」。

人類的語言,常常存在著模擬兩可的狀況,
但電腦的程式語言,則要具體精確,不能有模糊空間。

程式語言基本上可分為:
1. 低階「機器碼(machine code)」和
2. 「高階語言(high-level languages)」。

以這兩種程式語言來說,
電腦真正「看」得懂的,只有機器碼
機器碼是一種非常簡單的語言,它只使用兩種字母:0 和 1。 
因此機器碼中的所有字都是由 0 和 1 組成的序列,
例如,00000100 可能代表一個字,而 10101010 代表的意思就完全不同。

在這裡順便介紹一個概念—位元組(byte)
在電腦普遍使用的初期,電腦每次能處理的位元數,是8位元(bits)
因此,我們把8位元(bits)合成1個位元組(byte)。
當時的電腦也因而被稱成8位元電腦。


隨後由於電腦中央處理器技術的進步,
慢慢的又發展到16位元,32位元,甚至現在到達64位元的運算單位。

高階程式語言,是一種為了讓人類比較容易理解而設計的語言,
比較接近人類語言的用法。例如:

10  INPUT  name                     '輸入姓名
20  PRINT  "Hello," name       '輸出 Hello + 姓名
30  FOR i = 1 to 10                  '重覆執行10次, i 計數從 1 到 10
40  PRINT  i                             '輸出 i 的值
50  NEXT                                 '執行下一次循環
60  END                                    '結束

或是

void main(void) {
    int inv=0;        /*計數用變數*/
    double sum=0;     /*計算總和*/
    float Data;       /*輸入值存在Data變數*/
    do {
        printf("輸入實數:");     /*在螢幕上顯示字串*/
        scanf("%f", &Data); /*由鍵盤輸入數值*/
        sum = sum + Data;  /*將輸入值加到sum */
        inv = inv+1;
    } while(inv < 5);                   /*若inv小於5,繼續執行*/
    printf( "平均值= %f ",sum/5.0); /*印出平均值*/
    printf( "\n");                 /*換行*/
}

這樣一來,人們在進行程式設計時,可以用較直覺的方式來進行,
但是這些高階語言電腦是看不懂的,
所以必須要透過一個編譯器(Compilers)直譯器(interpreter)
將高階語言先轉換(翻譯)成低階機器碼,
再由電腦根據機器碼來運作執行程式。


雖然高階語言比起機器碼更人性化,
但在編輯上,仍然可能因拼錯語法或指令,
造成程式執行的錯誤。
因此,最近又有積木式的程式語言發展出來,
像我們六年級所學的Scratch 3.0 AppInventor II,就屬於這一類。



積木式的程式語言,基本上都可以轉換成高階語言
一樣藉由編譯器,再轉為機器碼

一個完整的演算法(或稱程式),
其實就是一組用來完成某件工作的有程序和指令,
也因此它涵蓋了以下兩件事:
1. 必須被執行的動作方式
2. 動作必須要遵循的順序

任何演算法都可以用這三種程序寫出來:
順序(Sequence)、
選擇(Selection)、
迭代(Iteration)。

一、順序:包含一連串先後順序動作,例如:
【緊急逃生門開啟】
1. 拉開蓋子
2. 推槓桿打開艙門
3. 將門往外推

這個逃生門的開啟,是必須按照一定的步驟順序來操作,才能順利開啟。
底下有個著名的遊戲—農夫過河,也能來體驗一下順序的重要性。


有個農夫帶著心愛的狐狸,去市場買了一隻活雞和一條玉米
回家時必須搭乘小竹筏渡河。
小竹筏很小,最多只夠讓農夫和他所帶的一項物品動物乘坐。
而且只有農夫才能控制竹筏航行。
但農夫碰到了一些問題:
1.會找機會偷吃玉米狐狸也伺機想吃雞
2.如果農夫與狐狸和雞同時在場(同在岸邊或竹筏上),動物就不敢造次。
3.如果農夫遠離了動物(農夫和動物分別在岸邊或竹筏上),有機會時,
  雞肯定會把玉米吃掉,而狐狸也會吃雞。
那麼,農夫要如何安排渡河,才能讓這三項都完整無缺的渡河到家呢?

這個問題,先留給同學們來嘗試解題,先不公佈答案。
同學們可以把解題的步驟與程序寫下來,
看看你總共用了多少個步驟,來幫農夫解決這個難題。
你會發現動作的選項與順序,是很重要的。

二、選擇:允許程式根據不同的條件來選擇執行動作,例如:
疫情警戒三級的停、復課選擇】
如果  疫情警戒降為二級                                     (條件)             
那麼  學校就復課,學生回校上課。      (條件為)
否則  繼續停課,學生進行線上學習。  (條件為)

在選擇的條件裡,有時不只有單一條件,
這時我們就會用到邏輯判斷 and(且) or(或)來作真假的運算,


例如:
疫情警戒三級時違規罰則】

如果  人在街上 未戴口罩               (需兩個條件均符合才成立)       
那麼  依傳染病防治法,裁罰3千元以上1萬5千元以下罰鍰。
否則  未違規,不予裁罰。                                                 

如果  室內群聚超過5人    室外群聚超過10人      (兩個條件只要一個符合即成立)
那麼  依傳染病防治法,處新台幣6萬元以上、30萬元以下罰鍰。          
否則  未違規,不予裁罰。                                                                            

三、迭代:在程式中,重複性的工作是非常重要的一環,
「重複」這檔事,又就叫作迴圈(loop)或遞迴
當我們下達「重複」指令時,須設定「終止條件」,
否則重複執行的程式會永不停止。

底下以兩個例子,來說明「重複」語法。
例如:
撲克牌重複抽牌遊戲一
重複抽牌直到抽中紅心A為止
如果  抽中紅心A                     
那麼  停止抽牌。
否則  繼續抽牌。

撲克牌重複抽牌遊戲二
重複抽10張撲克牌
  每次抽中的點數加總。

第一種狀況,可稱為條件控制迴圈(Sentinel-controlled loops),
第二種狀況,可稱為計數控制迴圈(Counter-controlled loops)。
條件控制迴圈可視實際執行的情況,決定重複執行的次數;
計數控制迴圈,則事先就已律定好重複執行的次數。
至於要採用哪一種迴圈,則取決於重複執行的需要。

以上是我們簡單介紹有關程式設計的基本概念,
實際上,真正程式設計所需的知能,還不止上面這些。
有興趣的小朋友,可以利用畢業後的空閒時間,
多利用 Scratch 3.0 或 AppInventor II 來進行練習,
對你將來的各項學習,都會很有幫助的。

隨堂測驗網址