iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
1
Software Development

當我遊走在程式的初學路上-從入門到放棄系列 第 1

Project 1 - 自我介紹程式(1):準備好環境才能跟世界說聲Hello

  • 分享至 

  • xImage
  •  

笑話情境:php 跟 IIS

小明:「小王,你以前在學校寫過PHP嗎」
小王:「有阿,我第一個程式語言就是PHP」
小明:「你能幫我看我家的PHP網頁在IIS為什麼開不起來」
小王:「可是我們老師只教XAMPP,IIS我完全沒學過,所以我沒辦法幫你喔」
小明:「好吧,那我改用XAMPP好了」

以教學者的角度看放棄程式的人(Day 1)

每個程式語言的開發環境設定過程都不太一樣,像是C#只要透過微軟的安裝程式就會幫我們處理好,如果是寫PHP,一般來說要先安裝伺服器,接著在伺服器上設定PHP編譯器。中間過程需要修改參數設定檔

老師在教學上會省略環境的準備過程,避免讓學生在一開始感到挫折、浪費過多課堂時間,等到了現實面臨到非常多環境問題,學生因為對環境設定和作業系統的不熟悉產生挫折感。

以自學者的角度看放棄程式的人 (Day 1)

以Javascript為例,原以為專注程式語法就能學會程式設計,以為只要專心學習資料結構和演算法,但是學到後面發現別人要我幫他在Linux架一個購物網站,我要另外學網路架構、Linux作業系統、前端專業(HTML & CSS)、資料庫、Web安全。光是不熟Linux,什麼都不用談了!

第一天簡介:Hello World到底在幹嘛?

「每個語言需要一個發揮的舞台」,今天如果想寫PHP網頁,你要怎麼讓PHP有發揮的舞台?就是Apache + PHP 的編譯器。不論你選擇什麼程式語言入門,都需要準備語言的「開發環境」「開發工具」、「執行環境」。

就好比我們的媽媽經過懷胎10個月,才有我們的嘴巴可以講話、大腦可以思考,讓我們在這個世界有行動的舞台。

參考Project 1 一覽:自我介紹程式

一、最終結果

1.程式主畫面
https://ithelp.ithome.com.tw/upload/images/20190902/201203313wXeko8HPc.png

2.根據輸入的姓名、家鄉、出生年月日 簡單做出自我介紹
https://ithelp.ithome.com.tw/upload/images/20190902/20120331QJuHll0AM5.png

3.點擊右方方框兩下,選擇個人大頭照
https://ithelp.ithome.com.tw/upload/images/20190902/20120331w2BtuLTKjs.png

二、從使用者的操作角度看這隻程式

1.可以打開程式執行檔
2.可以輸入資料:姓名、家鄉、出生年月日
3.可以選擇圖片檔案
4.按下按鈕,做出自我介紹

三、從開發者角度看這隻程式

1.這支程式可以在哪些地方使用 =>
Windows?Linux? 網頁瀏覽器? Android 系統? iOS 系統? 我全都要?

2.這支程式用什麼語言完成 =>
C# ? Python ? Java ? Objective-C 、JavaScript? GO?

3.用什麼工具寫程式碼 =>
Visual Studio ? Vim ?Visual Studio Code ? Eclipse? XCode ?

4.程式有哪些事情要處理=>
執行程式→顯示畫面與欄位→等待使用者輸入資料→等待使用者選擇照片→等待使用者按下自我介紹按鈕→秀出自我介紹

5.程式在什麼情況下會壞掉 =>
出生年月日不是純數字、使用者拿xls、txt等非圖片格式檔案檔當作照片

6.如何將程式碼轉換成可以呈現給一般使用者使用的形式=>
exe檔

親身體驗開發流程:以 C#為例

第一步 準備開發環境與工具

Windows
https://kk665403.pixnet.net/blog/post/403463579-%5Bc%23%5Dmicrosoft-visual-studio-:-%E4%B8%8B%E8%BC%89%E5%AE%89%E8%A3%9D%E7%AF%87

Linux(Mono)
https://www.c-sharpcorner.com/article/create-net-core-web-api-c-sharp-in-monodevelop-on-ubuntu-18-04/

第二步 每個程式作品的單位:準備專案

1.打開用來寫C#的開發工具 Visual Studio
why:寫程式當然要有寫程式的地方R
https://ithelp.ithome.com.tw/upload/images/20190902/20120331aODqFTAUdk.png

2.設定專案:專案類型、專案名稱、專案路徑
why:C#可以用來寫視窗程式、網頁、純黑底白字程式,你想寫什麼類型的程式決定你的專案類型
why:每一支程式都應該有屬於自己的名子
https://ithelp.ithome.com.tw/upload/images/20190902/201203318joHJ5JIjT.png

