Ionic Développez des applications mobiles multiplateformes avec Cordova et AngularJS

Transcription

1 Avant-propos 1. Le marché des applications mobiles Pourquoi développer une application mobile aujourd hui? À qui s adresse cet ouvrage? Approche de cet ouvrage Le projet fil rouge Remerciements 16 Applications mobiles multiplateformes 1. Qu est-ce qu une application mobile multiplateforme? Pourquoi utiliser une technologie multiplateforme? Avantages du développement multiplateforme Types de technologies webview Métalangages OpenGL ES Hybride Différences fondamentales entre développement natif et multiplateforme 26 Architecture multiplateforme 1/13

2 1. Architecture multiplateforme webview Principe de base Navigateur web intégré Système de plugins Packaging Ionic et le choix d AngularJS Architecture AngularJS AngularJS et MVC Application AngularJS 37 Découverte de Cordova 1. Présentation de Cordova Installation de Cordova Installation de NodeJS Installation de GIT Installation de Cordova Commandes usuelles Créer un projet Ajouter une plateforme Démarrer le serveur web Démarrer l'application sur une plateforme native Nettoyer le projet Déployer sur Android Installation de Java Mise à jour des variables d'environnement Windows Mise à jour des variables d'environnement Linux et OSX 50 2/13

3 4.2 Installation du SDK Android Mise à jour des variables d'environnement Windows Mise à jour des variables d'environnement Linux et OSX Installation des packages Android Ajout d'un émulateur Ajout de la plateforme Lancement de l'application Déployer sur ios Installation de Xcode Ajout de la plateforme Ouverture du projet dans Xcode Création des certificats Compilation de l'application Lancement de l'application Déployer sur Windows Installation de Visual Studio Ajout de la plateforme Lancement de l'application depuis la ligne de commande Lancement d'une application de bureau Lancement d'une application smartphone Lancement de l'application depuis Visual Studio 64 Découverte de Ionic 1. Présentation de Ionic Comparaison de Ionic et de ses challengers Onsen Intel XDK Mobile Angular UI TouchstoneJS Frameworks commerciaux 71 3/13

4 2.6 Frameworks n'utilisant pas Cordova Ionic, le choix du roi? Installation de Ionic Prérequis Installation de la ligne de commande Apports de Ionic à Cordova Création du projet Exécution de l'application sur un serveur web Rechargement en temps réel : le livereload Gestion des plugins Gestion de la configuration Sauvegarde de la configuration Restauration de la configuration Remise à zéro de la configuration Ionic Cloud Commandes diverses 79 Mise en place de l application 1. Initialisation du projet Création de l'application Arborescence du projet Répertoire hooks Répertoire platform Répertoire plugins Répertoire resources Répertoire SCSS Répertoire www Fichiers divers Environnement de développement Découverte du projet par défaut 88 4/13

5 2.1 Fichier index.html Section Head Section Body Fichier app.js Création du premier couple contrôleur/service Création du contrôleur Création du service Injection de dépendances Affichage d'une liste Vues Installation de ui-router Création d'une vue Injection de la vue dans la page principale Routes Création d'une route Choix d'une route par défaut Navigation entre les routes Création d'une deuxième route Récupération de paramètres dans le contrôleur Redirection avec un lien HTML Redirection avec la directive ui-sref Redirection depuis le contrôleur 116 Habiller l'application 1. Aperçu des composants CSS Header Ajout d'un header Utilisation de la directive ion-header-bar Choix de la couleur Ajouter des boutons 122 5/13

6 1.1.5 Sous-header Footer Boutons Utilisation d'un bouton Taille des boutons Largeur des boutons Liens et boutons détourés Groupe de boutons Icônes Listes Liste simple Séparateur Icônes Boutons Images Carte Déclaration d'une carte Titre et séparateur Image Contenu Liste Formulaires Formulaire simple Champs de saisie Mise en forme Combinaison de champs Saisie HTML Case à cocher Switch Boutons radio Liste déroulante Slider Grille et responsive design Grille simple Taille de colonne imposée 174 6/13

