Ionic: Pizza Ordering App part 1

คิดว่าน่าจะทบทวนพื้นฐานของ angular สักเล็กน้อย อยากให้เปิดไปหน้านี้ครับ angular architecture


จากภาพนี้มีหลายส่วนที่เพื่อนๆจะต้องเรียนรู้ (ผมเองคงไม่สามารถอธิบายได้ทั้งหมดในขณะนี้) ได้แก่
- Modules
- Components
- Templates
- Metadata
- Data binding
- Directives
- Services
- Dependency injection

เอาเป็นคราวๆก่อนนะครับว่า Templates (บนกลาง) ก็คือโค้ดที่เขียนด้วย html แต่นะ แต่ยังมีแบบที่ angular กำหนดขึ้นอีก เรียกว่า template syntax ตัวอย่างเช่น *ngFor, {{hero.name}}, (click), [hero] และ <hero-detail> ลองตามไปอ่านดูเองก่อนนะครับ

Directives แท้จริงเป็น template แบบ dynamic ครับ เมื่อไรก็ตามที่มันถูก render ตัวมันก็จะเปลี่ยนแปลงไปเป็น DOM ตามแต่ที่มันถูกกำหนด แบ่งออกเป็นสองชนิด ได้แก่
- structural directive และ
- attribute directive

structural directive เป็นจำพวก layout ไม่ว่าจะเพิ่ม ลบหรือแทนที่ เช่น *ngFor, *ngIf

attribute directive เป็นจำพวกที่อาศัยอยู่กับ element เหมือนกับ regular html attribute นั่นแหละครับ เช่น [(ngModel)]

เวลาเขียนพวกนี้จะรู้สึกประหลาดและไม่เข้าใจ ฮ่า ผมเป็นบ่อยมาก ไม่ชินสักที

Dependency injection ก็คือการสร้าง instance ของคลาสแล้วส่งมันไปยังส่วนที่ต้องการครับ (inject ให้หรือฉีดให้) โดยมากส่วนที่เราจะเห็นการเขียนแบบนี้ก็คือ constructor ของคลาส มันจะคอยรับ instance ที่จะถูกส่งเข้ามา (โดยใครบางคน หึหึหึ ง่ายๆก็ angular แหละ) กล่าวคือเราไม่ต้อง new ออบเจ็กต์เองครับ เปิดทางไว้ เดี๋ยวมันจะวิ่งมาใส่เอง

dependency ก็คือส่วนที่ขาดไมได้ ต้องมีอยู่ เหมือนเราต้องการออบเจ็กต์ของคลาส PersonService เป็น input เราก็ต้องสร้างส่วนรับและบอกกับ angular ว่า inject มาให้หน่อยเท่านั้นแหละครับ

ผมก็พูดแต่ความคิดนะ ในทางปฏิบัติก็ไม่ได้แสดงให้ดู อย่างไรขอเพื่อนๆหัวร้อนตามอ่านตามลิงค์ที่ได้ให้ไว้ก่อนก็แล้วกันนะ ฮ่า

โอเค สรุปที่ผมกล่าวถึงก็เพื่อจะบอกว่า angular มีวิธีการส่งข้อมูลจาก model ไปยัง view และจาก view กลับมาที่ model ครับ เขาว่าไว้ดังนี้
จาก model ไปหา view เรียกการส่งแบบนี้ว่า one-way data binding จะใช้สิ่งนี้
{{ }}

จาก view กลับไปหา model เรียกการส่งแบบนี้ว่า two-way data binding จะใช้สิ่งนี้
[(ngModel)]

เอาล่ะ ทีนี้เราก็มีความรู้และเส้นทางบางๆเพื่อจะเรียนรู้สิ่งที่ผมอยากจำนำเสนอต่อไปนี้ ในหนังสือที่ผมอ่าน เขาจะสอนการสร้าง block ซึ่งหมายถึง component ที่มี template แบบ dynamic กล่าวคือจะใช้ <ion-toggle> ของ ionic มาเป็นหัวใจสำคัญในการเปลี่ยนแปลงบางส่วนของ view

เรามาดูหน้าตาของ <ion-toggle> กันก่อน เปิดโปรเจ็กต์เดิมของเราขึ้นมา (blank project)







มาเราจะมาเขียนแอปสั่งพิซซ่ากัน โดยจะมีหน้าตาแบบนี้ (ผมแอบเขียนก่อน)


