การพฒนา Hybrid Mobile Application

ดวย Ionic Framework

วชาญ ทมทอง

บรษท ฟรมายด พบลชชง จ ากด

27/33 ซอยศรบ ำเพญ ถนนพระรำม 4 แขวงทงมหำเมฆ เขตสำธร กรงเทพฯ

โทรศพท 0-2286-2414 โทรสำร 0-2286-2417

(1)

Reviewer

The book is a practical and helpful introduction for software programmers who

want to develop mobile and hybrid applications with the Ionic framework. It is an

excellent resource to students, educators, and professionals.

Starting with the installation, the author shows and explains detailed

programming examples. Different aspects like navigation are covered, so that the reader

is able to create complete mobile apps.

The author is a proven expert in software development. This book proves that

he is also an excellent didactician. I would recommend this introduction for students

who want to get familiar with modern mobile application development, teachers who

want to use it for lab exercises, and practitioners who are involved in mobile app

programming.

Prof.Dr.rer.nat.Roland J.Petrasch

Visiting Professor for Software Engineering

Department of Computer Science

Faculty of Science and Technology, Thammasat University.

(2)

ค านยม

Ionic Framework เปนเทคโนโลยใหมในกำรพฒนำโปรแกรมส ำหรบโมบำย ซงมขอดหลำย

อยำง เชน ใชงำนงำย ใชไดทง iOS และ Android ออกแบบส ำหรบผ ใชงำนไดสวยงำมนำใช

ประสทธภำพสง และเปนทแพรหลำย ปจจบนมองคกรตำง ๆ ไดน ำมำใชในกำรพฒนำซอฟตแวร

จ ำนวนมำก หนงสอ “กำรพฒนำ Hybrid Mobile Application ดวย Ionic Framework” โดยอำจำย

วชำญ ทมทอง ผเขยนไดวำงโครงสรำงใหตดตำมงำย ประหยดเวลำกำรเรยนร จงเปนหนงสอทเหมำะ

ส ำหรบนกพฒนำโปรแกรม ทตองกำรเรมตนอยำงรวดเรว

รศ.ดร.พยง มสจ

คณบดคณะเทคโนโลยสำรสนเทศ

มหำวทยำลยเทคโนโลยพระจอมเกลำพระนครเหนอ

ชวงหลำยปทผำนมำแพลตฟอรมของกำรพฒนำโมบำยแอพพลเคชนตอนนอยท Web, iOS

และ Android และหำกกลำวถง Hybrid Mobile Application ทสำมำรถท ำงำนไดทงบนแพลตฟอรม

iOS และ Android และเฟรมเวรคท ไดรบควำมนยมในขณะนกคอ Ionic Framework ถอเปน

เฟรมเวรคส ำหรบกำรพฒนำโมบำยแอพพลเคชนแบบ Hybrid ทไดรบกำรยอมรบจำกบรษทชนน ำและ

องคกรดำนไอท หนงสอเลมน ผเขยนไดตงใจเปนอยำงยงทตองกำรใหผสนใจกำรพฒนำ Hybrid

Mobile Application เหนจดเดนของกำรใช Ionic Framework ทมเครองมอทอ ำนวยควำมสะดวก

และใชงำนงำย และสำมำรถน ำไปประยกตใชงำนจรงไดตอไป

ผศ.ปฏคม ทองจรง

คณบดคณะวทยำกำรคอมพวเตอรและเทคโนโลยสำรสนเทศ

มหำวทยำลยรำชภฏร ำไพพรรณ

“

“

”

”

(3)

ค าน า

รปแบบกำรเขำใชงำนแอปพลเคชนในปจจบนไดรบควำมนยมเปนอยำงมำก ซงเกดจำกกำร

รวมตวกนของเทคโนโลย ทงเทคโนโลยคอมพวเตอร และเทคโนโลยโทรคมนำคม ซงกอใหเกดประโยชน

หลำกหลำยในกำรตดตอสอสำรแลกเปลยนขอมล ซงในปจจบนอปกรณทใชมขนำดเลกลง ประมวลผล

