IONIC Framework

Contenu

La force de Ionic est de proposer une multitude d’éléments permettant de concevoir l’interface d’une application. Tous les éléments disponibles sont des Web Components «cross-platform», c’est à dire, qui fonctionnent parfaitement sur toutes les plateformes de déploiement comportant un navigateur web (Desktop, IOs, Android, etc)
Ionic est portable. Il peut être utilisé avec d’autres frameworks tels que React ou VuJS mais il peut aussi être intégré avec d’autres autre langages de programmation comme le PHP.
Ionic permet d’accéder aux ressources natifs des appareils sur lesquels l’application sera installée.
L’environnement de développement de IONIC comporte principalement deux outils :
- Stencil, qui est un compilateur de Composantes Web
- Capacitor, qui est un outil qui facilite le développement d’applications web leur permettant de fonctionner nativement sur IOS ou Android, aussi bien que sur le web. On appelle ces applications des Native Progressive Web Applications (PWA).
Il fournit un ensemble d’APIs, centrées sur les standards web, permettant d’accéder aux fonctionnalités natives des plateformes mobiles que les prennent en charge.

Public

- Développeurs Web maîtrisant le JavaScript-TypeScript
- Développeurs d’applications mobiles IOs et Android
- Développeurs sur Angular ou React

Programme

  • Introduction. Outils
    - Les outils Ionic (Ionic CLI, Ionic Devapp, Ionic lab, livereload, Icon & Splash, Ionic Pro)
  • Installation de Ionic
    - Installation de l’environnement de développement
    - Installation de Ionic dans l’ecosystème Angular

    - Capacitor
    - Caractéristiques de Ionic Command Line ($ ionic help)
    - Créer un projet
    - Lancer un projet dans le navigateur d’un serveur local
    - Structure d’une application Angular avec Ionic
  • Présentation des composants Ionic/Stencil
    -  UI Component overview
    - Documentation des composants, ionic icons
    - UI scaffolding: Layout des pages
    - Navigation
    - Gestures
    - Ionic DevApp
  • Démarrer un nouveau projet
    - Navigation et routing
    - Composants
  • Services, Promesses et Gestion des Données
    - Composants
    - Usage du service HttpClient
    -  Actualiser les Données
    - Stratégies de mise en cache
    - Authentification
  • Capacitor
    - Introduction aux plugins
    - Fonctionnement d’un plugin
    - Installation et Configuration pour Angular
    - Utilisation du plugin Camera
    - Test sur telephone avec Ionic DevApp.
  • Customisation avec Sass
    - Concept de pré-processseur
    - Configurer Ionic Sass
    - Statut Ionic + Material Design
  • Workflow d’un projet
    - Builder sur le téléphone
    - Statut des WebViews aujourd’hui
  • Paramétrer un projet Angular-Ionic pour exécuter des test unitaires
    - Installation des dépendances Karma et Jasmin
    - Création du fichier de configuration de Karma
    - Création du fichier de démarrage de test
    - Création du fichier de configuration Webpack (webpack.test.js) pour un environnement «Test»
    - Mise à jour du fichier de configuration tsconfig.json
  • « Separation of concerns »

Prochaines dates

du 02.12.2019 au 06.12.2019

Écolage

CHF 1200.-