การใช้ Phonegap สำหรับการพัฒนา Native Application [ปิด]

ฉันเพิ่งมาข้ามPhonegap มีใครในคุณลอง เป็นเครื่องมือที่น่าทึ่งซึ่งอ้างว่านักพัฒนาสามารถใช้เฟรมเวิร์กที่ใช้ HTML 5 เช่น Sencha touch และ Jquery ในเวลาเดียวกันที่สามารถเข้าถึงคุณสมบัติดั้งเดิมบนโทรศัพท์ได้ นอกจากนี้รหัสยังพกพาจาก Android ไปยัง Iphone ด้วยความพยายามบางอย่าง ก่อนที่จะเข้ามาฉันต้องการทราบว่าประสบการณ์ของฟอรัมกับ Phonegap เป็นอย่างไร อะไรคือจุดเจ็บปวดและสามารถปรับขนาดได้จริงสำหรับการพัฒนาแอปพลิเคชันระดับองค์กร

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

Disable device-based features you're not using ตัววัดความเร่งคุณสมบัติตำแหน่งทางภูมิศาสตร์จะเปิดอยู่โดยค่าเริ่มต้น หากคุณไม่ได้ใช้งานฉันจะปิดเนื่องจากแอปของคุณจะโหลดได้เร็วขึ้น (เริ่มต้น) และทำงานได้ราบรื่นขึ้น

onDeviceReady- เป็นวิธีที่เรียกว่าเมื่อโหลด phonegap แล้วและพร้อมใช้งาน $ (document). แล้วหรืออะไรก็ตามที่คุณคุ้นเคยจะไม่ใช้ที่นี่จริงๆ - เว้นแต่คุณจะทำเฉพาะอินเทอร์เฟซ / ฮาร์ดโค้ด HTML หากคุณกำลังโต้ตอบกับคุณสมบัติของ iPhone เช่น GeoLocation คุณจะต้องทำทุกอย่างหลังจากเรียก onDeviceReady แล้ว

Pick a UI/library มีตัวเลือกมากมายสำหรับอินเทอร์เฟซ / ไลบรารี, jquery-mobile, sencha touch, jqtouch และอื่น ๆ แต่ละรายการมีแนวทางที่ไม่เหมือนใครและชุดคุณลักษณะ หาข้อมูลและใช้อย่างใดอย่างหนึ่ง แต่หลีกเลี่ยงการรวมเข้าด้วยกัน คุณสามารถอ่านเกี่ยวกับตัวเลือกเพิ่มเติมเครื่องมือได้ที่นี่: http://www.phonegap.com/tool (อัปเดตลิงก์)

Also, more on just mobile development in general, with PhoneGapหากคุณต้องการสร้างแอปที่เผยแพร่ผ่านตลาด Android และ iPhone App Store ฉันจะอ่านรายชื่อทั้งหมดของพวกเขาสำหรับแนวทางในการพัฒนาแอปของคุณ ตัวอย่างเช่นในลิงก์เครื่องมือด้านบนมี "เครื่องมือ / ปลั๊กอิน" ที่เรียกว่าEasy APNS - แม้ว่าสิ่งนี้จะมีประโยชน์สำหรับ Android - และสามารถทำได้ในทางเทคนิคบน iPhone แต่เป็นการละเมิดข้อตกลงในการพัฒนาเนื่องจากระบุว่าคุณต้องใช้การแจ้งเตือนของ Apple เครือข่าย ฯลฯ นี่เป็นเพียงตัวอย่าง แต่การอ่านเนื้อหานั้นจะช่วยให้คุณไม่ต้องปวดหัวมากหากนั่นคือเป้าหมายสุดท้ายของคุณ

สรุปแล้วมันยอดเยี่ยมสำหรับแอพที่มีน้ำหนักเบาโดยเฉพาะอย่างยิ่งหากคุณมาจากพื้นฐานการพัฒนาเว็บ LocalStorage, GeoLocation ฯลฯ ทำงานได้ดีจริงๆ ฉันหวังว่านี่จะช่วยได้เล็กน้อย ... และรู้สึกว่าต้องถามคำถาม

แก้ไขเพิ่มเติม:

ฉันคิดว่ามันขึ้นอยู่กับสิ่งที่คุณต้องการทำและสิ่งที่คุณรู้วิธีทำ Matt ชี้ให้เห็นว่าการพัฒนาแอปเนทีฟสำหรับ iOS นั้นดีกว่า ฯลฯ ใช่ถ้าคุณมีเวลาและความรู้ในการเรียนรู้นั้นแน่นอนว่าเนทีฟจะดีกว่า แต่ PhoneGap สร้างขึ้นสำหรับนักพัฒนาเว็บที่สามารถใช้ชุดทักษะที่มีอยู่และสร้างแอปได้ นอกจากนี้ PhoneGap ยังช่วยให้คุณสร้างแอพได้อย่างรวดเร็วสำหรับ iOS, Android, Symbian, Palm, Blackberry ด้วยการปรับเปลี่ยนโค้ดเบสของคุณเล็กน้อยสำหรับแต่ละรายการ

นี่คือคำแนะนำด้านประสิทธิภาพที่ดีที่สุดทั้งหมดที่ฉันเคยอ่านสำหรับ PhoneGap ... มีหลายสิ่งที่ต้องระวังเพื่อให้แน่ใจว่าคุณมีประสิทธิภาพที่มั่นคงและมั่นคง ... แต่คุณสามารถเลือกอ่านทั้งหมดได้ในเย็นวันเดียว

นี่คือนักเก็ตที่ดีที่สุด:

เคล็ดลับประสิทธิภาพ PhoneGap / เว็บบนมือถือ

• Diary.com เพิ่มประสิทธิภาพของแอป PhoneGap ที่รัน Sencha ได้อย่างไร: http://www.phonegap.com/2011/06/21/building-the-diary-com-ios-app-using-pg-sencha-touch/
• http://floatlearning.com/2011/03/developing-better-phonegap-apps/
• http://jslint.com/ - เพื่อดีบักจาวาสคริปต์ของคุณ
• http://zeptojs.com/และhttp://xuijs.com/ - เฟรมเวิร์กทางเลือกขั้นต่ำสำหรับ jquery และ jqtouch
• ปิดการใช้งานมาตรวัดความเร่งและตำแหน่งhttp://blogs.nitobi.com/jesse/2009/10/28/running-jqtouch-in-phonegap/
  • ตั้งค่า“ EnableAcceleration” เป็นเท็จใน PhoneGap.plist
  • ตั้งค่า "AutoRotate" เป็นเท็จใน PhoneGap.plist
• http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/
• http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
• การสาธิต: http://cubiq.org/dropbox/clickdelay.html
• FastClick v TouchStart: http://groups.google.com/group/phonegap/browse_thread/thread/f5f5c78e26513821?pli=1

• http://forum.jquery.com/topic/ontouch-instead-of-onclick-event

• http://wiki.phonegap.com/w/page/16494809/Performance-tips-for-device/

• http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices
• http://evolvingwe.com/building-an-iphone-app-part-3-7-dev-tips/
• http://evolvingwe.com/upgrading-to-phonegap1-0/

• เคล็ดลับประสิทธิภาพวิดีโอสำหรับ Sencha Touch: http://vimeo.com/17882927

  • ครอบคลุมคุณสมบัติด้านประสิทธิภาพใน Sencha ซึ่งเป็นหลักการที่ยอดเยี่ยมที่เราสามารถนำมาใช้ใหม่ได้ เราอาจสามารถตัดโค้ดจาก Sencha บางชิ้นเพื่อนำไปใช้กับ Skej ใหม่ได้
  • ระบุว่าเราต้องทำลายสิ่งที่มองไม่เห็นบน DOM และ DOM จะต้องมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ตลอดเวลาโดยมีผู้ฟังน้อยที่สุด (กล่าวคือแนบผู้ฟังหนึ่งคนเข้ากับรายการหลักของรายการแทนที่จะแนบไปกับรายการแต่ละรายการ)
  • นอกจากนี้ยังมีเคล็ดลับ CSS3 ที่ใช้งานได้จริงให้ฉันนำไปใช้ ... โดยทั่วไปอย่าใช้การเปลี่ยนและเงา / มุมรอบใหม่จำนวนมากเนื่องจาก CPU ที่ใช้อยู่ในปัจจุบันไม่ใช่ GPU

• การมอบหมายงานใน Sencha Touch: วิธีออกแบบรายการด้วยผู้ฟังคนเดียวไม่ใช่รายการเดียวในทุกบรรทัด http://www.sencha.com/blog/event-delegation-in-sencha-touch/

