วิธีการสร้างแอป Android ขั้นพื้นฐานใน PhoneGap

สำหรับคนส่วนใหญ่แนวคิดในการสร้างแอป Android เป็นเสียงลำบากเช่นการปีนเขา ผู้คนใช้เวลาหลายเดือนเรียนรู้วิธีการสร้างรหัสและใช้ SDK Android เพื่อพัฒนาแอปและคนโดยเฉลี่ยโดยเฉพาะเจ้าของธุรกิจออนไลน์อาจไม่มีเวลาแบบนี้

โชคดีที่มีทางลัดที่ง่ายในการสร้างสิ่งที่เรียกว่า แอ็พพลิเคชันไฮบริด ซึ่งต่างไปจากการสร้าง แอปพลิเคชันเนทีฟ แอปพลิเคชันไฮบริดโดยทั่วไปจะใช้แอนดรอยด์ที่สร้างขึ้นใน WebView เพื่อนำเสนอแอปพลิเคชันของคุณพร้อมด้วยปลั๊กอินที่ช่วยให้แอปพลิเคชันไฮบริดของคุณสามารถเข้าถึงกล้องถ่ายรูปบริการส่งข้อความและด้านอื่น ๆ ของระบบ Android แอปพลิเคชันไฮบริดสามารถสร้างได้ง่ายสำหรับระบบปฏิบัติการหลายระบบเนื่องจากพวกเขาใช้ Java, HTML5 และ CSS เป็นหลัก

คู่มือนี้จะสอนวิธีสร้างแอปพลิเคชันไฮบริดโดยใช้แพลตฟอร์ม PhoneGap PhoneGap ของ App-Building ที่ได้รับความนิยม สิ่งที่เรากำลังจะทำคือเปิดเว็บไซต์ของคุณให้เป็นไฟล์. apk (แอพพลิเคชัน Android) ที่สามารถติดตั้งได้ซึ่งสามารถติดตั้งได้บนโทรศัพท์ Android เมื่อเปิดตัวแอปแล้วจะเป็นการเปิดเว็บไซต์ของคุณในเบราว์เซอร์ WebView ของ Android แต่จะปรากฏเป็นแอปแบบเต็มหน้าจอไม่มีแถบนำทาง URL หรือเงื่อนงำอื่น ๆ ที่เว็บไซต์ของคุณแสดงอยู่ในเบราว์เซอร์

ความต้องการ

เว็บไซต์ของคุณเอง (เพื่อวัตถุประสงค์ในการทำตามคำแนะนำนี้คุณสามารถเริ่มบล็อก WordPress ฟรี)

บัญชี GitHub

บัญชี PhoneGap
Notepad ++ (หรือซอฟต์แวร์แก้ไขข้อความที่คล้ายคลึงกันซึ่งสามารถรับรู้รหัส)
ซอฟต์แวร์แก้ไขภาพสำหรับสร้างไอคอนแอป (Photoshop, GIMP ฯลฯ )

แม่แบบการเข้ารหัส

นี่คือเทมเพลตโค้ดที่คุณสามารถใช้เพื่อจุดประสงค์ของคู่มือนี้ได้จากแอปของเราที่พัฒนาขึ้นโดยใช้ PhoneGap แต่ฉันได้ลบข้อมูลส่วนบุคคลของฉันแล้ว การตั้งค่าเหล่านี้ตั้งแต่เริ่มต้นด้วยพารามิเตอร์ที่ถูกต้องทั้งหมดทำให้ฉันได้รับการแก้ไขปัญหาเป็นเวลาหลายวันดังนั้นฉันจึงให้บริการเหล่านี้เพื่อความสะดวกของคุณ ยินดีต้อนรับ!

> config.xml
> index.html

เริ่มต้นใช้งาน

สร้างโฟลเดอร์บนเดสก์ท็อปและเรียก www: ไม่มีคำพูด นี่จะเป็นไดเร็กทอรีหลักของโครงการซึ่ง PhoneGap builder คาดว่าจะค้นหาไฟล์ทั้งหมดสำหรับโครงการของคุณ ตอนนี้เราจะสร้างไอคอนสำหรับแอปของคุณ

เปิดซอฟต์แวร์แก้ไขภาพและสร้างรูปใหม่ในรูปแบบ. 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 เพื่อชี้ไปที่แต่ละไอคอน ขอต่อไป

