หนึ่งในความท้าทายหนึ่งของการทำ Mobile Application ก็คือการเตรียมรูปภาพสำหรับ Icon และ Splash screen นั่นเอง เพราะเราต้องเตรียมไฟล์รูปภาพขนาดต่างๆ ให้ตรงกับที่ระบบ iOS และ Android กำหนด
เนื่องจากปัจจุบันเรามีหน้าจอละเอียดน้อย, ปานกลาง, จนไปถึงละเอียดซู๊งสูง แบบมองตรงๆ ไม่ได้เดี๋ยวมันบาดตา ทำให้การเตรียมไฟล์ภาพพวกนี้เป็นเรื่องจุกจิกไม่ใช่น้อย
แต่ตอนที่พลได้ใช้ Ionic Framework พัฒนาโมบายล์แอพพลิเคชั่น มันมีความสามารถที่สุดยอดอย่างหนึ่ง นั่นคือ การสร้างไฟล์รูป Icon และ Splash Screen แบบอัตโนมัติ!
สะดวกสบายมากทีเดียว เพื่อนๆ พลที่ใช้ Native หลายคนยังเอา Ionic ไปลงเพื่อสร้างไฟล์พวกนี้โดยเฉพาะซะด้วย
ทำกันยังไง มาทำไปกับพลเลยครับ
1. สมัครสมาชิก Ionic Pro Account
อันนี้ใครเคยมาเรียนกับพล ตอนแรกสุดมันให้รันคำสั่งได้เลย โดยไม่ต้องสมัครสมาชิกอะไร
แต่ตอนนี้มันจะให้เราสมัครสมาชิกครับ เราสามารถรันคำสั่ง ionic signup จาก Terminal หรือ Command Window ก็จะเปิดมาที่หน้าลงทะเบียนสร้างบัญชี Ionic Pro Account
สมัครให้เสร็จเรียบร้อย และกด Activate Account จาก Email ที่เขาส่งมาให้ด้วยนะ
2. ปรับ Ionic configuration ให้เป็นแบบ Pro
จากนั้นใน Terminal เราจะรันคำสั่งต่อไปนี้
ionic config get -g
เราก็จะเห็นข้อมูล Configuration ของ Ionic ในเครื่องของเรา (-g มาจาก –global นั่นเอง)
ซึ่งให้สังเกตในส่วนค่าที่ชื่อ backend ตรงนี้ถ้ามีค่าเป็น “legacy” เราต้องปรับค่าก่อนด้วยคำสั่ง
ionic config set -g backend pro
เสร็จแล้วลองรันคำสั่ง ionic config get -g อีกที ค่าน่าจะเปลี่ยนแล้วละ
3. ใช้คำสั่งสร้างไฟล์ Icon และ Splash screen สำหรับโมบายล์แอพพลิเคชั่น
จากนั้นให้เราเพิ่ม Platform Android และ iOS ตามต้องการ โดยการใช้คำสั่งตามต้องการ
ionic cordova platform add android ionic cordova platform add ios
** แน่นอนว่าระบบต้องมีการติดตั้ง Android SDK หรือ iOS SDK ที่เหมาะสมแล้ว และ iOS SDK ติดตั้งได้เฉพาะบนระบบ MacOS หรือเครื่อง Mac เท่านั้นนะ
และการ copy รูปภาพที่เตรียมไว้มาวางไว้ในโฟลเดอร์ resources ของโปรเจค
และรันคำสั่งต่อไปนี้ใน Terminal ของโฟลเดอร์โปรเจค (ในที่นี้โค้ชพลใช้ความสามารถของ Visual Studio Code ที่ชื่อ Integrated Terminal)
ionic cordova resources
Ionic จะแสดงส่วนให้ Login เข้าใช้งาน ให้เรากรอก Email และรหัสผ่านที่กำหนดตอนสร้าง Account (รหัสผ่านจะไม่แสดงขึ้นมาในหน้าจอนะ วัดใจกันทีเดียว)
กรอกเรียบร้อยในแต่ละขั้นตอนแล้วก็ให้กด enter
Log into your Ionic account If you don't have one yet, create yours by running: ionic signup ? Email: [email protected] ? Password: [hidden]
เท่านี้ระบบ Ionic ก็จะเริ่มอัพโหลดภาพของเราไปที่ Server ของ Ionic และดาวน์โหลดไฟล์ภาพขนาดต่างๆ มาไว้ในโฟลเดอร์ resources ให้โดยอัตโนมัติ
ง่ายดายเหมือนฝัน!
เรียนรู้วิธีพัฒนา Mobile Application แบบ Cross Platform ด้วย Angular 4 และ Ionic Framework
ส่วนใครสนใจเรียนรู้การพัฒนา Mobile Application ด้วย Angular 4 และ Ionic 3 คลิกดูรายละเอียดได้จากหน้าหลักสูตร และดูกำหนดการรอบต่างๆ ได้จากแฟจเพจ
หรือจะซื้อคอร์สออนไลน์ก็ได้จากลิ้งค์นี้จ้า