จากรูปข้างบนนี้ (อภัยผมด้วยผมขี้เกียจแก้แท็ก html จึงเอารูปมาแปะแทน) ก็มี <ion-card> ที่ใหม่กับเรา ซึ่งมันจะให้หน้าตาเหมือน list ทว่าเพิ่มเงาอยู่ด้านใต้รายการเท่านั้นเอง คือดูมีมิติขึ้นไงล่ะ

และก็ส่วนที่ผม comment ไว้ เดี๋ยวจะเปิด comment แต่ก่อนจะทำอย่างนั้นได้ ต้องไปเขียน component ชื่อ VegetarianToggle ก่อนครับ ไม่งั้นมัน error

ก็คลิกขวาที่ src/pages/home แล้วสร้างไฟล์ใหม่ขึ้นมา ได้แก่
- vegetarian-toggle.ts และ
- vegetarian-toggle.html

***หมายเหตุ หลักการตั้งชื่อไฟล์นี้ ผมตั้งตามแบบของ angular tutorial กล่าวคือ ใช้พิมพ์เล็กทั้งหมด มากกว่าสองคำต่อกันก็คั่นด้วย - ครับ





เมื่อได้ component ใหม่ก็ต้องนำไปลงทะเบียนที่ root module ตามแบบฉบับของ angular เปิดไฟล์ src/app/app.module.ts แล้วลงโค้ดตามนี้เลยจ้า


เรียบร้อยแล้วก็ให้ไปเปิด comment ณ src/pages/home/home.html มันก็จะไม่ error อีกต่อไป


ดูผลลัพธ์สิ ปลอด error นะเออ


ที่ไม่ error ก็เพราะว่า
1) root module รู้จัก component ใหม่เป็นที่เรียบร้อย
2) selector ของคลาส VegetarianToggle ใหม่นี้ระบุชื่อ directive ว่า vegetarian-toggle ซึ่งก็คือ <vegetarian-toggle> ในไฟล์ home.html นั่นแหละครับ

ทว่าตอนนี้ component ชื่อ VegetarianToggle ของเราไม่มีหน้าตา ทดสอบแปะโค้ด toggle ก่อนหน้านี้ของเราลงไป ดังนี้




โอเคสวยงามมาก ทั้งหมดนี้เป็นการเพิ่ม (สร้าง) component ตามรูปแบบของ angular และตอนนี้เรามาปรับปรุงหน้าตาของเจ้า VegetarianToggle ให้เป็นไปตามเป้าหมายก่อนดีกว่า กล่าวคือต้องมีรายการต่างๆ ดังนี้
- ถ้าเลือก มังสวิรัติ ก็จะมีตัวเลือกเกี่ยวกับมังสวิรัติผุดออกมา
- ถ้าไม่เลือก มังสวิรัติ ก็จะมีตัวเลือกเกี่ยวกับเนื้อออกมา





ทีนี้ก็มาใส่กลไล โดยเล่นกับ *ngIf ถามหาค่า toggle ของออบเจ็กต์ data (ค่านี้เป็น boolean มี true กับ false)


เพื่อนๆจะเห็นว่ามันสามารถเลือกรายการที่จะแสดงได้ตามค่าของ data.toggle

จากนี้เราจะใช้ two-way data binding มาช่วยเซตค่าให้กับ data.toggle ให้สามารถกำหนดค่าให้แก่ตัวเองได้ผ่าน user interface ที่เป็น on กับ off แก้ไขโค้ดอีกเล็กน้อย ตามนี้

เรียบร้อย



ก็ขอจบ part นี้ไว้เท่านี้ก่อน (เหนื่อย ฮ่า) part หน้าเราจะขยับเข้าไปใกล้ความจริงมากกว่านี้อีกครับ

Ionic: Adding a Button

ผมเปิดเอกสารของ ionic 2 ก็งงครับ ว่าเราจะไปเริ่มทำความเข้าใจกับ template ของมันได้อย่างไร ในเมื่อเปิดมาก็เจอตัวอย่างเลย คือไม่รู้ว่าควรเริ่มต้นที่ตำแหน่งอะไร ตรงไหน แต่จากการไปส่องดูเอกสารของ ionic 1 คิดว่าทีมผู้พัฒนาที่ได้สร้าง doc เวอร์ชัน 2 นี้เห็นดีเห็นงามว่านักพัฒนามือใหม่คงจะเข้าใจมันได้ไม่ยาก (แต่ผมไม่เข้าใจ) หรืออาจเป็นนักพัฒนาที่เขียน ionic 1 มาก่อนพอสมควร เมื่อเปิดอ่านเวอร์ชัน 2 ก็เข้าได้โดยพลัน (แต่ผมเป็นมือใหม่)

