Ionic FrameworkIonic Framework

วิธีสร้างภาพ Icon และ Splash Screen ให้ Mobile App รวดเดียวจบด้วย Ionic

เรื่องที่เกี่ยวข้อง - , , ,

หนึ่งในความท้าทายหนึ่งของการทำ 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 ที่เขาส่งมาให้ด้วยนะ

Ionic Signup.png

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: training@nextflow.in.th

? Password: [hidden]

เท่านี้ระบบ Ionic ก็จะเริ่มอัพโหลดภาพของเราไปที่ Server ของ Ionic และดาวน์โหลดไฟล์ภาพขนาดต่างๆ มาไว้ในโฟลเดอร์  resources ให้โดยอัตโนมัติ

ง่ายดายเหมือนฝัน!

เรียนรู้วิธีพัฒนา Mobile Application แบบ Cross Platform ด้วย Angular 4 และ Ionic Framework

ส่วนใครสนใจเรียนรู้การพัฒนา Mobile Application ด้วย Angular 4 และ Ionic 3 คลิกดูรายละเอียดได้จากหน้าหลักสูตร และดูกำหนดการรอบต่างๆ ได้จากแฟจเพจ

หรือจะซื้อคอร์สออนไลน์ก็ได้จากลิ้งค์นี้จ้า

Loading Facebook Comments ...
Menu