สำหรับพวกเราที่กำลังเตรียมตัวอบรมหลักสูตรพัฒนา Cross Platform Mobile Application ด้วย Ionic React และ Web API ด้วย VB.NET บน .NET 6 ก็สามารถเช็ครายการโปรแกรม และติดตั้งตามขั้นตอนด้านล่างได้เลยครับ
ควรติดตั้งให้เรียบร้อยก่อนเริ่มอบรมวันที่ 1
- Node.js
- Git
- Ionic CLI
- Visual Studio Code และ Extension
ควรติดตั้งให้เรียบร้อยก่อนเริ่มอบรมวันที่ 3
5. ติดตั้ง Visual Studio สำหรับการพัฒนาเว็บแอพ
ควรติดตั้งให้เรียบร้อยก่อนเริ่มอบรมวันที่ 4
6. ติดตั้ง Chocolatey, OpenJDK 11, และ Android Studio, ตั้งค่า Path ให้ Android SDK
7. เปิดโหมดตัวเลือกนักพัฒนา (Developer Option)
8. ติดตั้ง USB Driver
1. ติดตั้ง Node JS
ดาวน์โหลดตัวติดตั้ง Node JS ได้จากที่นี่ www.nodejs.org
** แนะนำให้ใช้เวอร์ชั่น LTS: Recommended for Most User
2. ติดตั้ง Git
ส่วนนี้จะมี 2 ขั้นตอนย่อยนะครับ ทำให้ครบทีละขั้นตอน (ใครที่มี Git ใช้บนเครื่องอยู่แล้ว ก็ข้ามไปได้เลย)
2.1 ติดตั้ง Git client
เราต้องติดตั้งระบบ Git client เสียก่อน สามารถ download ได้จากที่นี่ และติดตั้งตามคลิปได้เลย
2.2 ตั้งค่า Git User
หลังการติดตั้งเสร็จ
1) ให้เปิดโปรแกรม Command Window หรือ Powershell ขึ้นมา จากนั้นให้กรอกคำสั่งด้านล่างลงไป และกด enter ทีละคำสั่ง
2) ให้ใส่ชื่อภาษาอังกฤษของเราลงไปแทน Teerasej Pon และกด enter
git config --global user.name "Teerasej Pon"2) ใส่ Email ลงไปแทน [email protected] และกด enter
git config --global user.email [email protected]3. ติดตั้ง Ionic CLI
สำหรับการใช้งาน Ionic ในการสร้างและจัดการโปรเจค เราต้องมีการดาวน์โหลด และติดตั้งชุดคำสั่งเอาไว้ใช้งาน (เรียกว่า CLI)โดยต้องมีการเชื่อมต่อคอมพิวเตอร์ของเราเข้ากับ Internet
ขั้นตอนนี้ใช้เวลาในการติดตั้งพอสมควร ขึ้นอยู่กับความเร็ว Internet ครับ
ให้เปิดโปรแกรม Command Prompt ขึ้นมาแล้วพิมพ์คำสั่งด้านล่างลงไป แล้วกด enter
npm install -g @ionic/cliหลังจากการติดตั้งเสร็จเรียบร้อย ให้ทดสอบรันคำสั่งด้านล่างในโปรแกรม Command Prompt
ionicถ้าไม่มีแจ้งว่า command not found ถือว่าผ่านครับ
4. ติดตั้ง Visual Studio Code และ Ionic Extension
ดาวน์โหลดตัวติดตั้ง Visual Studio Code ที่นี่
5. ติดตั้ง Visual Studio สำหรับการทำ Web API
ดาวน์โหลดตัว Installer สำหรับ Visual Studio
6. ติดตั้งโปรแกรม Android Studio และตั้งค่า PATH ให้ Android SDK
รายชื่อโปรแกรมที่ต้องดาวน์โหลด และติดตั้งในส่วนนี้
- Chocolatey (ถ้าลงเรียบร้อยจากขั้นตอนการติดตั้ง Node.js แล้ว ให้ไปส่วนต่อไปได้เลย)
- Open Java Development Kit (OpenJDK)
- Android Studio
เอ้า ทำตามทีละขั้นตอนง่ายๆ กันไปเลย
6.1 ติดตั้ง Chocolatey
ในตอนที่เราติดตั้ง Node.js ถ้าเราเลือกติดตั้ง Native Tools เพิ่มเติมเรียบร้อย ก็ไปส่วนต่อไปได้เลย
6.2 ติดตั้ง Open Java Development Kit (OpenJDK) 11
ดูวิธีการสั่งติดตั้งได้ในคลิป ส่วนคำสั่งที่ใช้ ให้ใช้เป็นชื่อแบบเดียวกับคำสั่งบรรทัดถัดไปนี่นะ
choco install microsoft-openjdk116.3 ติดตั้ง Android Studio
ดาวน์โหลดตัว Install Android Studio ที่นี่
6.4 Setup Android Studio
หลัง Install แล้ว เปิดขึ้นใช้งานครั้งแรก ต้องทำการ Setup ก่อน
และในที่นี้เราจะเลือก Setup แบบ Custom เพื่อใช้งาน OpenJDK ที่เราติดตั้งในขั้นตอนที่ 4.1
6.5 ใช้งาน Android SDK Manager
Setup เรียบร้อยแล้ว ให้เปิด SDK Manager ขึ้นมาติดตั้ง component เพิ่มเติมหน่อยนะครับ
6.6 รายละเอียดการตั้งค่า Path “ANDROID_HOME” ให้กับ Android SDK
ทำตามคลิปได้เลย
7. เปิดโหมดตัวเลือกนักพัฒนา (Developer Option) ในอุปกรณ์ Android ของเรา
อุปกรณ์ Android ตั้งแต่เวอร์ชั่น 4.2 เป็นต้นไป จะมีการซ่อนโหมดนักพัฒนาเอาไว้ครับ
ซึ่งเราต้องเปิดโหมดนักพัฒนานี้ก่อน ถึงจะสามารถเชื่อมต่อโปรเจคเข้ากับอุปกรณ์ได้
ดูวิธีการเปิดโหมดตัวเลือกนักพัฒนา (Developer Option) ที่นี่เลย
8. ลง USB Driver ที่ตรงกับรุ่น/ยี่ห้อของอุปกรณ์ Android
สำหรับการทดสอบ Android Application ที่เราสร้างขึ้นบน Windows กับอุปกรณ์จริงนั้นจะมีขั้นตอนพิเศษกว่าบนเครื่อง Mac OS X หน่อยครับ
คือเราต้องลง USB Driver ที่ตรงกับรุ่น/ยี่ห้อ ของอุปกรณ์นั้นๆ เพื่อให้ Windows รู้จักกับอุปกรณ์เรา และสามารถใช้คำสั่งของ PhoneGap/Cordova ในการทดสอบแอพ Android ในเครื่องจริงของเราได้
คลิกดูรายชื่อ website ของผู้ผลิตอุปกรณ์ เพื่อ download usb driver มาติดตั้งได้ที่นี่
** แอนดรอยด์เครื่องจีน ส่วนใหญ่หา USB Driver ไม่ได้ ทำให้ workshop กันลำบาก แนะนำให้หลีกเลี่ยงการทำ Android จีนมา workshop นะ
แต่พอได้แอพแล้ว เอาไปลงเครื่องจีนไม่มีปัญหาครับ