คือเป็นไปได้ ผมไม่อยากเรียนแบบเดาทางเอาเอง มันเปื่อย แต่ถึงอย่างไรผมก็ต้องเข้าใจมันให้ได้ เอาล่ะ จากหลายๆโปรเจ็กต์ที่ผมทดลองสร้าง (ไม่ได้แนะนำกับเพื่อนๆ) เมื่อเราเปิดดูไฟล์ที่ลงท้ายด้วย .html หรือที่ผมเรียกว่า template นั้นมักจะขึ้นต้นด้วย

<ion-header>

สำหรับส่วน header และมักจะมี

<ion-content>

สำหรับการแบ่งส่วนว่านี่คือส่วน content นะ

นอกจากนี้ในส่วน header ก็มักจะมี

<ion-navbar>

วางเอาไว้เสมอๆเพื่อบอกว่า นี่เป็นส่วน navigation

ดังภาพนี้



เนื้อหาของ part นี้จะกล่าวถึงสิ่งที่ ionic เรียกว่า component ครับ เปิดหน้านี้เลย เขาบอกว่า ionic ได้ทำ block ต่างๆไว้ให้และเรียกมันเหล่านั้นว่า component ซึ่งจะช่วยให้เราวาดหน้าตาของแอปได้อย่างรวดเร็ว ionic มากับจำนวนของ component ทั้งแบบ including modals, popups และ cards โดยที่ส่วนประกอบเหล่านี้คือ html และ css ในบาง component มีจาวาสคริปต์ทำงานอยู่ด้านในด้วยนะเออ (ว้าว ตื่นเต้นๆ อ้อเหรอ~)

มาเจออย่างแรกเลยคือ Action Sheets คืออะไรก็ไม่รู้ ผมดูจาก UI ด้านข้าง (รูปโทรศัพท์) ยังไม่สนใจ ผมต้องการอะไรที่มันพื้นฐานมากกว่านี้ (อย่ามาโชว์หรู ไม่มีเงินซื้อโว้ย ฮ่า)


***สังเกต เขาใช้คำว่า component นั่นแสดงว่าประกอบด้วย view กับ model ซึ่งก็ใช่

ผมอยากลองวาดปุ่มใน blank project นี้ก่อนครับ เลื่อนลงๆ

Buttons ปุ่มมักประกอบด้วย text และหรือ icon ครับ โดยสามารถวาดโดยตรงจาก html button จากนั้นจึงเพิ่ม directive ที่เขียนว่า ion-button ลงไปเพื่อให้เกิดหน้าตาตามที่ ionic กำหนดไว้

<button ion-button>Default Style</button>

เปิดไปที่ src/pages/home/home.html ให้เพื่อๆลบโค้ดภายใต้ ion-content ออกให้หมด แล้วทดลองวางปุ่มลงไปดังนี้

หากเพื่อนๆยังรันมันอยู่ มันก็จะ live reload โค้ดส่วนที่เกิดการเปลี่ยนแปลงนี้ให้โดยอัตโนมัติ (ว้าว) เรียกวิธีการแบบนี้ว่า on the fly (เห็นเลยโดยไม่ต้องกดปุ่ม F5 หรือ refresh หน้าเว็บเอง)


ก็ขอให้เพื่อนๆลองเล่นมันให้ครบทุกแนวที่มันนำเสนอนะครับ ไม่ว่าจะเป็น Basic Usage, Outline Style, Clear Style, Round Buttons, Block Buttons, Full Buttons, Button Sizes จากนั้นลองใส่ icon เข้าไปด้วย Icon Buttons ตามด้วยอย่างสุดท้ายคือเอาปุ่มไปยัดใส่ component อื่นๆได้อีก แหม Button In Components

***สังเกต ถ้าเขียนแล้วดูผลปรากฏว่ามันไม่มีอะไรเกิดขึ้น หรือสิ่งที่เกิดไม่เป็นไปตามใจคิด ให้กด F12 (ใช้ Chrome browser) แล้วกดแท็บไปดูที่ console ว่ามี error เกิดขึ้นหรือไม่นะครับ ตัวอย่างเช่น ผมพิมพ์ button เป็น buttom ก็ผิด


