PhoneGap: มันคืออะไร คุณสมบัติ และการสร้างแอปบนแพลตฟอร์ม Adobe

PhoneGap คืออะไร?

PhoneGap คือแพลตฟอร์มสำหรับพัฒนาแอปพลิเคชันมือถือ สร้างขึ้นครั้งแรกโดย Nitobi Software ในปี 2009 ในปี 2011 Adobe เข้าซื้อ Nitobi และเปิดตัว PhoneGap เป็นผลิตภัณฑ์เชิงพาณิชย์ พร้อมโอนแกนหลักของเฟรมเวิร์กไปยัง Apache Software Foundation ภายใต้ชื่อ Cordova

ประวัติและวิวัฒนาการ

PhoneGap ถูกสร้างขึ้นในการประชุม iPhoneDevCamp ในปี 2008 ซึ่งนักพัฒนาของ Nitobi Software ได้สาธิตเทคโนโลยีการห่อหุ้มเว็บแอปพลิเคชันในคอนเทนเนอร์เนทีฟ เวอร์ชันสาธารณะแรกเปิดตัวในปี 2009 และดึงดูดความสนใจของชุมชนนักพัฒนาเว็บที่กำลังมองหาวิธีเข้าสู่ตลาดมือถือโดยไม่ต้องเรียนรู้ Objective-C ได้ทันที

นวัตกรรมหลักของ PhoneGap คือนักพัฒนาสามารถใช้เทคโนโลยีเว็บที่คุ้นเคย — HTML, CSS และ JavaScript — เพื่อสร้างแอปพลิเคชันที่ติดตั้งบนอุปกรณ์ผ่านร้านค้าแอปและสามารถเข้าถึงฟีเจอร์เนทีฟได้แก่ กล้อง GPS รายชื่อติดต่อ และมาตรวัดความเร่ง

ตามข้อมูลของ Adobe Developer Relations (2015) ในช่วงพีค มีนักพัฒนากว่า 600,000 คนทั่วโลกใช้ PhoneGap แพลตฟอร์มนี้ได้รับความนิยมเป็นพิเศษในหมู่สตูดิโอเว็บและฟรีแลนซ์ที่ต้องการขยายพอร์ตโฟลิโอด้วยโปรเจกต์มือถือโดยไม่ต้องจ้างวิศวกร iOS และ Android

ความแตกต่างระหว่าง PhoneGap และ Apache Cordova

ความแตกต่างหลักระหว่าง PhoneGap และ Apache Cordova อยู่ที่โมเดลการแจกจ่ายและบริการเพิ่มเติม Cordova เป็นเฟรมเวิร์กโอเพนซอร์สบริสุทธิ์ที่บริหารจัดการโดย Apache Foundation ในขณะที่ PhoneGap คือการแจกจ่ายเชิงพาณิชย์ที่มีฟีเจอร์พิเศษของ Adobe

ข้อได้เปรียบหลักและความแตกต่างทางการค้าที่สำคัญของ PhoneGap เมื่อเทียบกับ Apache Cordova คือบริการ PhoneGap Build ที่ดูแลขั้นตอนการคอมไพล์ นักพัฒนาอัปโหลดไฟล์ต้นฉบับไปยังเซิร์ฟเวอร์ Adobe เลือกแพลตฟอร์มเป้าหมายและรับไฟล์ไบนารีที่พร้อมใช้งานโดยไม่ต้องติดตั้ง Android SDK, Xcode หรือเครื่องมือบิลด์ที่เกี่ยวข้อง

นอกจากนี้ PhoneGap ยังรวมการผสานรวมกับ Adobe Creative Cloud ช่วยให้นักออกแบบส่งออกเลย์เอาต์จาก Photoshop ไปยังโครงสร้างโปรเจกต์ PhoneGap ได้โดยตรง ฟีเจอร์นี้เป็นที่ต้องการในทีมขนาดเล็กที่ไม่มีนักพัฒนามือถือโดยเฉพาะ

PhoneGap Build: การบิลด์แอปบนคลาวด์

PhoneGap Build คือบริการเว็บของ Adobe ที่คอมไพล์ซอร์สโค้ดแอปพลิเคชัน PhoneGap/Cordova เป็นไฟล์ติดตั้งสำหรับ iOS (.ipa), Android (.apk), Windows Phone (.xap) และแพลตฟอร์มอื่น ๆ ผู้ใช้ไม่จำเป็นต้องติดตั้ง SDK ของระบบปฏิบัติการเป้าหมายบนคอมพิวเตอร์ของตน

กระบวนการบิลด์ประกอบด้วยสามขั้นตอน: นักพัฒนาสำรองโปรเจกต์ (หรือชี้ไปยัง Git repository) อัปโหลดไปยัง build.phonegap.com และเลือกแพลตฟอร์ม ภายในไม่กี่นาที เซิร์ฟเวอร์จะส่งคืนไฟล์ไบนารีที่พร้อมสำหรับการอัปโหลดไปยังร้านค้าแอป

