1. Livres et vidéos
  2. Ionic - Développez des applications mobiles multiplateformes avec Cordova et AngularJS

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

  • Accès illimité 24h/24, 7J/7
  • Tous les livres en ligne, les vidéos et les cours enregistrés ENI
  • Plus de 10 nouveautés livres et vidéos chaque mois
  • Les nouveautés disponibles le jour de leur sortie
  • Accès 100% en ligne
  • En stock
  • Expédié en 24h00
  • Livraison à partir de 0,01 €
  • Version en ligne offerte pendant 1 an
  • 1 h d'accès gratuit à tous nos livres et vidéos pour chaque commande
  • Accessible immédiatement
  • Version HTML
  • Accès illimité 24h/24, 7J/7

Présentation

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.

Table des matières

  • 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 ?
      • 2.1 Avantages du développement multiplateforme
      • 2.2 Types de technologies
        • 2.2.1 webview
        • 2.2.2 Métalangages
        • 2.2.3 OpenGL ES
        • 2.2.4 Hybride
    • 3. Différences fondamentales entre développement natif et multiplateforme
  • Architecture multiplateforme
    • 1. Architecture multiplateforme webview
      • 1.1 Principe de base
      • 1.2 Navigateur web intégré
      • 1.3 Système de plugins
      • 1.4 Packaging
    • 2. Ionic et le choix d’AngularJS
    • 3. Architecture AngularJS
      • 3.1 AngularJS et MVC
      • 3.2 Application AngularJS
  • Découverte de Cordova
    • 1. Présentation de Cordova
    • 2. Installation de Cordova
      • 2.1 Installation de NodeJS
      • 2.2 Installation de GIT
      • 2.3 Installation de Cordova
    • 3. Commandes usuelles
      • 3.1 Créer un projet
      • 3.2 Ajouter une plateforme
      • 3.3 Démarrer le serveur web
      • 3.4 Démarrer l'application sur une plateforme native
      • 3.5 Nettoyer le projet
    • 4. Déployer sur Android
      • 4.1 Installation de Java
        • 4.1.1 Mise à jour des variables d'environnement Windows
        • 4.1.2 Mise à jour des variables d'environnement Linux et OSX
      • 4.2 Installation du SDK Android
        • 4.2.1 Mise à jour des variables d'environnement Windows
        • 4.2.2 Mise à jour des variables d'environnement Linux et OSX
        • 4.2.3 Installation des packages Android
      • 4.3 Ajout d'un émulateur
      • 4.4 Ajout de la plateforme
      • 4.5 Lancement de l'application
    • 5. Déployer sur iOS
      • 5.1 Installation de Xcode
      • 5.2 Ajout de la plateforme
      • 5.3 Ouverture du projet dans Xcode
      • 5.4 Création des certificats
      • 5.5 Compilation de l'application
      • 5.6 Lancement de l'application
    • 6. Déployer sur Windows
      • 6.1 Installation de Visual Studio
      • 6.2 Ajout de la plateforme
      • 6.3 Lancement de l'application depuis la ligne de commande
        • 6.3.1 Lancement d'une application de bureau
        • 6.3.2 Lancement d'une application smartphone
      • 6.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
      • 2.1 Onsen
      • 2.2 Intel XDK
      • 2.3 Mobile Angular UI
      • 2.4 TouchstoneJS
      • 2.5 Frameworks commerciaux
      • 2.6 Frameworks n'utilisant pas Cordova
      • 2.7 Ionic, le choix du roi ?
    • 3. Installation de Ionic
      • 3.1 Prérequis
      • 3.2 Installation de la ligne de commande
    • 4. Apports de Ionic à Cordova
      • 4.1 Création du projet
      • 4.2 Exécution de l'application sur un serveur web
      • 4.3 Rechargement en temps réel : le livereload
      • 4.4 Gestion des plugins
      • 4.5 Gestion de la configuration
        • 4.5.1 Sauvegarde de la configuration
        • 4.5.2 Restauration de la configuration
        • 4.5.3 Remise à zéro de la configuration
      • 4.6 Ionic Cloud
      • 4.7 Commandes diverses
  • Mise en place de l’application
    • 1. Initialisation du projet
      • 1.1 Création de l'application
      • 1.2 Arborescence du projet
        • 1.2.1 Répertoire hooks
        • 1.2.2 Répertoire platform
        • 1.2.3 Répertoire plugins
        • 1.2.4 Répertoire resources
        • 1.2.5 Répertoire SCSS
        • 1.2.6 Répertoire www
        • 1.2.7 Fichiers divers
      • 1.3 Environnement de développement
    • 2. Découverte du projet par défaut
      • 2.1 Fichier index.html
        • 2.1.1 Section Head
        • 2.1.2 Section Body
      • 2.2 Fichier app.js
    • 3. Création du premier couple contrôleur/service
      • 3.1 Création du contrôleur
      • 3.2 Création du service
      • 3.3 Injection de dépendances
      • 3.4 Affichage d'une liste
    • 4. Vues
      • 4.1 Installation de ui-router
      • 4.2 Création d'une vue
      • 4.3 Injection de la vue dans la page principale
    • 5. Routes
      • 5.1 Création d'une route
      • 5.2 Choix d'une route par défaut
      • 5.3 Navigation entre les routes
        • 5.3.1 Création d'une deuxième route
        • 5.3.2 Récupération de paramètres dans le contrôleur
        • 5.3.3 Redirection avec un lien HTML
        • 5.3.4 Redirection avec la directive ui-sref
        • 5.3.5 Redirection depuis le contrôleur
  • Habiller l'application
    • 1. Aperçu des composants CSS
      • 1.1 Header
        • 1.1.1 Ajout d'un header
        • 1.1.2 Utilisation de la directive ion-header-bar
        • 1.1.3 Choix de la couleur
        • 1.1.4 Ajouter des boutons
        • 1.1.5 Sous-header
      • 1.2 Footer
      • 1.3 Boutons
        • 1.3.1 Utilisation d'un bouton
        • 1.3.2 Taille des boutons
        • 1.3.3 Largeur des boutons
        • 1.3.4 Liens et boutons détourés
        • 1.3.5 Groupe de boutons
        • 1.3.6 Icônes
      • 1.4 Listes
        • 1.4.1 Liste simple
        • 1.4.2 Séparateur
        • 1.4.3 Icônes
        • 1.4.4 Boutons
        • 1.4.5 Images
      • 1.5 Carte
        • 1.5.1 Déclaration d'une carte
        • 1.5.2 Titre et séparateur
        • 1.5.3 Image
        • 1.5.4 Contenu
        • 1.5.5 Liste
      • 1.6 Formulaires
        • 1.6.1 Formulaire simple
        • 1.6.2 Champs de saisie
        • 1.6.3 Mise en forme
        • 1.6.4 Combinaison de champs
        • 1.6.5 Saisie HTML5
        • 1.6.6 Case à cocher
        • 1.6.7 Switch
        • 1.6.8 Boutons radio
        • 1.6.9 Liste déroulante
        • 1.6.10 Slider
    • 2. Grille et responsive design
      • 2.1 Grille simple
      • 2.2 Taille de colonne imposée
      • 2.3 Espacement entre colonnes
      • 2.4 Alignement vertical
      • 2.5 Grille responsive
    • 3. Aperçu des composants JS
      • 3.1 Vue principale et scroll
      • 3.2 Animation de chargement
      • 3.3 Animation de chargement et blocage des actions utilisateur
      • 3.4 Rafraîchissement de l'écran
      • 3.5 Modale
      • 3.6 Pop-up
        • 3.6.1 Alerte
        • 3.6.2 Saisie utilisateur
      • 3.7 Listes
        • 3.7.1 Options
        • 3.7.2 Bouton de suppression
        • 3.7.3 Ordonner la liste
      • 3.8 Clavier
      • 3.9 Carrousel
      • 3.10 Zone de défilement
    • 4. Navigation
      • 4.1 Vues
      • 4.2 Menu latéral
      • 4.3 Onglets
    • 5. Configuration générale
      • 5.1 Cache
      • 5.2 Navigation
        • 5.2.1 Barre de navigation
      • 5.3 Formulaires
      • 5.4 Onglets
      • 5.5 Vues
    • 6. Gestes
      • 6.1 Directives gestuelles
      • 6.2 Service gestuel
  • Communiquer avec un serveur
    • 1. Présentation de l'architecture REST
      • 1.1 Protocole HTTP
      • 1.2 Architecture REST
    • 2. Création d'un service de communication HTTP
      • 2.1 Service $http
      • 2.2 Traitement du retour
    • 3. Promesses et appels asynchrones
      • 3.1 Appels asynchrones et callback
      • 3.2 Promesses
        • 3.2.1 Création d’une promesse
        • 3.2.2 Retour de résultat
        • 3.2.3 Utilisation du retour
        • 3.2.4 Avantage des promesses
    • 4. Échanges avec l'API OMDb
      • 4.1 OMDb API
        • 4.1.1 Recherche d’une liste de films
        • 4.1.2 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
      • 2.1 Présentation du principe des modules
      • 2.2 Application de l'architecture modulaire
        • 2.2.1 Module starter
        • 2.2.2 Création du module films
    • 3. Directives
      • 3.1 Concept
      • 3.2 Création d’une directive
        • 3.2.1 Types de directives
        • 3.2.2 Passage de paramètres
        • 3.2.3 Renvoi d’un template
        • 3.2.4 Contrôleur interne
        • 3.2.5 Manipulation de l’élément parent
      • 3.3 Mise en application : la directive film
        • 3.3.1 Création de la directive
        • 3.3.2 Implémentation du contrôleur
        • 3.3.3 Adaptation du template
        • 3.3.4 Injection de la directive
        • 3.3.5 Spécialisation de la directive
    • 4. Filtres
      • 4.1 Filtre simple
        • 4.1.1 Utilisation de filtres
        • 4.1.2 Mise en place d’un filtre
      • 4.2 Filtre personnalisé
        • 4.2.1 Déclarer un filtre
        • 4.2.2 Implémenter un filtre
        • 4.2.3 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
      • 2.1 Marqueurs de la plateforme
        • 2.1.1 Spécifications de la plateforme dans la vue
        • 2.1.2 Spécifications de la plateforme dans le code JS
        • 2.1.3 Routage en fonction de la plateforme
        • 2.1.4 Autres fonctionnalités de la classe platform
      • 2.2 Événements système
    • 3. Adaptations pour Android
      • 3.1 Rappel des adaptations natives
      • 3.2 Bouton retour
    • 4. Adaptations pour iOS
    • 5. Fichier config.xml
      • 5.1 Structure du fichier config.xml
      • 5.2 Informations sur l’application
      • 5.3 Page de démarrage
      • 5.4 Restriction des requêtes multidomaines
      • 5.5 Préférences générales
      • 5.6 Plateformes
      • 5.7 Plugins
  • Plugins
    • 1. Tirer parti des capacités des smartphones
    • 2. Fonctionnement du système de plugins
      • 2.1 Rappels sur l’architecture des plugins
      • 2.2 Rechercher un plugin
      • 2.3 Installer un plugin
      • 2.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
      • 2.1 Généralités
        • 2.1.1 Appels asynchrones et promesses
        • 2.1.2 Librairies
        • 2.1.3 Animations
        • 2.1.4 Manipulation du DOM
        • 2.1.5 Taille et poids des images
        • 2.1.6 Privilégier les maps
        • 2.1.7 Minification JS et CSS
        • 2.1.8 Les outils de diagnostic
      • 2.2 AngularJS
        • 2.2.1 Binding unique
        • 2.2.2 Identifiant d’itération
        • 2.2.3 ng-if vs ng-show
        • 2.2.4 Enchaînement de filtres
        • 2.2.5 Mode débogage
        • 2.2.6 Pour aller plus loin
      • 2.3 Ionic
        • 2.3.1 Scroll natif
        • 2.3.2 Collection repeat
        • 2.3.3 Infinite scroll
        • 2.3.4 Cache
        • 2.3.5 Manipulation du DOM pendant les transitions
        • 2.3.6 Crosswalk
  • Publier son application
    • 1. Préparer son application
      • 1.1 Préparation logicielle
      • 1.2 Génération des icônes
      • 1.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
      • 2.1 Ionic Cloud
      • 2.2 Ionic Creator
      • 2.3 Ionic View
    • 3. Ionic 2
      • 3.1 Différences avec Ionic 1
      • 3.2 Essayer Ionic 2
        • 3.2.1 Création du projet
        • 3.2.2 Analyse du projet
        • 3.2.3 Mettre en place les premiers composants
        • 3.2.4 Ajouter une deuxième page
        • 3.2.5 Documentation et tutoriels
      • Index

