FULL STACK

FULL STACK MOBILE HYBRIDE

  

Profil Intervenant(s)
100x100

Docteur en Informatique - Consultant formateur
10 ans d'Experience
Spécialités
Langages de programmation C, C++, C#, .Net, Java/JEE, Architectures micro services, Dockers, Développement web et mobile Android, React et React Native


100x100

Docteur en Informatique - Consultant formateur
10 ans d'Experience


Spécialités

Langages de programmation C, C++, C#, .Net, Java/JEE, Architectures micro services, Dockers, Développement web et mobile Android, React et React Native




      A partir du  15-02-2021 à 09:30



        10 JOURS - 60H 

        Formation hybride Cours théorique à distance sur la plateforme youcan-academy.com, et travaux pratiques en présentiel
Inscrivez-vous à la prochaine session

Appelez vos conseillers
06 49 99 11 00
06 64 16 75 10

Objectifs de la formation

L'objectif de cette formation est de donner une compétence poussée en développement d'application mobile hybride. Le cours est organisé sous forme d'ateliers 100% pratiques. A la fin de cette formation les candidats sont capable d'installer des environnements de type IONIC et ou React Native, de met ... mettre en place les frameworks additifs nécessaires, de développer dans les 2 environnements des applications mobiles de dernière génération, de déployer ces applications sur les plateformes de leur choix. Voir Plus

Prérequis


Avoir les connaissances de base en développement informatique et surtout en JavaScript.

Angular


• Langage TypeScript • Outils pour TypeScript • Modules et dépendances • Composants et Templates • Application et composant • Data Binding • Gestion d'événements • Directives de structure • Pipes et formatage • Formulaires • Lier le formulaire au modèle • Valider les champs • Gérer les e ... Voir Plus

Applications mobiles multiplateformes


• Ecosystème mobile d'aujourd'hui • Les avantages et inconvénients du multiplateforme • Zoom sur les webviews • Installation de NODE.JS • Gestion des dépendances Node npm • Utilisation de NodeJS

Cordova


• Manipulation du HardWare du device • Points essentiels sur Cordova • Installation de l'environnement de développement • Commandes usuelles • Découverte et installation des plugins • Les plugins de Cordova • Batterie, GPS, appareil photo, contacts, gyroscope • Prendre des photos avec l'appar ... Voir Plus

Ionic


• Présentation de Ionic • Apports de Ionic à Cordova • Installation de Ionic • Analyse du projet par défaut • Génération d'un Ionic Application • Structure d'un projet Ionic • Commandes CLI • Decorators, Classes • Templates • La mise en page (Layout) • Styles et thèmes • Navigation • Sai ... Voir Plus

Build et déploiement sur Mobiles


• Automatiser la création des icônes et écrans de démarrage. • Présentation des services de la "Ionic Platform". • "Build" service de compilation. • Cycle de déploiement continu. • Déploiement sur Android, IOS et Windows Phone. • Plugins • Architecture du système de plugins • Plugin de prise ... Voir Plus

Communication http


• Gestion des Services par Angular • Injections de dépendances • Créer des services injectables • Structurer ses services • Visibilité des fonctions • Communication avec le serveur • Requêtes Ajax avec le module http • Rappels sur HTTP et REST • Projet fil rouge : Connexion à une API REST po ... Voir Plus

Travaux pratiques


• Création du projet d'application mobile de base • Développement des écrans de création d'un album et de liste de photos • Intégration d'un carrousel pour l'affichage des photos, adaptation de l'affichage en fonction de l'orientation de l'écran, prise en compte des gestes utilisateurs • Développ ... Voir Plus

Notions avancées


• Bonnes pratiques • Optimisations et performances

INTRODUCTION


• La configuration de Ionic 4 • La liste des logiciels et outils nécessaires • Comment installer Ionic 4 et dépendances sur Windows • Comment installer Ionic 4 et dépendances sur un Mac (ou Linux) • La configuration d'iOS et d'Android

Créer une application avec Ionic 4


• La configuration d'un environnement de développement • Créer une application via l'interface CLI • Créer une application via Ionic Creator • L'affichage d'une application avec le navigateur Web, CLI Ionic, Xcode, Genymotion, Ionic View • Internationalisation d'une application Ionic ... Voir Plus

Ajouter des composants Ionic 4


• Les menus et onglets • La navigation entre les pages • Les paramètres d'état • Slider & Theming

Présentation d'une application


• Les thèmes pour une plate-forme spécifique • Personnaliser un thème basé sur une plate-forme

Validation des formulaires


• User Input • Le formulaire complexe avec validation

Gérer les données dans Ionic 4


• Exécuter des requêtes HTTP • La récupération de données via une API à l'aide d'un fichier JSON • La sauvegarde des données • L'extraction des données avec Observables & Promises • Les listes (List Page...)

Ajouter des animations Ionic 4


• Intégrer une vidéo • Créer une animation avec Dynamics.js • Animer un slide avec les états d'animation • Les animations CSS

Authentification et notifications dans Ionic 4


• Gérer une page de connexion • Enregistrement et authentification des utilisateurs avec Ionic Cloud • Authentification avec des services externes (Facebook, Google...) • Recevoir des notifications push sur IO et Android

Ionic Native pour les périphériques


• Plugin de l'appareil photo • Plugin de partage social • InAppBrowser • Utiliser la géolocalisation • Plugin Maps

Extension de Ionic 4 avec Angular 7


