Share
De nombreux développeurs Web hésitent à développer des applications mobiles, pensant qu'il leur faudrait trop de temps pour se familiariser avec le 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 aussi avec des concepts et des schémas souvent spécifiques à une plate-forme.
Si vous êtes l'un de ces développeurs, envisagez plutôt de créer des applications hybrides, car vous pourrez alors travailler avec des langages avec lesquels vous êtes déjà familiarisé: HTML5, CSS et JavaScript. De plus, vous pouvez utiliser des frameworks populaires tels que Twitter Bootstrap ou jQuery Mobile pour créer vos applications..
Maintenant que j'ai votre attention, passons à Telerik AppBuilder, un environnement de développement puissant basé sur le cloud qui facilite incroyablement la création d'applications hybrides. Dans ce didacticiel, nous allons examiner ce que AppBuilder peut offrir et, ce faisant, créer une application simple et hybride..
L'une des raisons les plus convaincantes pour utiliser AppBuilder est son client intégré au navigateur, un IDE à part entière (environnement de développement intégré) 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 rien installer localement..
Pouvoir développer des applications iOS à l'aide d'ordinateurs sous Windows ou Linux est une autre raison pour laquelle vous souhaitez 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 dispose d'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..
Pour suivre ce didacticiel, vous n'avez besoin que d'un compte Telerik. Si vous n'en avez pas déjà, vous pouvez vous inscrire gratuitement et commencer immédiatement une période d'essai de 30 jours..
Dans ce didacticiel, nous allons principalement travailler avec le client intégré à AppBuilder. Ouvrez un nouvel onglet dans votre navigateur et connectez-vous à la plate-forme Telerik. Une fois que vous êtes 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 à propos de l'application..
Tout d'abord, sélectionnez le type d'application que vous souhaitez créer. Pour l'instant, sélectionnez Cordova Hybrid parce que nous allons créer notre application à l'aide d'Apache Cordova, un framework de développement d'applications hybrides populaire.
Ensuite, donnez un nom et une description à l’application en remplissant le champ Nom de l'application et La description des champs. Je vais utiliser Ma première application comme le nom.
Enfin, cliquez sur le Créer une application bouton pour générer une application hybride entièrement configurée qui utilise le framework Kendo UI par défaut.
Une fois l'application créée, vous serez dirigé vers le Des vues un service. Avec ce service, vous pouvez créer toutes les vues de votre application hybride sans écrire de code HTML..
Dans ce tutoriel, nous allons créer une application très simple qui convertit des kilogrammes en livres. Il aura deux vues:
Créons d'abord le Sur vue. Pour ce faire, sélectionnez le Home View et cliquez Changer le type de vue. Vous allez maintenant être présenté avec plusieurs modèles de vue. Clique le Sur modèle.
Dans l'écran suivant, définissez le Titre à Sur et cliquez sur le Modèle rubrique pour configurer le contenu de la vue. Généralement, un écran «à propos de» contient le nom, la version et la description de l'application. Par conséquent, remplissez ces champs correctement. Le modèle comprend également des boutons sociaux. Nous ne les utiliserons pas aujourd'hui, alors décochez la case Contactez nous, 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 voir en cliquant sur le Ajouter une vue bouton. Vous serez invité à choisir un nouveau modèle. Cette fois, sélectionnez le Forme template, car cette vue aura deux champs de saisie:
Dans l'écran suivant, définissez le Titre champ à Convertisseur et le prénom champ à convertisseur. Pour ajouter les deux champs de saisie, cliquez d'abord sur le bouton Champs de formulaire rubrique puis cliquez sur le Ajouter des champs de formulaire bouton. Il vous sera maintenant demandé de sélectionner le type du champ de formulaire.
Le poids en kilogrammes devant être un nombre, sélectionnez Nombre entré de la liste des options. Nomme le kg et lui donner une étiquette appropriée.
De même, créez un Zone de texte et nommez-le résultat. Assurez-vous de lui donner une étiquette appropriée ainsi.
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, décochez la case Bouton Annuler champ.
Cliquez sur Appliquer enregistrer les modifications. La vue devrait maintenant ressembler à ceci:
Pour permettre aux utilisateurs de naviguer entre les deux vues que nous avons créées, le service Vues a déjà ajouté une présentation de navigation à notre application. Pour le configurer, basculez vers le Plan de navigation section.
Vous verrez que l'application utilise actuellement un Onglet Menu comme la mise en page de navigation. Je vais le laisser ainsi, mais vous êtes libre d'expérimenter les autres options disponibles.
Par défaut, notre application utilise le Sur voir comme la vue initiale. Utiliser Convertisseur comme vue initiale, cliquez sur le bouton Démarrage de l'application rubrique et définir la valeur de Vue initiale à Convertisseur. N'oubliez pas de cliquer Appliquer enregistrer vos modifications.
La disposition de navigation de votre application devrait maintenant ressembler à ceci:
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..
A gauche, cliquez 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 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 pouvant gérer divers événements d'interface utilisateur.
Ouvrez le Convertisseur vue index.js fichier. Vous remarquerez que AppBuilder a déjà créé une kendo.observable objet appelé convertisseurModèle pour gérer le formulaire que nous avons créé. Il a un des champs attribut contenant les noms des éléments de formulaire que nous avons créés. Il a aussi un soumettre fonction appelée lorsque l'utilisateur appuie sur la touche Confirmer bouton. Comme vous avez pu le deviner, tout notre code devrait être ajouté à la soumettre une fonction.
Le code pour convertir les 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 convertisseurModèle, vous devrez utiliser son obtenir et ensemble méthodes. Ajoutez le code suivant au index.js fichier:
"javascript // START_CUSTOM_CODE_converterModel // Ajoutez un code personnalisé ici. Pour plus d'informations sur le code personnalisé, voir 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; // obtient fields.kgs et multiplie par 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 fichiers générés automatiquement. START_CUSTOM_CODE et END_CUSTOM_CODE commentaires. Sinon, votre code sera perdu lorsque vous apportez d'autres modifications à vos vues à l'aide du service Views..
Notre application est prête. Pour le tester, nous pouvons utiliser l'un des nombreux simulateurs de périphériques 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 saisissant un nombre dans le premier champ de texte et en appuyant sur la touche. Confirmer bouton.
Vous pouvez modifier l'orientation du simulateur de périphérique pour voir à quoi il ressemble en mode paysage. Pour cela, cliquez sur l’un des boutons Tourner boutons en haut.
AppBuilder vous permet également de tester votre application sur différentes versions d'iOS. Vous pouvez changer la version du système d'exploitation en cliquant sur le bouton Version menu déroulant en haut.
Maintenant que vous avez vu l’apparence et le comportement de l’application sur un iPhone, exécutons-la sur un simulateur de périphérique différent. Cliquez sur le menu déroulant contenant la liste des périphériques et choisissez Téléphone Android.
Vous remarquerez que l'application fonctionne aussi très bien sur le simulateur Android. Cependant, cela ne ressemble pas vraiment à une application Android. En effet, notre application utilise actuellement un peau appelé appartement. Pour lui donner un aspect matériel, ouvrez app.js et changer la valeur de peau à Matériel.
L'application devrait maintenant ressembler à ceci:
Les simulateurs de périphériques sont très utiles lors du développement. Cependant, il est toujours judicieux de déterminer le fonctionnement de l'application sur un vrai téléphone ou une tablette. En utilisant l'application associée d'AppBuilder, l'exécution de l'application sur votre appareil est aussi simple que de l'exécuter dans le simulateur..
Après avoir installé l’application associée sur un périphérique physique, ouvrez l’éditeur de code et appuyez sur Contrôle + B pour démarrer le processus de construction. Vous serez invité à sélectionner la plate-forme sur laquelle vous souhaitez exécuter l'application. Assurez-vous que la plate-forme que vous choisissez correspond à celle du périphérique sur lequel vous avez installé l'application associée. Ensuite, sélectionnez le App compagnon AppBuilder option et appuyez sur le Suivant bouton.
Lorsque la construction est terminée avec succès, vous devriez voir l'écran suivant:
Vous pouvez maintenant ouvrir l'application compagnon AppBuilder sur votre appareil et numériser le code QR pour exécuter votre application..
Si vous préférez travailler localement à partir de la ligne de commande, vous pouvez utiliser la CLI (Interface de ligne de commande) d'AppBuilder, qui peut faire presque tout ce que le client intégré au navigateur peut faire. La CLI étant un package Node.js, vous pouvez l’installer facilement à l’aide de npm (Node Package Manager)..
bash sudo npm installer -g constructeur de l'application
La plupart des fonctionnalités incluses dans la CLI ne sont accessibles que lorsque vous vous connectez à votre compte Telerik. Par conséquent, utilisez la commande suivante pour vous connecter avant de faire quoi que ce soit:
login de constructeur bash
Une fois connecté, vous pouvez utiliser le -h option pour voir ce que le constructeur commande peut faire pour vous.
bash constructeur
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:
Exportation de cloud bas constructeur d’applicateurs «Ma première application»
Dans ce didacticiel, vous avez appris à utiliser Telerik AppBuilder pour créer une application hybride simple. Vous avez également appris à utiliser l'application d'accompagnement et les simulateurs de périphérique d'AppBuilder pour tester l'application. Même si nous nous sommes concentrés aujourd'hui sur le client intégré au navigateur, pour les développeurs qui préfèrent utiliser un IDE classique, AppBuilder propose également un client Windows autonome et une extension Visual Studio..
Commencez un essai gratuit aujourd'hui. Pour en savoir plus sur AppBuilder, vous pouvez vous reporter à sa documentation complète..
Accentsconagua