Uncategorized

Ionic Framework: วิธีบันทึกข้อมูลแบบง่ายๆ ด้วย Local Storage

เรื่องที่เกี่ยวข้อง - , ,

พอดีโค้ชพลได้รับเกียรติไปจัดอบรมหลักสูตรสร้างแอพ 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 ได้

Teerasej Ionic Framework Learn Github

Github Repository ที่โค้ชพลสร้างไว้สำหรับเก็บตัวอย่างโปรเจคของ Ionic Framework

2. สร้างโปรเจคแอพ Ionic Framework

เปิดโปรแกรม Terminal (MAC OS X) หรือ Command Prompt (Windows) ขึ้นมาใน folder ที่เราเตรียมไว้ เช่นในที่นี้โค้ชพลจะใช้ Folder ที่ชื่อ MyApp ที่สร้างไว้ที่ Desktop

Open Command Windows

กดปุ่ม Shift ค้างไว้แล้วคลิกขวาที่ folder เพื่อเปิดคำสั่ง Open Command Line windows here

 

จากนั้นให้พิมพ์คำส่ังด้านล่าง และกด 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

 

จากนั้นก็ลองทดสอบดังนี้ครับ

  1. กรอกข้อมูลลงในกล่องข้อความ
  2. กดปุ่ม บันทึก
  3. กดออกจากแอพ
  4. กดปิดการทำงานของแอพ
  5. เปิดแอพใหม่ ถ้าการปิดแอพสมบูรณ์ เราจะเห็นกล่องข้อความเปล่าๆ
  6. กดปุ่ม โหลดข้อมูล
  7. เราก็น่าจะเห็นข้อมูลที่เราบันทึกไว้ก่อนปิดการทำงานของแอพ แสดงขึ้นมาในกล่องข้อความนะครับ

อยากเรียนพัฒนาแอพได้ทั้ง iOS และ Android ด้วย HTML5, AngularJS, และ Ionic Framework?

สามารถกดเข้าไปเรียนพื้นฐานที่โค้ชพลทำไว้ได้ที่นี่

หรือคลิกปุ่มด้านล่างเพื่อดูรอบและลงทะเบียนเรียนครับ

 

 

 

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Menu