Comment j'ai créé ma première application mobile multiplateforme à l'aide de JavaScript et XDK

Je dois l'admettre d'emblée: j'ai plus d'une décennie d'expérience dans le développement d'applications.

J'ai écrit des applications principalement pour les entreprises. Cela signifiait que j'utilisais des logiciels commerciaux et des langages de programmation propriétaires - principalement motivés par la politique de l'organisation pour laquelle je développais, employé par ou les deux.

Entre-temps, les langages open source ont grandi. Et, même si j'avais quelques compétences en JavaScript, CSS et HTML, mes compétences dans ces domaines n'étaient pas assez bonnes pour migrer directement vers un emploi dans le développement Web. Ce que j'ai récemment choisi comme option de carrière parce que:

  • quelqu'un a caché mon fromage, donc une requalification est devenue nécessaire
  • il y a beaucoup de gens qui veulent des sites Web et des trucs comme ça
  • il y a cette promesse de développement d'applications multi-plateformes pour les appareils intelligents

Alors, j'ai commencé à me requalifier. J'ai choisi Free Code Camp ou, finalement, il m'a choisi. Je ne sais vraiment pas laquelle. Le «comment» j'ai sauté dans les eaux du Free Code Camp n'est pas important pour cette histoire. Ce sont cependant des informations de base importantes.

L'autre élément important de cette histoire est cette promesse de développement d'applications multi-plateformes.

J'ai essayé pendant deux ans, ou peut-être plus, de trouver un outil décent qui était à la hauteur de la promesse du développement d'applications multi-plateformes. Je suis sûr que si je suis resté fidèle à certains des outils que j'ai essayés dans le passé, il pourrait en être résulté quelque chose d'utile.

Mais, voici le hic: je suis très pressé. Je n'ai pas le temps d'apprendre. J'ai vraiment besoin d'un outil de développement qui fonctionne réellement hors de la boîte avec un minimum d'effort. Je suppose que je suis habitué aux produits commerciaux à cet égard.

Retour au Free Code Camp. Tout ce que je vais dire, c'est que je suis arrivé aux tyroliennes. Et j'ai fini ceux-là. Je suis aussi un petit déficit d'attention. Une fois que j'ai terminé les tyroliennes, j'ai réalisé que: "loin, je peux créer des applications Web maintenant". Je maîtrisais désormais les langages open source: les balises et les langages de script comme HTML, CSS et JavaScript. Et j'avais besoin d'une pause de l'école à ce stade.

J'ai donc cherché à nouveau des outils qui pourraient être à la hauteur de la promesse du développement d'applications multi-plateformes. Et, après un peu d'essais et de flick, je me suis réhabilité avec Intel XDK (oui, je l'ai installé sur ma machine pendant environ 6 mois, assis au repos). En toute honnêteté, mes compétences en script manquaient quelque peu lorsque je l'ai installé pour la première fois (malgré ma compréhension approfondie de VBA, du codage orienté objet et de l'intégration de base de données relationnelle).

Intel XDK s'était également beaucoup amélioré, et avant de créer ma première application avec, je suis passé à la version actuelle (à l'époque).

