Tutoriel Vue.js: savoir développer des applications mobiles avec NativeScript
L'objectif de cette série d'exercices est d'apprendre à développer une application mobile avec le framework Vue.js et en utilisant une approche hybride via le framework NativeScript.
NativeScript est une solution opensource qui existe depuis 2015 et qui permet de développer une application mobile sous Android et iOS en utilisant le langage JavaScript ou tout langage qui se transpile à JavaScript, comme TypeScript. NativeScript gère aussi les frameworks web orientés composants comme Angular et Vue.js. La version pour Vue.js s'appelle NativeScript-Vue. Les composants graphiques utilisés dans le code HTML de l'application développée sont spécifiques à NativeScript. Il n'est pas possible d'utiliser les composants classiques HTML d'une application web comme <p>, <div>, <form>, etc. En effet, NativeScript va traduire ces composants d'abstraction afin d'invoquer les composants natifs du dispositif mobile. Les applications ainsi développées seront ainsi plus proches des applications natives. Cela permet aussi d'utiliser des composants (dit plugin sous NativeScript) pour accéder aux API natives du téléphone (accéléromètre, géolocalisation, caméra...).
Les exercices proposés dans ce tutoriel se proposent de vous donner les bases du développement d'applications mobiles avec NativeScript, sans entrer dans les détails. Ne vous attendez pas à devenir un expert de NativeScript à la fin, ce n'est pas l'objectif. Je détaille ci-dessous le contenu de chaque exercice :
- préparer son environnement de test via la ligne de commande 💪🏼 ;
- créer et exécuter son premier projet NativeScript ;
- utiliser les API natives d'un dispositif mobile ;
- invoquer et visualiser les données d'un service web.
Buts pédagogiques : configurer son environnement de test, créer un émulateur Android et iOS, créer un projet avec NativeScript-Vue, débogguer son application avec VueDevTools, naviguer entre des composants, communiquer avec les API natives d'un dispositif, invoquer un service web, afficher les données JSON.
Ce dépôt est utilisé dans le cadre d'un cours sur le développement d'applications web que je dispense en français à l'ISAE-ENSMA pour les étudiants en dernière année du cycle d'ingénieur qui suivent l'option informatique. Tous les supports de cours et tutoriaux sont disponibles sur ma page Developpez.com : https://mbaron.developpez.com et sur ma page personnelle : https://mickael-baron.fr/.
Prérequis logiciels
- Éditeur de code Visual Studio Code ;
- Le gestionnaire de paquet npm ;
- SDK Android ou Xcode iOS ;
- Java 8.
L'installation du SDK de Android et iOS sont expliquées dans un exercice spécial : préparer son environnement de test via la ligne de commande 💪🏼. Si vous disposer déjà d'une installation faite avec Android Studio pour Android ou XCode pour iOS, vous pouvez directement passer à l'exerice 1. Assurez-vous toutefois de disposer d'un émulateur fonctionnel avant de commencer les exercices.
Ressources
Retrouver les autres tutoriels :
- Tutoriel sur l'intégration de la bibilothèque Vue.js dans un site web existant ;
- Tutoriel sur le développement d'une application SPA (Single-Page Application) avec Vue.js ;
- Article sur les généralités des frameworks web JavaScript et sur la présentation de Vue.js ;
- Article sur la mise en œuvre des concepts de Vue.js ;
- Article sur le déploiement d'une application web développée avec Vue.js.
Pour aller plus loin, vous pouvez consulter les ressources suivantes :