***หมายเหตุ ศัพท์ directive นี้กล่าวถึงความสามารถของ angular ครับ ตอนนี้ปล่อยผ่านไปก่อน

ก่อนจะไปต่อ ผมอยากให้เพื่อนๆทดลองเพิ่มโค้ดต่อไปนี้ลงไป


เป็นการเพิ่มการคลิกให้กับปุ่มครับ เรียกว่า click event ซึ่งแบบฉบับของ angular เขา (ปล่อยผ่านไปก่อน) เมื่อคลิกแล้วก็จะให้ทำงานเมธอด (public method) ที่ชื่อว่า onClickedButton (ชื่อนี้แล้วแต่จะตั้งนะ ตามใจ)

ซึ่งเราจะต้องไปสร้าง method นี้ไว้รองรับก่อน ไม่งั้นเจอ error (ดูได้ที่ F12) จึงต้องไปเปิด component ที่ชื่อ home.ts แล้วเพิ่มโค้ดต่อไปนี้

และนี่คือผลลัพธ์ที่เกิดขึ้นเมื่อคลิกเล่นที่ปุ่มไปห้าครั้ง


หลังจากเพื่อนๆเล่นกับปุ่มจนหนำใจแล้ว ก็ลองไปเล่นตัวอื่นๆที่สนใจดูนะครับ ได้ไม่ได้อย่างไรก็เอามาบอกกัน สวัสดีครับ

Ionic: The Flow

หลังจากที่เราได้ดู code กันไปแล้ว ทีนี้มาดูภาพที่ผมวาดขึ้นเอง (จากความคิดในตอนนี้) กันบ้าง และนี่คือสิ่งที่ผมเข้าใจครับ

คิดตามผมนะ ปกติแล้วหน้าเว็บหนึ่งหน้าสามารถเขียน html css และ javascript ลงไปได้เลย แบบรูปด้านล่าง



และเมื่อเราพยายามแยกมันทั้งหมดออกจากกัน กลับได้ว่า ส่วนแสดงผลแท้จริงต้องการสองอย่าง ได้แก่ html กับ css และส่วนข้อมูลคือ javascript

ฉะนั้นเรียก html + css ว่า view และเรียก javascript ว่า model ครับ



Angular framework ก็จัดการสองส่วนนี้ มันจึงเป็น MV* แบบนี้ไง



เพื่อนๆควรทราบว่าคลาสใน angular แท้จริงเป็น service โดยธรรมชาติ (ตอนนี้หากไม่ทราบความหมายของ service ก็ไม่เป็นไร อ่านผ่านๆไปก่อน ความหมายอย่างกว้างของมันก็คือคลาสบริการเกี่ยวกับข้อมูล) จากคลาสธรรมดาที่ไม่มีหน้าตาเป็นของตัวเองก็จะมีหน้าตาเป็นของตัวเองได้เมื่อเรากำหนด @Component ให้กับมัน นั่นหมายความว่า model ก็จะรวมกับ view และเรียกตัวเองเสียใหม่ว่า component

angular จึงประกอบแต่ละ component ขึ้นเป็นหน้าเว็บ แอปที่มีเพียงหนึ่งหน้าเว็บแล้วใช้หลักการเปลี่ยนแปลง content เฉพาะส่วนถูกเรียกว่า single page application ครับ

ทีนี้เวลาจะวาดหน้าตาให้กับ component ส่วนนี้จะถูกเรียกว่า template ดังรูป


และเพื่อให้ส่วน template นี้มีความเป็นมิตรกับสมาร์ทโฟน แถมยังให้ความรู้สึกดั่งได้เล่น app ที่เขียนด้วยภาษาและให้รูปลักษณ์เช่นเดียวกับชนิดของระบบปฏิบัติการของสมาร์ทโฟนนั้นๆ น้อง ionic จึงอาสารับงานนี้ไปทำแทนพี่ angular



***หมายเหตุ ถ้าผมพูดถึง angular ก็หมายถึง angular เวอร์ชัน 2 เช่นเดียวกัน ionic ก็หมายถึง ionic เวอร์ชัน 2 ด้วย

งานนี้ ionic framework อาสารับไปจัดการส่วน view ให้



