สรางโมบายแอพลเคชนดวย Ionic 3

เรยนรการสรางแอพดวย TypeScript, Angular และ Native Component เรมจากพนฐานสการตดตงจรง

โดย เอกสทธ ศรสขะ

http://www.codeexcellent.com http://www.facebook.com/codeexcellent

ชอผแตง : นายเอกสทธ ศรสขะ

ชอหนงสอ : สรางโมบายแอพลเคชนดวย Ionic 3

จ านวนหนา : 294 หนา

พมพครงท : 1

จ านวน : 20 เลม (Print on demand)

เดอนปทพมพ : มถนายน 2561

ISBN : 978-616-468-677-9

พมพท : บรษท เอเชย ดจตอลการพมพ จ ากด 21/19-20 ถ.งามวงศวาน แขวงลาดยาว เขตจตจกร กรงเทพมหานคร 10900

ออกแบบปก : นายเอกสทธ ศรสขะ

ราคา : 600 บาท

สงวนลขสทธตาม พ.ร.บ. ลขสทธ พ.ศ. 2537 หามลอกเลยนแบบไมวาสวนหนงสวนใดของหนงสอ/เอกสารเลมน

นอกจากจะไดรบอนญาตเปนลายลกษณอกษร

แด พอ แม ผใหก ำเนด คร อำจำรย ผประสทธประสำทวชำ และผมพระคณทกทำน

ค าน า

การพฒนาแอพทกวนนไมไดแยกแพลตฟอรมอกตอไป เนองจากในปจจบนมผสรางเครองมอใหเราไดเลอกใชอยางมากมาย ซงมความสามารถในการสรางแอพทเรยกวา ครอสแพลตฟอรม (Cross Platform) นนคอการทเราสรางแอพครงเดยว กสามารถน าไปท างานไดทงบน Android และ IOS ซงชวยประหยดเวลา และประหยดงบประมาณลงไปไดเปนอยางมาก

Ionic กเปนหนงในเฟรมเวรคทมความสามารถในแบบครอสแพลตฟอรมเชนเดยวกน และยงมความนาสนใจ ทท าใหเราเลอกมาใช นนกคอการใชคณสมบตของ HTML / SCSS และ Angular ท าใหนกพฒนาสายงานเวบ ทคนเคยอยแลวสามารถทจะปรบมาใช Ionic ในการท าแอพสกตวไดอยางไมยาก นอกจากนขอดของ Ionic ทตอบโจทยอกขอหนงคอ มนมคอมโพเนนต และเอกสารวธใชเตรยมไวใหเราอยางครบถวน ชวยใหเราสะดวกในการหยบใชไดทนท

หนงสอเลมนจดท าขนเพอใชเปนคมอ ส าหรบผอานทสนใจในการท าแอพ สามารถใชประกอบในการเขยนโคดโปรแกรมได โดยคมอนจะอธบายขนตอนการสรางแอพจากขนพนฐาน ไปจนถงการน าไปตดตงจนเสรจสน นอกจากนผอานจะไดเรยนรเทคโนโลยใหมๆ อาทเชน Node.js, TypeScript, Angular 5, SCSS, Native Component, Firebase, Map และ Facebook Login เปนตน ซงเปนประโยชนตอผอานเอง ในการประยกตใชกบงานอนๆ ไดอกดวย สดทายนผเขยนหวงวาหนงสอเลมนจะเปนประโยชน ชวยลดเวลาเรยนร และชวยใหผอานไดสรางงานขนมาตามความมงหวง

ขอบคณครบ

เอกสทธ ศรสขะ ekkazit@gmail.com

สารบญ

หนา

บทท 1 รจกกบ Ionic 1 แนะน า Ionic 1 การตดตง 2

- การตดตง Node.js 2 - การตดตง Ionic Framework 3

การสรางโปรเจกต 4 การทดสอบโปรเจกต 5

- ทดสอบบนเบราเซอร 5 - ทดสอบบนอมเลเตอร 7 - การทดสอบกบเครองจรง 10

การตรวจสอบขอผดพลาด 11 - การตรวจสอบบนเบราเซอร 11 - การตรวจสอบบนอปกรณจรง 11

เทกซอดเตอร 13 โครงสรางของโปรเจกต 15

บทท 2 TypeScript 17 รจกกบ TypeScript 17 การตดตง TypeScript 18 การเขยนโปรแกรมพนฐาน 20

- การประกาศตวแปร 20 - ตวแปรแบบขอความ 22 - ตวแปรแบบอาเรย 23 - ตวแปรแบบทางเลอก 25 - โอเปอเรเตอร 26 - ค าสงวนรอบ 28

สารบญ (ตอ)

หนา

- ฟงกชน 31 - แอโรวฟงกชน (Arrow Function) 33 - โพรมสฟงกชน (Promise Function) 33

การเขยนโปรแกรมเชงวตถ 36 โมดล 41

บทท 3 Angular 5 และ SCSS 45 รจกกบ Angular 45 เรมตนกบ Angular 46

- Interpolation 46 - Property Binding 47 - Two-way Data Binding 49 - Events 51 - Templates 53 - Directives 55 - Angular Modules 60

การเขยน SCSS เบองตน 61 - การเปลยนสไตลเบองตน 62 - การจดการ Fonts 64

บทท 4 Page และ Navigation 67 การสรางเพจ 67 การเชอมโยงเพจ 69 การก าหนด Root Page 71 การก าหนด Start Page 72 การลอกเอาตออกจาก Page 75