ไดเรวขน จดเกบขอมลไดเยอะขน เชอมตอผำนระบบเครอข ำยและสอสำรกนอยำงไรพรหมแดน

ดวยเทคโนโลยทกำวหนำอยำงรวดเรว และแอปพลเคชนบนอปกรณเคลอนททก ำลงเปนทนยมและ

เขำมำมบทบำทในชวตประจ ำวน นกพฒนำจงจะตองมกำรศกษำหำควำมรเพอให เกดกำรพฒนำทง

ตวเอง ควำมร และงำนทสำมำรถสนองตอบตอควำมตองกำรของผใชงำนในปจจบน

ในหนงสอเลมน ไดกลำวถงขนตอนในกำรพฒนำแอปพลเคชนในรปแบบของไฮบรดจ ซงเปน

กำรใชพนฐำนและตอยอดองคควำมรของนกพฒนำเวบแอปพลเคชน เพอใหไดผลงำนทรองรบกำร

ใชงำนของผใช และเขำถงกลมเปำหมำยไดอยำงทวถง ซงเนอหำทบรรยำยไวในหนงสอเลมนประกอบ

ไปดวย พนฐำน Ionic Framework กำรเตรยมเครองมอส ำหรบพฒนำแอปพลเคชน พนฐำน Angular,

TypeScript และ Sass กำรตดตงและพนฐำนกำรใชงำน Ionic Framework กำรเรยกใชงำนสวน

ประสำนงำนกบผใช กำรสรำงเพจใหมและกำรเชอมโยงขอมลระหวำงเพจ กำรจดกำรขอมลภำยใน

แอปพลเคชน กำรเชอมโยงขอมล JSON จำก Web APIs กำรเปด Web API โดยใช Slim Framework

กำรจดกำรขอมลภำยในอปกรณดวย Ionic Storage กำรจดกำรฐำนขอมล SQLite และพนฐำน

กำรสงออกแอปพลเคชนและกำรเตรยมไฟลกอนกำรอปโหลดขนสโตร ซงเปนเนอหำทจะเปนพนฐำน

ใหผพฒนำไดศกษำและพฒนำแอปพลเคชนในชนสงตอไป

ผเขยนขอขอบพระคณผทเกยวของทก ๆ ทำน ทงเจำของหนงสอ ต ำรำ ทใหผเขยนไดศกษำ

หำควำมรประกอบหนงสอเลมน ผเขยนหวงเปนอยำงยงวำหนงสอเลมนจะเปนประโยชนตอนกเรยน

นกศกษำ รวมไปถงผสนใจทวไป ไมมำกกนอย และหำกมอะไรทขำดตกบกพรองอนเกดจำกควำมเขลำ

เบำปญญำของผเขยนเอง ทำงผเขยนพรอมนอมรบ และขอกรำบขออภยมำ ณ โอกำสน

วชำญ ทมทอง

E-mail: wichan.t@rbru.ac.th

(4)

แหลงดาวนโหลดซอฟตแวร

ผอำนสำมำรถดำวนโหลดซอฟตแวรและตดตงเพอใชงำน ส ำหรบกำรพฒนำแอปพลเคชนบน

อปกรณเคลอนทตำมหนงสอเลมน รวมไปถงรหสค ำสงตนฉบบทเปนตวอยำงในกำรพฒนำแอปพลเคชน

ไดจำกตำรำงรวมยอำรแอลดงตอไปน

รวมยอารแอลส าหรบดาวนโหลดซอฟตแวร

ล าดบ ชอซอฟตแวร ยอารแอล

1 NodeJS https://nodejs.org/

2 Git https://git-scm.com/

3 Visual Studio Code https://code.visualstudio.com/

4 Ionic Framework https://ionicframework.com/

5 Composer https://getcomposer.org/

6 XAMPP https://www.apachefriends.org/index.html

7 Slim Framework https://www.slimframework.com/

8 Android Studio https://developer.android.com/studio/index.html