และนี่ก็คือภาพรวม เมื่อ ionic ต้องการติดต่อไปยังตัวระบบปฏิบัติการของสมาร์ทโฟน มันก็จะทำผ่าน cordova framework อีกที



ก็หวังว่าภาพประกอบนี้จะช่วยให้เพื่อนๆเข้าใจมากขึ้นนะครับ ผมเองก็อ่านเอาจากหลายสำนักแล้วนำมาสรุปเป็นสิ่งที่ตนเองเข้าใจ มีทั้งที่จำได้และลืมไปแล้ว และต่อไปเราจะมาลงรายละเอียดในแต่ละส่วนให้มากขึ้น ขอบคุณที่ติดตามครับ

Ionic: Project Structure

อธิบายเล็กน้อยสำหรับคำสั่งในการสร้างโปรเจ็กต์นะครับ

ionic start --v2 myApp blank

ionic เรียก CLI ของ ionic ที่ถูกติดตั้งจาก npm
start จะบอกให้ CLI ของ ionic สร้างแอป
--v2 บอกว่าใช้ ionic เวอร์ชัน 2 (มันมีเวอร์ชัน 1 ด้วย ระวังสับสน)
myApp ชื่อแอปที่เราอยากให้สร้าง
blank คือชื่อ template แบบที่มีหน้าเดียว

***หมายเหตุ ชื่อ template นี้ ionic 2 ได้จัดเตรียมไว้ 3 แบบ ได้แก่ blank, tabs และ sidemenu โดย default ถ้าไม่กำหนดชื่อ template ก็จะหมายถึง tabs

***ย้ำ เมื่อผมพูดถึง ionic ผมหมายถึง ionic เวอร์ชัน 2 นะครับ เช่นกันกับ angular ผมหมายถึง angular เวอร์ชัน 2 ด้วย

ส่วนเครื่องมือที่เราจะใช้พัฒนาแอปหรือเขียนแอป ผมเลือกใช้ Microsoft Visual Studio Code จ้า (ดาวน์โหลดที่นี่)

ติดตั้งเสร็จก็เปิดมันขึ้นมา แล้วเลือก file > open folder...

เปิดไปยัง myApp ของเรา


เริ่มต้นที่ folder ชื่อ src ก่อน

src/index.html นี่คือ main entry point หรือจุดเริ่มต้น (รัน) ของแอป มีการ setup สคริปต์ต่างๆรวมถึง CSS เพื่อใช้ในการ bootstrap ครับ (รันแอป) ให้เพื่อนๆสังเกตแท็กนี้แล้วจดจำไว้ก่อน

<ion-app></ion-app>

src ก็คือ directory ที่บรรจุโค้ดดิบที่ยังไม่ผ่านการคอมไพล์ ซึ่ง ionic จะทำงานกับมันทั้งหมด เมื่อไรก็ตามที่เพื่อนๆสั่งรันด้วยคำสั่ง ionic serve โค้ดทั้งหมดใน src ก็จะถูกคอมไพล์ เอาง่ายๆว่าเปลี่ยนให้ไปอยู่ในรูปแบบที่ web browser สามารถเข้าใจและ render ออกมาได้ครับ โดยเฉพาะกับเหล่าไฟล์จาวาสคริปต์ระดับสูง (.ts) จะถูกเปลี่ยนให้เป็นจาวาสคริปต์เวอร์ชันที่ web browser เข้าใจ (.js) (ปัจจุบันคือมาตรฐาน ES6 หรือก็คือ ES2015) พูดให้ง่ายขึ้นว่า เราไม่เขียนจาวาสคริปต์จ๋าแบบ native (.js) เพราะมันยากเกินไป แต่เราจะเขียนจาวาสคริปต์ระดับสูงแทน (higher level) ในที่นี้คือ TypeScript (.ts)

src/app/app.module.ts ไฟล์นี้เป็น entry point ของแอปเราตามกรอบความคิดของ angular framework หรือก็คือ module เริ่มต้นของเฟรมเวิร์กนี้ครับ (เรียกว่า root module) หัวใจของมันคือ @NgModule ซึ่งไม่ว่าแอปไหนๆที่เขียนด้วย ionic ก็ต้องมี root module นี้ทั้งนั้น หน้าที่หลักของมันคือการกำหนด root component และมันก็กำหนดให้คลาส MyApp เป็น root component ครับ


ถาม แล้วคลาส MyApp นี้อยู่ที่ไหนล่ะ?