สารบญ (ตอ)

หนา การสงขอมลระหวางเพจ 77 การสงขอมลดวย Interface 78 Page Life Cycle 81 บทท 5 โครงสรางของแอพ 85 โครงสรางหนาจอ 85 เรมการสรางเพจ 87 การสรางหนาจอลอกอน 89 การสรางหนาจอแบบแทบ 91 หนาจอรายการทจอดรถ 93

- สรางอนเตอรเฟสขอมล 93 - การแสดงรปภาพแบบ Base 64 98 - การเพมปม FAB 101

บทท 6 การเรยกใช API ดวย Provider 105 รจกกบ API Server 105 แนะน าบรการของ API 106 การทดสอบ API 107

- การทดสอบดวย Firefox 107 - การทดสอบดวย Postman 108

การสราง Service Provider 110 - การสราง Parking Provider 110 - การเชอมตอกบ API server 112

การแสดงรายการขอมล 114 การใชงาน Loading 116

สารบญ (ตอ)

หนา

การใชงาน Refresher 117 - การท า Load More 119

การคนหาขอมลดวย Searchbar 120

บทท 7 ฟอรมและการตรวจสอบความถกตอง 123 การแสดงขอมล 123 การสรางฟอรมรบขอมล 127 การตรวจสอบความถกตองของฟอรม 130 ฟอรมเพมรปภาพสถานท 132 การบนทกขอมลดวย API 134 การแสดงขอความดวย Toast 136

บทท 8 การใชงาน Native Components 139 การใชงาน Call Number 139 การใชงาน Camera 142

- การถายภาพจากกลอง 142 - การเลอกรปภาพจากกลอง 145 - การลบรปภาพ 146

การใชงาน QRCode 147 - ออกแบบหนาจอสแกน QRCode 148 - ทดสอบการสแกน QRCode 151

บทท 9 Geolocation, Map และ GPS 153 การหาพกดของเครอง 153

- การใชงาน Geolocation 154 - การสราง Service ส าหรบหาพกดเครอง 156

สารบญ (ตอ)

หนา การค านวณระยะทางระหวางพกด 159 การแสดงระยะทาง 160 แผนท 164

- การสมครใชบรการ Google Map 164 - การตดตงปลกอนส าหรบแผนท 167 - การแสดงแผนท 167 - การแสดงแผนทแบบหลาย markers 171

การออกแบบระบบน าทาง (GPS) 174

บทท 10 Security และ LocalStorage 181 ขนตอนการ Authentication 181 รจกกบ JSON Web Token (JWT) 182 การใชงาน LocalStorage 185 การลอกอนเขาสระบบ 187

- แนะน า API ส าหรบลอกอน 187 - การทดสอบลอกอนดวย Postman 187 - การลอกอนผานแอพ 188 - การท า Continue Login 192

การตรวจสอบ Token 192 - ขนตอนการตรวจสอบ 194 - การท า Http Interceptor 195

การลอกเอาตออกจากระบบ 198

บทท 11 Push Notification 201 รจกกบ Push Notification 201 การสมครใชบรการ Firebase 203

สารบญ (ตอ)

หนา

การตดตงปลกอน 209 หนาจอสมครรบขาวสาร 211 การบนทก Device Token 213 การสงขอมลขาวสาร 215

- การสงขอความดวย Firebase 215 - แนะน า API ส าหรบสงขอความ 217 - การสงขอความผานระบบ 219

บทท 12 Facebook Login และ Background Mode 221 หลกการลอกอนดวย Facebook 221 การสมคร Facebook Developer 223 การตดตงปลกอน (Facebook) 229 การท า Facebook Login 231 รจกกบ Background Mode 235 การตดตงปลกอน (Background Mode) 236 การประยกตใชงาน (Background GPS) 236 การใชงาน Badge 239

บทท 13 การใช Pipe และ Style ของแอพ 243 รจกกบ pipe 243

- ตวอยางการใช Pipe 244 การสราง Custom Pipe 244

- โครงสรางของ Pipe 245 - การแปลงเลขอาราบกเปนไทยดวย Pipe 246

การใชงาน Pipe ไลบราร 247 - การใชงาน ngx-moment 248

สารบญ (ตอ)

หนา

การปรบแตง Style ของแอพ 249 - การเปลยนส 249 - การเปลยนตวอกษร 251 - การเปลยนสไตลหนา Login 252

บทท 14 การตดตงแอพลเคชน 257 การตงคา Bundle ID 257 การจดเตรยม Splash และ Icon 258

- การเตรยมรปภาพ Splash 259 - การเตรยมรปภาพ Icon 259 - การสราง resource โดยใชค าสง 260

การตดตงลงใน Android 262 การตดตงลงใน IOS 263

ภาคผนวก 267

บทท 1 รจกกบ Ionic

ในบทนจะแนะน าใหผอานรจกกบ Ionic เพอเปนการปพนความรเบองตน ใหงายส าหรบการตอยอดในขนสงตอไป โดยไดกลาวถงทมาของ Ionic, การตดตงเครองมอทใชในการพฒนา, การตดตง Ionic Framework, การสรางโปรเจกต, การทดสอบโปรเจกต รวมไปถงวธตรวจสอบขอผดพลาด และสดทายจะอธบายถงหนาทของไฟลตางๆ ในโปรเจกตของเรา

