Ce livre s'adresse aux développeurs web qui souhaitent mettre à profit leurs connaissances pour développer des applications mobiles à l'aide de Ionic, une technologie tirant parti de Cordova et d'AngularJS, pour créer des applications Android, iOS et Windows Phone.

L'auteur propose un premier tour d'horizon des technologies de développement multiplateformes (leur architecture, leur relation avec le système natif, leurs forces et leurs faiblesses), avant de plonger dans la manipulation des différents outils qui permettent de construire rapidement et simplement une première application mobile.

L'ensemble des composants CSS et JavaScript seront passés en revue avant de poser les bases d'une architecture modulaire et de s’intéresser aux bonnes pratiques qui permettent de développer une application performante, à l'ergonomie adaptée à la manipulation sur mobile. Afin d'étendre les possibilités de l'application, des plugins seront présentés, permettant de localiser l'utilisateur à l’aide du GPS, de prendre des photos ou encore d'envoyer des notifications push.

Le lecteur apprendra également à manipuler des composants complexes comme un système d'onglets, des éléments responsive destinés à adapter l’affichage sur tablette et à capturer les gestes de l’utilisateur pour dévoiler de nouvelles options dans l’application.

Un projet de développement est lancé dès le début du livre. Il est enrichi au fur et à mesure des chapitres et propose au lecteur un apprentissage de Ionic par la pratique. A la fin du livre, le lecteur aura donc développé une application qui communique avec une API REST disponible sur Internet pour rechercher des films et afficher leurs caractéristiques. L’application finale est entièrement fonctionnelle, tire pleinement parti de Ionic et Cordova et est prête à être déployée sur les stores.

Pour mesurer le potentiel de ce livre, nous vous invitons à télécharger l’application « Livre Ionic aux Editions ENI » sur App Store ou Google Play. Cette application est la compilation de tous les exemples et toutes les notions que vous allez mettre en pratique dans le livre.


Les chapitres du livre :
Avant-propos – Applications mobiles multiplateformes – Architecture multiplateforme – Découverte de Cordova – Découverte de Ionic – Mise en place de l'application – Habiller l'application – Communiquer avec un serveur – Développement générique – S'adapter à la plateforme – Plugins – Ionic et performances – Publier son application – Pour aller plus loin



Retrouvez le webinaire consacré à Ionic.

Apprenez-en plus sur les performances d'une application Ionic, une technologie tirant parti de Cordova et d'AngularJS, pour créer des applications Android, iOS et Windows Phone.

Téléchargements

• Des fichiers complémentaires (33,1 Mo)

Avant-propos

1. Le marché des applications mobiles
2. Pourquoi développer une application mobile aujourd’hui ?
3. À qui s’adresse cet ouvrage ?
4. Approche de cet ouvrage
5. Le projet fil rouge
6. Remerciements

Applications mobiles multiplateformes

1. Qu’est-ce qu’une application mobile multiplateforme ?
2. Pourquoi utiliser une technologie multiplateforme ?
   1. 1. Avantages du développement multiplateforme
   2. 2. Types de technologies
      1. a. webview
      2. b. Métalangages
      3. c. OpenGL ES
      4. d. Hybride
3. Différences fondamentales entre développement natif et multiplateforme

Architecture multiplateforme

1. Architecture multiplateforme webview
   1. 1. Principe de base
   2. 2. Navigateur web intégré
   3. 3. Système de plugins
   4. 4. Packaging
2. Ionic et le choix d’AngularJS
3. Architecture AngularJS
   1. 1. AngularJS et MVC
   2. 2. Application AngularJS

Découverte de Cordova

1. Présentation de Cordova
2. Installation de Cordova
   1. 1. Installation de NodeJS
   2. 2. Installation de GIT
   3. 3. Installation de Cordova
3. Commandes usuelles
   1. 1. Créer un projet
   2. 2. Ajouter une plateforme
   3. 3. Démarrer le serveur web
   4. 4. Démarrer l’application sur une plateformenative
   5. 5. Nettoyer le projet
4. Déployer sur Android
   1. 1. Installation de Java
      1. a. Mise à jour des variables d’environnementWindows
      2. b. Mise à jour des variables d’environnementLinux et OSX
   2. 2. Installation du SDK Android
      1. a. Mise à jour des variables d’environnementWindows
      2. b. Mise à jour des variables d’environnementLinux et OSX
      3. c. Installation des packages Android
   3. 3. Ajout d’un émulateur
   4. 4. Ajout de la plateforme
   5. 5. Lancement de l’application
5. Déployer sur iOS
   1. 1. Installation de Xcode
   2. 2. Ajout de la plateforme
   3. 3. Ouverture du projet dans Xcode
   4. 4. Création des certificats
   5. 5. Compilation de l’application
   6. 6. Lancement de l’application
