สร้าง App Android ด้วย Cordova และ Bootstrap

สวัสดีครับเพื่อนๆ วันนี้ผมจะมาแนะนำการสร้างแอพพลิเคชั่นบนมือถือ ด้วย Cordova

และนี่คือภาพอธิบายสถาปัตยกรรมของ Cordova

       ในบทความนี้ผมจะไม่ขอพูดถึงการติดตั้ง Cordova ให้ไปหาวิธีติดตั้งกันเอาเองนะครัช ..แหะๆ..เอาไว้มีโอกาสผมจะมาแนะนำอีกทีก็แล้วกันครับ
       เพราะฉะนั้นผู้ที่จะลองทำตามบทความนี้ควรติดตั้ง Cordova ให้เรียบร้อยก่อนนะครับ จริงๆแล้วต้องติดตั้งหลายตัวเลยมีทั้ง Android Studio, JAVA JDK, Cordova, node js และอะไรอีกผมจำไม่ได้เอาไว้ค่อยพูดถึงกันอีกทีนะครับ...(รีบเปลี่ยนเรื่อง)

       เอาละครับขั้นตอนที่ 1 ให้เราเปิดตัว cmd ขึ้นมาครับจากนั้นไปที่พาทที่เราต้องการจะเก็บไฟล์โปรเจค Cordova เอาไว้ครับ. อย่างเช่นเครื่องผมต้องการเก็บไฟล์โปรเจค Cordova ไว้ที่พาท  D:\DEV\Cordova  ผมก็พิมพ์ลงไปใน cmd ตามนี้ครับ

C:\>D:
D:\>cd DEV\Cordova

       ขั้นตอนที่ 2 มาสร้าง app กันเลย!!! โดยให้เราเรียกใช้เจ้าตัว Cordova ผ่าน cmd นี่แหละครับทำแบบนี้ครับ

D:\DEV\Cordova>cordova create hello com.example.hello HelloWorld

       อธิบายคำสั่งด้านบนนะครับคือเราเรียกใช้คำสั่ง create ซึ่งเป็นคำสั่งที่ใช้ในการสร้างโปรเจคของ Cordova นั่นเอง จากนั้นใส่อากิวเมนต์ให้มันครับ ตัวแรกคำว่า hello ตัวนี้คือชื่อโปรเจค Cordova จะสร้าง Folder hello ขึ้นมาให้เราเพื่อใช้ในการเก็บไฟล์โปรเจคครับ อากิวเมนต์ตัวที่สอง com.example.hello ตัวนี้จะเป็นเหมือนกับชื่อ package ของ app เราครับถ้าไม่กำหนดชื่อให้มันมันจะกำหนดให้เรา -*- เป็น  io.cordova.hellocordova  แนะนำว่าควรกำหนดเอาไว้จะดีกว่าครับ ไม่งั้นจะมีปัญหาตอนติดตั้ง app คือสมมุติว่าเราสร้าง app มา 3-4 ตัวโดยที่ไม่ตั้งชื่อ package จะทำให้เวลาเราติดตั้ง app จะติดตั้งได้แค่ตัวเดียวครับ พอเราจะติดตั้งตัวอื่นๆมันจะให้อัพเดตแทน...เหตุเพราะชื่อ package มันเหมือนกัน -*- OK นะครับ

       ต่อไปอากิวเมนต์ตัวที่สาม HelloWorld  ตัวนี้จะเป็นชื่อของแอพพลิเคชั่นของเราครับ. ก็ตั้งได้ตามใจชอบเลยครับ.  แต่ถ้าไม่ตั้ง App ของคุณก็จะมีชื่อเป็น HelloCordova เหมือนๆกันหมด

       และทั้งหมดทั้งมวลที่ผมอธิบายไปข้างต้นสามารถเข้าไปแก้ไขได้ในภายหลัง  ในไฟล์ config.xml ครับ. ส่วนต้องเข้าไปแก้ตรงไหนอย่างไร...ไปหาวิธีแก้เอาเอง ฮ่าๆ

       เรามาต่อกันที่ขั้นตอนที่ 3 การ add Platforms จริงๆแล้ว cordova สามารถสร้าง app ได้หลากหลาย platforms มากครับ แต่ในที่นี้เราจะสร้างแอพแอนดรอยด์กันเพราะฉะนั้นเราจะทำแบบนี้ครับ