ตอบ ให้ลองดูที่คำสั่ง import ของคลาส MyApp ครับ แล้วตามไปดูก็จะพบว่ามันคือไฟล์ที่ชื่อ app.component.ts ซึ่งอยู่ ณ src/app/app.component.ts


เปิดดูไฟล์ app.component.ts

เมื่อเพื่อนๆหาไฟล์นี้เจอแล้วผมจะบอกให้เพื่อนๆย้อนความคิดกลับก่อนจะไปต่อครับ ดังนี้
- app.component.ts คือไฟล์ที่บรรจุคลาส MyApp เราเรียกคลาสนี้ว่า root component หรือว่า component เริ่มต้นก็ได้
- root component ถูกกำหนดไว้ใน root module การกำหนดอย่างนี้เป็นผลให้ angular framework จับมันไปแปะที่แท็ก <ion-app></ion-app>
- เมื่อ root component ถูกนำมาแปะที่แท็ก <ion-app></ion-app> หน้าตาของมัน (เรียกว่า template) จึงถูกวาด (render) บน web browser ในที่สุด

ถ้าเพื่อนๆอ๋อตามผมแล้วล่ะก็ เราก็จะเริ่มเดินหน้าต่อ

ถาม หน้าตาหรือ template ที่ว่าของ root component อยู่ที่ไหน?

ตอบ งั้นเปิด root component แล้วดูที่รายละเอียดของ @Component ของมันสิ

เห็นอะไรไหม เห็น templateUrl นั่นไหม มันเขียนว่า app.html นั่นแหละหน้าตาของมัน

ถาม เปิด app.html ขึ้นมาแล้วไงต่อ?

ตอบ จะเห็นคำสั่งหนึ่งเขียนว่า [root]="rootPage"

รายละเอียดของคำสั่งผมจะคุยให้ฟังทีหลัง เพราะมันเป็นเรื่องสำคัญของ angular ค่าที่เขียนว่า rootPage ให้ย้อนกลับไปดูที่คลาส MyApp มันคือตัวแปรแบบ public ของคลาส MyApp

ตามไปดูว่า HomePage นั้นมาจากไหนจากคำสั่ง import ข้างบน

เปิดไปตามมันคือ src/pages/home/home.ts

เห็นอะไรอีกไหม? เห็นว่าตรง @Component ของมันมี templateUrl เขียนว่าอย่างไร? เขียนว่า home.html นั่นไง ไปเปิดดู

นี่จึงเป็นที่สุดแล้วที่ template นี้ถูกวาดด้วย ionic framework และก็ถูกคอมไพล์เปลี่ยนให้เป็น html, css และ javascript แบบนี้ไง


สรุป หน้าที่หลักของ ionic framework ก็คือการเตรียม view ให้กับ angular framework (angular ไม่มี view ที่เป็นเฉพาะแบบ mobile ไงล่ะ) โดยตัวมันเองยืนอยู่บนความคิดของ cordova framework อีกทีหนึ่ง เพื่อใช้ api ของ cordova ติดต่อกับ native api ของ mobile os ต่างๆนั่นเองครับ

Ionic: Installing Ionic

หนนี้ตั้งใจศึกษา Ionic Framework ครับ อ่านจากเว็บมันโดยตรงก็ยังไม่เข้าใจ (ionic.io/2) นั่นเป็นเพราะภาษาอังกฤษผมไม่แข็งแรง แถมยังไม่คุ้นเคยกับภาษาจาวาสคริปต์เสียเท่าไรด้วย

พอค้นหาหนังสือตามเว็บไซต์ต่างๆ (ไทยก็มีนะ) ...โหแพง ราคาสี่ร้อยห้าร้อย ซึ่งก็ไม่รู้ว่าเนื้อหาที่ได้จะตรงใจหรือเปล่า เพื่อนๆควรทราบว่าเราไม่อาจเรียนรู้ทุกสิ่งจากหนังสือเพียงเล่มเดียว แน่นอนว่าวิชาเดียวก็ไม่อาจสำเร็จได้ในตำราเพียงเล่มเดียว เป็นเหตุให้ผมตั้งคำถามและพยายามตอบคำถามที่ตัวเองสงสัยนี้เองทั้งหมดครับ

ถามว่า ionic framework คืออะไร?

