Home / Developer  / Angularjs  / การสร้างแอพพลิเคชัน eBook Store ด้วย Ionic Framework

การสร้างแอพพลิเคชัน eBook Store ด้วย Ionic Framework

ในบทเรียนนี้จะเป็นการใช้ Ionic Framework สร้างและออกแบบแอพพลิเคชันประเภท EBook หรือ Book Store ผ่านสมาร์ทโฟน หรือแท็บเล็ตด้วย AngularJS และ JSONแนวทางตัวอย่างนี้ได้ไอเดียของการออกแบบ Bookstore จากแอพพลิเคชัน AIS Bookstore บน Android
เพียงแค่เราจะใช้ Ionic Framework ในการพัฒนาในรูปแบบ HTML5 ดังนั้นให้สร้างโปรเจ็คใหม่ของเราทันทีด้วยการเปิด Command หรือ Terminal ดังนี้
อัพเด็ต Cordova ก่อน ด้วย

อัพเด็ต ionic framework อีกทีด้วย

จากนั้นให้ Run คำสั่งต่อไปนี้

ซึ่ง -a คือชื่อแอพพลิเคชัน, -i คือชื่อ Package Name หรือ Bundle ID ส่วน blank คือรูปแบบเริ่มต้นของแอพพลิเคชันของเราว่าจะเป็นแบบไหนผมเลือก Blank

เมื่อสร้างเสร็จแล้วก็ให้ทำการ Run คำสั่ง

ระบบจะเปิด Browser ขึ้นมาให้เราทดสอบว่าทำงานดีอยู่หรือไม่ดังภาพประกอบ

ionic-1

ส่วนของ API แล้วล่ะทีนี้ไม่ว่าจะเขียนด้วยอะไร ผมจะทำ API ของผมออกมาในรูปแบบนี้

json2

 

Code หน้า JSON ทั้งหมดคือ

เรามาเริ่มที่การออกแบบเมน Sidemenu กันครับ ให้เราเปิดที่ไฟล์ index.html แก้ไข HTML ทั้งหมดเป็นดังนี้ (ยืม Path รูปภาพมาหน่อยแล้วกัน)

เป็นการสร้าง Template Navigation หลังจากนั้นก็เราไปแก้ไขเพิ่ม $statParams ใน js/app.js

กำหนด $state ใหม่ชื่อว่า “main” ให้เป็นหน้าเริ่มต้นที่

โดยมีการเรียก View ที่ไฟล์ ‘view/main.html’

และกำหนด controller ของ State นี้ว่า “mainController”

ดังนั้นเราต้องไปสร้าง โฟลเดอร์ว่า “views” ใน www ก่อนแล้วสร้างไฟล์ชื่อว่า main.html ใส่ code ดังต่อไปนี้

ทดสอบจะได้หน้าจอเมนู sidemenu ดังนี้

ionic3

ต่อมาเราจะทำหน้าจอ Slide Banner ให้จัดการแก้ไขแค่ส่วนของ mainController ใน app.js และ main.html ใน views เท่านั้น โดยให้เราเริ่มที่ app.js ในส่วนของ mainController ก่อนให้เราสร้างขึ้นมาดังนี้ผ่านการเรียกใช้ $http เพิ่มดึงเว็บ service

แก้ไขเพิ่ม HTML ต่อไปนี้ในการดึงค่า ng-repeat ในส่วนของ <ion-content> ในไฟล์ main.html

ไปที่ไฟล์ css/style.css เพิ่ม class ต่อไปนี้เข้าไป

ลองแสดงผลดูจะได้ดังนี้ เป็นตัวอย่างการใช้งาน ion-slide-box หรือ Banners Slider บนหน้าจอแอพพลิเคชัน

ionic4

ต่อมาก็จัดการในส่วนของ BookShelf หรือชั้นวางหนังสือ ซึ่งต้องไปเพิ่ม ส่วนของ books และ magazines ใน mainController แก้ไข app.js ดังนี้ครับ

ให้มาแก้ไขที่ไฟล์ main.html เพิ่ม ng-repeat ไปดังนี้ครับ

เพิ่ม css ใน css/style.css ดังนี้

แสดงผลจะเป็นดังนี้

ionic5

ใส่ Book Shelf แบบ Slide

ทดสอบในการเลื่อน Swipe ส่วนของ Gallery หนังสือจากซ้ายไปขวาได้ คราวนี้ก็ลองทำส่วนของ Magazine อีกครั้ง ปรับ Style Sheet ดีๆ ใกล้เคียงกัน ดังนั้นไฟล์ views/main.html จะเป็นดังนี้

ไฟล์ js/app.js เป็นดังนี้

และไฟล์ css/style.css จะเป็นดังนี้

แอพพลิเคชันของเราจะมีหน้าจอแบบนี้

apps

สวยไหมล่ะ

เปิดเมนูได้

เปิดเมนูได้

ไม่น่าจะยากนะครับการออกแบบ Layout แล้วใช้ Web Service ในการช่วยทำแอพพลิเคชัน Book Store ในบทเรียนต่อไปอาจจะต่อยอดทำส่วนหน้าด้านในที่มีการเรียกไฟล์ pdf จาก Service กลับมา เพื่อต่อยอดระบบสมาชิกเก็บค่า DRM ของ EBook ครับ

ถามว่าประสิทธิภาพของการเรียก Layout เท่ากับ Native ไหม ตอนนี้ทำแอพ Native ตัวหนึ่งที่ดูทีวีออนไลน์ครับ ก็จะแพ้ทางกันเวลาที่ข้อมูล Web Service ดึงมาเยอะเพราะ HTML5 จะเสียเรื่องของ RAM สูงกว่าอยู่แล้ว แต่ไม่เป็นไรครับเป็นแค่ทางเลือกให้ลองฝึกพัฒนา AnglarJS และ ionic framework ก็ยังดี

บทความอื่นๆ ที่น่าสนใจ ionic framework

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.