แนะน า Ionic

Ionic คอ เฟรมเวรคทชวยในการพฒนาโมบายแอพลเคชน ซงรองรบการเขยน HTML, CSS และ JavaScript ได ท าใหนกพฒนาทคนเคยกบการท าเวบมากอน สามารถทจะเรมตนสรางโมบายแอพสกตว ไดอยางไมยากมากนก โดยทแอพลเคชนทพฒนาดวย Ionic นน สามารถท างานไดทงระบบ Android และ IOS ในการสรางเพยงครงเดยว เราจงเรยกวาแอพลเคชนแบบ “ครอสแพลตฟอรม” (Cross Platform) ซงชวยลดตนทน และระยะเวลาในการพฒนาแอพลงไปไดเปนอยางมาก หวใจการท างานหลกของ Ionic จะอยท Apache Cordova ซงท าหนาทในการแปลงโคด HTML, CSS และ JavaScript ของเรา ใหอยในรปของ Native ทสามารถน าไปท างาน บนโมบายในแตละแพลตฟอรมได Ionic ปจจบนคอเวอรชน 3 ไดเปลยนมาใช TypeScript และ Angular 5 เปนภาษาหลกในการพฒนา เนองจากจดเดนของ TypeScript ทรองรบการเขยนโปรแกรมเชงวตถ และสามารถเลอกคอมไพลเปน JavaScript เวอรชนใดกได ท าใหยดหยนตอการเปลยนแปลงเวอรชนของ JavaScript ในอนาคต รวมไปถงการใช Angular 5 ท าให Ionic สามารถทจะจดการสวนประกอบตางๆ ใหอยในรปของคอมโพเนนต ทเราสามารถหยบมาใชไดงายขน

การตดตง

การตดตง Node.js

Ionic จะใช Node.js ในการคอมไพลและ build โคดโปรแกรม ใหสามารถท างานรวมกบ Cordova ได นอกจากน เรายงใชค าสง npm ทมากบ Node.js ในการตดตงเฟรมเวรค และไลบรารตางๆ อกดวย ส าหรบการตดตง Node.js เรมตนใหเขาไปยงเวบไซต https://nodejs.org/en จากนนเลอกดาวนโหลดเวอรชน 8 (8.11.1) ดงภาพท 1-1

ภาพท 1-1 เวบไซตดาวนโหลด Node.js เมอดาวนโหลดแลว ใหท าการตดตงไปตามปกต โดยคลก “Next” ไปจนจบขนตอน หลงจากทตดตงเสรจเรยบรอยแลว เรามาตรวจสอบโดยใชค าสง node -v บน command prompt ดงตอไปน

ภาพท 1-2 ทดสอบค าสง Node.js

จากภาพท 1-2 เมอใชค าสง node -v ระบบกจะแสดงเวอรชนของ Node.js ทเราไดตดตงไว ซงถอวาการตดตงท าไดเรยบรอยด โดยไมมขอผดพลาด ส าหรบขนตอนตอมา เรามาตรวจสอบดวา npm ใชงานไดหรอไม โดยใชค าสง npm –v ดงภาพ 1-3

ภาพท 1-3 ทดสอบค าสง npm

การตดตง Ionic Framework เราจะมาตดตง Ionic Framework โดยใชค าสง npm ดงตอไปน npm install ionic cordova -g

โดยทค าสง npm install คอ ค าสงในการตดตงไลบรารของ Node.js สวน ionic กบ cordova จะเปนชอของไลบรารทเราตองการตดตง และสดทายออพชน -g (ยอมาจาก global) จะเปนการตดตง ทเราสามารถใชค าสง ionic หรอ cordova จากพาธใดกได ในเครองของเรา แตถาหากไมระบ กจะเปนการตดตงแบบ local ท าใหเราใชงานค าสงได เฉพาะพาธทเราตดตงเทานน

ภาพท 1-4 การตดตง Ionic Framework โดยใช npm

การสรางโปรเจกต

การสรางโปรเจกตใหม จะใชค าสงของ Ionic ซงมรปแบบการใชคอ ionic start <app name> <app type>

โดยท <app name> จะเปนชอแอพของเรา และ <app type> จะเปนรปแบบของแอพ ซงจะมให

เลอกอย 3 รปแบบดวยกน ไดแก blank แอพเปลา tabs แอพทมแทบอยดานลาง sidemenu แอพทมเมนอยดานขาง

ภาพท 1-5 หนาตาของแอพแตละประเภท ถาเราจะสรางแอพชอวา demo-app โดยก าหนดใหเปนแอพเปลา เราจะใชค าสงดงตอไปน ionic start demo-app blank

ภาพท 1-6 การสรางโปรเจกตใหม จะเหนวา ionic ไดสรางโปรเจกตใหม และสรางโฟลเดอรส าหรบโปรเจกตชอวา demo-app เกดขน

การทดสอบโปรเจกต เราสามารถทดสอบโปรเจกตไดหลายชองทาง โดยสามารถทดสอบไดบนเวบเบราเซอร, โดยใชอมเลเตอร หรอ น าไปทดสอบกบอปกรณจรง กสามารถท าไดทนทและงายดาย โดยใชค าสงผาน command line เทานน

ทดสอบบนเบราเซอร

ใหเราเขาไปยงโฟลเดอรของแอพ จากนนใชค าสง ionic serve -l เพอทดสอบการท างาน ionic serve -l