ขอตอบง่ายๆว่า เป็นวิธีการหรือกรอบความคิดเพื่อที่จะเขียน HTML5, CSS3 และ JavaScript ให้ได้ mobile application สำหรับระบบปฏิบัติการ Android (ไฟล์ .apk), IOS (ไฟล์ .ipa) และ Windows Phone (ไฟล์ .xap) ครับผม

ฮ่า ดีที่ว่าผมได้ความคิดพื้นฐานมาจากภาษาอื่นๆที่เคยร่ำเรียนมา ก็หวังว่ามันจะช่วยผมเสริมสร้างจินตนาการเพื่อ ถาม และ ตอบ ข้อสงสัยของผมเองได้ครับ เอาล่ะ เรามาเริ่มที่หน้าแรกของเว็บไซต์ ionic.io/2 กันเลย

กว่า 1.2 ล้าน application ที่ถูกสร้างด้วย ionic และ ionic ยังคงเป็น cross-platform mobile ที่ได้รับความนิยมอย่างยิ่ง เมื่อมี Angular 2 ก็เกิด Ionic 2 โดยทีมพัฒนาตั้งคำถามว่า 'how a mobile toolkit should work' และนั่นเป็นโจทย์ของการพัฒนา Ionic 2 ให้มีประสิทธิภาพ ลดความซับซ้อนของโค้ด เพื่อให้การสร้างแอปพลิเคชันนั้นสมบูรณ์มากขึ้นครับ (คำคุยอะนะ)

เมื่อเข้าสู่หน้าเว็บหัวข้อ Installation พวกเขาก็ได้แจ้งเลยว่าเราจะใช้ command line ในการออกคำสั่งนะเออ โดยจะต้องติดตั้งสองโปรแกรมนี้ก่อนครับ ได้แก่
- Ionic command line utility (ก็คือ command line ที่รู้จักคำสั่ง ionic นั่นแหละ เรียกกันว่า Ionic CLI หรือก็คือ Ionic Command Line Interface)
- Cordova (ก็คือ framework สำหรับพัฒนา cross-platform mobile ด้วยเทคโนโลยี HTML5, CSS3 และ JavaScript ที่สามารถเข้าถึงอุปกรณ์ของเครื่องโทรศัพท์ไม่ว่าจะเป็น camera, GPS, Accelerometer, Contacts และอื่นๆ)

โดยทั้งสองโปรแกรมสามารถติดตั้งผ่าน npm ของ node.js อีกทีหนึ่ง (ดาวน์โหลด node.js)

***หมายเหตุ node.js ต้องเวอร์ชัน 6 ขึ้นไปนะครับ (เครื่องผมคือ Windows 8.1 64-bit)


ติดตั้ง node.js เรียบร้อยแล้ว ก็พิมพ์คำสั่งต่อไปนี้ (อย่าลืมต่อ internet ล่ะ กิกิ)

npm install -g ionic cordova

ติดตั้งเรียบร้อยแล้วก็เปิด command line ขึ้นมาตรวจสอบเวอร์ชันของ node.js โดยพิมพ์

node --version



และตรวจสอบการติดตั้ง ionic แล้วด้วยคำสั่ง

ionic info



ได้อย่างนี้แสดงว่าเราพร้อมพัฒนาแล้วนะ รายละเอียดข้างทางเยอะมากจริงๆครับ อย่างไรผมก็จะนำมาเล่าเท่าที่ผมยังคงสงสัยนะครับ (ขออภัยด้วยจริงๆ)

เริ่มสร้างโปรเจ็กต์แรกกันก่อน เอาแบบไม่มีอะไรเลย (blank project) ก่อนอื่นให้เปลี่ยนที่อยู่ก่อน ด้วยการสร้าง folder ในที่ที่เราต้องการ ของผมคือ D:\work\ionic จากนั้นพิมพ์

D:
cd work\ionic

แล้วบอกมันให้สร้างโปรเจ็กต์ชื่อ myApp ให้เรา พิมพ์

ionic start --v2 myApp blank


*** หมายเหตุ ถ้ามันถามว่าสร้าง account หรือมี account ไหมอะไรประมาณนั้น ตอบ n ไปก่อน

เสร็จแล้วรันมันด้วยคำสั่ง

cd myApp ionic serve



เพื่อนๆทำตามอย่างผมได้ ก็เป็นอันว่าพวกเรานั้นพร้อมจะก้าวต่อไปแล้วครับ
(^_^)