6. Déployer sur Windows
   1. 1. Installation de Visual Studio
   2. 2. Ajout de la plateforme
   3. 3. Lancement de l’application depuis la ligne de commande
      1. a. Lancement d’une application de bureau
      2. b. Lancement d’une application smartphone
   4. 4. Lancement de l’application depuis Visual Studio

Découverte de Ionic

1. Présentation de Ionic
2. Comparaison de Ionic et de ses challengers
   1. 1. Onsen
   2. 2. Intel XDK
   3. 3. Mobile Angular UI
   4. 4. TouchstoneJS
   5. 5. Frameworks commerciaux
   6. 6. Frameworks n’utilisant pas Cordova
   7. 7. Ionic, le choix du roi ?
3. Installation de Ionic
   1. 1. Prérequis
   2. 2. Installation de la ligne de commande
4. Apports de Ionic à Cordova
   1. 1. Création du projet
   2. 2. Exécution de l’application sur un serveurweb
   3. 3. Rechargement en temps réel : lelivereload
   4. 4. Gestion des plugins
   5. 5. Gestion de la configuration
      1. a. Sauvegarde de la configuration
      2. b. Restauration de la configuration
      3. c. Remise à zéro de la configuration
   6. 6. Ionic Cloud
   7. 7. Commandes diverses

Mise en place de l’application

1. Initialisation du projet
   1. 1. Création de l’application
   2. 2. Arborescence du projet
      1. a. Répertoire hooks
      2. b. Répertoire platform
      3. c. Répertoire plugins
      4. d. Répertoire resources
      5. e. Répertoire SCSS
      6. f. Répertoire www
      7. g. Fichiers divers
   3. 3. Environnement de développement
2. Découverte du projet par défaut
   1. 1. Fichier index.html
      1. a. Section Head
      2. b. Section Body
   2. 2. Fichier app.js
3. Création du premier couple contrôleur/service
   1. 1. Création du contrôleur
   2. 2. Création du service
   3. 3. Injection de dépendances
   4. 4. Affichage d’une liste
4. Vues
   1. 1. Installation de ui-router
   2. 2. Création d’une vue
   3. 3. Injection de la vue dans la page principale
5. Routes
   1. 1. Création d’une route
   2. 2. Choix d’une route par défaut
   3. 3. Navigation entre les routes
      1. a. Création d’une deuxième route
      2. b. Récupération de paramètresdans le contrôleur
      3. c. Redirection avec un lien HTML
      4. d. Redirection avec la directive ui-sref
      5. e. Redirection depuis le contrôleur

Habiller l'application

1. Aperçu des composants CSS
   1. 1. Header
      1. a. Ajout d’un header
      2. b. Utilisation de la directive ion-header-bar
      3. c. Choix de la couleur
      4. d. Ajouter des boutons
      5. e. Sous-header
   2. 2. Footer
   3. 3. Boutons
      1. a. Utilisation d’un bouton
      2. b. Taille des boutons
      3. c. Largeur des boutons
      4. d. Liens et boutons détourés
      5. e. Groupe de boutons
      6. f. Icônes
   4. 4. Listes
      1. a. Liste simple
      2. b. Séparateur
      3. c. Icônes
      4. d. Boutons
      5. e. Images
   5. 5. Carte
      1. a. Déclaration d’une carte
      2. b. Titre et séparateur
      3. c. Image
      4. d. Contenu
      5. e. Liste
   6. 6. Formulaires
      1. a. Formulaire simple
      2. b. Champs de saisie
      3. c. Mise en forme
      4. d. Combinaison de champs
      5. e. Saisie HTML5
      6. f. Case à cocher
      7. g. Switch
      8. h. Boutons radio
      9. i. Liste déroulante
      10. j. Slider
2. Grille et responsive design
   1. 1. Grille simple
   2. 2. Taille de colonne imposée
   3. 3. Espacement entre colonnes
   4. 4. Alignement vertical
   5. 5. Grille responsive
3. Aperçu des composants JS
   1. 1. Vue principale et scroll
   2. 2. Animation de chargement
   3. 3. Animation de chargement et blocage des actions utilisateur
   4. 4. Rafraîchissement de l’écran
   5. 5. Modale
   6. 6. Pop-up
      1. a. Alerte
      2. b. Saisie utilisateur
   7. 7. Listes
      1. a. Options
      2. b. Bouton de suppression
      3. c. Ordonner la liste
   8. 8. Clavier
   9. 9. Carrousel
   10. 10. Zone de défilement
4. Navigation
   1. 1. Vues
   2. 2. Menu latéral
   3. 3. Onglets
5. Configuration générale
   1. 1. Cache
   2. 2. Navigation
      1. a. Barre de navigation
   3. 3. Formulaires
   4. 4. Onglets
   5. 5. Vues