D:\DEV\Cordova>cd hello

     อธิบายคำสั่งด้านบนคือการเข้าไปที่ Folder โปรเจคของเราซึ่งก็คือ Folder ที่มีชื่อว่า hello นั่นเอง!

     ต่อๆๆขั้นตอนที่ 4...พอเข้ามาที่ Folder โปรเจคได้แล้วเราก็มาทำการ add platforms กันครับโดยใช้คำสั่งดังนี้

D:\DEV\Cordova\hello>cordova platform add android

       เรียบร้อยแล้ว. ตอนนี้เราสร้างแอพแอนดรอยด์ได้แล้ว..เรื่องจริงนะไม่ได้หลอกถ้าไม่เชื่อผมจะรันแอพ Cordova ให้ดูโดยใช้คำสั่งดังนี้ครับ

D:\DEV\Cordova\hello>cordova run

       หมายเหตุ: การใช้คำสั่ง cordova run ควรเข้าไปในพาทโปรเจคของ cordova ก่อนจึงจะสามารถใช้คำสั่งนี้ได้นะครับ

          และนี่คือหน้าตาโปรแกรมที่เราสร้างมันขึ้นมากับมือเมื่อตะกี้...(จริงๆแล้ว Cordova สร้างให้)  เอาละครับเมื่อเรารันโปรเจคของเราได้แล้ว...ต่อไปก็เข้าสู่การนำ Bootstrap เข้ามาใส่ใน Cordova ซึ่งวิธีก็มีดังนี้!!!!

      ก่อนอื่นให้เราไปหาโหลด Theme free ของ Bootstrap มาครับส่วนผมขอเลือก theme ของ bootstrap ตัวนี้ครับ SB Admin2 โหลดได้ที่ http://startbootstrap.com/template-overviews/sb-admin-2/

      เมื่อเราดาวน์โหลด theme มาเรียบร้อยแล้วให้เราก็อปปี้ไฟล์ theme ที่เราโหลดมาทั้งหมดไปไว้ที่ folder โปรเจคของเราโดยในที่นี้โปรเจคของผมอยู่ที่ D:\DEV\Cordova\hello อะอะอะเดี๋ยวก่อนไม่ได้ให้ก็อปปี้ไว้ที่ตรงนี้นะครับให้เราก็อปปี้ไว้ที่ Folder www ครับ เพราะงั้นผมจะก็อปปี้เอาไปไว้ตามพาทนี้ครับ D:\DEV\Cordova\hello\www  ที่นี่แหละครับที่ผมจะบอก :)
      ก่อนก็อปปี้ให้ลบไฟล์ตัวเติมที่ Corova สร้างเอาไว้ให้ออกให้หมดก่อนนะครับเหลือไว้แค่ Folder img ก้ได้ครับ เอาละผมจะก็อปปี้ไปไว้ละนะ

       ก็อปปี้เสร็จเรียบร้อย...และนี่คือไฟล์ และ Folder ทั้งหมดใน www ของผม...อย่างที่เห็นครับมันเป็น Web และมี ไฟล์ index.html ด้วย และตัว index.html ก็คือหน้าหลักของแอพเรานั่นเอง...

      ทีนี้เรามาลองรันโปรแกรมกันใหม่อีกรอบโดยใช้คำสั่ง cordova run ดังตัวอย่างด้านล่าง

D:\DEV\Cordova\hello>cordova run

       แท่นแทนแท๊น...มันออกมาแร้ว Bootstrap on Cordova :)

       จบเสียที....หอบแปบ....บทความนี้เป็นบทความที่ยาวมากๆ หลังจากที่ผมกลับมาเขียนบล็อกในรอบ 5ปี... ฮ่าๆๆๆ เอาละครับเมื่อรัน Cordova + Bootstrap ได้แล้วผมก็คงต้องขอจบบทความแต่เพียงเท่านี้ไว้พบกันใหม่บทความหน้าครับ :)