PhoneGap Build รองรับการสมัครสมาชิกสองแบบ: ฟรี (สูงสุด 2 แอป บิลด์สาธารณะ) และแบบชำระเงิน (สูงสุด 25 แอป บิลด์ส่วนตัว ไอคอนและใบรับรองแบบกำหนดเอง) สำหรับ iOS จำเป็นต้องมีใบรับรองการลงนามของ Apple Developer Program ซึ่งผู้ใช้อัปโหลดไปยังบัญชีส่วนตัวของตน กลไกของ Build นั้นง่าย: ผู้ใช้ส่งไฟล์ ZIP หรือชี้ไปยัง Git repository เซิร์ฟเวอร์จะกำหนดแพลตฟอร์มโดยอัตโนมัติและส่งคืนไฟล์ไบนารีที่พร้อมใช้งานผ่านแผงควบคุม

ตามข้อมูลจาก Adobe Blog (2017) มีการบิลด์มากกว่า 500,000 รายการผ่าน PhoneGap Build ในแต่ละเดือน บริการนี้ได้รับความนิยมเป็นพิเศษในสถาบันการศึกษาและแฮกกาธอนที่ผู้เข้าร่วมไม่สามารถเข้าถึงโครงสร้างพื้นฐาน Mac นักพัฒนายังใช้ Build เพื่อสาธิตต้นแบบให้ลูกค้าดูบนอุปกรณ์โดยตรงโดยไม่ต้องตั้งค่าสภาพแวดล้อม

ตัวอย่างโค้ดและการตั้งค่า PhoneGap

โครงสร้างของโปรเจกต์ PhoneGap เหมือนกับ Cordova ข้อแตกต่างเพียงอย่างเดียวอยู่ในไฟล์กำหนดค่า config.xml ซึ่งมีการเพิ่มองค์ประกอบ ที่ระบุเวอร์ชัน PhoneGap และตัวระบุแอปพลิเคชัน Adobe

<?xml version='1.0' encoding='utf-8'?>
<widget id='com.adobe.phonegap.app'
        version='1.0.0'
        xmlns='http://www.w3.org/ns/widgets'
        xmlns:gap='http://phonegap.com/ns/1.0'>
    <name>PhoneGapApp</name>
    <description>
        แอป PhoneGap
    </description>
    <gap:platform name='ios' />
    <gap:platform name='android' />
    <gap:plugin name='cordova-plugin-camera' />
    <gap:config platform='ios' min-version='13.0' />
</widget>

ไฟล์กำหนดค่านี้กำหนดแอปพลิเคชันที่รองรับ iOS และ Android ระบุเวอร์ชันขั้นต่ำของ iOS 13 และรวมปลั๊กอินกล้อง เมื่ออัปโหลดไปยัง PhoneGap Build เซิร์ฟเวอร์จะรู้จักการตั้งค่าเหล่านี้โดยอัตโนมัติและบิลด์โปรเจกต์พร้อมการพึ่งพาที่จำเป็น

ตัวอย่างโค้ด JavaScript พื้นฐานที่จัดการอีเวนต์อุปกรณ์พร้อมและเรียก dialog เนทีฟ:

document.addEventListener('deviceready', function() {
  console.log('PhoneGap พร้อมทำงาน');

  document.getElementById('btnAlert')
    .addEventListener('click', function() {
      navigator.notification.alert(
        'สวัสดีจาก PhoneGap!',
        function() { console.log('ตกลง'); },
        'ข้อความ',
        'ปิด'
      );
    });
});

อีเวนต์ deviceready คือจุดเริ่มต้นที่จำเป็นในแอปพลิเคชัน PhoneGap และ Cordova ทั้งหมด หากไม่มีอีเวนต์นี้ การเรียก API เนทีฟจะไม่ทำงานเนื่องจากสะพานเชื่อมยังไม่ได้เริ่มต้น เมื่อพร้อมแล้ว ปลั๊กอินทั้งหมดจะพร้อมใช้งาน รวมถึง notification.alert สำหรับหน้าต่าง dialog เนทีฟ

ข้อดีและข้อเสียของ PhoneGap

PhoneGap มีข้อดีหลายประการที่ทำให้เป็นที่นิยมในช่วงกลางทศวรรษ 2010 แต่ก็มีข้อจำกัดที่นำไปสู่การลดลงของส่วนแบ่งการตลาดหลังจากปี 2018

จุดแข็ง