Alors, pourquoi ai-je choisi Intel XDK par rapport à ses concurrents. Au fil des années, j'ai testé et jeté une dizaine d'outils différents. Voici un résumé de mes expériences:

  • Un produit concurrent n'a pas permis à l'utilisateur final (moi) de modifier ma propre application. Je pourrais commencer à en créer un, mais il n'y avait alors aucun moyen connu de le modifier. Ce n'est pas un problème auquel on s'attend - jamais. Vous savez, après une pause, comme, je ne sais pas, éteindre mon ordinateur pour que je puisse dormir, puis revenir le lendemain pour continuer à créer mon application - mais aucun moyen d'accéder à mon travail sur ma machine? Devinez combien de temps cet outil de développement a duré sur ma machine… Oui, j'ai cherché du support. Les réponses que j'ai trouvées m'ont encore plus déçu que de ne pas pouvoir modifier mon propre code. Grrr…
  • Documentation: J'ai essayé un autre outil où la documentation datait d'environ 12 mois (selon la date de publication). À cette époque, Cordova avait dépassé des années-lumière où cette documentation périmée était restée. Et, comme tant de choses couvertes de poussière, les instructions sur la façon d'utiliser cet outil particulier auquel je pense n'étaient vraiment pas si pertinentes ou utiles. Dans la poubelle, il est allé.
  • D'autres outils basés sur le serveur me rendent nerveux. Que se passe-t-il si le serveur tombe en panne ou si l'organisation responsable fait faillite? Comment récupérer mon putain de code? Je n'aime pas trop le risque. Le monde tourne trop vite. Les choses tombent tout le temps. Je n'ai pas besoin que mon adresse IP soit expulsée du monde en raison d'un mauvais choix d'hôtes d'applications de ma part. Et les solutions basées uniquement sur le serveur ont tendance à coûter beaucoup plus cher que ce que je peux me permettre. Et à qui appartient vraiment l'adresse IP lorsque le code que j'écris est hébergé sur la machine de quelqu'un d'autre?

En savoir plus sur Intel XDK

Lorsque j'ai joué avec cette version d'Intel XDK, j'ai découvert, agréablement, que je pouvais faire fonctionner mon application. Allez d'abord. Et ce n'est pas une application simple - elle utilise la géolocalisation pour rechercher des informations. Et d'autres choses trixy. Je savais à l'avance que j'aurais besoin de quelques plugins. Jouer avec PhoneGap plus tôt dans la pièce m'a fait découvrir Cordova (PhoneGap était auparavant gratuit, maintenant détenu par Adobe, pas si gratuit). C'était il y a des mois. L'examen d'Intel XDK a suggéré que certaines choses pourraient être effectuées par le code propriétaire d'Intel, et peut-être que certaines devraient être gérées par des plugins tiers (par Cordova par exemple).

