Organisme de Formation aux technologies et métiers de L'informatique
javascript

Formation Conception d'interfaces graphiques full JavaScript avec Angular, TypeScript et Bootstrap

Développement de Front-End de dernière génération pour Back-End .Net ou Java

Informations générales

APW262
5 jours (35h)
3 015 €HT

Objectifs

Après ce cours, vous serez capable de :

  • Évaluer les enjeux du développement d'une application web et son intérêt
  • Disposer des connaissances et compétences nécessaires pour rendre une application "offline"
  • Maîtriser l'utilisation du Framework proposé par Google : Angular 2+ (versions 2 et ultérieures)
  • Identifier comment tirer parti de Bootstrap pour développer rapidement des pages Web "responsive"
  • prendre en charge l'intégralité du développement de la partie "front"

Public

Ce cours s'adresse avant tout aux personnes suivantes :

  • Développeurs .Net ou Java souhaitant exploiter les possibilités offertes par HTML5 et CSS3
  • Chargés de développement d'applications informatiques

Prérequis

Pour suivre ce cours, vous devez déjà posséder les connaissances suivantes :

  • Avoir suivi la formation Développement C# avancé et accès aux données sous Visual Studio (M861) ou la formation Développement Java avancé et accès aux données (OB303) ou disposer de compétences équivalentes
  • Avoir suivi la formation Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript ou disposer de compétences équivalentes
  • Avoir déjà développé et livré une application Web

Programme de la formation

La programmation web a fortement évolué depuis ces dernières années, notamment avec HTML5, CSS3 et JavaScript. Renforcé par l'apparition de frameworks JavaScript toujours plus évolués et performants, le monde du développement bouge très rapidement et les standards d'hier sont littéralement balayés par de nouvelles méthodes de développement qui permettent de plus en plus simplement d'intégrer aux développements traditionnels (pour les PC) la prise en prise en charge "simple" des nouveaux équipements (tablettes, écrans tactiles, smartphones). Spécifiquement conçue pour les développeurs front-end de demain, cette formation intègre de nombreuses briques JavaScript éprouvées (Angular, TypeScript, Bootstrap) mais aussi les toutes dernières évolutions prometteuses comme http2 et Socket .IO par exemple, ce qui permettra aux développeurs participant à cette formation d'aborder sereinement le développement de progressive Web App.

Évolutions récentes du développement Web

  • Du site web à l'application web
  • Les nouveaux frameworks web et leurs utilités
  • La structure d'une application web
  • Les outils : webpack, npm, angular-cli

Rappels

  • Présentation de JavaScript ES6
  • Présentation des fonctions fléchées (Arrow functions) et de leur intérêt
  • Introduction aux fonctions synchrones et asynchrones (Promises & observables)

TypeScript : Principes et fonctionnement

  • Installation TypeScript
  • Transpiler EcmaScript
  • Let, variables locales et constantes
  • Typage et types natifs
  • Paramètres optionnels, valeurs par défaut
  • Classes et interfaces
  • Gestion des modules
  • Décorateurs

Angular : Principes et gestion des composants

  • Définition de composants
  • Comprendre les Web Components (standard, concepts, shadow DOM, scoped CSS...)
  • Cycle de vie dans l'application
  • Angular Compiler : Change Detection
  • Syntaxe des templates : interpolation/expression, Binding et filtres
  • Directives de transformation : ngIf, ngFor, ngSwitch...
  • Définition syntaxique, le symbole (*)
  • Variables locales et variables de Template
  • Classe de composants
  • Directives de configuration : selector, provider
  • Evènements utilisateur et évènements logiques personnalisés : EventEmitter

Angular : Gestion de l'environnement

  • FormControl et FormGroup
  • TDF versus DDF : Template Driven Form et Data Driven Form
  • Validation et gestion d'erreur personnalisée
  • Liaison de données via HTTP
  • Gestion et configuration des échanges HTTP au niveau applicatif
  • Création de routes
  • Intercepter les paramètres de routage et wildcard
  • Ciblage, router-outlet événements de routage
  • Gestion de routes dans l'arbre des composants
  • Configuration des Guard pour le l'initialisation des routes

Angular : fonctions avancées

  • Services workers
  • Création de pipes
  • AOT

Indexed DB

  • Paradigme de stockage objets
  • Principes de fonctionnements
  • Créer et structurer l'objet de stockage
  • CRUD
  • Updating de la structure
  • Sécurité

Socket IO

  • Présentation de Socket .IO
  • Intérêts d'utilisation
  • Communication full duplex
  • http2, Socket .IO
  • Gestion des sockets
  • Les rooms et le broadcast
plus d'infos

Méthode pédagogique

Chaque participant travaille sur un poste informatique qui lui est dédié. Un support de cours lui est remis soit en début soit en fin de cours. La théorie est complétée par des cas pratiques ou exercices corrigés et discutés avec le formateur. Le formateur projette une présentation pour animer la formation et reste disponible pour répondre à toutes les questions.

Méthode d'évaluation

Tout au long de la formation, les exercices et mises en situation permettent de valider et contrôler les acquis du stagiaire. En fin de formation, le stagiaire complète un QCM d'auto-évaluation.

Suivre cette formation à distance

  • Un ordinateur avec webcam, micro, haut-parleur et un navigateur (de préférence Chrome ou Firefox). Un casque n'est pas nécessaire suivant l'environnement.
  • Une connexion Internet de type ADSL ou supérieure. Attention, une connexion Internet ne permettant pas, par exemple, de recevoir la télévision par Internet, ne sera pas suffisante, cela engendrera des déconnexions intempestives du stagiaire et dérangera toute la classe.
  • Privilégier une connexion filaire plutôt que le Wifi.
  • Avoir accès au poste depuis lequel vous suivrez le cours à distance au moins 2 jours avant la formation pour effectuer les tests de connexion préalables.
  • Votre numéro de téléphone portable (pour l'envoi du mot de passe d'accès aux supports de cours et pour une messagerie instantanée autre que celle intégrée à la classe virtuelle).
  • Selon la formation, une configuration spécifique de votre machine peut être attendue, merci de nous contacter.
  • Pour les formations incluant le passage d'une certification la dernière journée, un voucher vous est fourni pour passer l'examen en ligne.
  • Pour les formations logiciel (Adobe, Microsoft Office...), il est nécessaire d'avoir le logiciel installé sur votre machine, nous ne fournissons pas de licence ou de version test.
  • Horaires identiques au présentiel.

Mis à jour le 09/01/2023