บทช่วยสอน Apache Cordova: การพัฒนาแอปพลิเคชั่นมือถือด้วย Cordova

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

นี่คือจุดที่การเป็นนักพัฒนา Apache Cordova ที่รอบรู้จะมีประโยชน์โดยเสนอวิธีพัฒนาแอปพลิเคชันมือถือโดยใช้เทคโนโลยีเว็บมาตรฐาน เช่น HTML5, CSS3 และ JavaScript

ในปี 2009 บริษัทสตาร์ทอัพชื่อ Nitobi ได้สร้าง PhoneGap ซึ่งเป็น API แบบโอเพ่นซอร์สสำหรับการเข้าถึงทรัพยากรของอุปกรณ์พกพาแบบเนทีฟ โดยมีเป้าหมายเพื่อให้นักพัฒนาสามารถสร้างแอปพลิเคชันบนมือถือโดยใช้เทคโนโลยีเว็บมาตรฐานได้ ในวิสัยทัศน์ของ Nitobi ในไม่ช้าแอปพลิเคชั่นมือถือส่วนใหญ่จะได้รับการพัฒนาโดยใช้ PhoneGap แต่นักพัฒนายังคงมีตัวเลือกในการเขียนโค้ดเนทีฟเมื่อจำเป็น ไม่ว่าจะเป็นเนื่องจากปัญหาด้านประสิทธิภาพ หรือขาดวิธีการเข้าถึงฮาร์ดแวร์เฉพาะ

คอร์โดวา PhoneGap?

ไม่มีสิ่งนั้นจริงๆ สิ่งที่เกิดขึ้นคือ Adobe เข้าซื้อกิจการ Nitobi ในปี 2554 และบริจาคโอเพนซอร์ซคอร์ให้กับ Apache Software Foundation ซึ่งทำการรีแบรนด์ Apache Cordova การเปรียบเทียบทั่วไปที่คุณมักจะพบก็คือ Cordova กับ PhoneGap ว่า WebKit คืออะไรสำหรับ Chrome หรือ Safari

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

ความสามารถของ Apache Cordova

โดยพื้นฐานแล้ว Cordova ไม่มีข้อจำกัดเกี่ยวกับแอปพลิเคชันที่พัฒนาขึ้นโดยกำเนิด สิ่งที่คุณได้รับจาก Cordova เป็นเพียง JavaScript API ซึ่งทำหน้าที่เป็นตัวห่อหุ้มสำหรับโค้ดเนทีฟและมีความสอดคล้องกันในอุปกรณ์ต่างๆ คุณสามารถพิจารณาว่าคอร์โดวาเป็นคอนเทนเนอร์แอปพลิเคชันที่มีมุมมองเว็บซึ่งครอบคลุมทั้งหน้าจอของอุปกรณ์ มุมมองเว็บที่ใช้โดย Cordova เป็นมุมมองเว็บเดียวกับที่ใช้โดยระบบปฏิบัติการดั้งเดิม บน iOS นี่เป็นค่าเริ่มต้น Objective-C UIWebView หรือคลาส WKWebView แบบกำหนดเอง บน Android นี่คือ android.webkit.WebView

Apache Cordova มาพร้อมกับชุดของปลั๊กอินที่พัฒนาไว้ล่วงหน้าซึ่งให้การเข้าถึงกล้องของอุปกรณ์, GPS, ระบบไฟล์ ฯลฯ ในขณะที่อุปกรณ์พกพามีวิวัฒนาการ การเพิ่มการรองรับฮาร์ดแวร์เพิ่มเติมเป็นเพียงเรื่องของการพัฒนาปลั๊กอินใหม่

สุดท้าย แอปพลิเคชัน Cordova จะติดตั้งเหมือนกับแอปพลิเคชันดั้งเดิม ซึ่งหมายความว่าการสร้างรหัสของคุณสำหรับ iOS จะสร้างไฟล์ IPA สำหรับ Android เป็นไฟล์ APK และการสร้างสำหรับ Windows Phone จะสร้างไฟล์ XAP หากคุณใช้ความพยายามมากพอในกระบวนการพัฒนา ผู้ใช้ของคุณอาจไม่รู้ด้วยซ้ำว่าพวกเขาไม่ได้ใช้แอปพลิเคชันที่มาพร้อมเครื่อง