ตอนนี้คุณมีไอคอนสำหรับแอปพลิเคชันแล้วคุณต้องมีภาพสาด นี่เป็นพื้นหน้าจอการโหลดเช่นเดียวกับวอลเปเปอร์ที่แสดงก่อนโหลดแอปของคุณ ขนาดภาพขนาด Splash ทำงานบนหลักการเดียวกับไอคอน แต่มีขนาดใหญ่กว่าเล็กน้อย นี่คือตาราง:

PRO TIP: หากปัญหาเกิดขึ้นกับคอมพิวเตอร์หรือแล็ปท็อป / โน้ตบุ๊คคุณควรลองใช้ซอฟต์แวร์ Reimage Plus ซึ่งสามารถสแกนที่เก็บข้อมูลและแทนที่ไฟล์ที่เสียหายได้ วิธีนี้ใช้ได้ผลในกรณีส่วนใหญ่เนื่องจากปัญหาเกิดจากความเสียหายของระบบ คุณสามารถดาวน์โหลด Reimage Plus โดยคลิกที่นี่

LDPI:
- ภาพบุคคล: 200x320px
- แนวนอน: 320x200px
MDPI:
- ภาพบุคคล: 320x480 พิกเซล
- แนวนอน: 480x320px
HDPI:
- ภาพบุคคล: 480x800px
- แนวนอน: 800x480 พิกเซล
XHDPI:
- ภาพบุคคล: 720px1280px
- แนวนอน: 1280x720px
XXHDPI:
- ภาพบุคคล: 960px1600px
- แนวนอน: 1600x960px
XXXHDPI:
- ภาพบุคคล: 1280px1920px
- แนวนอน: 1920x1280 พิกเซล

ดังนั้นให้สร้างภาพสาดในความละเอียดสำหรับอุปกรณ์ของคุณบันทึกเป็น Splash.png แล้วย้ายไปไว้ในโฟลเดอร์ของโครงการ ดีตอนนี้คุณมีไอคอนแอปและภาพสาดภาพแล้วให้ไปที่การตั้งค่าไฟล์ config และดัชนีของคุณ

อธิบาย Index.HTML และ Config.XML

ไฟล์ config.xml คือสิ่งที่กำหนดสภาวะแวดล้อมการสร้าง (Android, iPhone, Windows Phone) ไอคอนและตำแหน่งสแปลชและปลั๊กอิน Apache Cordova ที่คุณต้องการใช้ในแอปของคุณ

เปิดเทมเพลตที่ฉันให้ไว้ใน Notepad ++ และคุณจะเห็นบรรทัดเหล่านี้ใกล้ด้านบน:

อัปเดตข้อมูลเหล่านั้นด้วยข้อมูลของคุณ แต่ปล่อยให้ฟิลด์ค่ากำหนดเพียงอย่างเดียว ส่วนที่เหลือของไฟล์ config จะอธิบายได้ถ้าคุณเพิ่งดูค่า ชื่อตัวอย่าง = แบบเต็มหน้าจอบอกให้แอปเปิดตัวเป็นแอปแบบเต็มจอ ทิ้งทุกอย่างไว้เพียงลำพังยกเว้นค่าสุดท้ายที่ด้านล่างของไฟล์:

เปลี่ยนเป็น URL เว็บไซต์จริงของคุณ วิธีนี้จะช่วยให้ผู้ใช้แอปพลิเคชันสามารถสำรวจเว็บไซต์ของคุณได้อย่างสมบูรณ์และมีเฉพาะเว็บไซต์ของคุณเท่านั้นพวกเขาไม่สามารถออกจากเว็บไซต์ของคุณขณะที่ใช้แอปได้ แน่นอนแอปพลิเคชันจะไม่มีแถบนำทาง URL แต่นี่ไม่ใช่เรื่องที่น่าเป็นห่วง แต่ยังทำให้แน่ใจได้ว่าผู้ใช้สามารถเข้าถึงหน้าเว็บทั้งหมดในเว็บไซต์ของคุณได้ * หลังจาก URL ของเว็บไซต์เป็น สัญลักษณ์แทน ซึ่งในศัพท์บัญญัติการเข้ารหัสหมายความว่าจะยอมรับสิ่งที่ป้อนในตำแหน่งของเครื่องหมาย *

