De nombreuses applications professionnelles nécessitent d'aller au-delà du simple upload d'images lorsqu'il est nécessaire d'associer une photo à un utilisateur. En effet, pouvoir prendre une photo depuis la caméra d'un device permet immédiatement :
- d'alimenter un trombinoscope lors de l'arrivée d'un nouvel employé dans une entreprise,
- de créer une carte de membre ou une carte d'abonnement dans le contexte d'une inscription à une salle de sport par exemple.
Bref, pouvoir contrôler une webcam depuis une application est un vrai plus dans le cas d'applications nécessitant de pouvoir reconnaître un utilisateur. C'est ce que nous allons apprendre dans cette formation.
Prendre des photos est intéressant. Pouvoir les stocker sur un backend, l'est davantage.
C'est ce que nous allons faire en recourant au headless CMS qui monte : Strapi.
Cette formation Angular et Strapi va vous permettre :
- de pratiquer vos compétences Angular (en Angular 10),
- d'apprendre à bénéficier rapidement d'un backend grâce à Strapi,
- de voir (ou revoir) la création de formulaires,
- d'améliorer l'ergonomie de votre application en affichant un spinner lors de l'upload d'une photo et du POST d'un formulaire.
Bienvenue dans cette formation FullStack avec Angular 10 en Front et Strapi en Back !
Table des matières de cette formation Angular, JavaScript (durée : 3h22m)
-
Initialisation du projet
- Générer un nouveau projet Angular avec Angular CLI gratuit 00:03:35
-
Contrôler votre webcam depuis le client Angular 10
- Prendre une photo à l'aide de votre webcam 00:17:39
- Récapitalutif de la capture d'image via une webcam 00:09:34
- Décoder l'image codée en base64 afin d'obtenir un Blob 00:15:46
-
Uploader une image vers un backend Strapi
- Créer un backend avec le headless CMS Strapi 00:04:23
- Créer un service Angular permettant de poster vers Strapi 00:16:01
- Uploader l'image 00:07:07
- Aperçu de l'image avant upload 00:04:12
- Créer un spinner sur Loading.io 00:02:23
- Afficher le spinner pendant l'upload d'une image vers le serveur 00:05:58
- Afficher/masquer la prévisualistation de la webcam 00:06:53
- Afficher durant un temps limité un message de succès 00:12:39
-
Formulaire de membre
- Installer ng2-date-picker 00:06:23
- Créer une collection "Members" dans Strapi 00:06:46
- Créer un formulaire de nouveau membre 00:15:58
- FormGroup imbriqué destiné à l'adresse 00:13:17
- Service permettant de créer un nouveau membre dans Strapi 00:22:11
- Générer un nom d'image unique et plus bref 00:08:34
- Afficher le component de détails après soumission du formulaire 00:06:38
- Récupérer les détails d'un membre (photo + données) 00:16:45
- Fichiers sourcestélécharger
- Certificat
Formateur : Codeconcept
Avis des clients
Questions sur le tuto
-
Avec quelle version de logiciel ce tuto est-il compatible ?Angular
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
-
Que contient le fichier source ?Le code de l'application fil rouge développée durant ce tuto :)
-
Quel niveau en Angular est pré-requis ?Connaître les fondamentaux d'Angular : ce qu'est un module, un component, l'injection de dépendance.