9 Xcode https://developer.apple.com/xcode/

รวมยอารแอลส าหรบดาวนโหลดตวอยางแอปพลเคชน

ล าดบ บทท ชอแอปพลเคชน ยอารแอล

1 6,7 myFirstApp https://github.com/chankmit/myFirstApp

2 8,12 appNews https://github.com/chankmit/appNews

3 9 myAPI https://github.com/chankmit/myAPI

4 10 appStorage https://github.com/chankmit/appStorage

5 10 AcivityList https://github.com/chankmit/ActivityList

6 11 myMoney ** https://github.com/chankmit/myMoney

หมายเหต : แอปพลเคชน myMoney จะตองรนบน Emulator หรอ อปกรณจรงเทำนน

(5)

สารบญ

หนำท

Reviewer ................................................................................................................................... (1)

ค านยม ........................................................................................................................................ (2)

ค าน า .......................................................................................................................................... (3)

แหลงดาวนโหลดซอฟตแวร ........................................................................................................ (4)

สารบญ ....................................................................................................................................... (5)

บทท 1 พนฐาน Ionic Framework ............................................................................................ 1

ประเภทของโมบำยแอปพลเคชน ........................................................................................... 2

รปแบบกำรท ำงำนของไฮบรดจแอปพลเคชน ......................................................................... 3

รจกกบ Adobe PhoneGap และ Apache Cordova .......................................................... 4

รจกกบ Ionic Framework .................................................................................................... 5

ขอดของ Ionic Framework .................................................................................................. 6

กำรท ำงำนของ Ionic Framework ........................................................................................ 8

โปรแกรม Text Editor ส ำหรบพฒนำแอปพลเคชน .............................................................. 9

กำรตดตง Git ....................................................................................................................... 10

กำรตรวจสอบเวอรชนของ Git ............................................................................................. 15

สรป ...................................................................................................................................... 15

บทท 2 การเตรยมเครองมอส าหรบพฒนาแอปพลเคชน ............................................................ 17

รจกกบ Node.js................................................................................................................... 18

รจกกบค ำสง npm ............................................................................................................... 18

ประโยชนของค ำสง npm ..................................................................................................... 20

ค ำสงพนฐำนส ำหรบ npm ................................................................................................... 20

กำรตดตง Node.js ............................................................................................................... 21

กำรตรวจสอบเวอรชนของ Node.js และ npm ................................................................... 24

กำรตดตง Visual Studio Code.......................................................................................... 25

กำรตดตง Extension ใหกบ Visual Studio Code ............................................................ 28

กำรจดเตรยมเครองมออน ๆ ................................................................................................ 29

สรป ...................................................................................................................................... 32

(6)

สารบญ (ตอ)

หนำท

บทท 3 พนฐาน Angular, TypeScript และ Sass ................................................................. 33

รจกกบ Angular .................................................................................................................. 34

รจกกบ Angular Module .................................................................................................. 35

รจกกบ Angular Directives ............................................................................................... 36

รจกกบ Angular Model .................................................................................................... 37

รจกกบ Angular Data Binding ......................................................................................... 38

รจกกบ Angular Controllers ............................................................................................ 38

รจกกบ Angular Scope ..................................................................................................... 39

รจกกบ Angular Filters ..................................................................................................... 40

รจกกบ Angular Services ................................................................................................. 42

รจกกบ Angular Http ........................................................................................................ 43

รจกกบ TypeScript ............................................................................................................ 44

ชนดขอมลพนฐำนใน TypeScript ....................................................................................... 45

รจกกบ Sass ........................................................................................................................ 45

กำรใชงำน Sass ................................................................................................................... 46

สรป ..................................................................................................................................... 48

บทท 4 การตดตงและพนฐานการใชงาน Ionic Framework ................................................... 49

กำรตดตง Cordova และ Ionic .......................................................................................... 50

กำรเรมตนสรำงโปรเจกตใหม .............................................................................................. 52

กำรเพมแพลตฟอรม ............................................................................................................ 54

