การติดตั้ง Ionic Framework

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

สิ่งที่ใช้ในการติดตั้ง Ionic Framework ในครั้งนี้มี

เปิด Command Prompt รอขึ้นมา ด้วยการไปที่ค้นหาตรง window พิมพ์ cmd หรือ Command Prompt

1.การติดตั้ง Node.js

Node.js คืออะไร?

Node.js เป็นเหมือน Server ที่ช่วยจัดการส่วน JavaSript ให้ทำงานได้รวดเร็วมากขึ้น ซึ่งเราไม่จับเป็นยุ่งอะไรกับมัน เพียงแค่เอามาใช้เป็น Server เท่านั้น หากใครเคยพัฒนา Web Application มาก็เหมือนกัน Tomcat , MAMP นั้นแหละ

https://nodejs.org/en/download/

ส่วนการติดตั้ง ก็เพียงไป Download ตัวติดตั้งมาที่เว็บของ Node.js สามารถกดติดตั้งได้เลย เมื่อติดตั้งเรียบร้อยแล้ว  ให้เปิด Command Prompt ขึ้นมาก เพื่อตรวจสอบดูว่า มี Node.js อยู่ในเครื่องหรือยัง ด้วยการพิมพ์ลงไป

node -v

 

2.การติดตั้ง Git

Git คือ Version Control แบบนึง ซึ่งหากใครเป็นโปรแกรมเมอร์อยู่แล้วก็น่าจะเคยใช้กันอยู่แล้ว มันใช้สำหรับควบคุบการ เพิ่ม ลบ แก้ไขไฟล์ ของ source code ซึ่ง Git ก็เป็นแบบนั้นในรูปแบบที่อยู่บน Cloud ซึ่ง Ionic ต้องใช้ Git ในการเรียกดึกข้อมูล source code หรือ ไฟล์ต่าง ของ Ionic มาไว้ในเครื่องของเรานั้นเอง

https://git-scm.com/downloads

ส่วนการติดตั้ง ก็เพียงไป Download ตัวติดตั้งมาที่เว็บของ Git สามารถกดติดตั้งได้เลย เมื่อติดตั้งเรียบร้อยแล้ว  ให้เปิด Command Prompt ขึ้นมาก เพื่อตรวจสอบดูว่า มี Git อยู่ในเครื่องหรือยัง ด้วยการพิมพ์ลงไป

git –version

การติดตั้ง Apache Cordova CLI และ Ionic Framwork

เปิด Command Prompt พิมพ์ว่า

nmp install -g cordova

จากนั้นรอจนกว่าจะระบบจะทำเสร็จ จากนั้นพิมพ์

nmp install -g ionic

จากนั้นรอจนกว่าจะระบบจะทำเสร็จ จากนั้นพิมพ์

ionic

หากขึ้นตามภาพแสดงว่า เราติดตั้ง ionic framwork เรียบร้อยแล้ว

—————–

ตั้งแต่ตรงนี้เป็นเรื่องของ Android เท่านั้น เพราะว่าผมไม่มีเครื่อง Mac เลยไม่สามารถลง IOS ได้
—————–

ก่อนอื่นให้ติดตั้ง Java SDK ก่อน

สามารถ Download ได้ที่ http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

จากนั้นติดตั้งปกติสนเสร็จ

 

การติดตั้ง Android Studio

สามารถ Download ได้ที่ https://developer.android.com/studio/index.html

จากนั้นติดตั้งปกติสนเสร็จ

ขั้นตอนต่อมาขึ้นการตั้ง Path เพื่อใช้งาน

C:\Users\User\AppData\Local\Android\sdk\tools

C:\Users\User\AppData\Local\Android\sdk\platform-tools

User ปกติจะเป็นชื่อเราในเครื่องคอม

ไปที่ System Properties > Environment Variables > System Variables กด Edit

เมื่อมีหน้าตาใหม่ขึ้นมา กด New แล้วใส่ที่อยู่ตามด้านบน

 

การติดตั้งเครื่องจำลองมือถือ หรือ Emulators

ผมใช้ MEmu สามารถ Download ได้ที่นี่ https://memu.en.softonic.com/download?ex=DSK-347.2

จากนั้นติดตั้งปกติสนเสร็จ

 

ติดตั้ง Ant

Download ได้ที่นี่ https://code.google.com/archive/p/winant/downloads

จากนั้นติดตั้งปกติสนเสร็จ

ทั้งหมดคือขั้นตอน การติดตั้ง Ionic Framework ผ่าน Window ซึ่งขั้นตอนนี้จะทำครั้งเดียวก่อนที่จะเริ่มเขียนเท่านั้น ดังนั้นมันจะยุ่งอยากแค่ครั้งเดียว หลังจากนี้จะเป็นเรื่องการพัฒนาโปรแกรมมือถือด้วย Ionic Framework