• Créer une directive UserInput personnalisée • Créer un canal personnalisé • Créer un service partagé pour fournir des données à plusieurs pages

Tester et debugger avec Ionic 4


• Debugger un thème • Debugger le code • Tester la performance d'une application

Publier une application pour différentes plateformes


• La publication d'une application pour iOS • La publication d'une application pour Android • Utiliser le versioning pour les mises à jour

Pourquoi réagir ?


• Qu'est-ce que React Native • React et JSX sont familiers • L'expérience du navigateur mobile • Android et iOS : différents mais identiques • Le cas des applications ... Voir Plus

Rendu avec JSX


• Principes de base de la navigation • Paramètres de l'itinéraire • L'en-tête de navigation • Navigation par onglets et tiroirs • État de traitement

Propriétés, état et contexte des composants


• Flexbox est le nouveau standard de mise en page • Présentation des styles React Native • Création de mises en page Flexbox

Premiers pas avec les crochets


• Savoir à quoi s’attendre • Promotion des composants portables • Validateurs de propriété simples • Validateurs de type et de valeur • Écriture de validateurs de propr ... Voir Plus

Gestion des événements - la méthode React


• Savoir à quoi s’attendre • Promotion des composants portables • Validateurs de propriété simples • Validateurs de type et de valeur • Écriture de validateurs de propr ... Voir Plus

Fabrication de composants réutilisables


Rendu des collections de données • Trier et filtrer les listes • Récupération des données de la liste • Chargement de la liste paresseux

Le cycle de vie des composants React


• Disposition et organisation • Utilisation des composants de navigation • Entrée utilisateur de la collection • Travailler avec des styles et des thèmes

Validation des propriétés des composants


• Installation et utilisation de l'outil de ligne de commande Expo • Affichage de votre application sur votre téléphone • Affichage de votre application sur Expo Snack

Gestion de la navigation avec les itinéraires


• Qu'est-ce que JavaScript isomorphe ✓ • Rendu en chaînes • Routage backend • Réconciliation frontend •Récupération des données

Fractionnement de code à l’aide de composants paresseux et de suspense


• Collecte de la saisie de texte • Sélection dans une liste d’options • Basculer entre marche et arrêt • Collecte de la date / heure

Composants React côté serveur


• Collecte de la saisie de texte • Sélection dans une liste d’options • Basculer entre marche et arrêt • Collecte de la date / heure

Composants de l'infrastructure de l'interface utilisateur


• Utilisation de l'API lazy () • Utilisation du composant Suspense • Quand éviter les composants paresseux • Pages et itinéraires paresseux

Pourquoi React Native ?


•Une information importante • Obtenir la confirmation de l'utilisateur • Notifications passives • Modales d'activité

Démarrage des projets React Native


• Installation et utilisation de l'outil de ligne de commande Expo • Affichage de votre application sur votre téléphone • Affichage de votre application sur Expo Snack

Création de mises en page réactives avec Flexbox


• Faire défiler avec vos doigts • Donner des commentaires tactiles • Glissable et annulable

Navigation entre les écrans


• Déclarer des itinéraires • Gestion des paramètres d'itinéraire • Utilisation de composants de lien

Rendu des listes d’éléments


• Chargement des images • Redimensionner les images • Chargement d'image paresseux • Icônes de rendu

Affichage des progrès


• Détecter l'état du réseau • Stockage des données d'application • Synchronisation des données d'application

Géolocalisation et cartes


• Client Todo et Apollo • Le schéma GraphQL • Démarrage du client Apollo • Ajouter des éléments à faire • Rendu des éléments à faire • Termi ... Voir Plus

Collecte des entrées utilisateur


• La nécessité d'une autre approche pour gérer les données dans les applications React • Le vocabulaire de haut niveau de GraphQL • Récupération de données déclaratives • Les mutations comme moyen de mett ... Voir Plus

Affichage des écrans modaux


• Une information importante • Obtenir la confirmation de l'utilisateur • Notifications passives • Modaux d'activité

Répondre aux gestes de l'utilisateur


• Architecture de l'information et flux • Architecture d'information unifiée • Implémentation de Redux • Mise à l'échelle de l'architecture

Contrôle de l'affichage de l'image


• Chargement des images • Redimensionner les images • Chargement d'image paresseux • Icônes de rendu

Mise hors ligne


• Détecter l'état du réseau • Stockage des données d'application • Synchronisation des données d'application

Composants natifs de l'interface utilisateur utilisant NativeBase


• Conteneurs d'application • En-têtes, pieds de page et navigation • Utilisation des composants de mise en page • Collecte des entrées à l'aide des composants de formulaire ... Voir Plus

Gestion de l’état de l’application


• Architecture de l'information et flux • Architecture d'information unifiée • Implémentation de Redux • Mise à l'échelle de l'architecture

Pourquoi Apollo ?


• La nécessité d'une autre approche pour gérer les données dans les applications React • Le vocabulaire de haut niveau de GraphQL • Récupération de données déclaratives • Les mutations comme moyen de mett ... Voir Plus

Création d'une application Apollo React


• Client Todo et Apollo • Le schéma GraphQL • Amorçage du client Apollo • Ajout d’éléments à faire • Rendu des éléments à faire • Terminer ... Voir Plus

  FULL STACK MOBILE HYBRIDE

  FULL STACK SPRING BOOT - ANGULAR - REACT

© Copyright All Rights Reserved 2020 | Developed By : Team Formations++