Créer une application FullStack avec Angular et Strapi
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Créer une application FullStack avec Angular et Strapi

Codeconcept
39,00€
3 paiements de 13,00€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Initialisation du projet
Chapitre 2
Contrôler votre webcam depuis le client Angular 10
Chapitre 3
Uploader une image vers un backend Strapi
Chapitre 4
Formulaire de membre

Plan détaillé du cours

Chapitre 1 : Initialisation du projet
03m35s
 
Leçon 1Générer un nouveau projet Angular avec Angular CLI
Chapitre 2 : Contrôler votre webcam depuis le client Angular 10
42m59s
 
Leçon 1Prendre une photo à l'aide de votre webcam
Leçon 2Récapitalutif de la capture d'image via une webcam
Leçon 3Décoder l'image codée en base64 afin d'obtenir un Blob
Chapitre 3 : Uploader une image vers un backend Strapi
59m36s
 
Leçon 1Créer un backend avec le headless CMS Strapi
Leçon 2Créer un service Angular permettant de poster vers Strapi
Leçon 3Uploader l'image
Leçon 4Aperçu de l'image avant upload
Leçon 5Créer un spinner sur Loading.io
Leçon 6Afficher le spinner pendant l'upload d'une image vers le serveur
Leçon 7Afficher/masquer la prévisualistation de la webcam
Leçon 8Afficher durant un temps limité un message de succès
Chapitre 4 : Formulaire de membre
1h36m
 
Leçon 1Installer ng2-date-picker
Leçon 2Créer une collection "Members" dans Strapi
Leçon 3Créer un formulaire de nouveau membre
Leçon 4FormGroup imbriqué destiné à l'adresse
Leçon 5Service permettant de créer un nouveau membre dans Strapi
Leçon 6Générer un nom d'image unique et plus bref
Leçon 7Afficher le component de détails après soumission du formulaire
Leçon 8Récupérer les détails d'un membre (photo + données)

Aperçus

Vos questions sur le cours

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.

Payer plus tard ou en 3x

Prix d'achat : 39,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 13,00 €
tous les mois, sans intérêts
Total : 39,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1363 tutos gratuits

Notre politique de protection des données