คู่มือนี้จะสอนวิธีสร้างแอปไฮบริดโดยใช้ PhoneGap แพลตฟอร์มสร้างแอพยอดนิยม สิ่งที่เรากำลังจะทำคือเปลี่ยนเว็บไซต์ของคุณให้เป็นไฟล์. apk (แอปพลิเคชัน Android) ที่ติดตั้งได้ซึ่งสามารถติดตั้งบนโทรศัพท์ Android ทุกเครื่อง เมื่อแอปเปิดตัวแอปจะเปิดเว็บไซต์ของคุณในเบราว์เซอร์ WebView ดั้งเดิมของ Android แต่จะปรากฏเป็นแอปแบบเต็มหน้าจอโดยไม่มีแถบนำทาง URL หรือเบาะแสอื่นใดที่แสดงว่าเว็บไซต์ของคุณแสดงในเบราว์เซอร์
ข้อกำหนด
เว็บไซต์ของคุณเอง (เพื่อจุดประสงค์ในการทำตามคู่มือนี้คุณสามารถเริ่มบล็อก WordPress ฟรีได้)
บัญชี GitHub
บัญชี PhoneGap
Notepad ++ (หรือซอฟต์แวร์แก้ไขข้อความที่คล้ายกันซึ่งสามารถจดจำรหัสได้)
ซอฟต์แวร์แก้ไขรูปภาพสำหรับสร้างไอคอนแอพ (Photoshop, GIMP ฯลฯ )
เทมเพลตการเข้ารหัส
นี่คือเทมเพลตโค้ดที่คุณสามารถใช้เพื่อจุดประสงค์ของคู่มือนี้ - มาจากแอพของฉันเองที่พัฒนาด้วย PhoneGap แต่ฉันได้ลอกข้อมูลส่วนบุคคลของฉันออกไป การตั้งค่าพารามิเตอร์เหล่านี้ตั้งแต่เริ่มต้นด้วยพารามิเตอร์ที่ถูกต้องทำให้ฉันต้องใช้เวลาหลายวันในการแก้ไขปัญหาดังนั้นฉันจึงให้สิ่งเหล่านี้เพื่อความสะดวก ยินดีต้อนรับ!
> Config.XML
> ดัชนี HTML
เริ่มต้นใช้งาน
สร้างโฟลเดอร์บนเดสก์ท็อปของคุณและเรียกมันว่า“ www: ' ไม่มีเครื่องหมายคำพูด นี่จะเป็นไดเร็กทอรีหลักของโปรเจ็กต์ซึ่งตัวสร้าง PhoneGap คาดหวังว่าจะพบไฟล์ทั้งหมดสำหรับโปรเจ็กต์ของคุณ ตอนนี้เรากำลังจะสร้างไอคอนสำหรับแอปของคุณ
เปิดซอฟต์แวร์แก้ไขรูปภาพของคุณและสร้างภาพใหม่ในรูปแบบ. PNG การตั้งค่าภาพของคุณควรมีลักษณะดังนี้:
ตอนนี้คุณสามารถวาดไอคอนของคุณได้เช่นฉันกำลังจะสร้างปุ่มเล็ก ๆ :
ขนาดของรูปภาพขึ้นอยู่กับหน้าจอโทรศัพท์ส่วนตัวของคุณ แต่หากคุณตั้งใจจะพัฒนาแอปสำหรับอุปกรณ์หลายเครื่องคุณจะต้องสร้างไอคอนเดียวกันหลายขนาด ตารางขนาดภาพที่ใช้มีดังนี้
36 × 36 (120dpi / LDPI)
48 × 48 (160dpi / MDPI)
72 × 72 (240dpi / HDPI)
96 × 96 (320dpi / XHDPI)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640dpi / XXXHDPI)
ฉันไม่อยากใช้เวลานานเกินไปในการพูดคุยเกี่ยวกับขนาดหน้าจอและ DPI เพียงแค่รู้ว่า DPI ค่อนข้างสัมพันธ์กับความละเอียดหน้าจอ โทรศัพท์ที่ใช้ความละเอียดหน้าจอ 1080 × 1920 จะใช้ 480dpi แต่ใช้ไม่ได้ อย่างจำเป็น สัมพันธ์กับขนาดหน้าจอ โทรศัพท์อาจมีหน้าจอขนาด 5.2 นิ้วหรือ 6 นิ้วและมีความละเอียด 1080 × 1920 แต่คู่มือนี้ไม่เกี่ยวกับหน้าจอสมาร์ทโฟนดังนั้นเรามาดูกันดีกว่า
หลังจากวาดไอคอนแล้วให้บันทึกเป็นไฟล์ icon.png และย้ายไปไว้ในโฟลเดอร์ www: ของคุณ สิ่งนี้จะกลายเป็นไฟล์ ค่าเริ่มต้น ไอคอนสำหรับแอปของคุณ หากคุณต้องการสร้างไอคอนในขนาดต่างๆที่ตรงกับความละเอียดหน้าจอของผู้ใช้คุณจะต้องบันทึกไอคอนในขนาดและชื่อที่แตกต่างกันเช่น Icon144.png, Icon192.png, Icon96.png เป็นต้น จากนั้นคุณจะแก้ไขไฟล์ Config.xml เพื่อชี้ไปที่แต่ละไอคอน ไปต่อกันเลย
ตอนนี้คุณมีไอคอนสำหรับแอปแล้วคุณต้องมีภาพสแปลช นี่คือหน้าจอการโหลดเช่นเดียวกับวอลเปเปอร์ที่แสดงก่อนที่แอปของคุณจะโหลด ขนาดภาพสแปลชทำงานบนหลักการเดียวกับไอคอน แต่จะใหญ่กว่าเล็กน้อย นี่คือตาราง:
- LDPI:
- แนวตั้ง: 200x320px
- ภูมิทัศน์: 320x200px
- MDPI:
- แนวตั้ง: 320x480px
- ภูมิทัศน์: 480x320px
- HDPI:
- แนวตั้ง: 480x800px
- ภูมิทัศน์: 800x480px
- XHDPI:
- แนวตั้ง: 720px1280px
- ภูมิทัศน์: 1280x720px
- XXHDPI:
- แนวตั้ง: 960px1600px
- ภูมิทัศน์: 1600x960px
- XXXHDPI:
- แนวตั้ง: 1280px1920px
- ภูมิทัศน์: 1920x1280px
ดังนั้นสร้างภาพสแปลชของคุณด้วยความละเอียดสำหรับอุปกรณ์ของคุณบันทึกเป็น Splash.png จากนั้นย้ายไปไว้ในโฟลเดอร์ของโครงการ เยี่ยมมากตอนนี้คุณมีไอคอนและรูปภาพสแปลชของแอปแล้วเรามาดูการตั้งค่าไฟล์กำหนดค่าและดัชนีกัน
ดัชนี HTML และ Config.XML อธิบาย
ไฟล์ config.xml คือสิ่งที่ตั้งค่าสภาพแวดล้อมการสร้าง (Android, iPhone, Windows Phone) ไอคอนและตำแหน่งที่สาดและปลั๊กอิน Apache Cordova ที่คุณต้องการใช้ในแอปของคุณ
เปิดเทมเพลตที่ฉันให้ไว้ใน Notepad ++ และคุณจะเห็นบรรทัดเหล่านี้ใกล้ด้านบน:
อัปเดตฟิลด์เหล่านั้นด้วยข้อมูลของคุณ แต่ปล่อยให้ฟิลด์ 'ค่ากำหนด' เพียงอย่างเดียว ไฟล์กำหนดค่าที่เหลือสามารถอธิบายได้ด้วยตัวเองหากคุณเพียงแค่ดูที่ค่า ชื่อการตั้งค่า = 'เต็มหน้าจอ' เช่นบอกให้แอปเปิดตัวเองเป็นแอปแบบเต็มหน้าจอ ปล่อยทุกอย่างไว้คนเดียวยกเว้นค่าสุดท้ายนี้ที่ด้านล่างของไฟล์:
เปลี่ยนเป็น URL เว็บไซต์จริงของคุณ วิธีนี้จะช่วยให้ผู้ใช้แอปสามารถสำรวจเว็บไซต์ของคุณได้อย่างสมบูรณ์และมีเพียงเว็บไซต์ของคุณเท่านั้นพวกเขาไม่สามารถออกจากเว็บไซต์ของคุณได้ในขณะที่ใช้แอปของคุณ แน่นอนว่าแอปจะไม่มีแถบนำทาง URL นี่ไม่ใช่เรื่องน่ากังวล แต่ยังทำให้แน่ใจว่าผู้ใช้สามารถเข้าถึงหน้าทั้งหมดในเว็บไซต์ของคุณได้ * หลัง URL ของเว็บไซต์คือไฟล์ สัญลักษณ์แทน ซึ่งในการเข้ารหัสศัพท์แสงหมายความว่าจะยอมรับทุกสิ่งที่ป้อนแทนเครื่องหมาย *
แน่นอนว่าหากคุณต้องการ จำกัด ผู้ใช้เฉพาะบางหน้าในเว็บไซต์ของคุณคุณจะต้องเพิ่มค่าแยกกันดังนี้:
ไปที่ไฟล์ Index.html นี่คือขนมปังและเนยที่ทำให้แอปใช้งานได้จริง เปิดใน Notepad ++ แล้วเปลี่ยนภาษาเอกสารเป็น HTML สิ่งที่ index.html โดยทั่วไปคือบอกเบราว์เซอร์ Android ว่าจะแสดงเว็บไซต์ของคุณอย่างไร - ในเทมเพลตที่ฉันให้ไว้มีแท็กสำหรับลบแถบการนำทาง URL ออกจากเบราว์เซอร์อนุญาตให้ปุ่ม 'ย้อนกลับ' ของโทรศัพท์เพื่อออกจากแอปและเปิด แอพหลังจากหน้าจอเริ่มต้นแสดงขึ้น บรรทัดที่คุณต้องการเปลี่ยนแปลงอยู่ที่นี่:
var url = 'http://yourwebsite.com'
การสร้างแอปใน PhoneGap Build
ดังนั้นลงชื่อเข้าใช้บัญชี GitHub ของคุณและไปที่หน้าหลักของที่เก็บของคุณ ภายใต้ชื่อที่เก็บคลิก“ อัปโหลดไฟล์” แล้วลากโฟลเดอร์โครงการของคุณไปที่หน้าจอแผนผังไฟล์ ตอนนี้พิมพ์ข้อความคอมมิตที่ด้านล่างเช่น“ แอปครั้งแรกของฉัน” . สุดท้ายคลิกยอมรับการเปลี่ยนแปลง
ตอนนี้ไปที่ PhoneGap สร้าง และลงชื่อเข้าใช้ตอนนี้คลิกปุ่ม 'แอปใหม่' ในหน้าสร้าง สิ่งนี้จะขอให้คุณป้อนเส้นทางไปยังที่เก็บ GitHub ของคุณทำเช่นนั้นแล้วคลิก“ ดึงจาก. git reposity”
กลับมาที่หน้าบิลด์หลักคลิก“ อัปเดตโค้ด” และ“ ดึงข้อมูลล่าสุด”
สุดท้ายคลิก 'สร้าง' มันจะรวบรวมแอพของคุณเป็นไฟล์. apk จากนั้นนำเสนอตัวเลือกในการดาวน์โหลด. apk ตอนนี้คุณสามารถดาวน์โหลดไฟล์. apk นี้ลงในคอมพิวเตอร์ของคุณและโอนไปยังโทรศัพท์ของคุณจากนั้นติดตั้งจากที่นั่น หรือคุณสามารถใช้โทรศัพท์สแกนรหัส QR บนหน้าจอคอมพิวเตอร์เพื่อติดตั้งไฟล์. apk ลงในอุปกรณ์ Android ของคุณโดยอัตโนมัติ
แค่นั้นแหละ! ตอนนี้เพื่ออธิบายให้คุณเข้าใจสิ่งสำคัญบางประการ:
- นี่เป็นคำแนะนำที่เรียบง่ายอย่างยิ่งที่จะนำคุณไปสู่การสร้างแอปไฮบริดขั้นพื้นฐานที่สุด โดยทั่วไปผู้คนไม่ได้ใช้เว็บเบราว์เซอร์แบบเนทีฟและส่งต่อเป็นแอป Android บน Google Play Store แต่ตอนนี้คุณรู้วิธีทำแล้วคุณสามารถเริ่มอ่านเอกสาร PhoneGap เกี่ยวกับวิธีปรับแต่งแอปของคุณและเพิ่มรสชาติมากมายเพื่อให้คุณสามารถสร้างแอปที่มีประโยชน์ได้จริง
- ประการที่สอง Google Play ห้ามวิธีการสร้างแอปประเภทนี้เพื่อสร้างแอปโครงร่างลิงก์เพื่อจุดประสงค์ในการสร้างรายได้เพียงอย่างเดียว คุณจึงไม่สามารถสร้างแอปชื่อ“ รับเงินวันนี้!” ที่เปิดเว็บไซต์ที่เต็มไปด้วยโฆษณาและเก็บรายได้จากโฆษณา คุณจะถูกแบนจาก Google Play store
