iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
1

哈囉大家好,我是接下來這三十天都會準時參加鐵人賽的米茶

Hey,第一天不用緊張慢慢來,老師不會太快,會循序漸進的,保證這三十天一定能夠讓你收穫滿滿

!!!第一堂課要來點小震撼!!!

很多人都有這個疑問,我如果只會用積木寫程式是不是很遜、很Low??

NO,用積木的方式寫程式目的是為了練習自己的邏輯。

如果只會打程式碼,但是邏輯不好,做出來的程式也可想而知。

總之這裡就是自由發揮的天地,想怎麼寫就怎麼寫,
沒有標準答案,有寫有分,沒寫沒分。

正片開始


這次我會教大家的是如何利用Thunkable這個平台,來教大家如何寫出Android/Ios雙平台都能使用的APP


平台網址:
Thunkable

這個平台的特色就是用積木拼寫出來的程式能夠建置出雙平台(Android/ios)都能使用的安裝檔
而且平台完全免費。
但是目前平台都是英文介面,所以我會盡量在教學的文章中註明翻譯~

一、逐步認識Thunkable平台

首先,我們開啟上方平台連結,
會看到這個平台首頁
點下右上方的 Sign up
https://ithelp.ithome.com.tw/upload/images/20181015/20108017CI8Ay5bUIY.png

接著使用Google帳號進行登入,要記得是使用哪個Google帳號進行登入,
往後我們所有寫的專案都是跟著你現在所登入的Google帳號喔!
https://ithelp.ithome.com.tw/upload/images/20181015/20108017fIgGraWVif.png

進入之後共有三個分區

  • My Projects (我的專案:所有製作的專案都會顯示在這裡)
  • Top Community Projects (這是目前在平台上熱門的公開專案,每個專案大家都可以點進去,參考別人是用什麼樣的方式寫出來的)
  • Public Gallery (這是匯集所有開發者公開的項目,只要原專案作者有公開專案就會在這邊展示出來喔!)
    https://ithelp.ithome.com.tw/upload/images/20181015/20108017Djt9vMwAZq.png

那我們先選擇 My Projects 進行 Start Building 進行第一個專案的設計
https://ithelp.ithome.com.tw/upload/images/20181015/20108017bSP47gF9h6.png

接著是設定專案的屬性
一開始我們先依序專案名稱:firstapp
並選擇要將這個專案公開還是設定為私人專案,在這邊我們選擇 Private 設定為私人專案
並且按下 Create 創建專案
https://ithelp.ithome.com.tw/upload/images/20181015/201080172BcQhVdjXv.png

工作區介面
https://ithelp.ithome.com.tw/upload/images/20181015/20108017KH51DEDHEg.png

二、製作屬於我的第一個APP

接下來用簡單的實作一個簡單的範例來讓大家更了解這個工作介面的使用

我們做一個"當我按下按鈕時將Hello World顯示出來的小程式"

我們將工作介面調整到Design區,然後常按著Button拖曳到手機螢幕上~
https://ithelp.ithome.com.tw/upload/images/20181015/20108017zZG6Nc0gvI.png
接著手機螢幕上就會出現一個按鈕名稱顯示 Button1
https://ithelp.ithome.com.tw/upload/images/20181015/20108017TCtKrlWFU7.png
再來還需要一個用來顯示Hello World的標籤
因此我們再將Label拖曳到手機螢幕,
https://ithelp.ithome.com.tw/upload/images/20181015/20108017add0s4XN70.png
你會看到你目前的手機螢幕呈現下方的樣子
https://ithelp.ithome.com.tw/upload/images/20181015/20108017VXdDnZgiBW.png

是的沒錯,你成功的跨出了第一步XD,離目標邁進了一步

我們現在看到工作區右方的"物件屬性設定區"
依照下方圖片說明,將Label內的Text清空
https://ithelp.ithome.com.tw/upload/images/20181015/20108017kzBnvVG0uR.png

下一步點選手機螢幕上的Button按鈕
會出現選取框已選到了Button位置
這時工作區右方的"物件屬性設定區"
一樣依照下圖,將Button的文字設定為:請按我
https://ithelp.ithome.com.tw/upload/images/20181015/20108017n7ndU5b8w6.png

這次我們把APP的介面部分設定好了,很簡單吧
再來就是我們的重頭戲,積木寫程式的部分
先將工作區選擇為Blocks部分,進入程式撰寫區
https://ithelp.ithome.com.tw/upload/images/20181015/20108017kzmxUvnrHs.png

下圖附上了程式的結構
https://ithelp.ithome.com.tw/upload/images/20181015/20108017Gaik49CCxR.png

先點擊Button的分類,在選擇 當...點擊 做....的積木,
拖拉至程式碼中央空白處
https://ithelp.ithome.com.tw/upload/images/20181015/20108017Rg1vWuQI9R.png

找到Label的分類,點選 Label1文字設為 [] 的積木,扣到上方的積木內
https://ithelp.ithome.com.tw/upload/images/20181015/20108017r7llE4Z6L2.png

再來抓取Text分類加到 Label1文字設定的[]中,如下圖所示
https://ithelp.ithome.com.tw/upload/images/20181015/20108017AkuFV5s2Ob.png

這樣我們第一個程式就完成了!!!

才第一天不能讓你們那麼累,所以...

明天介紹如何將做好的APP直接在實體手機上開啟以及安裝~


下一篇
[DAY>2<]透過Live Test讓手機也能及時預覽目前開發狀況
系列文
從積木開始學程式30

2 則留言

0
SunAllen
iT邦好手 1 級 ‧ 2018-11-07 13:09:16

這個好!/images/emoticon/emoticon07.gif

謝謝大大的支持,希望可以讓初學者學到更多^_^

1
SunAllen
iT邦好手 1 級 ‧ 2018-11-08 11:51:25

https://ithelp.ithome.com.tw/upload/images/20181108/20006132lcCkldmIXY.png

大大,照著做和註冊會員,都成功了,謝謝大大分享...^_^

我要留言

立即登入留言