กำรทดสอบแอปพลเคชน ..................................................................................................... 55

กำรทดสอบแอปพลเคชนผำนเบรำวเซอร ............................................................................ 56

กำรทดสอบแอปพลเคชนผำนอปกรณจรง ........................................................................... 59

กำรทดสอบแอปพลเคชนผำน Emulator ............................................................................ 60

กำรเปดไฟลโปรเจกต ........................................................................................................... 60

กำรเปด Terminal ส ำหรบปอนค ำสง ................................................................................. 62

โครงสรำงไฟลและโฟลเดอร ................................................................................................. 63

(7)

สารบญ (ตอ)

หนำท

สรป ...................................................................................................................................... 64

บทท 5 การเรยกใชงานสวนประสานงานกบผใช ....................................................................... 65

รจกกบ Components ........................................................................................................ 66

กำรใชงำน Buttons ............................................................................................................. 67

กำรใชงำน Cards ................................................................................................................. 70

กำรใชงำน Grid .................................................................................................................... 75

กำรใชงำน Icons .................................................................................................................. 77

กำรใชงำน Lists ................................................................................................................... 78

สรป ...................................................................................................................................... 85

บทท 6 การสรางเพจใหมและการเชอมโยงขอมลระหวางเพจ ................................................... 87

กำรวำงแผนพฒนำแอปพลเคชน .......................................................................................... 88

เรมตนสรำงโปรเจกตใหม ..................................................................................................... 90

กำรแกไขหนำหลกของแอปพลเคชน .................................................................................... 93

กำรสรำงเพจใหม .................................................................................................................. 96

กำร Import เพจใหม ........................................................................................................... 97

กำรเชอมโยงระหวำงเพจ ...................................................................................................... 97

กำรแทรกภำพจำกภำยในแอปพลเคชน ............................................................................. 100

กำรเปลยนเพจเปนเพจหลก .............................................................................................. 101

กำรสงขอมลระหวำงเพจ ................................................................................................... 101

กำรดำวนโหลดรหสค ำสงตวอยำงแอปพลเคชน ................................................................. 103

สรป ................................................................................................................................... 104

บทท 7 การจดการขอมลภายในแอปพลเคชน ......................................................................... 105

กำรเตรยมเพจส ำหรบกำรแสดงผลขอมล .......................................................................... 106

กำรเตรยมขอมลส ำหรบแสดงผลในหนำเพจ ..................................................................... 107

กำรวนรอบแสดงผลขอมล ................................................................................................. 109

กำรเตรยมเพจส ำหรบแสดงภำพสไลด ............................................................................... 110

กำรเตรยมขอมลส ำหรบแสดงภำพสไลด ............................................................................ 112

(8)

สารบญ (ตอ)

หนำท

กำรวนรอบกำรแสดงผลภำพสไลด ..................................................................................... 113

รจกกบ Provider .............................................................................................................. 114

กำรสรำง Provider ส ำหรบจดเกบขอมลภำยในแอปพลเคชน .......................................... 115

กำรเตรยมขอมลใหกบ Provider ....................................................................................... 116

กำรสรำงฟงกชนสงคำขอมลใน Provider แบบ Promise ................................................. 117

กำรแสดงผลขอมลจำก Provider ...................................................................................... 117

กำรสงผำนขอมลจำก Provider ........................................................................................ 120

กำรรบคำและกำรเลอกขอมลจำก Provider ..................................................................... 122

สรป ................................................................................................................................... 125

บทท 8 การเชอมโยงขอมล JSON จาก Web APIs ................................................................ 127

รจกกบ JSON และ REST API .......................................................................................... 128

กำรเพม JSON Viewer Extension ใน Google Chrome .............................................. 129

กำรสรำงโปรเจกตใหมแบบ Tabs...................................................................................... 130

กำรปรบเปลยนเมนหลก .................................................................................................... 132

กำรรองขอขอมล JSON จำก Web API มำแสดงในหนำเพจ ............................................ 135

