Apprenez Angular.js et Ionic en clonant Tinder
4.7 (6 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
16 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Apprenez Angular.js et Ionic en clonant Tinder to your Wishlist.

Add to Wishlist

Apprenez Angular.js et Ionic en clonant Tinder

La meilleure formation pour lancer son application mobile !
4.7 (6 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
16 students enrolled
Created by Lucas Willemot
Last updated 11/2016
French
Price: $55
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Créer une application mobile
  • Coder en utilisant Javascript et le framework Angular.js
  • Coder en utilisant le framework Ionic
  • Utiliser Firebase comme back-end
  • Utiliser l'API de Facebook
  • Mettre en place une authentification par Facebook
View Curriculum
Requirements
  • Des connaissances de base en Javascript sont un plus, mais non nécessaires
  • Des connaissances de base sur le framework Ionic sont un plus, mais non nécessaires
Description

A propos

Besoin de rapidement apprendre à développer une application mobile sous Android ou iOS ? En 5 heures, vous allez recréer un MVP pour Tinder, vous donnant les bases nécessaires pour développer votre produit. Vous pourrez ensuite réutiliser des concepts ou des morceaux de code pour votre propre application mobile.C'est donc parfait si vous êtes un entrepreneur ayant besoin d'une première version d'application mobile pour tester son idée ! 

Technologies utilisées

Pour la réalisation de ce clone Tinder nous allons utiliser 3 technologies principales :

  • Angular.js 1.5
  • Ionic 1
  • Firebase 3

Ces 3 technologies sont très utilisées pour le développement mobile, puisqu'elles permettent de développer rapidement une application mobile sous Android et iOS. L'avantage est de n'avoir à maintenir qu'un seul code, puisque ce dernier est le même pour les 2 plateformes.

Fonctionnalités

Tout au long de cette formation, nous allons développer plusieurs fonctionnalités pour recréer l'application Tinder :

  • Création d'un onboarding
  • Authentification avec Facebook
  • Gestion des informations du profil
  • Gestion des paramètres de découverte
  • Like et dislike des profils
  • Effet de slide sur les cartes
  • Gestion des matchs entre utilisateurs
  • Possibilité de chatter avec ses matchs

Qui peut participer à cette formation ?

Même si il est évident qu'avoir déjà un bagage en Javascript ou Angular.js est un plus, ce n'est pas un pré-requis. Les concepts de base d'Angular.js seront expliqués en début de formation afin que tout le monde puisse suivre. Ensuite, chaque ligne de code est expliquée afin que vous puissiez comprendre ce que vous êtes en train de coder. 

Who is the target audience?
  • Entrepreneurs
  • Designers
  • Fondateurs de startup
  • Développeurs web
  • Etudiants
  • Marketeurs
Students Who Viewed This Course Also Viewed
Curriculum For This Course
29 Lectures
04:15:53
+
Introduction aux technologies utilisées
4 Lectures 14:02

Dans cette vidéo, je vais vous présenter rapidement ce qu'est Node.js et nous allons l'installer. C'est une librairie nécessaire pour la suite du projet.

Preview 01:46

Dans cette vidéo, nous allons voir ensemble ce qu'est Angular.js et à quoi cela va nous servir dans la suite de la formation. C'est aussi l'occasion pour moi de vous introduire le concept de l'architecture MVC (Modèle-Vue-Contrôleur) et comment Angular.js appréhende ce concept avec le two-way data-binding. Soyez donc attentifs :)

Preview 04:08

Il est temps maintenant de vous expliquer ce qu'est Ionic, et son rôle dans l'application que nous allons développer ! Nous allons ensuite pouvoir l'installer sur notre environnement de travail.

Preview 06:16

Enfin, dernière brique de notre application : Firebase ! C'est Firebase qui va être utilisé pour la partie back-end, là où Angular.js et Ionic sont utilisés pour la partie front-end. C'est aussi avec Firebase que nous allons stocker des informations, grâce à sa base de données au format JSON.

Preview 01:52
+
Mise en place du projet
4 Lectures 34:48

C'est parti, on se lance et on va générer la structure de l'application grâce à Ionic ! Placez vous d'abord dans le dossier ou vous souhaitez créer l'application grâce à la commande cd suivi du chemin vers le dossier. Puis utilisez la commande ionic suivante pour générer la structure de votre application :

ionic start coder sidemenu

Je vais ensuite vous explique le système de routage d'Angular.js. C'est ce qui va permettre à l'application de rediriger les utilisateurs vers la bonne vue lors du clic sur un bouton du menu, par exemple.

Création du projet avec Ionic & explications du routeur
05:20

C'est bon, on se lance enfin dans le code ! Dans cette vidéo, nous allons commencer par modifier le side menu pour qu'il corresponde à la navigation de notre application. On aura d'abord 3 pages principales : 

  • La homepage où apparaîtront les profils des utilisateurs
  • La page de profil pour voir ses propres photos et éditer sa description
  • La page des réglages pour modifier ses paramètres de découverte

On rajoutera plus tard dans la formation la page des matchs, permettant de lister tous les matchs de l'utilisateur et de chatter avec eux.

Modification du side-menu
07:17

Maintenant que notre navigation est en place, nous allons customiser le sidemenu pour qu'il corresponde à la charte graphique de Tinder. C'est quand même plus joli !

Customisation du side-menu
06:34

Maintenant que nos différentes briques sont en place, nous allons commencer par créer la page de login ! Pour cela, nous allons réutiliser les screenshots de l'application Tinder afin de créer un onboarding, un élément très important pour une application mobile. Ensuite, nous allons rajouter le bouton "Connexion avec Facebook" qui permettra à l'utilisateur de s'authentifier.

Vous pouvez télécharger les screenshots Tinder en cliquant sur ce lien

Création de la page de login
15:37
+
Authentification avec Facebook
4 Lectures 27:07

Maintenant que nos différentes briques sont en place, nous allons commencer par créer la page de login ! Pour cela, nous allons réutiliser les screenshots de l'application Tinder afin de créer un onboarding, un élément très important pour une application mobile. Ensuite, nous allons rajouter le bouton "Connexion avec Facebook" qui permettra à l'utilisateur de s'authentifier.

Vous pouvez télécharger les screenshots Tinder en cliquant sur ce lien

Création de l'application Firebase
01:11

Sur le même principe, nous devons à présent créer l'application Facebook, afin d'utiliser leur API et de pouvoir mettre en place la connexion via Facebook. Cela va également nous permettra de créer des utilisateurs de test pour notre application. Ainsi, on pourra avoir plusieurs profils à découvrir sur notre app !

Vous pouvez vous rendre sur Facebook Developer à cette adresse
Ou encore télécharger les photos de profils utilisées pour les utilisateurs de test.

Création de l'application Facebook
07:22

Il est temps maintenant de coder le service Angular qui va communiquer avec Firebase. Une fois qu'il sera fait, nous n'auront plus qu'à créer le contrôleur pour faire le lien entre la page de login, et le service d'authentification.

Création du service d'authentification
07:06

L'authentification avec Facebook est presque terminée, il suffit maintenant de créer le contrôleur associé à la page de login, afin de déclencher l'action d'authentification au clic sur le bouton.

Pour rappel, le contrôleur est la brique de l'architecture MVC qui va faire la liaison entre la vue, et le modèle. A chaque bouton sur la vue par exemple, nous allons associer une méthode du contrôleur qui va alors effectuer un traitement. Ce traitement peut notamment inclure l'appel à un service afin de communiquer avec notre back-end.

Création du contrôleur d'authentification
11:28
+
Sauvegarde des utilisateurs dans Firebase
4 Lectures 53:41

Maintenant que nous pouvons authentifier nos utilisateurs avec Facebook, nous devons sauvegarder leurs données dans Firebase. Avant cela, il y a une étape importante de cette formation à comprendre :

Comment bien structurer une base de données orientée JSON ?

Soyez donc attentifs, la structure d'une telle base de données diffère complètement d'une base de données traditionelle, dite relationnelle. Voici un exemple de la structure que nous allons utiliser pour représenter les utilisateurs, les likes et les matchs : 

{
    "users" : {
        "user_id_1" : {
            "name": "Sebastien Durand",
            "birthday": "10/04/1980",
            "location": "Paris, France"
        },
        "user_id_2" : {
            "name": "Laure Lacroix",
            "birthday": "10/06/1990",
            "location": "Lyon, France"
        },
        "user_id_3" : {
            "name": "Louis Dupont",
            "birthday": "15/01/1986",
            "location": "Bordeaux, France"
        }
    },
    "likes" : {
        "user_id_1" : {
            "user_id_2" : true
        },
        "user_id_2" : {
            "user_id_1" : true,
            "user_id_3" : true
        },
        "user_id_3" : {
            "user_id_1" : true
        }
    },
    "matches" : {
        "user_id_1" : {
            "user_id_2" : true
        },
        "user_id_2" : {
            "user_id_1" : true
        }
    }
}

Nous verrons plus tard dans la formation comment nous intégrons la notion de chat et de message.

Mise en place de la structure Firebase
06:03

Pour sauvegarder les utilisateurs dans notre base de données Firebase, faut-il encore savoir comment récupérer leurs informations depuis l'API Facebook. C'est ce que nous allons voir dans cette vidéo !

Vous pouvez retrouver l'outil Graph Explorer à cette adresse. N'hésitez pas à jouer un peu avec pour voir toutes les possibilités qu'il existe en terme de requête sur l'API Facebook.

Récupérer des informations depuis Facebook
11:33

Nous sommes capable de récupérer les informations de l'utilisateur depuis Facebook, il faut maintenant les sauvegarder dans Firebase tout en respectant la structure de données que nous avons conçue précédemment. Pour cela, nous allons rajouter des méthodes de sauvegarde dans le service Angular, que nous appellerons lorsque l'utilisateur se connectera sur l'application.

Sauvegarde de l'utilisateur dans Firebase
12:10

Nous sommes capable de récupérer les informations de l'utilisateur depuis Facebook, il faut maintenant les sauvegarder dans Firebase tout en respectant la structure de données que nous avons conçue précédemment. Pour cela, nous allons rajouter des méthodes de sauvegarde dans le service Angular, que nous appellerons lorsque l'utilisateur se connectera sur l'application.

Création de la page de profil & sécurité
23:55
+
Création de la page des réglages
3 Lectures 11:33

Il est temps de passer à la page des réglages, qui permettra à l'utiliser de régler ses paramètres de découverte. Autrement dit, il pourra choisir les critères de recherches pour les profils à afficher. Dans cette vidéo, nous allons commencer par designer cette page.

Design de la page des réglages
05:00

Il est temps de passer à la page des réglages, qui permettra à l'utiliser de régler ses paramètres de découverte. Autrement dit, il pourra choisir les critères de recherches pour les profils à afficher. Dans cette vidéo, nous allons commencer par designer cette page.

Ajout du contrôleur de la page des réglages
06:33

L'utilisateur peut à présent changer ses paramètres de découverte des profils, mais faut-il encore pouvoir les sauvegarder à un endroit. Pour cela, nous allons utiliser le local storage, qui permet de sauvegarder des données dans la mémoire du téléphone, plutôt que dans notre base de données. C'est une méthode bien adaptée pour la sauvegarde de paramètres de l'utilisateur.

Sauvegarde des réglages dans le local storage
Processing..
+
Lister les utilisateurs sur la homepage
3 Lectures 23:59

Avant de commencer à liste les utilisateurs sur la homepage, encore faut-il qu'il y ai plusieurs utilisateurs sur notre application. Nous allons reprendre la même procédure que lors de la tâche 3 de la formation, afin de créer plusieurs utilisateurs de test. Prenez soin de vous connecter avec chacun d'entre eux et de compléter les informations suivantes :

  • Ajout d'une ou plusieurs photos de profil
  • Ajout de la ville actuelle
  • Ajout de la biographie

Aussi, pour de meilleurs tests, pensez à mettre des âges assez différents pour tous les utilisateurs. Ainsi, on pourra vérifier que les réglages de découverte sur l'âge fonctionnent bien :)

Création des utilisateurs de test
05:08

Maintenant que notre application est utilisée par plusieurs faux utilisateurs, nous allons pouvoir récupérer ces derniers afin de les afficher sur la homepage. Dans cette première étape, nous allons les afficher sous forme de liste. Nous ajouterons les effets de slide dans une prochaine vidéo.

Lister tous les utilisateurs sur la homepage
06:56

Enfin, dernière étape de cette tâche, nous allons nous assurer que les choix en terme de découverte sont respectés. Pour cela, nous allons filtrer les utilisateurs qui ne correspondent pas aux critères de recherche.

Filtrage des utilisateurs
11:55
+
Création des sliding cards et ajout des likes
4 Lectures 57:05

On y est ! Nous allons enfin implémenter la fonctionnalité coeur de l'application Tinder, ce qui fait sa force : l'effet de swipe sur les profils, avec les likes et les dislikes ! Première étape donc, l'effet de swipe en utilisant une librairie tierce. Rappelez-vous toujours de cette devise : "Ne jamais réinventer la roue" ! Nous n'allons donc pas tout coder par nous-même pour ajouter cet effet, cela nous prendrait bien trop de temps ! 

Vous pouvez retrouver le GitHub de la librairie ici

Création des slidings cards
12:24

Nous allons maintenant ajouter les boutons pour liker, ou disliker un profil. Nous allons essayer d'imiter au mieux le style des boutons de Tinder, pour avoir une interface ressemblante.

Ajout des boutons Like & Dislike
15:43

A présent, nous allons enregistrer les likes dans notre base de données Firebase ! Rappelez-vous de la structure de données que nous avions choisi pour stocker les utilisateurs, les likes et les matchs, elle ressemblait à ça : 

{
    "users" : {
        "user_id_1" : {
            "name": "Sebastien Durand",
            "birthday": "10/04/1980",
            "location": "Paris, France"
        },
        "user_id_2" : {
            "name": "Laure Lacroix",
            "birthday": "10/06/1990",
            "location": "Lyon, France"
        },
        "user_id_3" : {
            "name": "Louis Dupont",
            "birthday": "15/01/1986",
            "location": "Bordeaux, France"
        }
    },
    "likes" : {
        "user_id_1" : {
            "user_id_2" : true
        },
        "user_id_2" : {
            "user_id_1" : true,
            "user_id_3" : true
        },
        "user_id_3" : {
            "user_id_1" : true
        }
    },
    "matches" : {
        "user_id_1" : {
            "user_id_2" : true
        },
        "user_id_2" : {
            "user_id_1" : true
        }
    }
}
Ajout du service Like
12:53

Et enfin, dernière brique de notre homepage : la page de détails d'un profil. Cette page de détail permettra d'afficher plus d'informations concernant l'utilisateur, de voir toutes les photos ajoutées, mais aussi de liker ou disliker. Cela va également vous permettre de prendre en main l'utilisateur des fenêtres modales sous Ionic !

Ajout de la page de détail d'un profil
16:05
+
Ajout des match entre utilisateurs
3 Lectures 33:38

Notre application commence à être vraiment pas mal ! L'une des dernières fonctionnalités qu'il nous reste à développer : les matchs entre utilisateur ! Ce n'est pas si compliqué, il suffit, lorsqu'un utilisateur like un profil, de vérifier si ce profil avait déjà liké notre utilisateur courant. Nous allons également ajouter une fenêtre popup customisée pour prévenir l'utilisateur qu'il vient d'avoir un match, comme Tinder le fait sur son application.

Détection d'un match entre utilisateurs
17:20

Maintenant que les utilisateurs peuvent matcher entre eux, nous allons devoir ajouter une nouvelle page dans notre app, qui permet de visualiser tous ses matchs. Nous allons donc modifier notre routeur et notre menu pour prendre en compte cette nouvelle page.

Lister tous les matchs de l'utilisateurs
11:06

Dernière étape de cette tâche, nous allons donner la possibilité à un utilisateur de supprimer un match ! C'est une fonctionnalité assez rapide à implémenter, mais cela va vous permettre de savoir comment on peut ajouter un effet de swipe sur des items de liste, afin de faire apparaître des options. Assez utile !

Concernant la prochaine tâche

La prochaine et dernière tâche consiste à développer un chat en temps réel, pour que les utilisateurs ayant matché puissent discuter.
Les vidéos sont en cours d'enregistrement et devraient être mises en ligne très prochainement !

Supprimer un match
05:12
About the Instructor
Lucas Willemot
4.7 Average rating
6 Reviews
16 Students
1 Course
Ingénieur études et développement

Diplômé en Génie Informatique à l'Université de Technologie de Compiègne, école d'ingénieur classée chaque année dans le top 10 français, j'ai effectué ce cursus en alternance afin de me bâtir une expérience solide. Pendant ma scolarité, j'ai également créé deux start-ups qui m'ont permises d'enrichir mes connaissances et mes compétences techniques. Je maîtrise à présent un certain nombre de langages et il me tient à coeur de les enseigner à mon tour. 

C'est pourquoi j'ai décidé de créer des formations ludiques, pédagogiques et très pratique, pour vous apprendre à coder en clonant des start-ups de la vie réelle. Etant moi-même passé par la création de start-ups et le développement d'un produit, je comprends parfaitement vos attentes et vos besoins : apprendre l'essentiel pour développer un Minimum Viable Product (MVP) afin de tester votre marché le plus rapidement possible.Vous allez pouvoir réutiliser ce que vous avez appris, et même le code source développé pendant ces formations afin de construire votre propre produit.