เวิร์กโฟลว์การพัฒนา Apache Cordova

มีสองเส้นทางพื้นฐานที่คุณสามารถปฏิบัติตามเมื่อพัฒนาด้วย Cordova:

• เมื่อความตั้งใจของคุณคือการปรับใช้แอปพลิเคชันกับแพลตฟอร์มให้ได้มากที่สุดโดยมีการพัฒนาเฉพาะแพลตฟอร์มเพียงเล็กน้อยหรือไม่มีเลย คุณควรใช้เวิร์กโฟลว์ข้ามแพลตฟอร์ม เครื่องมือหลักที่สนับสนุนเวิร์กโฟลว์นี้คือ Cordova Command-Line Interface (CLI) ซึ่งทำหน้าที่เป็นนามธรรมระดับสูงสำหรับการกำหนดค่าและสร้างแอปพลิเคชันของคุณสำหรับแพลตฟอร์มต่างๆ นี่เป็นเส้นทางการพัฒนาที่ใช้บ่อยกว่า
• หากคุณวางแผนที่จะพัฒนาแอปพลิเคชันของคุณโดยคำนึงถึงแพลตฟอร์มเฉพาะ คุณควรใช้เวิร์กโฟลว์ที่เน้นแพลตฟอร์ม ด้วยวิธีนี้ คุณจะสามารถปรับแต่งและแก้ไขโค้ดของคุณในระดับที่ต่ำกว่าโดยผสมส่วนประกอบดั้งเดิมกับส่วนประกอบคอร์โดวา แม้ว่าคุณจะสามารถใช้แนวทางนี้สำหรับการพัฒนาข้ามแพลตฟอร์มได้ แต่กระบวนการก็จะยาวนานและน่าเบื่อหน่ายมากขึ้น

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

ข้อกำหนดเบื้องต้นและการติดตั้งคอร์โดวา

ก่อนติดตั้งและใช้งานสิ่งที่เกี่ยวข้องกับ Cordova คุณจะต้องติดตั้ง SDK สำหรับแต่ละแพลตฟอร์มที่คุณต้องการสร้างแอปพลิเคชันของคุณ เราจะเน้นที่แพลตฟอร์ม Android ในบทความนี้ อย่างไรก็ตาม กระบวนการที่เกี่ยวข้องกับแพลตฟอร์มอื่นมีความคล้ายคลึงกัน

คุณควรดาวน์โหลด Android SDK ที่พบที่นี่ สำหรับ Windows นั้น SDK มาเป็นตัวติดตั้ง ในขณะที่สำหรับ Linux และ OSX นั้นมาในรูปแบบไฟล์เก็บถาวรซึ่งสามารถแยกออกมาได้อย่างง่ายดาย หลังจากแตกไฟล์/ติดตั้งแพ็คเกจ คุณจะต้องเพิ่มไดเร็กทอรี sdk/tools และ sdk/platform-tools ให้กับตัวแปร PATH ของคุณ Cordova ใช้ตัวแปร PATH เพื่อค้นหาไบนารีที่จำเป็นสำหรับกระบวนการสร้าง หากคุณไม่ได้ติดตั้ง Java ไว้ คุณควรดำเนินการติดตั้ง JDK ร่วมกับ Ant ANT_HOME และ JAVA_HOME ควรตั้งค่าเป็นโฟลเดอร์ bin ของ JDK และ Ant และหลังจากติดตั้ง Android SDK แล้ว ให้ตั้งค่าตัวแปร ANDROID_HOME เป็น Android/Sdk ตำแหน่งทั้งหมดในตัวแปร *_HOME สามตัวควรอยู่ในตัวแปร PATH ของคุณด้วย

