इंटेल XDK के साथ प्रारंभ करना

मोबाइल विकास वेब प्रौद्योगिकियों के साथ नई बात नहीं है। PhoneGap और Appcelerator टाइटेनियम जैसे उपकरणों के लिए धन्यवाद, वेब डेवलपर्स  डिवाइस की हार्डवेयर तक पहुँच बना सकते हैं।  HTML5/सीएसएस/जावास्क्रिप्ट विकास के लिए एक नया समाधान है इंटेल  XDK. इस अनुच्छेद में, मैं क्यों यह यह एक कोशिश कर रहा हूँ  आपको  बताता हूँ।

1. क्या यह है?

आप मोबाइल के विकास के साथ शामिल हैं, तो शायद अपने सुना है या PhoneGap या Appcelerator टाइटेनियम जैसे उपकरण इस्तेमाल किया। इन उपकरण के द्वारा मोबाइल ऐप्स को बनाने के लिए और अपने वेब विकास कौशल का उपयोग करने के लिए वेब डेवलपर्स की अनुमति देता है।

पिछले साल इंटेल ने appMobi खरीदा है और उनके विकास उपकरण इंटेल XDK में पैक किया। यह सुव्यवस्थित, एकीकृत उत्पाद मोबाइल विकास के लिए एक पूर्ण toolset है। एक डेवलपर उपकरण का केवल एक सेट के साथ एक पूरी तरह संकलित अनुप्रयोग कोड के पहले लाइनों से जा सकते हैं। और  XDK डाउनलोड करने के लिए स्वतंत्र है।

2. सुविधाएँ

पहली बात तुम  XDK  के बारे में नोटिस करो कि कैसे यह आसान है स्थापित करने के लिए है। PhoneGap विस्तृत कॉन्फ़िगरेशन की आवश्यकता होती है और टाइटेनियम विशिष्ट आवश्यकताएँ स्थापित पुस्तकालयों के लिए संबंध है। XDK के साथ ऊपर और चल रहा प्राप्त करने के लिए, आप इसे डाउनलोड करने और इसे स्थापित करें।

XDK का सौंदर्य यह है कि आप किसी भी platform के लिए अनुप्रयोगों का निर्माण कर सकते हैं। अन्य उपकरणों के साथ, आप platform पर विकसित करने के लिए सीमित कर रहे हैं।  एप्पल Xcode उपकरण आपको कुछ भी करने की अनुमति देता है किन्तु ये मशीन OS X पर ही स्थापित होगा, आप iOS के लिए विकसित करने के लिए  मैक होना आवश्यक है।

इंटेल XDK की मदद से आप किसी भी platform पर विकसित है क्योंकि यह क्लाउड में संकलन किया जाता है। PhoneGap क्रॉस प्लेटफ़ॉर्म विकास है, लेकिन यह सीमित क्षेत्र में  इसी तरह की सेवा प्रदान करता है। और XDK के साथ आप मोबाइल प्लेटफार्मों के लिए सीमित नहीं हैं। आपके पास  Chrome, Facebook, अमेज़न या Nook apps का निर्माण करने के लिए योजना है? XDK उन लक्ष्यों के रूप में अच्छी तरह से XDK या कॉर्डोबा (PhoneGap) एपीआई के साथ संकलित करने के लिए विकल्प के लिए निर्माण कर सकते हैं।

XDK से एडोब खुला स्रोत Brackets संपादक के साथ है । टाइटेनियम एक सभ्य संपादक है, लेकिन मैं XDK समाधान पसंद करता हूँ । इसके साथ ही, आप कुछ करने के लिए Brackets उपलब्ध एक्सटेंशन का उपयोग किया है। केवल दोष यह है कि आप XDK के साथ एकीकृत है Brackets  संपादक को अद्यतन नहीं कर सकता। हालांकि, यह अभी भी एक कदम से टाइटेनियम पर निर्भर है, और PhoneGap भी एक संपादक के साथ नहीं आता है।

XDK भी एक चित्रमय संपादक जो सभी मोबाइल प्लेटफार्मों के लिए HTML5 में कष्टदायी रूप से अनुपलब्ध है, शामिल हैं। यह कारण है HTML घटकों का उपयोग कर एक WYSIWYG संपादक से लाभ होगा के लिए खड़ा है। यह भी frameworks  Bootstrap और jQuery मोबाइल जैसे का समर्थन करता है। ये उपयोगकर्ता इंटरफ़ेस घटक आप जल्दी से अपने अनुप्रयोग के इंटरफ़ेस बाहर का निर्माण करने के लिए अनुमति देते हैं।