Auteur

Cédric MILLAURIAUXEn savoir plus

Après avoir débuté en SSII en tant que développeur puis architecte, Cédric Millauriaux s'est tourné vers les technologies web et mobiles. Il est cofondateur de la société IcySoft spécialisée dans la conception et la réalisation d'applications mobiles et il accompagne ses clients au quotidien dans leur transition vers la mobilité. La formation et le transfert de compétences sont des activités qui lui tiennent à cœur et son livre et ses vidéos sont l'occasion pour lui de transmettre ses connaissances et sa passion du développement.

Caractéristiques

  • Niveau Confirmé à Expert
  • Nombre de pages 446 pages
  • Parution mars 2017
    • Livre (broché) - 17 x 21 cm
    • ISBN : 978-2-409-00633-3
    • EAN : 9782409006333
    • Ref. ENI : EPION
  • Niveau Expert
  • Parution mars 2017
    • HTML
    • ISBN : 978-2-409-00774-3
    • EAN : 9782409007743
    • Ref. ENI : LNEPION

Téléchargements

En complétant ce formulaire, vous acceptez d'être contacté afin de recevoir des informations sur nos produits et services ainsi que nos communications marketing. Vous aurez la possibilité de vous désabonner de nos communications à tout moment. Pour plus d'informations sur notre politique de protection des données, cliquez ici.
  • Des fichiers complémentaires (33,1 Mo)