Il s'avère, quand j'ai commencé, qu'une partie du code propriétaire d'Intel était en train de devenir obsolète (mais ce n'était pas clair pour moi, l'utilisateur final, à l'époque). Le morceau de code que j'ai choisi (on.device.ready - pas son nom complet - parce que je l'oublie déjà) était en voie de disparition.

J'adore Intel XDK - parce que cela fonctionne - mais, comme beaucoup d'outils de nos jours, la documentation ne suit pas les fonctionnalités. Et ce n'est pas que la documentation soit nécessairement loin derrière. Dans le cas d'Intel XDK, la documentation est complète - et précise (yay), mais un peu difficile à trouver (aww).

Alors, oui, j'essaye d'utiliser cet appel, et mon application fonctionne bien. Et je ne me souviens pas - ai-je mis à niveau vers la prochaine version et mon application est tombée en panne, ou mon code ne fonctionnait-il tout simplement pas parfaitement et j'ai également mis à niveau vers la prochaine version (ouais, Intel a mis à niveau vers Intel XDK environ un à deux fois par mois - essayez de suivre ce calendrier en tant qu'entrepreneur indépendant).

En vérité, j'ai failli abandonner Intel XDK. Mais, j'ai pensé: "Putain ça" (je suis australien). Et: «J'ai presque terminé cette application. Je vais l'endurer. Et donc, j'ai trouvé des informations indiquant que l'appel «on.device.ready» n'était pas encore mort, mais que sa famille d'amis était morte et enterrée (obsolète, en majuscules bleues). Inutile de pleurer sur ses proches. Il est temps de changer de vitesse et de passer à autre chose de manière agressive.

J'ai donc rapidement découvert les plugins Cordova et comment les utiliser dans Intel XDK. Pas si difficile que ça. Dans ma première application, j'utilise des plugins assez bien utilisés et bien connus.

Et oui, la bonne nouvelle est qu'une fois que j'ai compris comment brancher les plugins Cordova, je n'ai pas regardé en arrière.

Alors, voici quelques raccourcis pour créer une application avec Intel XDK. Mes perles de sagesse pour vous aider, le lecteur, à éviter les chemins plus sombres que j'ai empruntés et à rester bien dans la lumière:

  • Peu m'importe quelle application vous essayez de développer, dites à Intel XDK de créer une version Cordova. Juste au cas où vous auriez besoin d'utiliser un plugin. Et, oui, vous aurez probablement besoin de StatusBar. Parce que iOS.
  • Vous aurez besoin, au minimum, de compétences HTML et CSS. Plus du JavaScript pour utiliser correctement les plugins. Oui, vous pouvez utiliser JQuery à la place si c'est votre truc. La quantité de JavaScript ou de JQuery dépend de l'application que vous créez. Vous devrez être en mesure de créer des sites Web pour utiliser quelque chose comme Intel XDK. Vous ne savez pas encore comment créer un site Web? Voici la solution: rejoignez le Free Code Camp et apprenez aussi loin que les tyroliennes et y compris. Une fois que vous avez fait cela, vous êtes prêt à jouer avec Intel XDK. Oui, vous l'êtes.
  • Pour votre première application, dites à Intel XDK de créer à l'aide de l'un de leurs modèles. Cela vous donnera un code prêt à l'emploi, qui vous aidera à raccourcir le "attendez, et maintenant?" partie.
  • index.html: il s'agit de la première interface utilisateur qui sera présentée à l'utilisateur final (client) de votre application. Votre connaissance du développement de site Web que vous avez acquise jusqu'à et y compris les tyroliennes Free Code Camp vous aidera à comprendre quoi faire avec ce fichier.
  • GitHub: vous voudrez suivre les instructions pour chaque plugin que vous utilisez. Pour trouver la documentation de votre plugin, Google «github cordova [plugin]», où «[plugin]» est le nom du plugin que vous recherchez. Par exemple, la recherche «github cordova statusbar» devrait vous amener au plugin statusbar assez facilement. La documentation du plugin cordova sur github est excellente.
  • StackOverflow: posez vos questions «idiotes» ici. N'oubliez pas de chercher d'abord les réponses à votre question. La vaste communauté de mentors sur StackOverflow fait un effort particulier pour souligner que votre question a déjà été posée (et répondue).
  • Forum des produits Intel XDK: posez ici vos questions «idiotes» spécifiques à Intel XDK. Les gars d'Intel sont vos amis (heureusement). Et les autres développeurs utilisant Intel XDK sont également heureux de vous aider s'ils le peuvent.
  • Intel XDK crée trois packages lors de la création pour les appareils Windows. J'essaie toujours de comprendre pourquoi il en construit trois, mais je n'ai besoin d'en télécharger qu'un dans le Windows Store. Consultez les forums Intel XDK pour obtenir la réponse. J'ai demandé. C'est documenté maintenant. Pas la réponse complète. Juste la réponse dont vous aurez besoin pour continuer. C'est assez.

Keep It Simple Stupid

OK, voici les conseils de base que votre mère et votre père auraient dû vous donner avant de quitter la maison:

  • créez le moins de code possible.
  • cela inclut les fichiers d'actifs. Ma première application contenait trop de fichiers CSS et trop de fichiers JS. Sérieusement. Le «aww, snap» que j'avais avec «on.device.ready» m'a donné l'opportunité de consolider mon IP en moins de fichiers et de jeter des bits qui n'étaient en fait utilisés nulle part. C'est une pratique exemplaire.
  • Utilisez le code d'autres personnes (pas dans le sens du plagiat) - utilisez les modèles prêts à l'emploi fournis par Intel XDK pour raccourcir la courbe d'apprentissage. Au moins pour votre toute première application.
  • Coincé sur un «comment faire»? Demandez à Google et vous trouverez la réponse dans StackOverflow. Modifiez l'apprentissage en fonction de vos besoins, puis passez au problème suivant. Vous saurez pour la prochaine fois.
  • Lire des livres. Hahaha. Comme j'ai le temps. Sérieusement. Trouvez le temps.
  • Je lis toujours sur le langage de programmation Swift… Ce n'est même pas lié. Mais c'est au moins une question de code.
  • Utilisez les atouts des autres. Pour ma première application, j'ai trouvé une bibliothèque d'animations CSS et une bibliothèque de polices soignée. Je me suis assuré que mon application attribuait ces bibliothèques dans la page d'informations «À propos» de mon application. Conformément aux conditions de licence. Et parce que c'est la bonne chose à faire.

Utilisation d'Intel XDK pour créer votre première application

Téléchargez et installez Intel XDK.

Dans Intel XDK:

  1. Cliquez sur «Démarrer un nouveau projet».
  2. Choisissez «Modèles» puis «Modèles et interfaces utilisateur».
  3. Choisissez l'application de vue par onglet (ou vous pouvez choisir un autre type de modèle si vous le souhaitez). Cochez «Utiliser App Designer» (cela installera du code prêt à l'emploi à partir de et commencer par - yay).
  4. Cliquez sur Continuer.
  5. Dans la fenêtre Projet, cliquez sur le bouton Mettre à niveau vers Cordova.
  6. Lorsque le projet est créé, ajoutez le plugin Cordova suivant (retour au menu projet):

    Barre d'état

