App專案分享的方法

練習生的功課

如果說想到南韓當K-POP藝人出道,必須先到經紀公司當練習生,那麼想當iOS Developer必定也要經過大量的練習才能在iOS界出道的,而如何記錄與分享自己每一次練習的成果,在彼得潘小王子的課堂中學到了一個好方法:

1.將完成的App作品錄製成gif檔。

2.將專案上傳至GitHub並提供連結。

完成上面兩個步驟之後,就可以到Medium發表文章,附上App 模擬器操作的gif檔讓人一看就能夠明瞭,想進一步了解專案的朋友也能至GitHub下載檔案參考或互相討論,這麼好的方法立刻就來實作看看囉。

錄製模擬器操作的gif檔

step1

打開Simulator模擬器的畫面,開啟QuickTime Player點選File –>New Screen Recording。

Simulator模擬器的畫面
開啟QuickTime Player點選File →New Screen Recording

step2

紅色錄製鍵旁的三角按鍵,有個Options –>Show Mouse Clicks in Recording,建議開啟這個選項才可以比較清楚看到滑鼠游標在App畫面的操作喲!

Screen Recording
Show Mouse Clicks in Recording

step3

按下紅色錄製鍵後會出現這個訊息,看你是要錄製整個畫面或是選取想要錄製的部分都可,既然是要錄製App畫面的操作當然就只框選Simulator模擬器畫面的部分囉。

提示訊息
框選Simulator的部分

step4

錄製完成後按下桌面右上方白色圓圈結束錄影。

有看到白色圓圈嗎?
在這裡喲XD

step5

錄製完成後記得存檔喲!

存檔畫面

step6

存檔後的檔案類型為mov檔,再利用Gifski轉檔成gif檔就可以放到Medium文章裡面囉。

Gifski(可到App Store下載)
開啟Gifski後將影片檔案拖曳到這裡面

App作品的gif檔完成啦!這是我第一堂課的App畫面作品,首頁的角蛙繪圖是我Facebook角蛙社團裡一位很會畫畫的蛙友替我的角蛙『芭樂』畫的肖像圖,期待上完Peter小王子的課程之後,我的App作品可以更加完善。

第一次上課完成的簡易App畫面

專案上傳至GitHub

不知道是不是沒有慧根,我在這個步驟執行得比較久一點,在此也分享我的執行過程:

step1 記錄目前的版本

在Xcode點選Source Control –>Commit。

Source Control –>Commit

出現這個視窗後記得Hierarchical裡的框框都要打勾(如紅框所示),下方欄位則是可以記錄此次版本的修改(如黃框所示),完成後按右下角的Commit。

按Commit

step2 將作業上傳至GitHub

點選Show the Project navigator右邊的Show Source Control navigator圖示,在藍色專案名稱按滑鼠右鍵,點選Create”檔案名稱”Remote。

點選Create”檔案名稱”Remote

點選Create”檔案名稱”Remote之後在這邊卡了許久,Loading account owners訊息那邊一直轉圈圈。

Loading account owners愛的魔力轉圈圈

等了一陣子覺得等下去不是辦法,於是開始找方法,在拜讀了Peter小王子的文章後獲得了解決方法:

再次點選Create”檔案名稱”Remote,選擇GitHub,按Continue之後輸入GitHub的帳號及密碼,。

選擇GitHub
輸入帳號及密碼

按下Sign in後回到這裡,按下右下角的 Create 後即可將整個 Xcode 專案上傳到 GitHub。

按下右下角的Create

卡關的地方:

第一次紀錄版本時沒有將Hierarchical裡的框框打勾,所以上傳至GitHub後發現並沒有完整的專案。

第一次上傳失敗:只有Assetsy資料夾?

不知道問題出在哪,趕快請教Peter小王子,馬上點出是我紅框內的勾沒有勾選,回去勾選之後再按右下角的Commit就可以了(感恩小王子讚嘆小王子)。

紅框內要打勾

因為我的專案版本已經建立過了,從Create”檔案名稱”Remote那邊再上傳一次專案會出現這個畫面:

錯誤訊息

一樣請教Peter小王子之後才知道原來要從Xcode –>Source Control–>Push這邊才行。

Xcode –>Source Control–>Push

按下Push之後就上傳囉,如果想要加上版本區分(EX: 1.0、1.1)再勾選Include tags就好。

按下Push就上傳囉

step3 取得上傳至GitHub上的專案網址

點選Show the Project navigator右邊的Show Source Control navigator圖示,在藍色專案名稱按滑鼠右鍵,點選View on GitHub。

View on GitHub

瀏覽器上面的網址就是上傳完成的專案網址。

完整的專案上傳成功

本篇實作上傳的專案GitHub網址

完成這些步驟,我的作業1之1 終於完成了(放煙火)!深深覺得Peter小王子根本是人體Xcode說明書,感謝小王子耐心解決我的疑問,好的開始是成功的一半,希望之後的作業能夠越做越上手。

參考文章:

--

--

Julia Wang
彼得潘的 Swift iOS / Flutter App 開發教室

Learning Programming , Hiking , Travels , Tour , Exploring nature 『你必須要很努力,才能看起來毫不費力』