एक बार अपने app बनाया है, आप अपनी कार्यक्षमता का परीक्षण करने के लिए एक रास्ते की जरूरत है। इंटेल XDK मोबाइल उपकरणों मैं आज तक देखा है के लिए सबसे अच्छा एम्यूलेटर शामिल हैं। यह वास्तविक उपकरणों और प्रोफ़ाइल प्रदर्शन पर कुछ भी स्थापित करने के लिए बिना परीक्षण करने की क्षमता भी शामिल है।

3. इंटेल XDK के साथ एक मोबाइल App बनाने

चरण 1: डाउनलोड और स्थापित करें

इंटेल XDK डाउनलोड पृष्ठ पर जाएँ और XDK का नवीनतम संस्करण प्राप्त करें। पैकेज डाउनलोड करने के बाद, यह डिफ़ॉल्ट विकल्प के साथ स्थापित करें।

चरण 2: एक नया प्रोजेक्ट बनाएँ

हम एक छोटी सी तस्वीर app का निर्माण करने के लिए जा रहे हैं। XDK प्रारंभ करें और Start a New Project का चयन करें । आप विकल्पों में से कुछ हैं:

• एक डेमो के साथ प्रारंभ करें: यह विकल्प आपको इंटेल प्रदान करता है कई डेमो परियोजनाओं में से एक का उपयोग करने की अनुमति देता है। यह XDK के साथ विकसित करने के लिए कैसे समझ में मदद करने के लिए अच्छा है।
• किसी टेम्पलेट से प्रारंभ करें: यह विकल्प विभिन्न उपयोगकर्ता इंटरफ़ेस शैलियों के लिए टेम्पलेट्स का एक नंबर प्रदान करता है। यह भी आप आरंभ करने के लिए एक रिक्त कॉर्डोबा टेम्पलेट है।
• एक मौजूदा HTML5 परियोजना आयात: इस विकल्प के साथ, आप एक परियोजना XDK, एक PhoneGap परियोजना के अपनी पसंद के संपादक में कोडित जैसे बाहर किए गए आयात कर सकते हैं। यह भी आप XDK परियोजनाओं को आयात करने देता है।
• App डिजाइनर के साथ App स्टार्टर/प्रारंभ का उपयोग करें: App स्टार्टर अनुप्रयोग डिज़ाइनर लाइट माना जा सकता। दोनों Brackets  संपादक के साथ जाने के लिए ग्राफ़िकल इंटरफ़ेस हैं। App स्टार्टर App Framework का उपयोग करता है। App डिजाइनर Bootstrap, jQuery मोबाइल और Topcoat उपयोगकर्ता इंटरफ़ेस चौखटे के लिए विकल्प जोड़ता है।
• शुरू के साथ एक रिक्त परियोजना: जैसा कि नाम का तात्पर्य, यह विकल्प हमें शुरू करने के लिए एक टेम्पलेट के साथ एक रिक्त परियोजना।  इस ट्यूटोरियल के लिए चुन जाएगा विकल्प है।

अपने प्रोजेक्ट को कोई नाम दें, और Create क्लिक करें। XDK अपनी परियोजना के रूप में अच्छी तरह से एक फ़ोल्डर संरचना बनाने जाएगा।

चरण 3: परियोजना संरचना

भले ही हम किसी रिक्त प्रोजेक्ट शुरू कर दिया, XDK आप आरंभ करने के लिए कुछ फ़ाइलें शामिल करता है। हम हमारे प्रोजेक्ट के लिए इन फ़ाइलों को संपादित करने के लिए जा रहे हैं।

init-dev.js

यह फ़ाइल उपयोग में विभिन्न पुस्तकालयों से तैयार घटनाओं का पता लगाने के लिए उपयोग किया जाता है। इस फ़ाइल के रूप में उपयोग किया जाएगा। यह उद्देश्य डीबगिंग के लिए और बेहतर कैसे फ़ाइल काम करता है समझने के लिए कई लॉग बयान भी शामिल है। हम सबसे के साथ संबंध रहे हैं भाग लाइन 106 पर शुरू होता है।

