พอดีโค้ชพลได้รับเกียรติไปจัดอบรมหลักสูตรสร้างแอพ iOS และ Android ที่บริษัท SAMART ตั้งอยู่ที่ตึกซอฟต์แวร์ปาร์ค แจ้งวัฒนะมา โดยในหลักสูตรเฉพาะกิจนี้มีการใช้ HTML5, PhoneGap, และ Ionic Framework (ใหม่สุดๆ) ในพัฒนาตัวแอพพลิเคชั่นด้วย
มีหัวข้อหนึ่งที่น่าสนใจมาก นั่นคือการบันทึกข้อมูลเก็บไว้ในตัวแอพพลิเคชั่นแบบง่ายๆ ซึ่งใช้ได้ทั้ง iOS และ Android ด้วยการประยุกต์ใช้ Local Storage ของ HTML5 นั่นเองครับ โดยผมจะขอยกตัวอย่างง่ายๆ ในการใช้ Local Storage ในแอพพลิเคชั่นที่พัฒนาด้วย PhoneGap และ Ionic Framework มาเป็นตัวอย่าง
ลองใช้งาน Local Storage แบบง่ายๆ ใน Ionic Framework
สำหรับการทำลองทำแอพง่ายๆ ครั้งนี้ โค้ชพลได้สร้างโปรเจคเพื่อความสะดวกในการเรียนรู้ไว้ที่ Github ของโค้ชพลไว้แล้ว จะได้ทำตามได้ง่ายๆ ครับ
1. ดาวน์โหลดโปรเจคต้นแบบ
ให้ดาวน์โหลดโปรเจคต้นแบบมาจาก Github ของโค้ชพลมา (จะกด Download ZIP File หรือ Fork มาก็ได้ ไม่ว่ากัน) เสร็จแล้วเราจะได้ไฟล์ที่สามารถเอาไปใส่ในโปรเจคแอพพลิเคชั่นที่สร้างจาก Ionic Framework ได้
2. สร้างโปรเจคแอพ Ionic Framework
เปิดโปรแกรม Terminal (MAC OS X) หรือ Command Prompt (Windows) ขึ้นมาใน folder ที่เราเตรียมไว้ เช่นในที่นี้โค้ชพลจะใช้ Folder ที่ชื่อ MyApp ที่สร้างไว้ที่ Desktop
จากนั้นให้พิมพ์คำส่ังด้านล่าง และกด Enter เพื่อให้ Ionic Framework ดาวน์โหลดโปรเจคเทมเพลตมาติดตั้งไว้ใน folder ที่เราสั่งคำสั่งไว้
ionic start NextflowApp blank
จากนั้นให้ copy ทั้งหมดที่เราได้จาก zip ไฟล์ของโค้ชพลมาใส่ไว้ใน folder ที่ชื่อ www ในโปรเจคเท่านี้เราก็พร้อมจะทำงานกันแล้วครับ
3. สร้าง AngularJS Controller
อย่างแรกสุดเลย เราจะทำการสร้าง Controller ขึ้นมาแบบเดียวกับที่เราสร้างใน AngularJS โดยในที่นี้ให้ทำการเปิดไฟล์ js/app.js ขึ้นมา แล้วเขียน controller ลงไป
.controller('NFController', function($scope) {
})
จากนั้นกำหนด ng-controller ให้กับส่วนของ <ion-content> ของเราในไฟล์ index.html
<body ng-app="starter">
<ion-pane>
...
<ion-content ng-controller="NFController">
...
</ion-content>
</ion-pane>
</body>
เป็นอันเรียบร้อย ไปขั้นตอนต่อไปได้
4. กำหนด ng-model ให้กับกล่องข้อความ
ต่อไปเราจะกำหนด ng-model เพื่อให้ในการเข้าถึงข้อมูลที่กรอกลงกล่องข้อความ ใน index.html โดยในที่นี้โค้ชพลจะตั้งชื่อมันว่า “idea”
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">One Idea by Teerasej</h1>
</ion-header-bar>
<ion-content ng-controller="NFController">
<div class="list">
<label class="item item-input">
<input type="text" ... ng-model="idea">
</label>
</div>
...
</ion-content>
</ion-pane>
เรียบร้อยแล้ว ไปขั้นตอนต่อไปได้เลยครับ
5. กำหนด ng-click และ method สำหรับปุ่มบันทึกข้อความ
ในขั้นตอนนี้เราจะกำหนด ng-click ให้กับปุ่มของเรา เพื่อไปเรียกใช้ method ใน Controller ครับ โดยจะมี method สำหรับบันทึกข้อมูล และโหลดข้อมูลมาแสดง ชื่อ saveIdea(idea) และ showLastIdea
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">One Idea by Teerasej</h1>
</ion-header-bar>
<ion-content ng-controller="NFController">
...
<button class="button button-block button-positive" ng-click="saveIdea(idea)">
Save my idea
</button>
<button class="button button-block button-energized" ng-click="showLastIdea()">
Show saved idea
</button>
</ion-content>
</ion-pane>
จากนั้นก็มาสร้าง method ในฝั่งของ controller ในไฟล์ js/app.js
.controller('NFController', function($scope) {
$scope.saveIdea = function(idea) {
};
$scope.showLastIdea = function() {
};
})
เป็นอันเรียบร้อย ไปขั้นตอนต่อไปได้
6. ใช้งาน Local Storage ในส่วนของ method สำหรับการบันทึกข้อมูล
จากนั้นเราก็จะเรียกใช้งาน Local Storage ใน method ทั้ง 2 ตัว โดยในส่วนของการบันทึกข้อมูล saveIdea() จะเป็นการกำหนด key ชื่อว่า ‘idea’ และดึงข้อมูลจาก model ที่เราสร้างไว้บันทึกลงไป
$scope.saveIdea = function(idea) {
window.localStorage['idea'] = idea;
};
ส่วน method showLastIdea() เราก็จะดึงข้อมูลเดิมจาก Local Storage มาแสดงใน model ของเราครับ
$scope.showLastIdea = function() {
idea = window.localStorage['idea'];
};
เป็นอันเสร็จเรียบร้อย ขั้นตอนต่อไปเรามาทดสอบกัน
ทดสอบตัวแอพพลิเคชั่น Ionic Framework
เพื่อทดสอบตัวแอพพลิเคชั่น ใช้เราเปิดโปรแกรม Terminal (MAC OS X) หรือ Command Prompt (Windows) ขึ้นมาจาก Folder โปรเจคของเรา แล้วเรียกคำสั่งด้านล่าง เพื่อทดสอบตัวแอพพลิเคชั่นของเรา
ขั้นตอนนี้ต้องมีการติดตั้งระบบ Android SDK ให้เรียบร้อยก่อน ดูวิธีทำได้จากส่วนบทเรียนพื้นฐาน Ionic Framework
ionic platform add android ionic build android ionic run android
จากนั้นก็ลองทดสอบดังนี้ครับ
- กรอกข้อมูลลงในกล่องข้อความ
- กดปุ่ม บันทึก
- กดออกจากแอพ
- กดปิดการทำงานของแอพ
- เปิดแอพใหม่ ถ้าการปิดแอพสมบูรณ์ เราจะเห็นกล่องข้อความเปล่าๆ
- กดปุ่ม โหลดข้อมูล
- เราก็น่าจะเห็นข้อมูลที่เราบันทึกไว้ก่อนปิดการทำงานของแอพ แสดงขึ้นมาในกล่องข้อความนะครับ
อยากเรียนพัฒนาแอพได้ทั้ง iOS และ Android ด้วย HTML5, AngularJS, และ Ionic Framework?
สามารถกดเข้าไปเรียนพื้นฐานที่โค้ชพลทำไว้ได้ที่นี่
หรือคลิกปุ่มด้านล่างเพื่อดูรอบและลงทะเบียนเรียนครับ