PhoneGap और jQuery मोबाइल पर मोबाइल ऐप विकास

PhoneGap एक OpenSource प्लेटफ़ॉर्म है जो आपको विभिन्न प्लेटफार्मों के लिए HTML, जावास्क्रिप्ट और सीएसएस में मोबाइल एप्लिकेशन विकसित करने की अनुमति देता है (लगभग एप्लिकेशन कोड को बदलने के बिना), जिसमें शामिल हैं: iOS, Android, ब्लैकबेरी, WebOS, सिम्बियन और विंडोज मोबाइल। इसका आकर्षण यह है कि इसे एक विशिष्ट मंच के लिए विकास कौशल की आवश्यकता नहीं होती है। आप जावास्क्रिप्ट में अपना आवेदन लिखते हैं, मार्कअप के लिए एचटीएमएल और सीएसएस का उपयोग करते हैं। आप एक नियमित वेबसाइट या वेब सेवा के रूप में एक मोबाइल एप्लिकेशन लिखते हैं।
PhoneGap इंजन ब्राउज़र API का विस्तार करता है और निम्नलिखित विशेषताएं जोड़ता है: एक्सेलेरोमीटर तक पहुंच, कैमरे तक पहुंच (केवल फ़ोटो अब तक), कम्पास तक पहुंच, संपर्क सूची तक पहुंच, ऑडियो फ़ाइलों को रिकॉर्ड करना और सुनना, फ़ाइल सिस्टम तक पहुंच प्रदान करता है, और विभिन्न HTML5 रिपॉजिटरी के साथ काम करने की अनुमति देता है लोकलस्टोरेज, वेब एसक्यूएल इत्यादि और आपको किसी भी क्रॉस-डोमेन पते को मूल रूप से एक्सेस करने की अनुमति देता है।
PhoneGap प्लेटफॉर्म के अलावा, अब तक, एक क्लिक में सभी उपकरणों के लिए एक मुफ्त एप्लिकेशन बिल्डर है।

jQuery मोबाइल

मुझे लगता है कि हर कोई जानता है, लेकिन मुझे आपको फिर से याद दिलाना है। jQuery मोबाइल एक jQuery ऐड-ऑन है जो आपको बिना किसी समस्या के मोबाइल वेबसाइट और मोबाइल वेब एप्लिकेशन विकसित करने की अनुमति देता है।

यदि आप HTML, जावास्क्रिप्ट, CSS, jQuery को जानते हैं और जावा, ऑब्जेक्टिव-सी और अन्य के साथ समस्याएं हैं, लेकिन मोबाइल विकास में अपना हाथ आजमाना चाहते हैं, तो यह लेख आपके लिए है।

हम एंड्रॉइड के लिए एक मोबाइल एप्लिकेशन बनाएंगे (आईओएस को परीक्षण एप्लिकेशन के लिए बहुत अधिक प्रयास की आवश्यकता है: मैक ओनली, आपको डेवलपर प्रमाण पत्र की आवश्यकता है) जिसे तुंब्र रीडर कहा जाता है (मैं एक और हैब्रिडर नहीं बनाना चाहता था)।

एक विकास सॉफ़्टवेयर पैकेज स्थापित करें

यदि आपके पास ग्रहण + एडीटी प्लगइन है, तो इस भाग को छोड़ दिया जा सकता है। मूल लेख ।
विस्तृत लेख ।
1. ग्रहण क्लासिक को डाउनलोड और इंस्टॉल करें
2. जावा प्लेटफॉर्म डाउनलोड करें और इंस्टॉल करें (JDK)
3. एंड्रॉयड एसडीके डाउनलोड और इंस्टॉल करें
एसडीके प्रबंधक लॉन्च करें, सभी मॉड्यूल का चयन करें और उन सभी को स्थापित करें (इसमें लगभग 20 मिनट लगते हैं)
4. एडीटी प्लगइन स्थापित करें
5. एडीटी प्लगइन कॉन्फ़िगर करें - आपको एंड्रॉइड एसडीके को पथ निर्दिष्ट करने की आवश्यकता है अन्यथा कुछ भी काम नहीं करेगा
6. फोनगैप का नवीनतम संस्करण डाउनलोड करें (लिखने के समय यह 0.9.4 था)

Android एमुलेटर बनाना

SDK प्रबंधक खोलें (यह विभिन्न विंडो खोल सकता है, उन्हें बंद कर सकता है), वर्चुअल डिवाइस का चयन करें, नया क्लिक करें ...
स्क्रीनशॉट में दिखाए अनुसार एक एमुलेटर बनाएं:


महत्वपूर्ण: Android 2.2 आवश्यक है। यदि आप Windows पर हैं और उपयोगकर्ता नाम में ANSI वर्ण नहीं हैं, तो c:\Users\\.android\avd\Android-2_2.avd बनाने के बाद c:\Users\\.android\avd\Android-2_2.avd निम्न कार्य करें: c:\Users\\.android\avd\Android-2_2.avd को किसी अन्य फ़ोल्डर में, उदाहरण के लिए c:\Android\Android-2_2.avd , फ़ाइल को खोलें Android-2_2.ini और path= को उपयुक्त एक में बदलें।

परियोजना निर्माण

1. फ़ाइल मेनू से ग्रहण लॉन्च करें, New > Android Project

आधिकारिक ट्यूटोरियल से स्क्रीनशॉट

2. प्रोजेक्ट रूट डायरेक्टरी में, 2 फ़ोल्डर्स / लिबास और / एसेट्स / www बनाएं
Phonegap-0.9.4 संग्रह से, phonegap.jar को कॉपी करें / libs
रिपॉजिटरी से / एसेट्स / www में Git चेकआउट चलाएं: git: //github.com/azproduction/phonegap-tumblr-reader.git या github.com/azproduction-bggap-tumblr-reader/archives/master और unzip से संग्रह डाउनलोड करें / आस्तियां / www रिपॉजिटरी में एक तैयार-तैयार एप्लिकेशन है ताकि आपको लेख से कॉपी-पेस्ट न करना पड़े।

3. बिल्ड पथ में phonegap.jar जोड़ें। ऐसा करने के लिए, प्रोजेक्ट रूट पर राइट-क्लिक करें, गुण चुनें, सूची से जावा बिल्ड पथ चुनें, लाइब्रेरी टैब चुनें, जार जोड़ें ... पर क्लिक करें और फोनगैप पथ के लिए निर्दिष्ट करें।


4. TumblrReader.java फ़ाइल खोलें, जो src / folder में स्थित है
4.1। Activity को DroidGap बदलें
4.2। super.loadUrl("file:///android_asset/www/index.html"); setContentView() को super.loadUrl("file:///android_asset/www/index.html"); setContentView() बदलें super.loadUrl("file:///android_asset/www/index.html");
4.3। import com.phonegap.*; जोड़ें import com.phonegap.*;


6. AndroidManifest.xml खोलें, निम्न कोड जोड़ें (यह कुछ संसाधनों तक पहुंच देता है) हमें केवल android.permission.INTERNET आवश्यकता है:

 <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.INTERNET" /> 

यदि आप एपीआई के साथ प्रयोग करने जा रहे हैं, तो सभी विकल्प जोड़ें:

 <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 

गतिविधि टैग में android:configChanges="orientation|keyboardHidden" जोड़ें android:configChanges="orientation|keyboardHidden"


7. अपने एप्लिकेशन को एमुलेटर में Run As > Android Application : Run As > Android Application यदि आपने सब कुछ सही ढंग से किया है, तो आपके एप्लिकेशन के साथ एमुलेटर को खोलना चाहिए।

Tumblr Reader बनाना

बाकी लेख में एप्लिकेशन के चरणबद्ध निर्माण का वर्णन किया गया है। अब ग्रहण को कम से कम किया जा सकता है और अपने पसंदीदा संपादक को खोल सकते हैं। एमुलेटर में एप्लिकेशन को पुनः आरंभ करने के लिए ग्रहण की आवश्यकता होती है।

आवेदन कंकाल index.html

मैं jQuery के मोबाइल पेज बनाने के सिद्धांतों पर नहीं रुकता। आप इसे स्वयं पढ़ सकते हैं।
/assets/www फ़ोल्डर में index.html बनाएँ

 <!DOCTYPE HTML> <html> <head> </head> <body> </body> </html> 

हम आवश्यक स्क्रिप्ट कनेक्ट करते हैं

  <head> <title>Tumblr Reader</title> <!--  jQuery Mobile   --> <link rel="stylesheet" href="libs/jquery.mobile.css" /> <link rel="stylesheet" href="css/main.css" /> <!-- jQuery & jQuery Mobile --> <script type="text/javascript" charset="utf-8" src="libs/jquery.js"></script> <script type="text/javascript" charset="utf-8" src="libs/jquery.mobile.js"></script> <!--  phonegap --> <script type="text/javascript" charset="utf-8" src="libs/phonegap.js"></script> <!--     --> <script type="text/javascript" charset="utf-8" src="js/main.js"></script> </head> 