ข้อได้เปรียบหลักของ PhoneGap คือ อุปสรรคในการเข้าต่ำ สำหรับนักพัฒนาเว็บ HTML, CSS และ JavaScript เป็นเทคโนโลยีที่ผู้เชี่ยวชาญด้านฟรอนต์เอนด์ทุกคนเชี่ยวชาญ ช่วยให้สตูดิโอพัฒนาเว็บเข้าสู่ตลาดแอปมือถือได้อย่างรวดเร็วโดยไม่ต้องจ้างวิศวกร iOS และ Android

บริการคลาวด์ PhoneGap Build แก้ปัญหาโครงสร้างพื้นฐาน: ทีมงานบน Windows สามารถบิลด์แอป iOS ได้โดยไม่ต้องซื้อ Mac ซึ่งมีความสำคัญสำหรับสตาร์ทอัพที่มีงบประมาณอุปกรณ์จำกัด

จุดอ่อน

ข้อเสียหลักของ PhoneGap คือประสิทธิภาพ WebView ช้ากว่าเฟรมเวิร์ก UI เนทีฟ โดยเฉพาะอย่างยิ่งกับแอนิเมชันที่ซับซ้อน รายการขนาดใหญ่ และการประมวลผลกราฟิก ตามการทดสอบของ HTML5Rocks (2016) การเรนเดอร์รายการ 1,000 รายการใช้เวลา 200–400 มิลลิวินาทีใน PhoneGap เทียบกับ 16–30 มิลลิวินาทีในแอปพลิเคชันเนทีฟ

ข้อจำกัดเพิ่มเติมรวมถึงการพึ่งพาเวอร์ชัน WebView บนอุปกรณ์ของผู้ใช้ ปัญหาในการดีบักปลั๊กอินเนทีฟ และการไม่สามารถเข้าถึง API ใหม่ของ iOS และ Android จนกว่าปลั๊กอิน Cordova ที่เกี่ยวข้องจะถูกปล่อยออกมา

PhoneGap ในปัจจุบัน: การสนับสนุนและการโยกย้าย

ในปี 2020 Adobe ประกาศยุติการสนับสนุน PhoneGap และ PhoneGap Build บริษัทได้ส่งมอบการพัฒนาให้กับชุมชนพร้อมคำแนะนำให้ย้ายไปใช้ Apache Cordova หรือ Capacitor PhoneGap Build ถูกปิดตัวลงและการบิลด์บนคลาวด์ไม่สามารถใช้งานได้อีกต่อไป

สำหรับโปรเจกต์ PhoneGap ที่มีอยู่ แนะนำให้โยกย้ายไปยัง Capacitor — นี่เป็นเส้นทางตรงที่มีการเปลี่ยนแปลงโค้ดน้อยที่สุด เพียงเปลี่ยนสคริปต์เริ่มต้นและอัปเดตการกำหนดค่า โค้ด JavaScript และเทมเพลต HTML ทั้งหมดยังคงไม่เปลี่ยนแปลง เนื่องจาก Capacitor ใช้หลักการสะพานเชื่อมเดียวกัน

อีกทางเลือกหนึ่งคือเปลี่ยนไปใช้ Apache Cordova โดยตรง ซึ่งต้องติดตั้งแพลตฟอร์มในเครื่องผ่าน CLI และตั้งค่าการบิลด์ในเครื่อง แต่ยังคงความเข้ากันได้อย่างสมบูรณ์กับปลั๊กอินที่มีอยู่และสถาปัตยกรรมแอปพลิเคชัน

แม้จะปิดตัวลง แต่ความสำคัญทางประวัติศาสตร์ของ PhoneGap นั้นยากที่จะประเมินค่าสูงเกินไป PhoneGap คือผู้ที่แสดงให้ตลาดเห็นว่าเทคโนโลยีเว็บสามารถเป็นพื้นฐานสำหรับแอปพลิเคชันมือถือ ปูทางสำหรับเฟรมเวิร์กไฮบริดและข้ามแพลตฟอร์มสมัยใหม่ แนวคิดการบิลด์บนคลาวด์ที่นำมาใช้ครั้งแรกใน PhoneGap Build ถูกนำไปใช้โดย Ionic Appflow, Visual Studio App Center และบริการการผสานรวมอย่างต่อเนื่องอื่น ๆ สำหรับโปรเจกต์มือถือในเวลาต่อมา

การตัดสินใจทางสถาปัตยกรรมของ PhoneGap — สะพานเชื่อมผ่าน WebView ระบบปลั๊กอิน และการกำหนดค่าผ่าน config.xml — กลายเป็นมาตรฐานโดยพฤตินัยสำหรับการพัฒนาไฮบริด แม้ในโปรเจกต์ Capacitor สมัยใหม่ มรดกของ PhoneGap ก็ยังปรากฏให้เห็น: หลักการทำงานกับปลั๊กอินเดียวกันและกระบวนการบิลด์ที่คล้ายคลึงกัน

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