หลังจากที่คุณติดตั้งคำสั่ง SDK android จะพร้อมใช้งานในบรรทัดคำสั่งของคุณ ดำเนินการเพื่อเปิดตัวจัดการ SDK และติดตั้งเครื่องมือล่าสุดและ Android API คุณอาจต้องการ เครื่องมือ Android SDK, เครื่องมือแพลตฟอร์ม Android SDK, เครื่องมือสร้าง Android SDK, แพลตฟอร์ม SDK, Google APIs Intel x86 Atom System Image, แหล่งที่มาสำหรับ Android SDK และ Intel x86 Emulator Accelerator (โปรแกรมติดตั้ง HAXM) หลังจากนั้น คุณจะสามารถสร้างอีมูเลเตอร์ด้วย android avd

Cordova CLI ขึ้นอยู่กับ Node.js และไคลเอนต์ Git ดังนั้นให้ดาวน์โหลดและติดตั้ง Node จาก nodejs.org และ Git จาก git-scm.com คุณจะใช้ npm เพื่อติดตั้ง Cordova CLI เอง เช่นเดียวกับการติดตั้งปลั๊กอินเพิ่มเติม และ Cordova จะใช้ git เบื้องหลังเพื่อดาวน์โหลดการพึ่งพาที่จำเป็น สุดท้ายวิ่ง

 npm install -g cordova

…เพื่อติดตั้ง Cordova CLI ทั่วโลก ( npm install cordova Cordova ไม่เพียงพอด้วยตัวเอง)

โดยสรุป นี่คือแพ็คเกจที่คุณต้องการ:

• Java
• มด
• Android SDK
• NodeJS
• Git

และตัวแปรสภาพแวดล้อมเหล่านี้จะต้องได้รับการอัปเดต:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

การบูตแอปพลิเคชัน

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

 cordova create toptal toptal.hello HelloToptal

บรรทัดรับคำสั่งประกอบด้วยชื่อของคำสั่ง cordova ตามด้วยคำสั่งย่อย create คำสั่งย่อยถูกเรียกใช้ด้วยพารามิเตอร์เพิ่มเติมสามตัว: โฟลเดอร์ที่จะวางแอ็พพลิเคชัน เนมสเปซของแอ็พพลิเคชัน และชื่อที่แสดง บูตสแตรปแอปพลิเคชันในโฟลเดอร์ที่มีโครงสร้างดังต่อไปนี้:

 toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

โฟลเดอร์ www มีแกนแอปพลิเคชันของคุณ นี่คือที่ที่คุณจะวางรหัสแอปพลิเคชันของคุณซึ่งเป็นเรื่องปกติสำหรับทุกแพลตฟอร์ม

แม้ว่า Cordova จะช่วยให้คุณพัฒนาแอพสำหรับแพลตฟอร์มต่างๆ ได้อย่างง่ายดาย แต่บางครั้งคุณจำเป็นต้องเพิ่มการปรับแต่ง เมื่อพัฒนาสำหรับหลายแพลตฟอร์ม คุณไม่ต้องการแก้ไขไฟล์ต้นทางในไดเร็กทอรี platforms/[platform-name][assets]/www ต่างๆ เนื่องจากไฟล์เหล่านี้มักถูกเขียนทับด้วยไฟล์ www ระดับบนสุด

ณ จุดนี้ คุณยังสามารถเปิดไฟล์ config.xml และเปลี่ยนข้อมูลเมตาสำหรับแอปพลิเคชันของคุณ เช่น ผู้สร้างและคำอธิบาย

เพิ่มแพลตฟอร์มแรกของคุณโดยใช้:

 cordova platform add android

หากคุณเปลี่ยนใจในภายหลัง คุณสามารถลบแพลตฟอร์มออกจากกระบวนการสร้างได้อย่างง่ายดาย:

 cordova platform rm android

เมื่อตรวจสอบไดเร็กทอรีแพลตฟอร์ม คุณจะสังเกตเห็นโฟลเดอร์ android ภายในนั้น สำหรับแต่ละแพลตฟอร์มที่คุณเพิ่ม Cordova จะสร้างไดเร็กทอรีใหม่ในแพลตฟอร์มและทำซ้ำโฟลเดอร์ www ภายในนั้น ตัวอย่างเช่น หากคุณต้องการปรับแต่งแอปพลิเคชันของคุณสำหรับ Android คุณสามารถแก้ไขไฟล์ใน platforms/android/assets/www และเปลี่ยนไปใช้เครื่องมือเชลล์เฉพาะแพลตฟอร์ม