ภาพท 1-7 ค าสงทดสอบการท างานของแอพ

หลงจากนนตว development server จะเรมท างาน และเปดเบราเซอรขนมาโดยอตโนมต โดยเราสามารถเลอก platform ทตองการดไดวา จะเปนมมมองแบบใด เชน iPhone / Windows Phone หรอ Android ตามภาพท 1-8

ภาพท 1-8 หนาจอแอพของเราจากค าสง ionic serve -l เราสามารถใชค าสง ionic serve (โดยไมม -l) เพยงอยางเดยวกได ดงน ionic serve

ภาพท 1-9 ค าสงทดสอบการท างานของแอพ

การท างานของค าสงนจะคลายกบ -l เพยงแตเบราเซอรทเปดขนมา จะไมม platform ใหเราเลอกอกแลว อยางไรกตาม Chrome ม Developer Tools โดยเราสามารถเรยกปลกอนนโดยการกด Ctrl + Shift + I หรอเรยกจากเมน More tools > Developer tools กได ท าใหเราสามารถเลอก device ในการทดสอบ หรอสามารถด logs ของโปรแกรมได ผานทาง Console ตามภาพท 1-10

ภาพท 1-10 การใชงาน Developer Tools ยอนมาดท command prompt จะเหนวา development server ท างานทพอรต 8100 ซงถาหากเรามการแกไขโคดโปรแกรม ระบบกจะท าการ auto reload อตโนมต ท าใหเหนผลลพธในทนท ชวยอ านวยความสะดวกในการท างานคอนขางมาก และหากเราตองการออกจาก server กสามารถท าไดโดยกด Ctrl + C

ทดสอบบนอมเลเตอร

เราสามารถทดสอบแอพลเคชน บนสถาพแวดลอมเสมอนจรงได โดยเบองตนใหเปด emulator ขนมากอน ส าหรบหนงสอเลมนจะใช Genymotion ส าหรบทดสอบ Android เปนหลก หรอผอานจะใช emulator ทมากบโปรแกรม Android Studio กได ซงใหผลการท างานทไมตางกน

ภาพท 1-11 โปรแกรม Genymotion ส าหรบทดสอบ Android หลงจาก emulator เรมท างานแลว เราจะใชค าสง ionic cordova run android เพอสงใหแอพของเราไปท างานบน emulator ionic cordova run android

ภาพท 1-12 การรนแอพบน emulator ระบบจะท าการดาวนโหลด และตดตง Cordova ปลกอนส าหรบ Android จากนนจะเรม build แอพของเราใหอยในรปของ native ทสามารถน าไปท างานบน emulator และในเครองจรงได ซงใชเวลาประมาณ 3-4 นาท โดยจะขนอยกบความเรวของคอมพวเตอรดวย

ภาพท 1-13 แอพทท างานอยบน emulator

คณรหรอไม

หากเกด error ตามขอความน You have not accepted the license agreements of the following SDK components: [Android SDK Platform 26]. แสดงวาเรายงไมได Accept License Agreement ใหใช command prompt แลวเขามายงโฟลเดอร <PATH>\sdk\tools\bin จากนนใชค าสง sdkmanager –licenses

การทดสอบกบเครองจรง

เราสามารถทดสอบแอพจรงไดทนท โดยเรมตนใหตอสาย USB จากมอถอ เขากบเครองคอมพวเตอร จากนนในมอถอบางคาย อาจจะมการเชอมตอไฟลอตโนมตกใหตอบ “Allow” แลวใหเปด USB Debugging Mode ใหตอบ “Yes” ดวย กรณตอสายแลวอปกรณของเราไมไดแสดงสงใดๆ ออกมา เรากจะตองเขาไปเปดออพชนเหลานเอง ซงสวนใหญมกจะอยเมน Setting > Developer Options

หลงจากทเชอมตอเรยบรอยแลว ใชค าสง ionic cordova run android --device เพอตดตงแอพของเราลงในเครองจรง ดงตอไปน ionic cordova run android --device

ภาพท 1-14 ค าสงในการตดตงแอพลงในเครองจรง

คณรหรอไม?

ในกรณทไมสามารถตดตงได เรากจะท าการ deploy แอพของเราแบบ manual กลาวคอให copy ไฟล android-debug.apk จากโฟลเดอร <your app>\platforms\android\build\outputs\apk ไปไวทตวเครองอปกรณ จากนนเขาไปยงตวเครองแลวตดตงไฟล apk ตวน กจะสามารถท าไดเชนเดยวกน

การตรวจสอบขอผดพลาด

การตรวจสอบขอผดพลาด หรอการ debug โปรแกรมนน เราจะใช Chrome Developer Tools ตามทไดเกรนไวในหวขอทแลว เขามาชวยในการตรวจสอบ ซงแบงตามลกษณะการใชงานอย 2 แบบ ไดแก

การตรวจสอบบนเบราเซอร

การตรวจสอบบนเบราเซอร สามารถดผลลพธการท างานผาน Console หรอ Logs ทออกมาจากระบบ ไดทนท อกทงสามารถตรวจสอบการเชอมตอตางๆ ในแทบ Network ได ตามภาพท 1-15

ภาพท 1-15 การตรวจสอบขอผดพลาดบนเบราเซอร

การตรวจสอบบนอมเลเตอร หรออปกรณจรง