शरीर में jQuery के मोबाइल पेज को जोड़ें - "छोटी तस्वीरों की सूची" उर्फ ​​डैशबोर्ड

  <!--    --> <div data-role="page" id="dashboard"> <div data-role="header" data-position="fixed"> <!--     options --> <a href="#options" data-icon="gear">Options</a> <h1>Dashboard</h1> </div> <div data-role="content"> <div class="ui-grid-b" id="dashboard-list"> <!--      --> </div> </div> </div> 

जब आप एक छोटी तस्वीर पर क्लिक करते हैं, तो एक बड़ा वाला एक पेज खुलेगा, जिसमें "बड़ी तस्वीर" पेज होगा

  <!--   --> <div data-role="page" id="dialog"> <div data-role="header"> <!--   --> <a data-rel="back" data-icon="back">Back</a> <h1>Image</h1> <!--     -      --> <!-- about:blank      --> <a href="about:blank" data-icon="search" data-theme="b" id="full-image">Full</a> </div> <div data-role="content"> <!-- about:blank        --> <p><img src="about:blank" /></p> </div> </div> 

डिफ़ॉल्ट रूप से, चित्रों को design.tumblr.com से डाउनलोड किया जाएगा (पहली बात जो मन में आई), एक सेटिंग पृष्ठ जोड़ें ताकि नाम बदला जा सके:

  <!--  --> <div data-role="page" id="options"> <div data-role="header"> <h1>Options</h1> </div> <div data-role="content"> <div data-role="fieldcontain"> <label for="name">Tumblr user:</label> <!--  Tumblr  --> <input type="text" name="name" id="options-name" value="" /> </div> <!--       "  " --> <a data-role="button">Ok</a> </div> </div> 

Github.com/azproduction/phonegap-tumblr-reader/blob/master/india.html का पूर्ण संस्करण

कंकाल तैयार है, कुछ सीएसएस (फ़ाइल सीएसएस / main.css) जोड़ें

 #dashboard-list div, #dialog p { text-align: center; } 

एप्लिकेशन लॉजिक js / main.js

पहले हम JSON आउटपुट सेक्शन में Tumblr API की जांच करेंगे, JSON फॉर्मेट को थोड़ा सा बताया गया है: संदर्भ द्वारा

 http://%user%.tumblr.com/api/read/json 

इस प्रारूप का जावास्क्रिप्ट हमारे पास आएगा:

 var tumblr_api_read = {/*  -  ... */} 

यह एक दया है कि यह शुद्ध JSON (P) नहीं है, लेकिन हमारे पास jQuery.getScript है जो हमारे लिए सब कुछ हल करेगा। प्रारूप के बारे में अधिक कुछ भी ज्ञात नहीं है। स्रोत से यह स्पष्ट हो गया कि tumblr_api_read.tumblelog.title ब्लॉग का शीर्षक है, और tumblr_api_read.posts प्रारूप में पदों की एक सरणी है:

 [{ 'type': 'photo', 'photo-url-1280': 'http://...', 'photo-url-250': 'http://...', 'photo-url-75': 'http://...', /*   -     */ }, ...] 

हम केवल इन क्षेत्रों का उपयोग करेंगे, इसलिए मैं बाकी का वर्णन नहीं करूंगा।

चित्रों की सूची बनाने के लिए रेंडर करें

प्रत्येक चित्र फार्म का होगा:

 <div class="ui-block-a"> <a href="#dialog"> <img data-full-src="http://..." data-big-src="http://..." src="http://..." /> </a> </div> 