• การเพิ่มประสิทธิภาพการใช้งานหน่วยความจำ DOM ใน Sencha Touch: เลื่อนจากรายการไปยังแผงรายละเอียดและฆ่ารายการจากนั้นเลื่อนจากรายละเอียดไปยังรายการและฆ่าแผงรายละเอียด การย่อองค์ประกอบบนหน้าจอ DOM ของคุณ http://www.sencha.com/blog/sencha-touch-optimizing-memory-usage/
• ทำลายสิ่งที่ไม่สามารถมองเห็นได้บน DOM ของคุณ!
• ใช้ CSS Animations แทน jQuery
• http://nyroo.com/l/B7UN5c
• http://www.ferretarmy.com/css-animation-examples/
  • ระวัง ... สิ่งเหล่านี้จะยุ่งยากเมื่อพวกเขาไม่ใช้ประโยชน์จาก GPU และทำให้ CPU ชะงัก

การเปิดใช้งานฟังก์ชันใหม่

• เปิดใช้งานจอภาพ Retina: http://evolvingwe.com/create-retina-display-images-in-mobile-web-themes-and-phonegap-apps/
• ปัดเพื่อลบ: http://www.codesta.com/blog/2011/5/23/sencha-touchphonegap-tips-and-tricks.html
• ปิดการใช้งานมาตรวัดความเร่งและตำแหน่ง: http://iamcam.wordpress.com/2009/10/29/phonegap-up-to-speed/
• ตัด jQuery และ Hand-code: http://cubiq.org/do-you-really-need-jquery-for-mobile-dev
• แสดงรายชื่อผู้ติดต่อใน Mobile Safari: http://cubiq.org/contact-list-on-webkit-for-iphone
• iScroll4: สร้างส่วนหัวเลื่อนภายใน div ขนาดคงที่หยิกและซูมดึงขึ้น / ลงรีเฟรช http://cubiq.org/iscroll-4 (รวมถึงเคล็ดลับเกี่ยวกับเอฟเฟกต์ยางรัด)
• GitHub repo ของ PhoneGap: รวมตัวอย่างที่น่าสนใจเช่น DatePicker, SMSComposer, ApplicationPreferences, Splashscreen, NetworkActivityIndicator ... https://github.com/phonegap/phonegap-plugins

สถาปัตยกรรม

การออกแบบแอปของคุณใน Ext JS 4: http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2

ก่อนที่จะแสดงความคิดเห็นเกี่ยวกับ Phonegap ฉันจำเป็นต้องออกข้อจำกัดความรับผิดชอบเล็กน้อยว่าฉันไม่ใช่นักพัฒนาเว็บ แต่อย่างใด สำหรับฉันการเขียน JavaScript และ CSS ก็เหมือนกับการดึงฟัน ที่บอกว่าฉันไม่ชอบ Phonegap

กรอบการทำงานมีลักษณะที่น่าสนใจอยู่สองสามประการส่วนใหญ่เป็นการอุทธรณ์แบบ "เขียนครั้งเดียวเรียกใช้ - Anywere" และ "I-Don't-Have-To-Learn-Objective-C?" อุทธรณ์. เฟรมเวิร์กยังช่วยให้คุณสามารถเข้าถึงคุณลักษณะฮาร์ดแวร์บางอย่างเช่นมาตรความเร่ง สิ่งเหล่านี้ใช้ได้ในระดับหนึ่ง

ที่กล่าวว่าไม่มีแอป iOS ที่ยอดเยี่ยมใด ๆ ที่สร้างขึ้นโดยใช้กรอบงานข้ามแพลตฟอร์มใด ๆ มีการโต้ตอบ UI ที่ละเอียดอ่อนและสวยงามมากมายที่จัดการให้คุณโดยการควบคุม UIKit แบบเนทีฟที่ผู้ใช้และนักพัฒนาหลายคนยอมแพ้จนกว่าจะหายไปเช่นการโค้งงอของภาพเคลื่อนไหวที่มีรายละเอียดอย่างเหลือเชื่อ ใน UI ตามมุมมองเว็บ คุณสามารถทำงานหนักเพื่อผลิตซ้ำได้อย่างสมบูรณ์แบบ แต่สำหรับการลงทุนครั้งนั้นทำไมไม่ลองไปพื้นเมืองดูล่ะ?

ประเด็นที่สองที่ควรทราบก็คือชุมชนการสนับสนุนสำหรับแอปพลิเคชัน iOS ที่สร้างโดย Phonegap นั้นมีขนาดเล็กกว่าแอปพลิเคชันที่พัฒนาขึ้นเอง หากคุณเป็นคนหนึ่งที่ต้องพึ่งพาชุมชนในระหว่างโครงการสิ่งนี้ควรทำให้คุณหยุดชั่วคราว

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