การตรวจสอบบนอมเลเตอร อปกรณจรง ท าใหยากกวา เนองจากไมมสงทเปนสาเหตของความผดพลาด หรอไมม logs ใหเราไดด อยางไรกตามจากความสามารถของ Chrome ท าใหเราสามารถทจะ Inspect เขามายงเครองมอถอของเราได โดยพมพยอารแอล chrome://inspect ดงตอไปน

ภาพท 1-16 การ Inspect เขาเครองมอถอโดยใช Chrome จากภาพท 1-16 ใหเราคลกท “Inspect” จากนนเรากจะเหน Logs และการเชอมตอ Networks ตางๆ ทมาจากเครองมอถอของเราได ตามภาพท 1-17

ภาพท 1-17 การตรวจสอบ logs ทมาจากเครองจรง

เทกซอดเตอร

Visual Studio Code (หรอ VSCode) เปนเทกซอดเตอรส าหรบใชเขยนโปรแกรม ซงชวยใหเราเขยนโคดไดสะดวก และอานงายมากยงขน ซงหากผเรยนถนดใชอดเตอรคายอนๆ กสามารถใชได แตในหนงสอเลมนจะใช VSCode เนองจากมนรองรบการเขยน TypeScript อกทงมน าหนกเบา มปลกอนอยมากมาย ทชวยใหเราเขยนโคดไดเรวขน รองรบการพมพภาษาไทย และสามารถดาวนโหลดมาใชไดฟร ท https://code.visualstudio.com

ภาพท 1-18 เวบไซตดาวนโหลด Visual Studio Code หลงจากดาวนโหลดแลว ใหด าเนนการตดตงโปรแกรมลงในเครอง จากนนใหเปดโปรแกรม VSCode ขนมา แลวเรมการตดตงปลกอน โดยชอปลกอนทเราจะตดตง พรอมค าอธบาย แสดงอยในตารางท 1-1 ตารางท 1-1 ปลกอนทตดตงใน Visual Studio Code ปลกอน ผพฒนา รายละเอยด Angular 6 Snippets Michael Morlund ชวยในการพมพค าสงของ Angular2, 4 หรอ 5

Npm Intellisense Christian Kohler ชวยในการเขยน Import เพอเรยกใชโมดล Path Intellisense Christian Kohler ชวยในการแสดงพาธ ของของไฟลหรอโฟลเดอร

ในรปแบบ Auto Complete

JavaScript (ES6) Code Snippets

Charalampos Karypidis ชวยในการเขยน Syntax ของ JavaScript ในแบบของ ES6

ขนตอนในการตดตงปลกอน จากภาพ 1-19 ใหคลกทไอคอนหมายเลข (1) เพอเขามายงหนาจอการตดตง จากนนพมพชอปลกอนทตองการคนหาในชองหมายเลข (2) เมอคนพบปลกอนแลว จงคลกทชอปลกอนตามหมายเลข (3) และคลกท “Install” หมายเลข (4) เพอด าเนนการตดตงตอไป

ภาพท 1-14 ขนตอนการตดตงปลกอนบน Visual Studio Code จากนนคลกท File > Preferences > Settings หรอกด Ctrl + Comma จะเหนหนาจอ Settings ใหเราเพม "editor.formatOnType": true และ "editor.formatOnSave": true เพอสงใหโปรแกรม จดรปแบบของโคดโปรแกรมอตโนมต เมอเรา Save ไฟล settings.json

"editor.formatOnSave": true,

"editor.formatOnType": true,

โครงสรางของโปรเจกต

ใช Visual Studio Code เปดโปรเจกตขนมาโดยเลอกเมน File > Open หรอใชค าสง code . จากนนจะเหนโครงสรางไฟลและโฟลเดอรตางๆ ปรากฏขนมาดงน

ภาพท 1-15 โครงสรางไฟลทเปดดวย Visual Studio Code ตารางท 1-2 โครงสรางโฟลเดอรของ Ionic โฟลเดอร หนาท

src เกบ source code ของเรา platforms เกบไฟล ไลบราร ทเปน native ส าหรบการท าไปใชงานทง IOS และ Android

plugins เกบปลกอนตางๆ ของ Cordova node_modules เกบแพคเกจ และไลบรารตางๆ ทเกดจากการใชค าสง npm ซงจะถกระบอยในไฟล

config.json

www เปนโฟลเดอรของแอพทถก build เรยบรอยแลว resources เกบ resources ตางๆ ทใชในแอพของเรา เชน splash screen และ icon เปนตน

ตารางท 1-3 หนาทของไฟลตางๆ ของ Ionic ไฟล หนาท

config.xml เปนไฟลทบอกรายละเอยดของแอพ เชน ชอแอพ ชอแพคเกจ เปนตน ซงจะถกใชโดย Cordova เมอถงชวงเวลาทตอง build ใหเปน apk ไฟล

tsconfig.json ไฟล config ส าหรบ TypeScript เปนตวก าหนดวาจะให compile เปน JavaScript ในเวอรชนใด

package.json ไฟลเกบรายละเอยดของแพคเกจ และไลบรารตางๆ และจะถกตดตงเมอใชค าสง npm

src/index.html เปนไฟลหลกทแสดงหนาจอและคอมโพเนนของแอพ ซงจะถกเขยนอยในแทก <ion-app></ion-app>

src/app/app.component.ts เปนไฟลทเปน root component ของแอพ src/app/app.module.ts เปนไฟลส าหรบใชโหลดโมดล และคอมโพเนนททงหมดของโปรเจกต