อย่างไรก็ตาม โปรดจำไว้ว่า หากคุณสร้างแอปพลิเคชันของคุณใหม่ด้วย CLI (ใช้สำหรับการพัฒนาข้ามแพลตฟอร์ม) Cordova จะเขียนทับการเปลี่ยนแปลงที่คุณได้ทำไว้สำหรับแต่ละแพลตฟอร์ม ดังนั้นตรวจสอบให้แน่ใจว่าคุณอยู่ภายใต้การควบคุมเวอร์ชัน หรือคุณทำเฉพาะแพลตฟอร์ม การเปลี่ยนแปลงหลังจากที่คุณเสร็จสิ้นการพัฒนาข้ามแพลตฟอร์ม ดังที่เราได้กล่าวไว้ก่อนหน้านี้ การเปลี่ยนจากการพัฒนาข้ามแพลตฟอร์มไปสู่การพัฒนาเฉพาะแพลตฟอร์มนั้นเป็นเรื่องง่าย เคลื่อนที่ไปในทิศทางอื่นไม่ได้

ถ้าคุณต้องการใช้เวิร์กโฟลว์ข้ามแพลตฟอร์มต่อไป และยังคงทำการปรับแต่งเฉพาะแพลตฟอร์ม คุณควรใช้โฟลเดอร์การผสานระดับบนสุด ตั้งแต่ Cordova เวอร์ชัน 3.5 เป็นต้นไป โฟลเดอร์นี้จะถูกลบออกจากเทมเพลตแอปพลิเคชันเริ่มต้น แต่ถ้าคุณต้องการ คุณสามารถสร้างโฟลเดอร์นี้ร่วมกับไดเร็กทอรีระดับบนสุดอื่นๆ ( hooks , platforms , plugins และ www )

การปรับแต่งเฉพาะแพลตฟอร์มจะอยู่ใน merges/[platform-name] และนำไปใช้หลังไฟล์ต้นฉบับในโฟลเดอร์ www ระดับบนสุด ด้วยวิธีนี้ คุณสามารถเพิ่มไฟล์ต้นฉบับใหม่สำหรับบางแพลตฟอร์ม หรือคุณสามารถแทนที่ไฟล์ต้นฉบับระดับบนสุดทั้งหมดด้วยไฟล์เฉพาะแพลตฟอร์ม ใช้โครงสร้างต่อไปนี้ตัวอย่างเช่น:

 merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

ในกรณีนี้ ไฟล์เอาต์พุตสำหรับ Android จะมีทั้งไฟล์ app.js และ android.js แต่ไฟล์เอาต์พุตสำหรับ Windows Phone 8 จะมีเฉพาะไฟล์ app.js ที่พบในโฟลเดอร์ merges/wp8 เนื่องจาก ไฟล์ในการ merges/[platform] แทนที่ไฟล์ใน www

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

 { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {} }

ให้เราสร้างแอปพลิเคชันและปรับใช้กับอุปกรณ์ Android คุณสามารถใช้อีมูเลเตอร์ได้เช่นกัน หากต้องการ

Cordova มีขั้นตอน CLI หลายขั้นตอนสำหรับการ cordova build และเรียกใช้แอปของคุณ: cordova prepare คอร์โดวา cordova compile คอร์โดวา บิลด์คอร์โดวา (ซึ่งเป็นทางลัดสำหรับสองอันก่อนหน้า) cordova emulate คอร์โดวา และ cordova run คอร์โดวา (ซึ่งรวม build ด์และสามารถรันอีมูเลเตอร์ด้วย) สิ่งนี้ไม่ควรทำให้คุณสับสน เพราะโดยส่วนใหญ่คุณต้องการสร้างและเรียกใช้แอพของคุณในโปรแกรมจำลอง:

 cordova run --emulator

หากต้องการ คุณสามารถเสียบอุปกรณ์ของคุณผ่านพอร์ต USB เปิดใช้งานโหมดดีบัก USB และปรับใช้แอปพลิเคชัน Apache Cordova แรกของคุณกับอุปกรณ์ของคุณโดยตรง:

 cordova run

