การเขียนโปรแกมบน Mobile Application แบบ Hybrid เขียนครั้งเดียว run ได้ทั้ง IOS,ANDROID ด้วย Ionic (การติดตั้ง)
Ionic Framework
ionic เบื้องต้น
tools
1.node.js
2.cordova
3.ionic
ลงทะเบียน
1.http://ionic.io/ --> ไว้สำหรับ upload โปรแกรม เพื่อทดสอบ ผ่าน ionic view
ติดตั้งโปรแกรมที่จำเป็น
ติดตั้งโปรแกรมที่จำเป็น
การ install
- Node.js => https://nodejs.org/en/download/
- Windows Installer (.msi) => 32 bit
- ทำการ install msi ที่ download
- ทดสอบว่า สามารถ run โปรแกรม node.js ได้
- เปิด command window
- เปิด window explorer
- เลือกไปที่ folder ที่ต้องการ
- กด Shift พร้อม right-click
- เลือก open command window here
- พิมพ์ => node -v เพื่อดู version ของโปรแกรม node
- ทำการ install => ionic และ cardova
- ที่ command window พิมพ์ =>
- npm install –g cordova ionic
- ทดสอบดู version ของ cordova =>
- cordova -v
- ทดสอบดู version ของ ionic =>
- ionic -v
- ทำการ update cordova และ ionic กรณีเราทำการ install มานานแล้ว
- npm update -g ionic
- npm update -g cordova
ทดลองพัฒนา โปรแกรม
- การ generate โปรแกรมโครง
- ทดลอง run โปรแกรมบน Web browser
- โครงสร้างของ โปรแกรมที่ generate
- ทดสอบแก้ไขโปรแกรม เพื่อดูว่าหน้าจอบน web browser จะเปลี่ยนให้อัตโนมัติ
- การ install platform => android
- การทดลอง run ใน Simulator => ในครั้งนี้ยังไม่ทดลอง
- การทดลอง run บนอุปกรณีมือถือที่เชื่อมกับ PC
- สร้าง directory ชื่อ c:\project
- เปิด DOS window ที่ c:\project
- ทำการสร้าง demo project
- ionic start demo
- ให้ลงไปที่ demo project
- cd demo
- ทำการ start Server
- ionic serve
- ยังไม่ต้องสร้าง account กับ ionic
- ให้เลือก address => localhost
- ถ้าเลือกผิดให้ใช้ ionic address เพื่อแก้เป็น localhost
- Ionic จะสร้าง web server และ ทำการ เปิด web browser ใน mode ของการ connect ถ้ามีการแก้โปรแกรมจะทำการ load
- จะหยุดงาน web server ให้กด q <enter>
- อธิบายโครงสร้างของ โปรแกรมที่ generate
- hooks เป็นส่วนของ Cordova
- platforms เป็นที่เก็บเวลา build application เพื่อนำไปใช้ใน android , ios
- plugins เก็บ plugin
- scss เป็นที่ เก็บแฟ้มที่แปลงเป็น cascade style sheet
- lib เป็นส่วนของ ionic
- ionic
- css
- fonts
- js
- scss
- แก้หน้าจอหลักที่ www/template/tab-dash.html
- ที่ chrome กด Ctrl-Shift-i ปรับเป็น mobile mode
- ทำการลง platform android
- ลง android SDK + java
- ionic platform android
- จะพบว่ามี directory ชื่อ platforms และ plugins เพิ่มขึ้นมา
- ทำการ run บนมือถือ สามารถทำได้ ๒ วิธี
- การทำ install บนมือถือ
- สร้าง package
- ionic build android (ต้องลง SDK ก่อน )
- จะไปสร้างแฟ้มที่ platforms\android\build\outputs\apk\
- copy file นามสกุล .apk จาก PC ไปยังมือถือ
- android-debug.apk ไปยังมือถือที่ต่อกับเครื่อง
- install บนมือถือ
- ทำการ install โปรแกรมบนมือถือ
- การ run บนมือถือที่เชื่อมกับ PC อยู่
- ionic run android
- เป็นการทำการ build -> copy -> run โดยอัตโนมัติ
- ทำการ run โดยผ่าน ionic view application
- ทำการสมัครสมาชิกที่
- ทำการ install => ionic view จาก app store หรือ google play
- ทำการ upload โปรแกรมเราขึ้นไปยัง server ของ ionic
- ionic upload
- เปิด ionic view บนมือถือ จะพบ application ที่เรา upload ขึ้นไป สามารถเรียกใช้งาน
เยี่ยมเลย
ตอบลบ