สรปทายบท ในบทนเราไดเรยนรเกยวกบการจดเตรยมสงตางๆ ส าหรบการพฒนาแอพลเคชนดวย Ionic โดยเรมจากการกลาวถงทมาของ Ionic, การตดตงเครองมอ, การตดตงเฟรมเวรค, การสรางโปรเจกตใหม, วธการตรวจสอบขอผดพลาดเบองตน รวมไปถงวธทดสอบการท างานของแอพลเคชนในแบบตางๆ นอกจากน เรายงแนะน าการใชงานเทกซอดเตอร และปลกอนสวนเสรมตางๆ เพอชวยใหการเขยนโปรแกรมสะดวกมากยงขน และทายบทไดอธบายถงโครงสราง หนาทของไฟลตางๆ ทใชในโปรเจกตของเรา

บทท 14 การตดตงแอพลเคชน

ในบทนเนอหาไมยาวมากนก โดยจะกลาวถงการจดเตรยมสงตางๆ ส าหรบการตดตงแอพลเคชน ผอานจะไดเรยนรการตงคา Bundle ID, การจดเตรยมรปภาพ Splash และ Icon, การตดตงแอพลงใน Android และการตดตงแอพลงในเครองทเปน IOS โดยในทน จะไมไดกลาวถงวธการน าแอพลเคชนขนไปไวใน AppStore เนองจากใชหลกการเดยวกนกบแอพทเปนแบบ native ซงผอานสามารถศกษาเพมเตม ไดจากหนงสอหรอ วดโอทมเนอหาดงกลาว ซงมอยเปนจ านวนมาก

การตงคา Bundle ID เราจะมาตงคาชอแพคเกจ และชอของแอพ หรออาจจะเรยกวาเปนการตงคา bundle ID กได ซง ID ทเราก าหนดควรจะก าหนดใหไมซ ากบแอพอนๆ เพราะเวลาทเราตดตงลงใน AppStore มนจะใชคานในการอางอง ซงหากมผใชอยแลว เราจะไมสามารถตดตงแอพนลงไปได

การตงคา bundle ท าไดโดยแกไขไฟล config.xml จากนนแกไขในสวนของ widget id และ name ดงตวอยางตอไปน config.xml

<widget id="io.ionic.parkingapp">

<name>ParkingApp</name> ...

จากโคดขางบน เราจะใชชอ widget id เปน “io.ionic.parkingapp” และ name จะเปน “ParkingApp”

การจดเตรยม Splash และ Icon เราจะมาจดเตรยมรปภาพเพอท า splash screen ซงจะเปนรปภาพพนหลง ในขณะทแอพลเคชนก าลงโหลด และจดเตรยมรปภาพส าหรบท าไอคอนของ Parking App ของเราอกดวย ขนตอนการจดเตรยมเรมจาก สมครเปนสมาชกเวบไซตของ Ionic, การเตรยมรปภาพ splash, การเตรยมรปภาพ icon และการใชค าสงเพอสราง resource

การสมครสมาชก Ionic เวบไซต

ในขนตอนแรกเราจะตองสมครสมาชกของเวบไซต Ionic กอน เนองจากค าสงทใชในการสราง resource ตองใช email และ password ของสมาชกเทานน จงจะใชงานได ขนตอนการสมครใหลงคไปยงเวบไซต https://dashboard.ionicframework.com/signup จากนนกรอกขอมลของทานลงไป ดงภาพท 14-1

ภาพท 14-1 ขนตอนการสมครสมาชกเวบไซต Ionic หลงจากสมครแลว ใหลอกอนเขาสระบบ แลวท าการยนยนตวตนทางอเมล กเปนอนเสรจสน

การเตรยมรปภาพ Splash

รปภาพส าหรบท า splash จะเปนไฟลชอ splash.png เกบอยในโฟลเดอร resources ซงมขนาดอยท

2732 x 2732 พกเซล หากเราตองการเปลยนรปภาพดงกลาว ใหเราใชโปรแกรมตกแตงรป เชน Photoshop สรางรปใหมทมขนาดเทากน และบนทกไวแทนทไฟลเดม ดงภาพ 14-2

ภาพท 14-2 การสรางรปภาพ Splash ดวย Photoshop

การเตรยมรปภาพ Icon การเตรยมรปภาพ Icon กเชนเดยวกน ซงจะเปนไฟลชอ icon.png เกบอยในโฟลเดอร resources โดยมขนาด 1024 x 1024 พกเซล ใหเราสรางรปภาพขนมาใหม จากนนบนทกทบลงไปในไฟลเดม โดยใชโปรแกรม Photoshop ดงภาพ 14-3

ภาพท 14-3 การเตรยมรปภาพ Icon ดวย Photoshop ถงตอนนในโฟลเดอร resources ของเราจะมรปภาพใหมอย 2 รป

ภาพท 14-4 รปภาพ splash และ icon ของแอพเรา

การสราง resource โดยใชค าสง หลงจากทสมครสมาชก และสรางรปภาพตางๆ เปนทเรยบรอยแลว ในขนตอนถดมาเราจะใชค าสง ionic cordova resources เพอสราง resource ซงจะท าใหโฟลเดอร resources/android และ resources/ios เปลยนรปภาพ มาเปนภาพใหมของเราทงหมด ionic cordova resources

