introduction
De nombreux développeurs Web hésitent à développer des applications mobiles, pensant qu’il leur faudrait trop de temps pour apprendre les ficelles du développement d’applications mobiles. Eh bien, ils ne se trompent pas complètement, car apprendre à développer des applications natives pour une plate-forme mobile signifie généralement se familiariser non seulement avec un nouveau langage de programmation, mais également avec des concepts et des modèles qui sont souvent spécifiques à la plate-forme.
Si vous êtes l’un de ces développeurs, vous devriez plutôt envisager de créer des applications hybrides, car vous pourriez alors travailler avec des langages que vous connaissez déjà: HTML5, CSS et JavaScript. De plus, vous pouvez utiliser des frameworks populaires tels que Bootstrap Twitter ou jQuery Mobile pour créer vos applications.
Maintenant que j’ai votre attention, plongeons-nous dans Telerik AppBuilder, un puissant environnement de développement basé sur le cloud qui facilite la création d’applications hybrides. Dans ce didacticiel, nous allons examiner ce qu’AppBuilder a à offrir et, ce faisant, créer une application simple et hybride.
Pourquoi choisir Telerik AppBuilder
L’une des raisons les plus convaincantes d’utiliser AppBuilder est son client intégré au navigateur, un IDE (environnement de développement intégré) à part entière qui s’exécute dans le navigateur. Il vous permet de créer, tester et même publier des applications hybrides à partir de n’importe quel ordinateur ou appareil mobile sans avoir à installer quoi que ce soit localement.
Pouvoir développer des applications iOS à l’aide d’ordinateurs exécutant Windows ou Linux est une autre raison pour laquelle vous voudriez utiliser AppBuilder. Les simulateurs d’appareils iOS peuvent également être utilisés à partir de n’importe quel système d’exploitation.
Enfin, comme AppBuilder fait partie de la plate-forme Telerik, son utilisation signifie que votre application a un accès facile à des fonctionnalités telles que l’analyse, les notifications push, l’authentification des utilisateurs et le stockage de données dans le cloud.
Conditions préalables
Pour suivre ce tutoriel, il vous suffit d’un Compte Telerik. Si vous n’en avez pas déjà, vous pouvez vous inscrire gratuitement et commencer immédiatement un essai de 30 jours.
1. Créer une nouvelle application
Dans ce didacticiel, nous travaillerons principalement avec le client intégré au navigateur d’AppBuilder. Ouvrez un nouvel onglet dans votre navigateur et connectez-vous au Plateforme Telerik. Une fois connecté, vous verrez une page répertoriant toutes vos applications.
Pour créer une nouvelle application, cliquez sur le bouton Créer une application bouton. Il vous sera maintenant demandé de spécifier divers détails sur l’application.
Tout d’abord, sélectionnez le type d’application que vous souhaitez créer. Pour l’instant, sélectionnez Cordova hybride car nous allons créer notre application en utilisant Apache Cordova, un cadre de développement d’applications hybrides populaire.
Ensuite, donnez un nom et une description significatifs à l’application en remplissant le champ Nom de l’application et La description des champs. Je vais utiliser Ma première application comme nom.
Enfin, cliquez sur le Créer une application pour générer une application hybride entièrement configurée qui utilise le Cadre d’interface utilisateur Kendo par défaut.
2. Création de vues
Une fois l’application créée, vous serez redirigé vers le Vues un service. Avec ce service, vous pouvez créer toutes les vues de votre application hybride sans avoir à écrire de code HTML.
Dans ce tutoriel, nous allons créer une application très simple qui convertit les kilogrammes en livres. Il aura deux vues:
- une vue appelée Convertisseur, dans lequel l’utilisateur peut saisir un poids en kilogrammes
- une vue appelée À propos, qui affiche des détails sur l’application
Créons d’abord le À propos vue. Pour ce faire, sélectionnez le Vue de la maison et cliquez Changer le type de vue. Vous allez maintenant être présenté avec plusieurs modèles de vue. Clique le À propos modèle.
Dans l’écran suivant, définissez le Titre à À propos et cliquez sur le Modèle en-tête pour configurer le contenu de la vue. En règle générale, un écran «à propos de» contient le nom, la version et la description de l’application. Par conséquent, remplissez ces champs de manière appropriée. Le modèle comprend également des boutons sociaux. Nous ne les utiliserons pas aujourd’hui, alors décochez la case Nous contacter, Bouton Facebook, et Bouton Twitter des champs.
Une fois que vous cliquez sur le Appliquer bouton, vous pourrez voir la vue que vous venez de créer.
Créons maintenant le Convertisseur vue en cliquant sur le Ajouter une vue bouton. Vous serez invité à choisir à nouveau un modèle. Cette fois, sélectionnez le Forme template, car cette vue aura deux champs de saisie:
- un champ pour accepter le poids en kilogrammes
- un autre champ pour afficher le poids en livres
Dans l’écran suivant, définissez le Titre champ à Convertisseur et le Nom champ à convertisseur. Pour ajouter les deux champs de saisie, cliquez d’abord sur le Champs de formulaire en-tête, puis cliquez sur le Ajouter des champs de formulaire bouton. Il vous sera maintenant demandé de sélectionner le type de champ de formulaire.
Le poids en kilogrammes devant être un nombre, sélectionnez Entrée numérique dans la liste des options. Nomme le kilogrammes et donnez-lui une étiquette appropriée.
De même, créez un Zone de texte et nommez-le résultat. Assurez-vous également de lui donner une étiquette appropriée.
Maintenant que les champs du formulaire sont prêts, cliquez sur le bouton Boutons titre. Par défaut, le modèle de formulaire comporte un bouton de confirmation et un bouton d’annulation. Nous n’avons pas besoin du bouton d’annulation, alors décochez la case Bouton Annuler champ.
Cliquez sur Appliquer pour enregistrer les modifications. La vue devrait maintenant ressembler à ceci:
3. Configuration de la disposition de navigation
Pour permettre aux utilisateurs de naviguer entre les deux vues que nous avons créées, le service Views a déjà ajouté une disposition de navigation à notre application. Pour le configurer, passez au Disposition de navigation section.
Vous verrez que l’application utilise actuellement un Menu de l’onglet comme disposition de navigation. Je vais laisser les choses ainsi, mais vous êtes libre d’expérimenter les autres options disponibles.
Par défaut, notre application utilise le À propos vue comme vue initiale. Utiliser Convertisseur comme vue initiale, cliquez sur le Démarrage de l’application cap et définissez la valeur de Vue initiale à Convertisseur. N’oubliez pas de cliquer Appliquer pour enregistrer vos modifications.
La disposition de navigation de votre application devrait maintenant ressembler à ceci:
4. Ajout d’un code personnalisé
Maintenant que l’interface utilisateur de notre application est prête, écrivons du code JavaScript pour effectuer la conversion réelle des kilogrammes en livres.
Sur la gauche, cliquez sur Code pour ouvrir l’éditeur de code. Cela révélera la structure du projet hybride. Vous verrez qu’il existe un répertoire pour chaque vue que nous avons créée, contenant des fichiers nommés view.html et index.js. Tandis que view.html contient le code HTML qui définit la disposition de la vue, index.js contient le code JavaScript qui peut gérer divers événements de l’interface utilisateur.
Ouvrez le Convertisseur vue index.js fichier. Vous remarquerez qu’AppBuilder a déjà créé un kendo.observable objet appelé convertisseurModèle pour gérer le formulaire que nous avons créé. Il a un fields attribut contenant les noms des éléments de formulaire que nous avons créés. Il a également un submit fonction qui est appelée lorsque l’utilisateur appuie sur la Confirmer bouton. Comme vous l’avez peut-être deviné, tout notre code devrait être ajouté au submit fonction.
Le code pour effectuer la conversion des kilogrammes en livres est presque trivial. Tout ce que vous avez à faire est d’obtenir la valeur de fields.kgs, multipliez-le par 2,2046 et mettez à jour la valeur de fields.result. Pour obtenir et définir les attributs de converterModel, vous devrez utiliser son get et set méthodes. Ajoutez le code suivant au index.js fichier:
// START_CUSTOM_CODE_converterModel
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes
var model = app.converter.converterModel;
model.set("submit", function() {
var lbs = model.get("fields.kgs") * 2.2046; // get fields.kgs and multiply with 2.2046
model.set("fields.result", lbs + " lbs"); // set fields.result
});
// END_CUSTOM_CODE_converterModel
Notez que vous devez écrire votre code personnalisé entre les START_CUSTOM_CODE et END_CUSTOM_CODE commentaires. Sinon, votre code sera perdu lorsque vous apporterez d’autres modifications à vos vues à l’aide du service Views.
5. Utilisation des simulateurs de périphérique
Notre application est prête. Pour le tester, nous pouvons utiliser l’un des nombreux simulateurs d’appareil inclus dans AppBuilder. Pour l’instant, lancez le simulateur iPhone en appuyant sur Contrôle + F6. Une fois l’application lancée, vérifiez si la logique de conversion fonctionne en tapant un nombre dans le premier champ de texte et en appuyant sur le bouton Confirmer bouton.
Vous pouvez modifier l’orientation du simulateur de périphérique pour voir à quoi il ressemble en mode paysage. Pour ce faire, cliquez sur l’un des Tourner boutons en haut.
AppBuilder vous permet également de tester votre application sur différentes versions d’iOS. Vous pouvez modifier la version du système d’exploitation en cliquant sur le bouton Version déroulant en haut.
Maintenant que vous avez vu à quoi ressemble l’application et se comporte sur un iPhone, exécutons-la sur un autre simulateur d’appareil. Cliquez sur le menu déroulant contenant la liste des appareils et choisissez Téléphone Android.
Vous remarquerez que l’application fonctionne également très bien sur le simulateur Android. Cependant, cela ne ressemble pas tout à fait à une application Android. C’est parce que notre application utilise actuellement un skin appelé appartement. Pour lui donner un aspect et une sensation de conception matérielle, ouvrez app.js et changer la valeur de skin à Matériel.
L’application devrait maintenant ressembler à ceci:
6. Utilisation de l’application compagnon d’AppBuilder
Les simulateurs d’appareils sont très utiles lors du développement. Cependant, il est toujours judicieux de déterminer les performances de l’application sur un vrai téléphone ou une tablette. En utilisant AppBuilder application compagnon, exécuter l’application sur votre appareil est aussi simple que de l’exécuter dans le simulateur.
Après avoir installé l’application compagnon sur un appareil physique, ouvrez l’éditeur de code et appuyez sur Contrôle + B pour démarrer le processus de construction. Il vous sera demandé de sélectionner la plate-forme sur laquelle vous souhaitez exécuter l’application. Assurez-vous que la plate-forme que vous choisissez correspond à celle de l’appareil sur lequel vous avez installé l’application compagnon. Ensuite, sélectionnez le Application compagnon AppBuilder option et appuyez sur la Prochain bouton.
Lorsque la construction se termine avec succès, vous devriez voir l’écran suivant:
Vous pouvez maintenant ouvrir l’application compagnon AppBuilder sur votre appareil et scanner le code QR pour exécuter votre application.
7. Utilisation de la CLI d’AppBuilder
Si vous préférez travailler localement à partir de la ligne de commande, vous pouvez utiliser l’interface de ligne de commande (CLI) d’AppBuilder, qui peut faire presque tout ce que le client intégré au navigateur peut faire. Étant donné que la CLI est un package Node.js, vous pouvez facilement l’installer à l’aide de npm (Node Package Manager).
sudo npm install -g appbuilder
La plupart des fonctionnalités incluses dans la CLI ne sont accessibles qu’après vous être connecté à votre compte Telerik. Par conséquent, utilisez la commande suivante pour vous connecter avant de faire autre chose:
appbuilder login
Une fois connecté, vous pouvez utiliser le -h option pour voir ce que appbuilder la commande peut faire pour vous.
appbuilder -h
Pour vous aider à démarrer, voici comment télécharger tout le code de l’application que nous avons créée dans le client intégré au navigateur:
appbuilder cloud export "My First App"
Conclusion
Dans ce didacticiel, vous avez appris à utiliser Telerik AppBuilder pour créer une application hybride simple. Vous avez également appris à utiliser l’application compagnon d’AppBuilder et les simulateurs d’appareils pour tester l’application. Même si nous nous sommes concentrés sur le client intégré au navigateur aujourd’hui, pour les développeurs qui préfèrent utiliser un IDE conventionnel, AppBuilder propose également un Client Windows et un Extension Visual Studio.
Commencez un essai gratuit aujourd’hui. Pour en savoir plus sur AppBuilder, vous pouvez consulter son documentation complète.
