เริ่มต้นเขียน Ionic

หลังจากที่ได้รู้จัก Ionic แล้ว ว่ามันคืออะไร งั้นมาต่อด้วยการเริ่มต้นเขียนกันเลยดีกว่า

I'am Sira

มาเริ่มเขียน Application บนมือถือ ด้วย Ionic Framework กันดีกว่า

โดย Tool ที่จะใช้เป็นเครื่องมือในการเขียนโปรแกรมครั้งนี้นั้นก็คือ Visual Studio Code ซึ่งโปรแกรมนี้เป็น Freeware จากทาง Microsoft ครับ สามารถหา Download ได้จาก https://code.visualstudio.com/


แต่ก่อนที่จะเริ่มต้น First Application นั้น เราก็ต้องมาทำการติดตั้ง Ionic Framework ที่เครื่องก่อน โดยการติดตั้งนั้น จะทำการติดตั้งผ่าน npm (node package manager) โดยใช้คำสั่ง
npm install -g cordova ionic
เมื่อติดตั้งเสร็จแล้ว ก็เริมต้นเปิดโปรแกรม Visual Studio Code แล้วเปิดไปยัง Folder ที่ต้องการได้เลยครับ โดยผมจะทำการชี้ไปที่ C:\ionic ครับ

ที่ Visual Studio Code ให้เปิด Integrated Terminal ขึ้นมา โดยไปที่เมนู View->Integrated Terminal หรือกด  Ctrl+` ครับ

ขั้นตอนถัดไปคือ การสร้าง Ionic application โดยใช้ App template ของทาง Ionic ที่มีไว้ให้ด้วยคำสั่ง
ionic start [AppName] [Template]
ซึ่งตัว Template ที่ทาง
โดยที่เราจะพิมพ์คำสั่งลงไปใน Terminal ที่เปิดเอาไว้แล้ว

เมื่อ Run คำสั่งเสร็จแล้วเราก็จะได้ Folder และ File มาดังนี้

ส่วนวิธีการ Run Application นั้น สามารถทำได้โดยใช้คำสั่งดังต่อไปนี้
ในกรณีที่เป็นการ Run ครั้งแรก จะมีข้อความแจ้งว่า ต้องการที่จะติดตั้ง Dependencies หรือไม่ ให้ตอบ Y ครับเพื่อที่จะทำการ Download และติดตั้งในส่วนของ Dependencies

หลังจากที่ทุกอย่างเรียบร้อยแล้ว Ionic ก็จะเปิด browser ขึ้นมาใหเรา นั้นคือ View ที่เราจะเห็นเมื่อใช้งานครับ ซึ่งตรงนี้ เราสามารถที่จะใช้ tool ของ chrome เพื่อที่จะปรับมุมมองให้เป็นแบบ Mobile ได้ โดยใช้ Developer Tool ครับ
และนี้ คือ Output ที่ได้หลังจากทำการันครับ

สุดท้าย ขอให้เพื่อนๆ สนุกและเพลิดเพลินกับการเขียนโปรแกรมนะครับ