第三步 執行程式:確保你的開發環境和執行環境可以正常使用

why:程式碼要經過編譯處理,才會變成一個真正能給使用者使用的程式
(1) 建置
https://ithelp.ithome.com.tw/upload/images/20190902/20120331U48QNmdETq.png

(2) 前往C#專案預設的建置路徑:bin\Debug,打開真正的程式執行檔
https://ithelp.ithome.com.tw/upload/images/20190902/20120331ZBNay09kYW.png
https://ithelp.ithome.com.tw/upload/images/20190902/201203311EVZUISqRf.png
https://ithelp.ithome.com.tw/upload/images/20190902/20120331HOcMsQS1A9.png

第四步 從哪裡開始寫程式:一切的撰寫從進入點開始

why:如果你希望程式幫你做事情,必須知道怎麼讓他做第一件事情

(1)任何WinForm程式專案,第一段被執行的程式碼是Program.cs的Main()函式:
https://ithelp.ithome.com.tw/upload/images/20190902/20120331NUjyqCZiUo.png

(2)每個視窗程式檔,第一段被執行的程式碼
每個視窗有個自己的名稱,以圖中為例,這個視窗叫Form1,這個視窗第一段被執行的程式碼是public Form1()
https://ithelp.ithome.com.tw/upload/images/20190902/20120331axqdDQptGS.png

(3) 嘗試在下方撰寫一行程式碼,命令你的程式碼跳出視窗,顯示GoodByeWorld
https://ithelp.ithome.com.tw/upload/images/20190902/20120331eLz8YA13BF.png

MessageBox.Show("GoodBye World!");

第五步 看看程式碼是不是乖乖聽話:偵錯

(1)按下開始偵錯
https://ithelp.ithome.com.tw/upload/images/20190902/201203319voCzBl2Ni.png
(2)彈出GoodBye World
https://ithelp.ithome.com.tw/upload/images/20190902/20120331fP7zZktarn.png
(3)關閉GoodBye World,接著顯示Form1的畫面
https://ithelp.ithome.com.tw/upload/images/20190902/20120331VRPMmXnTfC.png

舉一反三:準備Python 程式的開發環境

第一步:準備Python 的編譯環境

Windows:
https://matthung0807.blogspot.com/2019/05/python-windows-python-3.html
Linux:
https://pythonguidecn.readthedocs.io/zh/latest/starting/install3/linux.html

第二步 每個程式作品的單位:準備專案

Visual Studio Code 並沒有像 Visual Studio 有新增專案,怎麼辦?
新增一個「資料夾」當作一支Python程式的專案
https://ithelp.ithome.com.tw/upload/images/20190902/20120331C299CPMkZF.png

第三步 執行程式:確保你的開發環境和執行環境可以正常使用

(1)新增hello.py程式檔,撰寫Hello World 程式碼

if __name__ == '__main__':
    print('Hello World')

https://ithelp.ithome.com.tw/upload/images/20190902/20120331UYZpplJ9nI.png

(2)打開windows 或 linux的 Terminal,輸入「python 程式檔案」

python hello.py

https://ithelp.ithome.com.tw/upload/images/20190902/201203313gMCzK99W5.png

(3) Python程式碼建置成EXE執行檔:PyInstaller
https://medium.com/pyladies-taiwan/python-%E5%B0%87python%E6%89%93%E5%8C%85%E6%88%90exe%E6%AA%94-32a4bacbe351

第四步: 從哪裡開始寫程式:一切的撰寫從進入點開始

http://blog.konghy.cn/2017/04/24/python-entry-program/

第五步: 看看程式碼是不是乖乖聽話

https://oranwind.org/python-vscode/

往明天邁進 OR 放棄?:準備你想使用的語言環境

希望透過第一天的介紹,可以帶大家切身的體會,環境對於學習任何程式語言、跨程式語言的學習非常重要。能夠很快地轉換學習其他的程式語言的人,通常在軟硬體環境的處理都有一定的能力。

今天準備好你想使用的語言開發環境,明天開始,用你的語言撰寫一支自我介紹程式!


下一篇
Project 1 - 自我介紹程式(2):如果你容易迷路,試著從需求的角度出發吧!
系列文
當我遊走在程式的初學路上-從入門到放棄9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2019-12-21 07:03:54

泰D大大的第二系列文 /images/emoticon/emoticon12.gif
好強啊!! 開始閱讀

通靈亡 iT邦高手 1 級 ‧ 2019-12-28 14:03:26 檢舉

其實這是我第一個系列XDD

/images/emoticon/emoticon04.gif

我要留言

立即登入留言