6. Gestes
   1. 1. Directives gestuelles
   2. 2. Service gestuel

Communiquer avec un serveur

1. Présentation de l'architecture REST
   1. 1. Protocole HTTP
   2. 2. Architecture REST
2. Création d'un service de communication HTTP
   1. 1. Service $http
   2. 2. Traitement du retour
3. Promesses et appels asynchrones
   1. 1. Appels asynchrones et callback
   2. 2. Promesses
      1. a. Création d’une promesse
      2. b. Retour de résultat
      3. c. Utilisation du retour
      4. d. Avantage des promesses
4. Échanges avec l'API OMDb
   1. 1. OMDb API
      1. a. Recherche d’une liste de films
      2. b. Détails d’un film
5. Utilisation du scroll infini

Développement générique

1. Pourquoi développer des composants génériques
2. Modules
   1. 1. Présentation du principe des modules
   2. 2. Application de l’architecture modulaire
      1. a. Module starter
      2. b. Création du module films
3. Directives
   1. 1. Concept
   2. 2. Création d’une directive
      1. a. Types de directives
      2. b. Passage de paramètres
      3. c. Renvoi d’un template
      4. d. Contrôleur interne
      5. e. Manipulation de l’élémentparent
   3. 3. Mise en application : la directive film
      1. a. Création de la directive
      2. b. Implémentation du contrôleur
      3. c. Adaptation du template
      4. d. Injection de la directive
      5. e. Spécialisation de la directive
4. Filtres
   1. 1. Filtre simple
      1. a. Utilisation de filtres
      2. b. Mise en place d’un filtre
   2. 2. Filtre personnalisé
      1. a. Déclarer un filtre
      2. b. Implémenter un filtre
      3. c. Implémenter un tri
5. Fichier de configuration et constantes

S’adapter à la plateforme

1. Pourquoi décliner l’interface pour une plateforme ?
2. Ionic et l’adaptation à la plateforme
   1. 1. Marqueurs de la plateforme
      1. a. Spécifications de la plateforme dans la vue
      2. b. Spécifications de la plateforme dans le codeJS
      3. c. Routage en fonction de la plateforme
      4. d. Autres fonctionnalités de la classe platform
   2. 2. Événements système
3. Adaptations pour Android
   1. 1. Rappel des adaptations natives
   2. 2. Bouton retour
4. Adaptations pour iOS
5. Fichier config.xml
   1. 1. Structure du fichier config.xml
   2. 2. Informations sur l’application
   3. 3. Page de démarrage
   4. 4. Restriction des requêtes multidomaines
   5. 5. Préférences générales
   6. 6. Plateformes
   7. 7. Plugins

Plugins

1. Tirer parti des capacités des smartphones
2. Fonctionnement du système de plugins
   1. 1. Rappels sur l’architecture des plugins
   2. 2. Rechercher un plugin
   3. 3. Installer un plugin
   4. 4. Désinstaller un plugin
3. Social : partager sur les réseaux sociaux
4. Camera : prendre des photos
5. Geolocation : géolocaliser l’utilisateur
6. LocalStorage : stocker des données
7. NgCordova : utiliser les plugins à la manière d’AngularJS

Ionic et performances

1. Performances de Ionic et AngularJS sur mobile
2. Conseils pratiques pour optimiser les performances
   1. 1. Généralités
      1. a. Appels asynchrones et promesses
      2. b. Librairies
      3. c. Animations
      4. d. Manipulation du DOM
      5. e. Taille et poids des images
      6. f. Privilégier les maps
      7. g. Minification JS et CSS
      8. h. Les outils de diagnostic
   2. 2. AngularJS
      1. a. Binding unique
      2. b. Identifiant d’itération
      3. c. ng-if vs ng-show
      4. d. Enchaînement de filtres
      5. e. Mode débogage
      6. f. Pour aller plus loin
   3. 3. Ionic
      1. a. Scroll natif
      2. b. Collection repeat
      3. c. Infinite scroll
      4. d. Cache
      5. e. Manipulation du DOM pendant les transitions
      6. f. Crosswalk

Publier son application

1. Préparer son application
   1. 1. Préparation logicielle
   2. 2. Génération des icônes
   3. 3. Génération du splash screen
2. Publication sur Google Play Store
3. Publication sur Itunes
4. Mettre à jour l’application

Pour aller plus loin

1. Enrichir l’application
2. Ionic.io
   1. 1. Ionic Cloud
   2. 2. Ionic Creator
   3. 3. Ionic View
3. Ionic 2
   1. 1. Différences avec Ionic 1
   2. 2. Essayer Ionic 2
      1. a. Création du projet
      2. b. Analyse du projet
      3. c. Mettre en place les premiers composants
      4. d. Ajouter une deuxième page
      5. e. Documentation et tutoriels