การเขียนโปรแกรมบนอุปกรณ์สื่อสารไร้สาย Smart Phone-Hybrid Apps

• 19 มิ.ย. 2562
• แอดมิน
• JavaScript PHP Programming Ionic Framework
• 3,088

เป็นตัวอย่างเอาไว้ศึกษาการใช้งาน ionic framework v3 และสามารถนำโค้ดมาดูย้อนหลังไว้เป็นกรณีศึกษาได้

   

• สร้างหน้า Profile //สร้างหน้าเพื่อเรียนรู้การกาหนดรูปแบบแตะละหน้าด้วย CSS
• สร้างหน้า Camera // สร้างหน้าเพื่อเรียนรู้การใช้งาน Plugin Camera
• สร้างหน้า QR Code //สร้างหน้าเพื่อเรียนรู้การใช้งาน QrCodeScan (Create & Scan)
• สร้างหน้า News //สร้างหน้าเพื่อเรียนรู้การใช้งาน Service Provider แบบ GET (การดึงข่าวสารมาแสดง)
• สร้างหน้า Course //สร้างหน้าเพื่อเรียนรู้การใช้งาน Service Provider แบบ GET (การดึงคอส์สเรียนมาแสดง)
• สร้างหน้า Todos//สร้างหน้าเพื่อเรียนรู้การใช้งาน Local Storage
• สร้างหน้า Login //สร้างหน้าเพื่อเรียนรู้การใช้งาน Service Provider แบบ POST (Login Page)
• สร้างหน้า Register //สร้างหน้าเพื่อเรียนรู้การใช้งาน Service Provider แบบ POST (Register Page)
• สร้างหน้า Youtube //สร้างหน้าเพื่อเรียนรู้การใช้งาน Youtube Ifram
• การนำ Font Awesome มาประยุคใช้งานกับ ionic Framwork

เตรียมเครื่องมือสำหรับพัฒนา

• ติดตั้ง Node.js, npm และ VisualStudio Code
• ติดตั้ง git
• ติดตั้ง VS Code และ Extensions
• ติดตั้ง JDK (Java Development Kit )
• Android Studio and SDK tools
• การตั้งค่า Environment PATH

ขั้นตอนการติดตั้ง

• การเขียนโปรแกรมบนอุปกรณ์สื่อสารไร้สาย Smart Phone-Hybrid Apps

ionic Framwork - คำสั่งที่ใช้งานบ่อย

• การสร้างโปรเจคใหม่

$ ionic start <ชื่อโปรเจค> 

•  
• การสั่งรัน Application ไปที่ Browser แล้วกด Enter หากต้องการยกเลิกคาสั่งรัน Application ให้กดปุ่ม Ctrl + C
•  

$ ionic serve

• การสร้างหน้าใหม่(New Page)

$ ionic g page <ชื่อหน้า> --no-module

• เพิ่ม Platforms ที่เราต้องการ Build

$ ionic cordova platform add <ชื่อเพลตฟอม : android|ios>

Note: การเพิ่ม platform ถ้าเป็น android เราต้องติดตั้ง Android Studio และต้องติดตั้ง Android SDK ก่อน

• ปรับปรุง resources

$ ionic cordova resources <ชื่อเพลตฟอม : android|ios>

• Build App

$ ionic cordova build <ชื่อเพลตฟอม : android|ios>

• Build on device

$ ionic cordova run <ชื่อเพลตฟอม : android|ios> --device

การสร้างไฟล์ APK สำหรับนำขึ้น Android PlayStore

• Build App

$ ionic cordova build <ชื่อเพลตฟอม : android|ios> --prod --release

• สร้างไฟล์ KeyStore

$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

• Signed App

$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

• Zipalign

1. เข้าไปที่ zipalign ซึ่งจะอยู่ใน Library/Android/sdk/build-tools/28.0.2
2. จากนั้นให้ใช้คำสั่ง ./zipalign -v 4 /Users/taveevut/Desktop/ionic3-starter/platforms/android/build/outputs/apk/android-release-unsigned.apk android-release.apk
3. เมื่อเสร็จสิ้นแล้วเราก็จะได้ไฟล์ android-release.apk อยู่ในโฟล์เดอร์โปรเจคเราและเป็นไฟล์ที่พร้อมจะนำขึ้นไปยัง AppStore ของเรา

ดูข้อมูลเพิ่มเติมได้ที่ https://ionicframework.com/docs/v1/guide/publishing.html

นำขึ้น Android PlayStore

• https://www.youtube.com/watch?v=1leOrcJbfng
• https://www.youtube.com/watch?v=7A2J7gDKIUs
• https://www.youtube.com/watch?v=uFwHFLBZBvk