Apprenez Angular.js et Ionic en clonant Tinder

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.

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é afin que vous puissiez comprendre ce que vous êtes en train de coder.

Cette formation est particulièrement faite pour :

  • Les fondateurs & entrepreneurs
  • Les marketeurs & designers
  • Les étudiants & débutants
  • Les développeurs web

Encore une hésitation ?

Si vous hésitez encore, n'hésitez pas à nous contacter via le chat du site, ou via Messenger.

  • 1. Introduction aux technologies

    Dans cette tâche, nous allons faire ensemble une petite introduction aux technologies que nous allons utiliser tout au long de la formation. Il est important de comprendre à quoi nous sert chacune d'elles !

    Installation de Node.js 1min46
    Présentation d'Angular.js 4min09
    Présentation & installation de Ionic 6min16
    Présentation de Firebase 1min53
  • 2. Mise en place du projet

    Il est temps maintenant de mettre en place le projet, et de créer la structure des dossiers. Nous allons déjà commencer à coder, puisqe nous allons créer notre menu et notre navigation !

    Création de l'application et explications du routeur 5min21
    Modification du side menu 7min18
    Customisation du side menu 6min35
    Création de la page de login 15min38
  • 3. Authentification avec Facebook

    Très utilisé à l'heure d'aujourd'hui, nous allons mettre en place une connexion grâce à Facebook. On sera alors capable de récupérer les informations de l'utilisateur.

    Création de l'application Firebase 1min12
    Création de l'app Facebook 7min23
    Création du service d'authentification 7min07
    Création du contrôleur d'authentification 11min28
  • 4. Sauvegarde des utilisateurs dans Firebase

    Maintenant que nous avons accès aux informations de l'utilisateur, il est temps de les sauvegarder dans notre base de données. C'est une étape importante à comprendre, car nous n'utilisons pas une base de données traditionnelle !

    Mise en place de la structure Firebase 6min04
    Récupérer les informations depuis Facebook 11min34
    Sauvegarde de l'utilisateur dans Firebase 12min10
    Création de la page de profil et sécurité 23min55
  • 5. Création de la page des réglages

    Avant d'afficher la liste des profils que nous pouvons liker, nous devons offrir la possibilité à l'utilisateur de régler ses paramètres de recherche. C'est ce que nous allons faire dans cette tâche !

    Design de la page des réglages 5min00
    Ajout du contrôleur de la page des réglages 6min33
    Sauvegarde des réglages dans le local storage 5min12
  • 6. Lister les utilisateurs sur la homepage

    Grâce aux réglages définis par l'utilisateur, nous allons lister les utilisateurs qui correspondent aux critères de recherche.

    Ajout des utilisateurs de test 5min09
    Lister tous les utilisateurs sur la homepage 6min56
    Filtrage des utilisateurs 11min56
  • 7. Création des slidings cards & ajout des likes

    Il est temps maintenant d'ajouter la possibilité de liker un profil et d'enregistrer cette information en base de données, mais également de créer des slidings cards dans le but d'imiter l'expérience utilisateur de Tinder !

    Création des slidings cards 12min24
    Ajout des boutons Like & Dislike 15min43
    Ajout du service Like 12min54
    Ajout de la page de détails d'un profil 16min05
  • 8. Création des matchs

    Dans cette tâche, nous allons ajouter les matchs entre utilisateurs en détectant lorsque deux utilisateurs se sont likés mutuellement. Nous allons également ajouter une nouvelle page dans notre application, permettant d'afficher la liste de ses matchs.

    Détection d'un match entre utilisateurs 17min21
    Lister tous les matchs de l'utilisateur 11min06
    Supprimer un match 5min13
  • 9. Mise en place du chat en temp réel

    Les vidéos de cette tâche sont en cours, elles arrivent très vite :)

A23e84c787e5d12bffd1acc0b57371da
satoual H. -

Salut formidable cours mais je ne vois pas le code source


5.0/5

5h de formation vidéos

Accès au code source

Une communauté pour s'entraider

Acheter pour
50.0€