Share
Si vous êtes impliqué dans le développement mobile, vous avez probablement entendu parler de ou utilisé des outils tels que PhoneGap ou Appcelerator Titanium. Ces outils permettent aux développeurs Web d’utiliser leurs compétences en développement Web pour créer des applications hybrides mobiles..
L'année dernière, Intel a acheté appMobi et a intégré ses outils de développement dans Intel XDK. Ce produit unifié et rationalisé est un ensemble d'outils complet pour le développement mobile. Un développeur peut passer des premières lignes de code à une application entièrement compilée avec un seul ensemble d’outils. Et le meilleur de tous, le XDK est gratuit à télécharger.
La première chose que vous remarquerez à propos du XDK est sa facilité d’installation. PhoneGap nécessite une configuration étendue et Titanium a des exigences spécifiques en ce qui concerne les bibliothèques installées. Pour être opérationnel avec le XDK, téléchargez-le et installez-le..
La beauté de XDK est que vous pouvez créer des applications pour n’importe quelle plate-forme. Avec d'autres outils, vous êtes limité à la plate-forme sur laquelle vous développez. Étant donné qu'Apple ne laissera les outils Xcode s'exécuter que sur une machine fonctionnant sous OS X, vous devez avoir un Mac pour développer pour iOS.
Intel XDK vous permet de développer sur n'importe quelle plate-forme, car la compilation se fait dans le cloud. PhoneGap propose un service similaire pour le développement multi-plateformes, mais il est limité. Et avec le XDK, vous n'êtes pas limité aux plateformes mobiles. Envisagez-vous de créer des applications Chrome, Facebook, Amazon ou Nook? Le XDK peut construire pour ces cibles ainsi que l’option de compilation avec les API XDK ou Cordova (PhoneGap)..
Le XDK est livré avec l'éditeur de source ouverte Brackets d'Adobe. Titanium a un éditeur correct, mais je préfère la solution XDK. En outre, vous avez accès à certaines des extensions disponibles pour Brackets. Le seul inconvénient est que vous ne pouvez pas mettre à jour l'éditeur Brackets intégré au XDK. Cependant, il n’en reste pas moins que Titanium et PhoneGap ne vient même pas avec un éditeur..
Le XDK comprend également un éditeur graphique, qui manque cruellement à toutes les plateformes mobiles HTML5. Il va de soi que l'utilisation de composants HTML bénéficierait d'un éditeur WYSIWYG. Il prend également en charge des infrastructures telles que Bootstrap et jQuery Mobile. Ces composants d'interface utilisateur vous permettent de créer rapidement l'interface de votre application..
Une fois votre application créée, vous avez besoin d'un moyen de tester ses fonctionnalités. Intel XDK inclut le meilleur émulateur pour les appareils mobiles que j'ai vu à ce jour. Il inclut la possibilité de tester sur des appareils réels et les performances de profil sans rien installer..
Accédez à la page de téléchargement Intel XDK et obtenez la dernière version de XDK. Après avoir téléchargé le paquet, installez-le avec les options par défaut.
Nous allons construire une petite application photo. Démarrer le XDK et choisir Commencer un nouveau projet. Certaines des options que vous avez sont les suivantes:
Donnez un nom à votre projet et cliquez dessus Créer. Le XDK créera votre projet ainsi qu’une structure de dossiers..
Même si nous avons démarré un projet vide, le XDK inclut des fichiers pour vous aider à démarrer. Nous allons éditer ces fichiers pour notre projet.
Ce fichier est utilisé pour détecter les événements prêts provenant des différentes bibliothèques utilisées. Ce fichier sera utilisé tel quel. Il comprend de nombreuses instructions de journal à des fins de débogage et pour mieux comprendre le fonctionnement du fichier. La partie qui nous intéresse le plus commence à la ligne 106.
Accentsconagua
var evt = document.createEvent ("Event"); evt.initEvent ("app.Ready", false, false); document.dispatchEvent (evt);La première ligne crée un nouvel objet événement. Nous initialisons cet objet avec la valeur "app.ready". La dernière ligne distribue l'événement au DOM.
J'ai supprimé la plupart du contenu de ce fichier, à l'exception de la partie dont nous avons besoin. Nous nous assurons que les bibliothèques dont nous avons besoin ont été chargées et que le périphérique est prêt avant d'exécuter l'un de nos codes. Se souvenir du app.ready événement du fichier précédent?
document.addEventListener ("app.Ready", app.initEvents, false);L'auditeur d'événement écoute le app.ready événement et appelle le initEvents fonctionner sur le app objet.
app.initEvents = function () "use strict"; var fName = "app.initEvents ():"; console.log (fName, "entrée"); $ (". take"). bind ("click", takePic); document.addEventListener ("intel.xdk.camera.picture.add", onSuccess); ;le initEvents la fonction fait deux choses. Tout d’abord, il lie un écouteur d’événements click à un bouton utilisant jQuery. Deuxièmement, il ajoute un écouteur d'événements pour le XDK. intel.xdk.camera.picture.add un événement.
Ce fichier contient la viande de notre application et contient les fonctions qui exécute notre application. le remplaçant Cette fonction utilise jQuery pour remplacer l’image de la page par la photo la plus récente prise..
fonction de remplacement (pic) $ ("img"). replaceWith (pic); Le nom du prendrePic la fonction dit tout. Il utilise le framework XDK pour prendre une photo.
fonction takePic () intel.xdk.camera.takePicture (50, false, "jpg");
le onSuccès la fonction se déclenche quand un intel.xdk.camera.picture.add événement est détecté. Si une photo a été prise avec succès, elle remplacera l'image actuelle sur la page à l'aide de la touche remplaçant fonction nous avons vu plus tôt. Si l'application n'a pas pu prendre une photo, un message d'erreur s'affiche..
fonction 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; remplacement (image); else if (evt.message! = undefined) alert (evt.message); else alert ("erreur lors de la capture de l'image"); Ce fichier contient la page principale de notre application. C'est un simple fichier HTML dans lequel nous intégrons jQuery et jQuery Mobile.
Nous importons également quelques feuilles de style pour styler l'application. La feuille de style personnalisée, app.css, a très peu de style. En effet, j’utilise le rouleau de thème jQuery Mobile pour styliser l’application..
La page elle-même est une page jQuery Mobile standard avec un en-tête, un contenu et une section de pied de page. Remarquez l'image à l'intérieur du div # info étiquette. Ceci est l'image qui est remplacée par l'image prise par l'appareil photo.
Égoïste
Prenez Selfi!
Ceci est un script utilisé pour le débogage d'applications à l'aide de la prévisualisation d'applications..
Nous importons également un certain nombre de scripts clés qui font fonctionner l’application, tels que Cordova et Intel XDK, et app.js.
Nous allons utiliser l'API Intel XDK pour prendre des photos. Pour que cela fonctionne, nous devons activer quelques plugins. Ouvrez le Projets onglet et, au milieu, vous verrez CORDOVA 3.X PARAMÈTRES DE L'APPLICATION MOBILE HYBRIDE. Cliquez sur le bouton plus à côté des plugins et des autorisations. A droite, sous Plugins Intel XDK, vérifier Caméra.
Caméra plugin Clique le Imiter onglet et essayez les fonctionnalités de l'application. Lorsque vous cliquez sur le Prenez Selfi bouton, il devrait faire apparaître la fenêtre d'image. Après avoir pris une photo, celle-ci doit remplacer l'image de marque.
ÉmulateurTéléchargez et installez l'application Intel App Preview depuis Google Play ou l'App Store d'Apple. Aller au Tester onglets et copiez le Weinre balise script si vous souhaitez effectuer un débogage avec App Preview. Clique sur le PUSH FICHIERS bouton pour télécharger votre application sur les serveurs d'Intel. Connectez-vous à App Preview avec vos informations d'identification d'Intel XDK et choisissez l'application que vous avez téléchargée..
Maintenant que nous avons testé l'application, la dernière tâche consiste à la construire pour la distribution. Clique sur le Construire onglet pour afficher vos options. Comme vous pouvez le constater, nous avons un large éventail d’objectifs à construire pour.
Depuis que nous avons utilisé l’API de la caméra, qui est Héritage, nous choisirons le Legacy Hybrid app. Cela nous amène à la page de construction comme indiqué ci-dessous.
En cliquant sur Détails vous montre les options pour la facturation in-app, le streaming audio, etc..
Après avoir choisi les options de votre application, cliquez sur le bouton de construction. Après quelques instants, le fichier est construit et vous obtiendrez une boîte de dialogue vous permettant de télécharger votre application..
J'espère que vous conviendrez qu'il est facile de créer une application avec Intel XDK. Que vous soyez un vétéran, un développeur Web expérimenté ou que vous débutiez tout juste votre développement, Intel XDK a un point d’entrée pour vous. Il est facile à prendre en main et je vous encourage à essayer le Intel XDK..