var evt = document.createEvent("Event") ;
evt.initEvent("app.Ready", false, false) ;
document.dispatchEvent(evt) ;

पहली पंक्ति एक नया ईवेंट ऑब्जेक्ट बनाता है। हम इस ऑब्जेक्ट मान "app.ready" के साथ प्रारंभ।  अंतिम पंक्ति dispatches घटना DOM के लिए

init-app.js

हमने जरूरत के लिए छोड़कर, इस फ़ाइल की सामग्री के सबसे नष्ट कर दिया है। हम पुस्तकालयों लोड किया गया है  और हम हमारे कोड के किसी भी निष्पादित करने से पहले डिवाइस तैयार है यह सुनिश्चित करें। App.ready घटना से पिछले फ़ाइल याद है?

document.addEventListener("app.Ready", app.initEvents, false) ;

The event listener listens for the app.ready event and calls the initEvents function on the app object.

app.initEvents = function() {
    "use strict" ;
    var fName = "app.initEvents():" ;
    console.log(fName, "entry") ;
    $(".take").bind("click", takePic);
    document.addEventListener("intel.xdk.camera.picture.add",onSuccess); 
} ;

InitEvents फ़ंक्शन दो बातें करता है। सबसे पहले, यह एक बटन के लिए jQuery का उपयोग कर एक क्लिक घटना श्रोता बांध। दूसरा, यह एक घटना श्रोता XDK intel.xdk.camera.picture.add घटना के लिए कहते हैं।

app.js

इस फ़ाइल को हमारे app के अनुरूप  है और हमारे app के कार्य शामिल हैं। replacer function छवि पृष्ठ पर सबसे हाल ही में लिया गया चित्र के साथ प्रतिस्थापित करने के लिए jQuery का उपयोग करता है।

function replacer(pic) {
    $("img").replaceWith(pic);
}

TakePic फ़ंक्शन का नाम यह सब कहते हैं। यह एक तस्वीर लेने के लिए XDK फ्रेमवर्क का उपयोग करता है।

function takePic() {
    intel.xdk.camera.takePicture(50,false,"jpg");
}

The onSuccess function fires when a intel.xdk.camera.picture.add event is detected. सफलतापूर्वक एक चित्र लिया गया था, यह हम पहले देखा replacer फ़ंक्शन का उपयोग कर पृष्ठ पर वर्तमान छवि बदल देगी। यदि अनुप्रयोग कोई चित्र लेने के लिए सक्षम नहीं था, यह एक त्रुटि संदेश प्रदर्शित होगा।

function onSuccess(evt) {
    if (evt.success == true) {
        var image = document.createElement('img');
        image.src=intel.xdk.camera.getPictureURL(evt.filename);
        image.setAttribute ("style","width:100%;height:200px;");
        image.id=evt.filename;
        replacer(image);
    }
    else {
        if (evt.message != undefined) {
            alert(evt.message);
    }
    else
    {
        alert("error capturing picture");
    }
  }
}

index.html

इस फ़ाइल में हमारे app के मुख्य पृष्ठ है। यह एक सरल HTML फ़ाइल जिसमें हम jQuery और jQuery मोबाइल में पुल है।

<script src="lib/jquery-2.1.1.js"></script>
<script src="lib/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script> 

हम भी app शैली के लिए कुछ stylesheets आयात करें। कस्टम शैली पत्रक, app.css, स्टाइल के रास्ते में बहुत ही छोटी है। इसलिए है क्योंकि मैं app शैली के लिए jQuery Mobile theme roller का उपयोग करें।

<link rel="stylesheet" href="lib/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link rel="stylesheet" href="css/themes/selfi.css">
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css">
<link rel="stylesheet" href="css/app.css">

पृष्ठ स्वयं एक मानक jQuery मोबाइल पृष्ठ एक शीर्षक, सामग्री, और पाद लेख अनुभाग के साथ है। Div #info टैग के अंदर छवि नोटिस। यह छवि है जो  कैमरे द्वारा लिया गया चित्र से बदला गया है।

<div data-role="page">
       <div data-role="header">
           <h1>Selfi</h1>
       </div>
       <div data-role="main" class="ui-content">
           <div id="info"><img src="img/vader-selfie.jpg"></div>
           <a class="take" data-role="button">Take Selfi!</a>
           </div>
       <div data-role="footer" data-position="fixed">
           <h1></h1>
       </div>
    </div>

