Premiers pas avec Telerik AppBuilder

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.

Créer une application

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.

Types d'applications

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.

Créer un formulaire d'application

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.

Changer le type de vue

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.

En relation :  Comment jouer à vos jeux NES, SNES et autres jeux rétro préférés sur votre PC avec un émulateur
À propos des champs d'affichage

Une fois que vous cliquez sur le Appliquer bouton, vous pourrez voir la vue que vous venez de créer.

À propos de l'aperçu

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.

Champs 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:

Aperçu du convertisseur

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.

Écran de gestion de la navigation

La disposition de navigation de votre application devrait maintenant ressembler à ceci:

La navigation

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.

Structure du projet

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:

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.

En relation :  La meilleure application de retouche photo pour Android

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.

Application exécutée dans le simulateur iPhone

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.

Simulateurs d'appareils disponibles

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:

Matériau de la peau

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.

Écran de sélection de plate-forme

Lorsque la construction se termine avec succès, vous devriez voir l’écran suivant:

Créer un écran réussi

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).

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:

Une fois connecté, vous pouvez utiliser le -h option pour voir ce que appbuilder la commande peut faire pour vous.

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:

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.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.