रेंडर कोड:

 /** *   * * @param {Object} posts * * @returns {String} */ var render = function (posts) { var view = '', //    .. //     index = 0; //  posts.forEach(function(post){ //    if (post.type !== 'photo') { return; } view += '<div class="ui-block-' + suffix[index % 3] + '">' + //      dialog '<a href="#dialog">' + '<img data-full-src="' + post['photo-url-1280'] + '" data-big-src="' + post['photo-url-250'] + '" src="' + post['photo-url-75'] + '" />' + '</a>' + '</div>'; index++; }); return view; }; 

डेटा लोडर Tumblr API के साथ

URL लोडर खींचता है

 http://%user%.tumblr.com/api/read/json 

और संबंधित डेटा प्राप्त करता है, डेटा का उपयोग करके हम चित्रों की एक सूची बनाते हैं।

 /** *     * * @param {String} [user='tumblr'] */ var load = function (user) { user = user || 'tumblr'; //   $.mobile.pageLoading(); //     var timeoutId = window.setTimeout(function () { $.mobile.pageLoading(true); }, 3000); //  $.getScript('http://' + user + '.tumblr.com/api/read/json', function (data, status) { //    if (status === 'success'){ //   $dashboard.find('h1').text(tumblr_api_read.tumblelog.title); //   $('#dashboard-list').html(render(tumblr_api_read.posts)); } else { // -   alert('Error occurred while loading ' + user); } //   $.mobile.pageLoading(true); //   window.clearTimeout(timeoutId); }); }; 

अनुप्रयोग इनिशियलाइज़र

यह लोकलस्टोरेज, प्रीलोड्स से यूजरनेम को इनिशियलाइज़ करता है, और अन्य छोटे काम करता है।

 var init = function () { //  1  ,    if (init.called) { return; } init.called = true; //   $dashboard = $('#dashboard'); $dashboardList = $('#dashboard-list'); $dialogImg = $('#dialog').find('img'); $fullImg = $('#full-image'); $options = $('#options'); $optionsName = $('#options-name'); //     $dashboardList.delegate('a', 'click', function () { var $img = $(this).find('img'); //    $dialogImg.attr('src', $img.data('big-src')); $fullImg.attr('href', $img.data('full-src')); }); //       currentUser = window.localStorage.getItem("tumblr-reader-user") || 'design'; //    $optionsName.val(currentUser); //      $options.find('a').click(function () { var newUser = $optionsName.val(); //    if (currentUser !== newUser) { //    currentUser = newUser; //   window.localStorage.setItem("tumblr-reader-user", currentUser); //     load(currentUser); } //    $.mobile.changePage('#dashboard'); }); //   load(currentUser); }; init.called = false; //  ,      document.addEventListener("deviceready", init, true); //       $(init); 

स्रोत main.js: github.com/azproduction/phonegap-tumblr-reader/blob/master/js/main.js

अब हमारा आवेदन पूरी तरह से तैयार है और आप इसे Run As > Android Application एमुलेटर में चला सकते हैं, यदि आपने एक मामूली संपादन किया है और आवेदन का पुनर्निर्माण नहीं करना चाहते हैं, तो बस किसी भी WebKit ब्राउज़र में index.html खोलें।

हम PhoneGap बिल्ड में सभी प्लेटफार्मों के लिए आवेदन एकत्र करते हैं

1. आपको पृष्ठ build.phonegap.com पर एक आवेदन भेजना होगा (मुझे 5 मिनट में जवाब मिला)
2. बीटा कोड वाला एक पत्र आपके मेलिंग पते पर आएगा, इसे build.phonegap.com/people/sign_up में उपयोग करें
3. एक बार जब आप लॉग इन कर लें, तो build.phonegap.com/apps पर जाएं
4. अपलोड एक संग्रह या index.html फ़ाइल विकल्प का चयन करें।
5. / .zip में / आस्तियों / www की सामग्री पैक करें और संग्रह भेजें, आप संग्रह के बजाय मेरे गिट रिपॉजिटरी का उपयोग कर सकते हैं
6. Create पर क्लिक करें, थोड़ा इंतजार करें जब PhoneGap Build सभी प्लेटफार्मों के लिए एप्लिकेशन बनाता है
आपका एप्लिकेशन अब डाउनलोड build.phonegap.com/apps/9296 (मेरा निर्माण) के लिए उपलब्ध है

संदर्भ

1. यदि आप कुछ भी इकट्ठा करने और डाउनलोड करने के लिए बहुत आलसी हैं, तो आप ऑनलाइन आवेदन देख सकते हैं
2. आप एंड्रॉइड, वेबओएस, सिम्बियन के लिए तैयार आवेदन को यहां डाउनलोड कर सकते हैं (आपको फोनगैप बिल्ड के साथ पंजीकरण करने की आवश्यकता है) आईओएस को एक प्रमाण पत्र की आवश्यकता होती है, ब्लैकबेरी को विशेष फ़ाइल नामों की आवश्यकता होती है, इसलिए कोई भी नहीं है।
3. पंजीकरण के बिना डाउनलोड करें एंड्रॉइड 1 (बिल्डिंग फोनगैप बिल्ड में अतिरिक्त अधिकारों की आवश्यकता है), एंड्रॉइड 2 (मैनुअल असेंबली के लिए केवल android.permission.INTERNET ), वेबओएस , सिम्बियन की आवश्यकता है
GitHub पर 4. Tumblr Reader रिपॉजिटरी

प्रलेखन

1. फोनगैप डॉक्यूमेंटेशन
2. फोनगैप विकी: एंड्रॉइड ग्रहण क्विकस्टार्ट
3. Tumblr API
4. jQuery के मोबाइल डॉक्स

मैंने एक साधारण एप्लिकेशन का प्रदर्शन किया जो वेब पेज के रूप में काम कर सकता है, आप फोन के एपीआई का उपयोग करके कुछ और जटिल बनाने की कोशिश कर सकते हैं। सुझाव, इच्छा, आलोचना का स्वागत है!