tutorial - IONIC FRAMEWORK เขียน Mobile App ด้วย HTML เริ่มต้น (0)

|


วันนี้ มากับบทความสั้นๆ เกี่ยวกับ ionicframework ซึ่งข้างในจะประกอบไปด้วย html , angularjs ,css , cli ต่างๆจริงๆแล้วสามารถเลือกใช้แค่ css อย่างเดียวก็ได้นะครับ แต่จะไม่สามารถใช้ความพิเศษๆอย่าง pull-down-refresh , infinite-scroll ครับถ้าไม่มี angularjs มาช่วย เพราะฉะนั้นอาจจะต้องรู้เกี่ยวกับ angularjs อยู่บ้างไม่น้อยครับ

บทความนี้ อาจจะงงนิดๆนะครับเพราะว่า เวลาจะสร้าง โปรเจคหรือรันอะไรจะอยู่บ้าน command-line ซึ่งตัวอย่างที่ผมจะสร้างให้ดูนี้มีจะอยู่บน OSX ซึ่งถ้า Window อาจจะต้องดู PATH กันให้ถูกด้วยนะครับ **ถ้าบนวินโดวไม่ต้องพิม sudo นะ!!!

(บทความนี้มีอยู่ในเว็บนะถ้าผมเขียนงงๆก็เปิดเว็บอ่านอาจจะเข้าใจได้ไวกว่า 555+ ) โอเคเริ่มทัวๆ 55 เริ่มแรกเลยเนี่ยเราต้องติดตั้ง ionicframework ก่อนนะครับด้วยคำสั่ง

 

Screen Shot 2557-10-19 at 2.30.26 PM

Screen Shot 2557-10-19 at 1.09.49 PM

เมื่อเสร็จก็จะขึ้นดังรูปก็คือจะบอกว่าสามารถเรียกใช้คำสั่งอะไรทำอะไรได้บ้างหรือสามารถพิมคำว่า ionic เพื่อดู command ต่างๆได้ครับ

Screen Shot 2557-10-19 at 1.52.37 PM

หลังจากเราสามารถใช้คำสั่ง ionic เพื่อสร้างโปรเจค หรือ บิ้วและรัน ได้อีกด้วย
โดยเวลาสร้างโปรเจคให้พิมดังรูป myApp คือชื่อโปรเจคของเรา ส่วน sidemenu คือรูปแบบแอปเริ่มต้น สามารถเปลี่ยนเป็น blank,tabmenu ก็ได้สามารถดูเพิ่มเติมได้ที่หน้าเว็บ ionic นะครับ

Screen Shot 2557-10-19 at 2.30.14 PM

จากนั้นให้เราก็จะได้โฟลเดอร์ myApp ขึ้นมา ดังภาพ

Screen Shot 2557-10-19 at 2.32.58 PM

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

เราสามารถทดลองรันโปรเจคบนเว็บเบร้าเซอร์ของเราได้ โดยพิมคำสั่ง ionic serve จากนั้นระบบจะมีให้เลือกชื่อ host ว่าเป็นแบบไหนเราก็เลือกได้เลย สังเกตจากในภาพ ถ้าหากเราพิม ionic serve แล้วมันไม่ขึ้นดังภาพให้ดูว่าเราอยู่ใน folder myApp รึยังนะครับ

Screen Shot 2557-10-19 at 1.54.14 PM

ในตัวอย่างเลือกเป็น localhost (2) เราสามารถเข้า url ที่ระบบให้มาจาก browser ได้นะครับจะเป็นแบบในรูปเลยก็คือโปรเจคมี sidemenu เปิดปิดได้มี list nav อะไรต่างๆ

Screen Shot 2557-10-19 at 1.55.03 PM

 

ฮะๆเมื่อมาถึงตรงนี้แล้วหลายๆคนอาจจะงง แล้วมันยังไงจะไปเป็น mobile app ยังไงซึ่งส่วนนี้เราจะพิมเพิ่ม platform ที่เราจะรองรับลงในโปรเจคเสียก่อนเช่นจะให้รันบน iphone ก็ต้องพิม ionic platform add ios หรือ android ก็ต้องพิม ionic platform add android ซึ่งถ้าหาก ios เราจะต้องติดตั้ง xcode ไว้ด้วยนะครับหรือถ้า android ก็ต้องลง sdk และทำการ set path ต่างๆไม่งั้นจะขึ้น error แน่ๆครับ

จากนั้นเมื่อเราพิม ionic platform add ios จะได้ดังรูป

** สำคัญมากถ้าเราจะลองรัน ios บน emulator ของเครื่องเราจำเป็นต้องลองแพคเกจจำลอง ios-sim ให้พิมว่า npm install -g ios-sim

 

Screen Shot 2557-10-19 at 1.57.41 PM

 

จากนั้นจะมีโฟลเดอร์ platform ขึ้นมาจะเห็นว่าด้านในเป็นไฟล์เดอร์ xcode

 

Screen Shot 2557-10-19 at 1.58.35 PM

 

แต่ไม่ต้องไปวุ่นวายอะไรกับมันมากถ้าหากเราไม่ได้จะตั้งค่าอะไรหรือพิศษหรือทำอะไรมันลํ้าลึก 555 เดียวจะยิ่งงง โอเคทีนี้เราพร้อมแล้ว ติดตั้งอะไรเรียบหมดแล้วจากด้านบน พร้อมรันในเครื่องแล้วให้เราพิม ionic emulate ios จากนั้น ระบบจะทำ emu แอปของเราบน iphone ขึ้นมาครับ ในกรณี android ก็เหมือนกัน แต่ถ้าจะรันบนเครื่องจริงต้องพิม ionic run ios หรือ ionic run android ก็ได้ครับ

Screen Shot 2557-10-19 at 2.00.46 PM

 

 

 

โอเคน่าจะเรียบร้อยแล้วครับถ้าจะแก้ค่าอะไรให้แก้ www ที่ root บนสุดแล้วพิม ionic build ios แล้วค่อย emulate หรือ run นะครับ ระบบจะทำการ copy www ที่ myApp ไปใส่ใน ios/www ให้เราเอง

บทความนี้มีแค่พาทัวเท่านี้แหละครับเอิ้กๆสำหรับใครที่สนใจเพิ่มเติมก็เข้าไปดูในเว็บเค้าได้นะครับมี demo มีอะไรอีกมากมายเลยทีเดียว สุดท้ายนี้อาจจะต้องระวังนิดนึงเพราะ ionic ยังคงเป็น beta อยู่ อาจจะยังมี bug หรือะไรอยู่ให้ลองเล่นอะไรดูเยอะๆก่อนจะเอาไปใช้งานจริงนะครับ โชคดี^^

Share Button

Comments

comments