7 2.3 Espacement entre colonnes Alignement vertical Grille responsive Aperçu des composants JS Vue principale et scroll Animation de chargement Animation de chargement et blocage des actions utilisateur Rafraîchissement de l'écran Modale Pop-up Alerte Saisie utilisateur Listes Options Bouton de suppression Ordonner la liste Clavier Carrousel Zone de défilement Navigation Vues Menu latéral Onglets Configuration générale Cache Navigation Barre de navigation Formulaires Onglets Vues Gestes 248 7/13

8 6.1 Directives gestuelles Service gestuel 252 Communiquer avec un serveur 1. Présentation de l'architecture REST Protocole HTTP Architecture REST Création d'un service de communication HTTP Service $http Traitement du retour Promesses et appels asynchrones Appels asynchrones et callback Promesses Création d une promesse Retour de résultat Utilisation du retour Avantage des promesses Échanges avec l'api OMDb OMDb API Recherche d une liste de films Détails d un film Utilisation du scroll infini 282 Développement générique 1. Pourquoi développer des composants génériques 287 8/13

9 2. Modules Présentation du principe des modules Application de l'architecture modulaire Module starter Création du module films Directives Concept Création d une directive Types de directives Passage de paramètres Renvoi d un template Contrôleur interne Manipulation de l élément parent Mise en application : la directive film Création de la directive Implémentation du contrôleur Adaptation du template Injection de la directive Spécialisation de la directive Filtres Filtre simple Utilisation de filtres Mise en place d un filtre Filtre personnalisé Déclarer un filtre Implémenter un filtre Implémenter un tri Fichier de configuration et constantes 316 S adapter à la plateforme 9/13

10 1. Pourquoi décliner l interface pour une plateforme? Ionic et l adaptation à la plateforme Marqueurs de la plateforme Spécifications de la plateforme dans la vue Spécifications de la plateforme dans le code JS Routage en fonction de la plateforme Autres fonctionnalités de la classe platform Événements système Adaptations pour Android Rappel des adaptations natives Bouton retour Adaptations pour ios Fichier config.xml Structure du fichier config.xml Informations sur l application Page de démarrage Restriction des requêtes multidomaines Préférences générales Plateformes Plugins 339 Plugins 1. Tirer parti des capacités des smartphones Fonctionnement du système de plugins Rappels sur l architecture des plugins Rechercher un plugin /13

11 2.3 Installer un plugin Désinstaller un plugin Social : partager sur les réseaux sociaux Camera : prendre des photos Geolocation : géolocaliser l utilisateur LocalStorage : stocker des données NgCordova : utiliser les plugins à la manière d AngularJS 374 Ionic et performances 1. Performances de Ionic et AngularJS sur mobile Conseils pratiques pour optimiser les performances Généralités Appels asynchrones et promesses Librairies Animations Manipulation du DOM Taille et poids des images Privilégier les maps Minification JS et CSS Les outils de diagnostic AngularJS Binding unique Identifiant d itération ng-if vs ng-show Enchaînement de filtres Mode débogage /13

12 2.2.6 Pour aller plus loin Ionic Scroll natif Collection repeat Infinite scroll Cache Manipulation du DOM pendant les transitions Crosswalk 394 Publier son application 1. Préparer son application Préparation logicielle Génération des icônes Génération du splash screen Publication sur Google Play Store Publication sur Itunes Mettre à jour l application 412 Pour aller plus loin 1. Enrichir l application Ionic.io Ionic Cloud Ionic Creator Ionic View Ionic /13

13 3.1 Différences avec Ionic Essayer Ionic Création du projet Analyse du projet Mettre en place les premiers composants Ajouter une deuxième page Documentation et tutoriels 433 Index /13