ในฐานะที่เป็นข้อความย่อยสำหรับผู้ที่สนใจ Marco Arment และ Dan Benjamin เพิ่งพูดคุยเกี่ยวกับหัวข้อนี้ คุณสามารถฟังมันนี่

ขั้นตอนการติดตั้งเกี่ยวข้องกับแพ็กเกจหลายอย่าง (Java, Apache Ant, Ruby, iOS SDK, Android SDK และ PhoneGap เอง) ซึ่งทั้งหมดจะต้องได้รับการติดตั้งและตั้งค่าอย่างถูกต้อง นี่อาจเป็นความพยายามครั้งสำคัญ เพื่อความเป็นธรรมพวกเขามีสิ่งที่เรียกว่า PhoneGap Build ในรุ่นเบต้าซึ่งจะทำให้สิ่งนี้ง่ายขึ้นมาก

เราใช้กับ NS Basic / App Studio เพื่อผลิตแอปที่มีคุณสมบัติสำหรับร้านค้าแอป

หากคุณไม่ได้สร้างเกมหรือวิดเจ็ตเพียงแค่แอพที่ดูดีธรรมดา phonegap ก็เป็นตัวเลือกของคุณ

แต่คุณควรดูแล JS ของคุณหลีกเลี่ยงการทำอะไรใน JS เช่นหากคุณต้องการทำแอนิเมชั่นใด ๆ หลีกเลี่ยงการตั้งเวลาด้วยช่วงเวลาเล็ก ๆ (เช่น 100 มิลลิวินาที) หลีกเลี่ยง jquery และภาพเคลื่อนไหวที่เหมือนกัน ตัวอย่างเช่นแทนที่จะทำให้ภาพเคลื่อนไหวจางลงโดยการตั้งค่าตัวจับเวลาระยะสั้นเพื่อลดความทึบในแต่ละจุดทีละขั้นตอน (นี่คือวิธีการทำงานของ jquery fade) คุณควรใช้การเปลี่ยน css3 จากความทึบ 1 เป็นความทึบ 0

คำแนะนำของฉันคือไปกับบางอย่างเช่น zeptojs.com หลังจากที่ phonegap ทั้งหมดไม่ทำงาน ie6 :-)

ดูบทช่วยสอนเกี่ยวกับวิธีทำให้ JS ของคุณสว่างขึ้น

http://bcksp.blogspot.com/

หากคุณไม่ต้องการคุณสมบัติหรือประสิทธิภาพของฮาร์ดแวร์ใด ๆ นอกเหนือจากที่ HTML5 และ Phonegap มีให้แอปพลิเคชันเว็บแบบห่อหุ้ม (รวมถึงคุณสมบัติอื่น ๆ ที่ จำกัด การเข้าถึง) เป็นโซลูชันที่ยอดเยี่ยม

หลายองค์กรปรับใช้เว็บแอปขนาดใหญ่ Phonegap (หรือเพียงแค่การควบคุมมุมมองเว็บธรรมดาที่มีเนื้อหาที่ฝังอยู่) จะช่วยให้คุณสามารถเรียกใช้เว็บแอปเหล่านี้แบบออฟไลน์ได้ (ยกเว้นแน่นอนสำหรับข้อมูลออนไลน์ที่จำเป็น)

"ความเจ็บปวด" อย่างหนึ่งที่ไม่ได้กล่าวถึงเมื่อใช้งานร่วมกับอุปกรณ์ต่างๆ: ยิ่งมีอุปกรณ์มากเท่าไหร่การเรียนรู้ก็ยิ่งมากขึ้นเท่านั้น ในการปรับใช้กับอุปกรณ์ iOS ที่มี PhoneGap คุณจะต้องเรียนรู้พื้นฐานของ Xcode บนเครื่อง Mac ในการปรับใช้กับ Android คุณจะต้องติดตั้งและเรียนรู้ Eclipse, Android SDK และอื่น ๆ แพลตฟอร์มอื่น ๆ ต้องการใช้ SDK ของตัวเอง การเรียนรู้ Xcode พื้นฐาน Javascript และ Java ช่วยให้ฉันเข้าใจข้อผิดพลาดและไวยากรณ์ทั่วไป

"สร้างครั้งเดียวใช้งานได้ทุกที่" ทิ้งขั้นตอนมากมาย!