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 ไปที่หน้าประตูบ้านของคุณ (แน่นอนว่าเป็นอีเมล!)