? Email: <อเมลททานสมครสมาชกไว> ? Password: <รหสผาน> √ Collecting resource configuration and source images - done! √ Filtering out image resources that do not need regeneration - done! √ Uploading source images to prepare for transformations - done! √ Modifying config.xml to add new image resources - done!

เมอใชค าสงเรยบรอยแลว ระบบจะ generate รปภาพใหเราโดยอตโนมต ทงโฟลเดอร resources/android และ resources/ios จะมรปใหมของเราเขาไปแทนท ซงมขนาดทแตกตางกน ดงภาพ 14-5

ภาพท 14-5 รปไอคอนทเกดจากการใชค าสง generate ออกมา จากนนทดสอบโดยการตดตงลงในเครองจรง จะเหนวาไอคอน และรปภาพในขณะทโหลดแอพ มการเปลยนแปลงมาใชรปใหมของเรา ซงแสดงดงภาพ 14-6

ภาพท 14-6 ทดสอบการเปลยน icon และ splash screen

การตดตงลงใน Android การตดตงแอพลงใน Android จะท าคอนขางงาย โดยน าไฟล .apk ไปไวยงเครองปลายทางทตองการ จากนนเปดไฟลขนมาเพอตดตง เทานกเสรจเรยบรอย ซงวธสรางไฟล apk จะใชสองค าสง ดงตอไปน ionic cordova clean android

ionic cordova build android

จากนนจะเกดไฟลขนมา โดยจะอยทโฟลเดอร <YOUR PROJECT>\platforms\android\app\build\outputs\apk\debug ดงภาพท 14-7

ภาพท 14-7 ไฟล apk ทไดจากการ build เมอจะตดตงให rename ไฟลดงกลาว โดยอาจจะเปลยนเปน parking-app.apk จากนนจงน าไปวางไวในเครองปลายทาง แลวท าการเปดไฟลดงกลาวเพอตดตงตอไป

การตดตงลงใน IOS การตดตงแอพลเคชนลงในเครองทเปน IOS เราจะตองท าผานเครองทม MacOS เทานน ซงขนตอนในการตดตง คอนขางจะมความซบซอนพอสมควรส าหรบมอไหม ผเขยนขออธบายขนตอนการตดตง เพอเปนแนวทางโดยสรป ดงตอไปน

1. ตรวจสอบโปรแกรม XCode ในเครอง Mac ซงจะตองเปนเวอรชน 7.0 ขนไป สาเหตทตองเปนเวอรชนดงกลาว เนองจากสามารถใช Apple ID แบบฟรได นอกจากนยงรองรบระบบปฏบตการ IOS รนปจจบนไดอกดวย ซงการตรวจสอบสามารถเขาไปท Xcode > About XCode

2. ไปทเมน XCode > Preferences จากนนไปท Tab ชอวา Accounts คลกทปมเพม (+) จากนนเลอก Apple ID เพอเพม account ทเราสมคร (ตองสมคร Apple ID มากอน ซงสมครไดฟร ไมเสยคาใชจาย)

กรอกรหส Apple ID และ Password ตามภาพ จากนนคลกทปม “Next”

3. ตอสาย USB ของมอถอ iPhone กบเครอง Mac จากนน หากโปรแกรมถามวาจะให Access เขาเครองไดหรอไม ใหเราตอบ “Allow” เพอใหสามารถน าแอพ ไปตดตงในเครอ iPhone ของเราไดโดยอตโนมต

4. กลบมาท Parking App ของเราใหใชค าสง ionic cordova run ios เพอ compile และ run โปรเจกต

ทเปนแอพของเรา และเมอ run ผาน เราจะเหน iPhone อมเลเตอรเรมท างาน และจะสรางโฟลเดอร platforms/ios เกดขน

5. จากนนเขาไปทโฟลเดอร <YOUR PROJECT>/platforms/ios จะเหนไฟล ParkingApp.xcodeproj

ปรากฏขน ใหท าการดบเบลคลกทไฟลดงกลาว เพอเปดโปรแกรม XCode ขนมา ส าหรบเปนเครองมอทใช build ลงใน iPhone เครองจรง

6. เมอเปดโปรเจกต XCode ของเราขนมาแลว ใหตงคาตางๆ ดงตอไปน

ภาพท 14-10 การตงคา XCode กอนทจะ build ลงเครองจรง

จากภาพท 10-14 ใหเราเลอกตงคา ไดแก

▪ หมายเลข 1 จะเปนเครองปลายทาง ใหเลอกชอเครองของทาน หรอเลอกอมเลเตอร

▪ หมายเลข 2 ก าหนดชอจอง App และ Bundle ID ใหใชชอเดมทเราตงไวตงแตตน ▪ หมายเลข 3 จะเปน Siging Team ใหเลอก account ของเราทสมคร Apple ID เอาไว ▪ หมายเลข 4 จะเปน Deployment info ใหเลอก Target เปน 9.0 หรอเวอรชนใดๆ กไดทเครอง

iPhone ของทานรองรบ จากนนเมอกรอกขอมลเรยบรอยแลว ใหคลกทปมสามเหลยม (Play) จากทลบารขางบน เพอสงให build และ deploy ลงสเครองจรง

1

2

3

4

7. เมอ build ผาน ระบบจะท าการตดตงแอพลเคชนลงในเครอง iPhone โดยอตโนมต และเมอตดตงเสรจเรยบรอยแลว เราจะยงไมสามารถเปดแอพขนมาท างานไดทนท เนองจากตดปญหาในเรอง security ของเครอง iPhone นนๆ ซงวธแกไขตองไปเปดสทธเพอ Trust App ของเรากอน โดยเขาไปยงเมน Settings > General > Device management แลวจงเลอก Trust App