กำรสงผำนขอมลจำก JSON ไปยงเพจอน ......................................................................... 138

กำรรบคำตวแปรและแสดงผลขอมล .................................................................................. 140

กำรดำวนโหลดรหสค ำสงตวอยำงแอปพลเคชน ................................................................. 141

สรป ................................................................................................................................... 142

บทท 9 การเปด Web API โดยใช Slim Framework ........................................................... 143

รจกกบ Slim Framework ................................................................................................ 144

รจกกบ XAMPP ................................................................................................................ 145

กำรเปดใชงำน XAMPP ..................................................................................................... 148

กำรสรำงโลคอลไซตใน XAMPP ........................................................................................ 150

รจกกบ Composer .......................................................................................................... 151

กำรดำวนโหลดและตดตง Composer .............................................................................. 151

กำรตดตง Slim Framework ............................................................................................ 153

(9)

สารบญ (ตอ)

หนำท

กำรเปดไฟลโปรเจกต Slim ............................................................................................... 154

กำรสรำง URL Routing โดยใช Get Request ................................................................. 155

กำรสงออกขอมลเปน JSON .............................................................................................. 157

กำรสงออกขอมล JSON จำกฐำนขอมล MySQL .............................................................. 158

กำรสงคำ JSON จำกฐำนขอมล MySQL โดยใชภำษำพเอชพ .......................................... 161

สรป ................................................................................................................................... 162

บทท 10 การจดการขอมลภายในอปกรณดวย Ionic Storage .................................................. 163

รจกกบ Local Storage .................................................................................................... 164

กำรใชงำน Ionic Storage ................................................................................................. 164

กำรก ำหนดคำขอมลแบบ Key/Value .............................................................................. 166

กำรแสดงผลขอมลแบบ Key/Value ................................................................................. 168

กำรยกเลกคำขอมลแบบ Key/Value ................................................................................ 169

ตวอยำงกำรสรำงแอปพลเคชน Activitylist ...................................................................... 170

กำรดำวนโหลดรหสค ำสงตวอยำงแอปพลเคชน ................................................................. 177

สรป ................................................................................................................................... 178

บทท 11 การจดการฐานขอมล SQLite ..................................................................................... 179

กำรสรำงโปรเจกตทรองรบฐำนขอมล SQLite ................................................................... 180

สรำงฟงกชนส ำหรบดงขอมลจำกฐำนขอมล SQLite ......................................................... 181

กำรสรำงฟงกชนส ำหรบบนทกขอมลลงฐำนขอมล SQLite ............................................... 186

กำรสรำงฟอรมรบขอมลจำกผใช ....................................................................................... 187

กำรสรำงฟงกชนส ำหรบแกไขขอมลในฐำนขอมล SQLite ................................................. 188

กำรสรำงฟอรมส ำหรบแกไขขอมล ..................................................................................... 191

กำรทดสอบแอปพลเคชนบน Emulator ........................................................................... 192

สรป ................................................................................................................................... 194

บทท 12 การสงออกแอปพลเคชนและการเตรยมไฟลกอนการอปโหลดขนสโตร ........................ 195

กำรเตรยมตวกอนกำรสงออกแอปพลเคชน ....................................................................... 196

กำรก ำหนดคำแอปพลเคชนกอนกำรสงออก ...................................................................... 197

(10)

สารบญ (ตอ)

หนำท

กำรลบและเพมแพลตฟอรม .............................................................................................. 198

กำรก ำหนด Icon และ Splash Screen ............................................................................ 198

กำรสงออกแอปพลเคชนส ำหรบ Android ........................................................................ 199

กำรสรำงไฟล Key Store และกำร Signed ไฟล APK ...................................................... 199

กำรสงออกแอปพลเคชนส ำหรบ iOS ................................................................................. 202

สรป ................................................................................................................................... 206

บรรณานกรม ............................................................................................................................. 207

ดชนคนเรอง .............................................................................................................................. 208

ประวตผเขยน ............................................................................................................................ 211