การดำเนินการนี้จะคัดลอกไฟล์ทั้งหมดของคุณไป platforms/* และดำเนินงานที่จำเป็นทั้งหมด

คุณสามารถจำกัดขอบเขตของกระบวนการสร้างโดยระบุชื่อของแพลตฟอร์มที่คุณต้องการสร้างแอปพลิเคชันและ/หรือแม้แต่โปรแกรมจำลองเฉพาะ เช่น:

 cordova run android --emulator

หรือ

 cordova run ios --emulator --target="iPhone-8-Plus"

บทช่วยสอน Apache Cordova แบบลงมือปฏิบัติ

มาสร้างแอปพลิเคชันการสอนง่ายๆ เพื่อสาธิตการใช้ Cordova และปลั๊กอินกัน สามารถพบเดโมทั้งหมดได้ในที่เก็บ GitHub นี้ เพื่อให้คุณสามารถดาวน์โหลดและศึกษาส่วนต่างๆ ของตัวอย่างพร้อมกับบทช่วยสอนสั้นๆ ของ Cordova นี้

เราจะใช้การตั้งค่าเริ่มต้นที่คุณสร้างขึ้นและเพิ่มรหัสเพิ่มเติม สมมติว่าเราต้องการเพิ่มโปรเจ็กต์ใหม่ลงในฐานข้อมูลจินตภาพ Toptal รวมทั้งดูโปรเจ็กต์ที่มีอยู่ เปิด index.html และตั้งค่าสองแท็บในลักษณะต่อไปนี้:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

ขอให้สังเกตว่าฉันได้เพิ่ม Bootstrap และ jQuery Mobile เป็นการพึ่งพา โปรดทราบว่าโซลูชันและเฟรมเวิร์กที่ดีขึ้นมากได้รับการพัฒนาสำหรับการสร้างแอปพลิเคชันไฮบริดสมัยใหม่ แต่เนื่องจากนักพัฒนาเว็บส่วนใหญ่ (ถ้าไม่ใช่ทั้งหมด) คุ้นเคยกับไลบรารีทั้งสองนี้ จึงควรเลือกใช้ไลบรารีเหล่านี้สำหรับบทช่วยสอนสำหรับผู้เริ่มต้นใช้งาน คุณสามารถดาวน์โหลดสไตล์ชีตจาก GitHub หรือใช้สไตล์ชีตของคุณเองได้หากต้องการ

ให้เราย้ายไปที่ไฟล์ index.js และแยกออกเป็นไฟล์ต่อไปนี้:

 var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

โปรดจำไว้ว่า สถาปัตยกรรมที่สนับสนุนสำหรับแอปพลิเคชัน Cordova กำลังตั้งค่าแอปพลิเคชันหน้าเดียว (SPA) ด้วยวิธีนี้ ทรัพยากรทั้งหมดจะถูกโหลดเพียงครั้งเดียวเมื่อแอปเริ่มทำงาน และสามารถอยู่ในมุมมองเว็บได้ตราบเท่าที่แอปพลิเคชันยังทำงานอยู่ นอกจากนี้ ด้วย SPA ผู้ใช้จะไม่มีการโหลดหน้าซ้ำ ซึ่งไม่ธรรมดาสำหรับแอปพลิเคชันดั้งเดิม โดยคำนึงถึงสิ่งนั้น ให้เราตั้งค่าตัวควบคุมอย่างง่ายเพื่อสลับไปมาระหว่างสองแท็บ:

 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

ตัวควบคุมมีสองวิธีจนถึงตอนนี้ วิธีหนึ่งสำหรับการแสดงผลมุมมองการค้นหา และอีกวิธีสำหรับการแสดงผลมุมมองโพสต์โปรเจ็กต์ มาเริ่มต้นกันในไฟล์ index.js โดยประกาศที่ด้านบนสุดก่อนแล้วสร้างด้วยเมธอด onDeviceReady:

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

สุดท้าย เพิ่มการอ้างอิงสคริปต์ใน index.html เหนือการอ้างอิงไปยัง index.js คุณสามารถดาวน์โหลดมุมมองการค้นหาและโพสต์ได้โดยตรงจาก GitHub เนื่องจากมุมมองบางส่วนนั้นอ่านจากไฟล์ เบราว์เซอร์บางตัว เช่น Chrome ในขณะที่พยายามแสดงผลหน้าเว็บของคุณ จะบ่นเกี่ยวกับคำขอข้ามโดเมน

วิธีแก้ปัญหาที่เป็นไปได้ในที่นี้คือ การเรียกใช้เซิร์ฟเวอร์สแตติกในเครื่อง เช่น การใช้โมดูล node-static npm นอกจากนี้ คุณสามารถเริ่มคิดเกี่ยวกับการใช้เฟรมเวิร์กบางอย่าง เช่น PhoneGap และ/หรือ Ionic ได้ที่นี่ ทั้งหมดนี้มีเครื่องมือในการพัฒนามากมาย รวมถึงการเลียนแบบในเบราว์เซอร์ การโหลดซ้ำ และการสร้างโค้ด (นั่งร้าน)

สำหรับตอนนี้ เรามาปรับใช้กับอุปกรณ์ Android โดยเรียกใช้สิ่งต่อไปนี้:

 cordova run android

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

แท็บที่สองอนุญาตให้โพสต์โครงการใหม่:

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

• LocalStorage
• WebSQL
• จัดทำดัชนีDB
• ที่เก็บข้อมูลฝั่งเซิร์ฟเวอร์เข้าถึงได้ผ่านบริการเว็บ
• ปลั๊กอินบุคคลที่สามที่มีตัวเลือกอื่น ๆ

LocalStorage นั้นใช้ได้สำหรับการจัดเก็บข้อมูลจำนวนเล็กน้อย แต่จะไม่เพียงพอหากคุณกำลังสร้างแอปพลิเคชันที่เน้นข้อมูลมาก เนื่องจากพื้นที่ว่างจะแตกต่างกันไปตั้งแต่ 3 ถึง 10 MB IndexedDB อาจเป็นทางออกที่ดีกว่าสำหรับกรณีนี้ WebSQL เลิกใช้แล้วและไม่รองรับในบางแพลตฟอร์ม สุดท้าย การใช้บริการเว็บเพื่อดึงและแก้ไขข้อมูลนั้นเข้ากันได้ดีกับกระบวนทัศน์ของ SPA แต่จะพังเมื่อแอปพลิเคชันของคุณออฟไลน์ เทคนิค กปภ. ร่วมกับพนักงานบริการเพิ่งเข้ามาในโลกของคอร์โดวาเพื่อช่วยในเรื่องนี้

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

 cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

SQLitePlugin จัดเตรียม API ให้กับฐานข้อมูล SQLite ของอุปกรณ์และทำหน้าที่เป็นกลไกการคงอยู่ที่แท้จริง เราสามารถสร้าง Storage Service อย่างง่ายได้ดังนี้:

 SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: "demo.toptal", location: "default"}) : window.openDatabase("demo.toptal", "1.0", "DB para FactAV", 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

คุณสามารถดาวน์โหลดรหัสสำหรับการดึงและเพิ่มโปรเจ็กต์จาก GitHub และวางลงในตัวยึดตำแหน่งที่เกี่ยวข้อง อย่าลืมเพิ่ม SQLiteStorageService.js ลงในไฟล์ index.html เหนือ Controller.js และเริ่มต้นในคอนโทรลเลอร์ของคุณโดยแก้ไขฟังก์ชัน init ของคอนโทรลเลอร์:

 initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

หากคุณเหลือบไปที่ service.addProject() คุณจะสังเกตเห็นว่ามีการเรียกเมธอด navigator.geolocation.getCurrentPosition() Cordova มีปลั๊กอิน geolocation ซึ่งคุณสามารถใช้เพื่อรับตำแหน่งปัจจุบันของโทรศัพท์ และคุณยังสามารถใช้เมธอด navigator.geolocation.watchPosition() เพื่อรับการอัปเดตเมื่อตำแหน่งของผู้ใช้เปลี่ยนไป

สุดท้าย ให้เพิ่มตัวจัดการเหตุการณ์ตัวควบคุมเพื่อเพิ่มและดึงโครงการจากฐานข้อมูล:

 renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

ในการเพิ่มคอนโซลและปลั๊กอินไดอะล็อก ให้ดำเนินการดังต่อไปนี้:

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

ปลั๊กอิน Cordova.console จะช่วยคุณในการดีบักโดยเปิดใช้งานฟังก์ชัน console.log() ภายในอีมูเลเตอร์

คุณสามารถดีบักแอปพลิเคชัน Android ได้อย่างง่ายดายผ่านดีบักเกอร์ระยะไกลของ Chrome เมื่อคุณเชื่อมต่ออุปกรณ์แล้ว ให้คลิกเมนูดรอปดาวน์ที่มุมขวาบน (ใต้ปุ่ม X) ขยายเครื่องมือเพิ่มเติม แล้วคลิกตรวจสอบอุปกรณ์ คุณควรเห็นอุปกรณ์ของคุณในรายการและควรเปิดคอนโซลดีบั๊กได้

Safari มีฟังก์ชันเดียวกันสำหรับการดีบักแอป iOS ที่ทำงานบนอุปกรณ์หรืออีมูเลเตอร์ที่เชื่อมต่อ USB เพียงเปิดใช้งานเครื่องมือสำหรับนักพัฒนาภายใต้การตั้งค่า Safari > แท็บขั้นสูง

ปลั๊กอิน Cordova.dialogs เปิดใช้งานการแจ้งเตือนดั้งเดิม แนวทางปฏิบัติทั่วไปคือการกำหนดวิธี windows.alert ใหม่โดยใช้ Cordova.dialogs API ในลักษณะต่อไปนี้:

 overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback "Toptal", // title 'OK' // buttonName ); }; } }

ควรเรียกฟังก์ชัน overrideBrowserAlert ภายในตัวจัดการเหตุการณ์พร้อม deviceready

ตอนนี้คุณควรจะเพิ่มโครงการใหม่และดูโครงการที่มีอยู่จากฐานข้อมูลได้แล้ว หากคุณเลือกช่องทำเครื่องหมาย "รวมตำแหน่ง" อุปกรณ์จะทำการเรียกไปยัง Geolocation API และเพิ่มตำแหน่งปัจจุบันของคุณไปยังโครงการ

ให้เราเพิ่มสัมผัสสุดท้ายให้กับแอปพลิเคชันโดยการตั้งค่าไอคอนและหน้าจอเริ่มต้น เพิ่มสิ่งต่อไปนี้ในไฟล์ config.xml ของคุณ:

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

สุดท้าย วางภาพโลโก้ในโฟลเดอร์ www/img

แอพ Cordova ของคุณเอง

เราทำตามขั้นตอนพื้นฐานของการพัฒนาแอป Apache Cordova และใช้สถาปัตยกรรม JavaScript และสไตล์ชีต CSS ของเราเอง บทช่วยสอน Cordova นี้เป็นความพยายามที่จะแสดงศักยภาพของ Apache Cordova เป็นวิธีการพัฒนาแอปพลิเคชันมือถือโดยใช้เทคโนโลยีที่คุ้นเคย ซึ่งลดทั้งเวลาในการพัฒนาและความพยายามที่จำเป็นในการสร้างแอปพลิเคชันหลายตัวสำหรับแพลตฟอร์มที่แตกต่างกัน

อย่างไรก็ตาม เมื่อสร้างแอปพลิเคชันที่จะเข้าสู่การใช้งานจริง ขอแนะนำให้คุณใช้เฟรมเวิร์กที่มีอยู่ นอกเหนือจากการจัดโครงสร้างแอปพลิเคชันของคุณในสถาปัตยกรรมที่กำหนดไว้ล่วงหน้าแล้ว ยังอาจให้ชุดส่วนประกอบที่จะช่วยให้แอปพลิเคชันของคุณเข้าใกล้รูปลักษณ์ดั้งเดิมมากขึ้น กรอบงานบางอย่างที่น่าสังเกตคือ Ionic, Framework7, Weex, Ratchet, Kendo UI และ Onsen UI ขอให้โชคดี!