8. จากนนสามารถทจะเปดแอพ เพอใชงานไดตามปกต ซงแสดงดงภาพท 14-11 ซงเปนแอพทตดตงลงใน

เครอง iPhone ของผเขยนเอง

ภาพท 14-11 แอพทตดตงอยในเครอง iPhone

สรปทายบท ในบทนผอานจะไดเรยนรการจดเตรยมสงตางๆ เพอการตดตง โดยไดเรยนรการก าหนดคา Bundle ID เพอก าหนดแพคเกจของเราให unique หรอไมซ ากบแอพลเคชนอนๆ จากนนเราไดจดเตรยมรปภาพ ส าหรบการท า Splash screen และ Icon ของแอพ และใชค าสงในการสราง resources ใหมทงหมด จนไดรปภาพตางๆ ทพรอมใชงานได ส าหรบในหวขอสดทาย เราจะมาตดตง Parking App บนระบบ Android และใช XCode เพอตดตงลงในเครอง iPhone บนระบบ IOS

Workshop

ลอกอน

คนหาทจอดรถ

รายละเอยดทจอดรถ

เพม/แชรทจอดรถ

มมมองแบบแผนท

ตงคา/สมครรบขาวสาร

เกยวกบผเขยน

นายเอกสทธ ศรสขะ

การศกษา ▪ วศวกรรมศาสตรมหาบณฑต (วศ.ม.), วศวกรรมคอมพวเตอร, มหาวทยาลยเกษตรศาสตร ▪ อตสาหกรรมศาสตรบณทต (อส.บ.), เทคโนโลยสารสนเทศเพออตสาหกรรม, มหาวทยาลยเทคโนโลยพระ

จอมเกลาพระนครเหนอ

การท างาน ▪ Software Engineer, บรษท FICO จ ากด: ใหบรการดานการผลตซอฟทแวรระบบ Commerce

Marketing Platform ▪ Technical Consultant, บรษท Comm-IT จ ากด: ใหบรการดาน Asset Management Software

(Maximo) ส าหรบโรงงานอตสาหกรรม ▪ Technical Consultant, บรษท Convergence Team จ ากด: ใหบรการดาน Asset Management

Software (Maximo) ส าหรบโรงงานอตสาหกรรม ▪ System Analyst, บรษท Insource Asia จ ากด: ใหบรการดานโซลชนดานการจองโรงแรม จองทพก

ทงในประเทศไทยและตางประเทศ ▪ System Analyst, บรษท Toptier Solutions จ ากด: ใหบรการดานซอฟทแวรส าหรบองคกร,

ซอฟทแวรกระบวนการผลตในงานอตสาหรรม, และเอาตซอรส ▪ Software Developer, บรษท พนธวณช จ ากด: ใหบรการดาน E-Procurement / E-Auction ภาครฐ

และภาคเอกชน รวมไปถงการขายสนคาออนไลน

ผลงาน ▪ Code Excellent ผกอตงเวบไซต ใหบรการดานฝกอบรมทงภายในและนอกองคกร ▪ PosPax ระบบ Point of Sale ทท างานบนคลาวด ส าหรบธรกจ retail ขนาดเลก ▪ Maximo Customization งาน customize ซอฟทแวร Maximo ใหองคกรอาทเชน Glow, Gulf,

Ethernal Rasin, Pimai Salt และ Bestlin ▪ PTVN Auction ระบบประมลออนไลน ทงภาครฐและเอกชน ▪ PTVN EBD ระบบ e-Procurement ส าหรบองคกร ▪ True Web Ordering ระบบ shopping cart ซอขายอปกรณโทรศพทระหวางดลเลอร

▪ Thai Language Specific Web Crawler (Link) งานวจยเวบสไปเดอรส าหรบเกบรวบรวมเวบไซตภาษาไทย

▪ Extract Transform Load:ETL (ซอฟทแวรภายใน) ส าหรบยายและแปลงรปแบบขอมลขนาดใหญ ส าหรบธรกจประกนภย

งานฝกอบรม ▪ วทยากรอบรม Build Geolocation App with Ionic Framework3 (GISTNU) ▪ วทยากรอบรม Basic Python Programming (Siam Compressor) ▪ วทยากรอบรม (In House) PHP + MySQL & Laravel 5.6 Web Development (Kongkiat) ▪ วทยากรอบรม (In House) Build Cross Platform Mobile App with Ionic3 (Kongkiat) ▪ วทยากรอบรม (In House) Java Customization for Maximo (Glow) ▪ วทยากรอบรม (In House) Reporting with BIRT (Glow)

▪ วทยากรอบรม (In House) การสรางโมบายแอพลเคชนดวย IOS และ Android (Toptier) ▪ วทยากรอบรม Java Web Service (G351) ▪ ผชวยวทยากรอบรม Software Testing with Selenium (DST) ▪ ผชวยวทยากรอบรม Version Control (มหาวทยาลยเกษตรศาสตร) ▪ ผชวยวทยากรอบรม Fundamental Java Programming (มหาวทยาลยเกษตรศาสตร) ▪ ผชวยวทยากรอบรม Basic Linux Command (มหาวทยาลยเกษตรศาสตร)

Copy protected with PDF-No-Copy.com