PhoneGap - การตั้งค่าสภาพแวดล้อม
ในบทนี้เราจะเรียนรู้วิธีตั้งค่าสภาพแวดล้อมพื้นฐานเพื่อสร้างแอพได้อย่างง่ายดาย แม้ว่า PhoneGap จะรองรับการสร้างแอพออฟไลน์โดยใช้อินเทอร์เฟซบรรทัดคำสั่ง Cordovaและกลไกการจัดเก็บ Githubแต่เราจะมุ่งเน้นไปที่ขั้นตอนความพยายามขั้นต่ำ
เราถือว่าคุณมีความเชี่ยวชาญในเทคโนโลยีเว็บเป็นอย่างดีและมีเว็บแอปพลิเคชันของคุณพร้อมที่จะจัดส่งเป็นแอป เนื่องจาก PhoneGap รองรับเฉพาะ HTML, CSS และ JavaScript จึงจำเป็นต้องสร้างแอปพลิเคชันโดยใช้เทคโนโลยีเหล่านี้เท่านั้น
จากมุมมองของนักพัฒนาแอปควรมีรายการต่อไปนี้รวมอยู่ในแพ็คเกจ -
- ไฟล์การกำหนดค่า
- ไอคอนสำหรับแอป
- ข้อมูลหรือเนื้อหา (สร้างโดยใช้เทคโนโลยีเว็บ)
การกำหนดค่า
เว็บแอปของเราต้องการไฟล์การกำหนดค่าเพียงไฟล์เดียวที่ควรเพียงพอสำหรับกำหนดการตั้งค่าที่จำเป็นทั้งหมด ชื่อของมันคือ config.xml ไฟล์นี้มีข้อมูลที่จำเป็นทั้งหมดในการคอมไพล์แอพ
ให้เราดู config.xml สำหรับตัวอย่างของเรา -
<?xml version = "1.0" encoding = "UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0">
<name>Tutorials Point</name>
<description>
Tutorials Point Online Viewer
</description>
<author href = "http://tutorialspoint.com" email = "[email protected]">
Tutorials Point
</author>
<preference name = "permissions" value = "none"/>
<icon src = "res/icon/android/drawable-ldpi/tp_icon.png"
gap:platform = "android" gap:qualifier = "ldpi" />
<icon src = "res/icon/android/drawable-mdpi/tp_icon.png"
gap:platform = "android" gap:qualifier = "mdpi" />
<icon src = "res/icon/android/drawable-hdpi/tp_icon.png"
gap:platform = "android" gap:qualifier = "hdpi" />
<icon src = "res/icon/android/drawable-xhdpi/tp_icon.png"
gap:platform = "android" gap:qualifier = "xhdpi" />
<icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png"
gap:platform = "android" gap:qualifier = "xxhdpi" />
<icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
<icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" />
<icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" />
<icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" />
<icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" />
</widget>
เนื้อหาการกำหนดค่าทั้งหมดอยู่ในแท็ก <widget> คำอธิบายสั้น ๆ มีดังต่อไปนี้ -
<widget id = ”app_id”>
id คือรหัสแอปที่คุณสงวนไว้ในร้านค้าแอปต่างๆ เป็นชื่อโดเมนแบบย้อนกลับเช่น com.tutorialspoint.onlineviewer เป็นต้น
<widget version = "x.y.z">
นี่คือหมายเลขเวอร์ชันของแอปในรูปแบบ xyz โดยที่ (x, y, z) เป็นจำนวนเต็มบวกเช่น 1.0.0 ซึ่งแสดงถึงระบบเวอร์ชัน major.minor.patch
<name> App Name</name>
นี่คือชื่อของแอพซึ่งจะแสดงอยู่ใต้ไอคอนแอพบนหน้าจอมือถือ แอปของคุณสามารถค้นหาได้โดยใช้ชื่อนี้
<description> My First Web App </description>
นี่คือคำอธิบายสั้น ๆ ว่าแอพนี้เกี่ยวกับอะไรและมันคืออะไร
<author> Author_Name </author>
ฟิลด์นี้ประกอบด้วยชื่อของผู้สร้างหรือโปรแกรมเมอร์โดยทั่วไปจะตั้งเป็นชื่อองค์กรที่เปิดตัวแอปนี้
<preferences name = "permissions" value = "none">
แท็กการตั้งค่าใช้เพื่อตั้งค่าตัวเลือกต่างๆเช่น FullScreen, BackgroundColor และ Orientation สำหรับแอป ตัวเลือกเหล่านี้อยู่ในคู่ชื่อและค่า ตัวอย่างเช่น name = "FullScreen" value = "true" เป็นต้นเนื่องจากเราไม่ต้องการการตั้งค่าล่วงหน้าใด ๆ เหล่านี้เราจึงไม่ใส่สิทธิ์ใด ๆ
<icon>
ช่วยให้เราสามารถเพิ่มไอคอนให้กับแอพของเรา สามารถเข้ารหัสได้หลายวิธี แต่เนื่องจากเรากำลังเรียนรู้ทุกสิ่งอย่างสั้น ๆ จึงอยู่ที่นี่ .srcกำหนดเส้นทางของภาพไอคอน gap:platformกำหนดว่าไอคอนนี้จะใช้กับแพลตฟอร์มระบบปฏิบัติการใด gap:qualifierคือความหนาแน่นที่ใช้โดยอุปกรณ์ Android อุปกรณ์ iOS ใช้width & height พารามิเตอร์
ไอคอน
มีอุปกรณ์หลายขนาดที่มีระบบปฏิบัติการมือถือเดียวกันดังนั้นในการกำหนดเป้าหมายผู้ชมของแพลตฟอร์มเดียวคุณจำเป็นต้องให้ไอคอนของโทรศัพท์มือถือทุกประเภทด้วย สิ่งสำคัญคือเราต้องเตรียมไอคอนที่มีรูปร่างและขนาดที่แน่นอนตามที่ระบบปฏิบัติการมือถือเฉพาะกำหนด
ที่นี่เรากำลังใช้โฟลเดอร์ res/icon/ios และ res/icon/android/drawable-xxxx..
เพื่อให้งานนี้เสร็จเร็วคุณสามารถสร้างโลโก้ขนาด 1024x1024 และเข้าสู่ระบบ makeappicon.com เว็บไซต์นี้จะช่วยให้คุณสร้างโลโก้ทุกขนาดได้ทันทีสำหรับทั้งแพลตฟอร์ม Android และ iOS
หลังจากให้ภาพไอคอนขนาด 1024x1024 makeappicon.com ควรระบุสิ่งต่อไปนี้ -
Icons for iOS
Icons for Android
เว็บไซต์นี้มีตัวเลือกให้คุณส่งอีเมลโลโก้ทั้งหมดในรูปแบบ zip ไปที่หน้าประตูบ้านของคุณ (แน่นอนว่าเป็นอีเมล!)