แน่นอนถ้าคุณต้องการ จำกัด ผู้ใช้เฉพาะบางหน้าในเว็บไซต์ของคุณคุณจะต้องเพิ่มค่าที่แยกต่างหากเช่นนี้:

ลองไปที่ไฟล์ Index.html นี่คือขนมปังและเนยที่ทำให้แอปใช้งานได้จริง เปิดใน Notepad ++ และเปลี่ยนภาษาของเอกสารเป็น HTML สิ่งที่ index.html กล่าวคือบอกเบราว์เซอร์ Android วิธีแสดงเว็บไซต์ของคุณ - ในเทมเพลตที่ฉันระบุมีแท็กที่เอาแถบนำทาง URL ออกจากเบราว์เซอร์อนุญาตให้ปุ่มย้อนกลับของโทรศัพท์ออกจากแอปและเปิดแอป หลังจากหน้าจอเริ่มปรากฏขึ้น บรรทัดที่คุณต้องการเปลี่ยนอยู่ที่นี่:

var url = 'http://yourwebsite.com'

สร้างแอปพลิเคชันใน PhoneGap Build

เพื่อเข้าสู่บัญชี GitHub ของคุณและไปที่หน้าหลักของพื้นที่เก็บข้อมูลของคุณ ภายใต้ชื่อพื้นที่เก็บข้อมูลให้คลิกอัปโหลดไฟล์และลากโฟลเดอร์โครงการของคุณไปที่หน้าจอไฟล์ต้นไม้ ตอนนี้พิมพ์ข้อความยืนยันที่ด้านล่างเช่น ความพยายามในแอปแรกของฉัน สุดท้ายคลิก Commit Changes

ไปที่หน้า PhoneGap Build และลงชื่อเข้าใช้แล้วคลิกปุ่ม New App ในหน้า build ซึ่งจะขอให้คุณป้อนเส้นทางไปยังที่เก็บ GitHub ของคุณดังนั้นให้ทำแล้วคลิกดึงจาก. git repo

ตอนนี้กลับมาที่หน้าหลักของการสร้างคลิกรหัสการอัปเดตและดึงล่าสุด

สุดท้ายคลิกสร้าง จะรวบรวมแอปพลิเคชันของคุณไว้ในไฟล์. apk จากนั้นจะแสดงตัวเลือกในการดาวน์โหลดไฟล์. apk ขณะนี้คุณสามารถดาวน์โหลดไฟล์. apk นี้ไปยังคอมพิวเตอร์ของคุณแล้วถ่ายโอนไปยังโทรศัพท์แล้วติดตั้งจากที่นั่น หรือคุณสามารถใช้โทรศัพท์ของคุณเพื่อสแกนโค้ด QR บนหน้าจอคอมพิวเตอร์เพื่อติดตั้งไฟล์. apk ลงในอุปกรณ์แอนดรอยด์ของคุณโดยอัตโนมัติ

แค่นั้นแหละ! ตอนนี้เพื่ออธิบายสิ่งสำคัญบางอย่างให้คุณ:

นี่เป็นคำแนะนำง่ายๆที่นำคุณไปสู่การสร้างแอพพลิเคชันลูกผสมแบบพื้นฐานที่สุด โดยทั่วไปผู้คนมักไม่ค่อยตัดเว็บไซต์ของตนในเบราว์เซอร์ดั้งเดิมและนำแอปดังกล่าวออกเป็นแอป Android บน Google Play สโตร์ แต่ตอนนี้คุณรู้ว่าจะทำอย่างไรคุณสามารถเริ่มอ่านเอกสาร PhoneGap เกี่ยวกับวิธีปรับแต่งแอปของคุณและเพิ่มรสชาติให้มากขึ้นเพื่อหวังว่าคุณจะสามารถสร้างแอปที่เป็นประโยชน์ได้จริง
ประการที่สอง Google Play ห้ามวิธีการสร้างแอปนี้เพื่อสร้างแอ็พพลิเคชันการเชื่อมโยงเพื่อวัตถุประสงค์ในการสร้างรายได้ ดังนั้นคุณจึงไม่สามารถสร้างแอปพลิเคชันที่เรียกว่า Earn Money Today! ที่เปิดเว็บไซต์ที่เต็มไปด้วยโฆษณาและธนาคารเกี่ยวกับรายได้จากโฆษณา คุณจะถูกแบนจากร้านค้า Google Play