Les plugins que vous choisirez dépendront entièrement de ce que vous construisez. Les plugins vous aident à utiliser les fonctionnalités des appareils sur lesquels votre application fonctionnera. Vous en aurez probablement besoin d'au moins un. Parce que iOS.

Construire votre application

Hormis les cerceaux d'exigences surdimensionnés d'Apple (de quel certificat fade ai-je encore besoin?) Et le «choix de trois packages pour Windows», le processus de construction en lui-même est simple. Accédez à l'onglet Build. Téléchargez votre code, créez votre package, téléchargez votre package.

Je ne sais pas pour toi. Je suis pauvre. Je peux tester mon package iOS. Je ne peux pas tester mon Android ou mes packages Windows. Un jour j'espère pouvoir tester sur plus d'une plateforme. Désolé, testez les cobayes (c'est-à-dire tous mes clients sur Google et Windows).

Pour vous, le développeur: l'émulateur d'Intel XDK ne doit être considéré que comme un guide. Vous le comprendrez. Marchez. Ne faites pas de prisonniers. Ce n’est pas le moment d’être effrayé par la peur: «Et si ça ne marche pas? Ayez de la foi. Soyez damné pour avoir essayé. Ne soyez pas damné pour avoir échoué.

Pour Android, vous voudrez créer en utilisant l'option "Crosswalk pour Android". Deux mots pour expliquer pourquoi: «boîte flexible». Si vous avez besoin d'en savoir plus, consultez la documentation. Flex box a un moyen de se faufiler dans chaque projet (dans mon expérience limitée).

Qu'est-ce que je ne peux pas vous aider?

  • La façon de faire d'Apple est fortement sur-conçue. Vous devez créer votre propre certificat en utilisant une méthode alambiquée. Tout le monde se trompe. Au moins une fois. Persévérer.
  • La période d'examen d'Apple est longue. Environ 7 jours (ce n'est pas une erreur d'impression, cela prend des jours!). C'est une première expérience époustouflante. Que faire si l'application est rejetée? Vais-je savoir quoi faire s'il est rejeté? Pourquoi cela prend-t-il autant de temps? Ce statut de révision signifie-t-il qu'Apple va l'examiner ou que je suis censé le faire? Aaaargh! Est-ce encore prêt? Que se passe-t-il? Oh, et les nuits blanches. Et la vérification minute par minute du courrier électronique. Cela ne vient jamais.
  • Google prend quelques heures. La même application sera examinée et déployée dans les 24 heures. Peut-être un peu plus longtemps. Moins de 48. Cela dit, si vous écrivez une application monstre compliquée, peut-être plus longtemps.
  • Windows prend quelques heures. Et puis environ une journée pour devenir disponible en téléchargement dans le Windows Store. Mais vous n'aurez aucun client. C'est donc un point discutable. Construisez pour les téléphones Windows de toute façon. Cela complètera votre CV.

Qu'est ce que je fais maintenant?

Je construis une autre application.

Cette histoire est apparue à l'origine sur creatureoftech.com.