यह एक स्क्रिप्ट apps app पूर्वावलोकन का उपयोग करके डीबगिंग के लिए उपयोग किया जाता है।

<script src="http://debug-software.intel.com/target/target-script-min.js#Agu5iaiuw-i47vL-2_lk5pDOu3XL6fZm9sAm4apb__w"></script>

हम कुंजी स्क्रिप्ट app टिक, कॉर्डोबा और इंटेल XDK, और app.js जैसे बनाने की एक संख्या आयात करें।

<script src="intelxdk.js"></script>         <!-- phantom library, needed for XDK api calls -->
<script src="cordova.js"></script>          <!-- phantom library, needed for Cordova api calls -->
<script src="xhr.js"></script>              <!-- phantom library, needed for XDK CORS -->
<script src="js/app.js"></script>
<script src="js/init-dev.js"></script>
<script src="js/init-app.js"></script>

4. समर्थकारी Plugins

हम चित्र लेने के लिए इंटेल XDK API का उपयोग करने जा रहे हैं। यह काम करने के लिए, हम कुछ plugins को सक्षम कर रहे  है। प्रोजेक्ट्स टैब खोलें, और बीच में, आप कॉर्डोबा 3. x संकर मोबाइल APP सेटिंग्स देखेंगे। Plugins और अनुमतियाँ के आगे प्लस बटन क्लिक करें। इंटेल XDK Plugins के दाईं ओर कैमरा की जाँच करें।

5. Emulator का उपयोग करना

Emulate टैब क्लिक करें और app की कार्यक्षमता बाहर की कोशिश करो। जब आप Selfi बटन पर क्लिक करें, यह चित्र विंडो ऊपर लाना चाहिए। एक तस्वीर लेने के बाद, चित्र प्लेसहोल्डर छवि को प्रतिस्थापित करना चाहिए।

6. App परीक्षण

डाउनलोड करें और गूगल प्ले या एपल के एप्लिकेशन स्टोर से इंटेल App पूर्वावलोकन एप्लिकेशन स्थापित करें।  परीक्षण टैब पर जाएँ और आप डीबगिंग अनुप्रयोग पूर्वावलोकन के साथ करने के लिए चाहते हैं, तो weinre स्क्रिप्ट टैग की प्रतिलिपि बनाएँ। इंटेल सर्वर पर आपके एप्लिकेशन को अपलोड करने के लिए फ़ाइल पुश बटन पर क्लिक करें। App पूर्वावलोकन करने के लिए अपने क्रेडेंशियल्स के साथ इंटेल XDK से लॉग ऑन करें और आप अपलोड की गई वह एप्लिकेशन चुनें।

7. अनुप्रयोग का निर्माण

अब हमने  app परीक्षण किया है, इसे बनाने के लिए वितरण के लिए अंतिम कार्य है। अपने विकल्पों को प्रदर्शित करने के लिए Build  टैब पर क्लिक करें। जैसा कि आप देख सकते हैं, हम निर्माण करने के लिए लक्ष्य की एक विस्तृत श्रृंखला है।

हम कैमरा एपीआई, जो Legacy है, इस्तेमाल के बाद से हम Legacy Hybrid app का चयन करेंगे। यह हमें नीचे दिखाए गए के रूप में निर्मित पृष्ठ करने के लिए लाता है।

विवरण पर क्लिक करके आप इन-ऐप बिलिंग, स्ट्रीमिंग ऑडियो, आदि के लिए विकल्प से पता चलता है।

आपके अनुप्रयोग के लिए विकल्प चुनने के बाद, बिल्ड बटन पर क्लिक करें। कुछ ही क्षणों बाद फ़ाइल बनाया है और अब आपको अपने एप्लिकेशन को डाउनलोड करने का एक संवाद मिल जाएगा।

निष्कर्ष

मुझे आशा है कि आप सहमत हैं कि इंटेल XDK के साथ एक app बनाना आसान है। चाहे आप एक अनुभवी, पूर्ण स्टैक वेब डेवलपर हैं या सिर्फ विकास में पाने के लिए शुरू, इंटेल XDK एक प्रवेश बिंदु है आप के लिए। इसे लेने के लिए आसान है और मैं इंटेल XDK प्रशिक्षण देकर प्रोत्साहित करते हैं।