Cloner Airbnb de A à Z en Ruby on Rails
4.4 (38 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.
340 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Cloner Airbnb de A à Z en Ruby on Rails to your Wishlist.

Add to Wishlist

Cloner Airbnb de A à Z en Ruby on Rails

Apprendre à coder pas à pas la plateforme Airbnb (en utilisant Ruby on Rails, Javascript, Bootstrap et Stripe)
4.4 (38 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.
340 students enrolled
Created by Rod Paris
Last updated 7/2017
French
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
Includes:
  • 10 hours on-demand video
  • 62 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Coder en Ruby on Rails sur d'autres projets (réalisation de MVP/prototype par exemple)
  • Améliorer facilement et rapidement le design de votre application avec Bootstrap
  • Concevoir votre interface utilisateur
  • Utiliser Facebook pour authentifier vos utilisateurs
  • Envoyer des e-mails transactionnels avec Sendgrid
  • Créer des messages de notification pour les actions
  • Gérer le processus de téléchargement de photos avec AJAX
  • Traiter la méthode de recherche avec différents critères
  • Gérer les réservations avec jquery et javascript
  • Gérer la recherche d'emplacement sur Google Map
  • Traiter les paiements avec Stripe
View Curriculum
Requirements
  • Aucune connaissance requise - Projet réalisé de A à Z
  • Besoin d'un accès à un ordinateur connecté à internet
Description

Dans cette formation, je vais vous guider à travers toutes les étapes pour développer une marketplace type AirBnb. Nous allons créer à partir de zéro (from scratch) toutes les fonctionnalités basiques de Airbnb. Pas besoin d'être un as en HTML, CSS, Javascript ou Ruby on Rails pour suivre cette formation. Vous avez juste besoin de suivre pas à pas ma méthode. De cette manière, vous ne deviendrez pas expert en développement web, mais vous obtiendrez une méthode concrète qui vous permettra d'être rapide et efficace, adaptable à tous vos projets en particulier pour les entrepreneurs.

Au cours de la formation, je suis disponible pour toute question - demande d'explication supplémentaire - accompagnement sur la réalisation de votre Airbnb :)


Quelles sont les étapes clés que nous allons développer dans ce projet?

  • Authentification simple avec email / mot de passe.
  • Authentification avancée avec Facebook.
  • Envoi d'email transactionnel lorsque le nouvel utilisateur s'est inscrit
  • Envoi d'email transactionnel lorsqu'une réservation est réalisée
  • Système de notifications pour chaque action/évènement
  • Page de modification du profil
  • Page pour devenir hôte (Création et modification d'annonces)
  • Module d'upload de photos pour nos annonces
  • Module de réservations avec date d'arrivée et date de départ
  • Système de paiement avec Stripe
  • Module de recherche avec différents critères (lieux, prix, etc ...)
  • Module de messagerie en temps réel entre les utilisateurs 
  • Système de notation des logements (note + commentaire)
Who is the target audience?
  • Débutants en code qui souhaitent suivre pas à pas la conception d'un appli web
  • Entrepreneurs souhaitant prototyper un MVP pour tester leur marché
  • Développeurs Front-end
  • Développeurs Ruby souhaitant s'exercer sur un cas pratique.
  • Développeurs souhaitant découvrir l'agilité de Ruby on Rails
Students Who Viewed This Course Also Viewed
Curriculum For This Course
138 Lectures
10:38:01
+
Introduction
3 Lectures 03:51

Création d'un compte sur Cloud9 (environnement online permettant de développer dans le langage Ruby on Rails que nous allons utiliser pendant cette formation.

Preview 01:02

Dans cette session, vous allez faire vos premiers pas sur Cloud9

Preview 02:10
+
Création de notre première page
4 Lectures 06:17

Installation de Bootstrap permettant d'obtenir facilement et rapidement un design sympa.

Preview 02:30

Installation de Bootstrap permettant d'obtenir facilement et rapidement un design sympa.

Preview 00:18

A la fin de cette session, vous aurez créé la première page de notre application.

Preview 03:07

A la fin de cette session, vous aurez créé la première page de notre application.

Preview 00:22
+
Publication du site sur internet
4 Lectures 10:52

Apprendre à sauvegarder son travail sur Git-Hub.

Sauvegarde sur Git-Hub
03:33

Code source de la vidéo précédente.

Version texte: Sauvegarde sur Git-Hub
00:22

A fin de cette session, vous saurez publier votre application sur Heroku.

Publier sur Heroku
06:06

Code source de la vidéo précédente.

Version texte: Publication sur Heroku
00:51
+
Système d’authentification et d'inscription sécurisé avec Devise
17 Lectures 01:37:11

Objectif de la section

Qu'allons nous réaliser dans cette section?
00:57

Dans cette vidéo, nous allons apprendre à mettre en place le système d'identification Devise.

Installation Devise
13:34

Voici le code source de la vidéo précédente.

Version texte: Installation Devise
01:09

A la fin de cette session, vous saurez ajouter une barre de navigation horizontale de type bootstrap à votre site internet.

Barre de navigation
07:42

Voici le code source de la vidéo précédente.

Version texte: Barre de navigation
00:39

Dans cette session, vous allez apprendre à ajouter un champ dans une table.

Ajouter le champ Nom complet (prénom + nom)
04:53

Voici le code source de la vidéo précédente.

Version texte: Ajout du champ Nom complet
00:37

Dans cette session, vous allez améliorer les formulaires des vues inscription, connexion et mise à jour du profil. Vous saurez :
  • Changer le style d'un formulaire
  • Ajoutez un champ texte
Modification de nos formulaires
12:54

Code source de la vidéo précédente.

Version texte: Modification de nos formulaires
01:03

Dans cette session, vous allez ajouter la possibilité d'uploader sa propre photo de profil. Vous saurez:
  • utiliser le gem Paperclip
  • Ajouter un champ pour uploder sa photo
  • Créer une fonction d'affichage de cette photo de profil
  • Afficher cette photo dans la barre de navigation
Upload d'une photo de profil
09:26

Code source de la vidéo précédente.

Version texte: Upload d'une photo de profil
00:52

Dans cette session, vous allez créer une page d'information pour chaque utilisateur. Vous saurez:

  • Ajouter de nouveaux attributs dans une table donnée
  • Créer un nouveau contrôleur avec une méthode d'affichage
  • Ajouter ce contrôleur ainsi que cette méthode à nos chemins d'accès (routes)
  • Créer une page html en se servant de la variable @user
Création page d'information utilisateur
12:17

Code source de la vidéo précédente.

Version texte: Création page d'information utilisateur
01:19

Dans cette session, vous allez améliorer votre page de mise à jour du profil. Vous saurez:
  • modifier l'apparence d'une page avec 2 colonnes: l'une contenant des liens l'autre le formulaire précédent
  • créer un nouveau contrôleur (avec une nouvelle méthode) permettant de modifier votre profil sans confirmation du mot de passe
  • Autoriser nos attributs phone_number et description
Amélioration de la page de mise à jour du profil
10:59

Code source de la vidéo précédente.

Version texte: Amélioration de la page de mise à jour du profil
01:14

Dans cette session, vous allez ajouter de belles notifications à l'aide de toastr.

Vous saurez:
  • notifier des actions (inscription/connexion/déconnexion)
  • avertir d'oublis (validation nom complet)
Notifications
16:45

Code source de la vidéo précédente.

Version texte: Notifications
00:48
+
Création d'une annonce
9 Lectures 57:15

Objectifs et résultat de cette section !

Qu'allons nous réaliser dans cette section?
00:53

Dans cette session, voua allez créer un nouveau model Room.rb. Vous saurez:

  • Lier 2 modèles entre eux (belongs_to et has_many)
  • Créer des validations pour notre model Room
Création du model Room
07:27

Code source de la vidéo précédente.

Version texte: Création du model Room
00:47

Dans cette session, vous allez créer le contrôleur Room. Vous saurez:
  • Créer les méthodes new, create, update et index de rooms_controller
  • Créer une méthode qui s'applique sur certaines méthodes lorsqu'elles sont appelées
  • Modifier le fichier routes pour les méthodes classiques (new, create, edit, update...)
Création du controller Room
10:12

Code source de la vidéo précédente.

Version texte: Création du controller Room
01:19

Dans cette session, vous allez créer le formulaire de création d'une nouvelle annonce.

Création des vues
22:22

Code source de la précédente vidéo.

Version texte: Création des vues
01:54

Dans cette session, vous allez finaliser la création d'une annonce avec:
  • Mise à jour du style css
  • Notification de création et mise à jour d'une annonce
  • Traduction des erreurs éventuelles
Amélioration des vues et de notre formulaire
11:12

Code source de la vidéo précédente.

Version texte: Amélioration des vues et de notre formulaire
01:08
+
Ajout de photos pour les annonces
11 Lectures 35:51

Objectifs et résultat de la section.

Qu'allons nous réaliser dans cette section?
00:52

Création du model Photos
02:51

Code source de la vidéo précédente.

Version texte: Création du model Photos
00:22

Dans cette session, vous allez modifier le contrôleur de création d'annonces pour ajouter des photos en même temps. Vous saurez:

  • Créer une boucle avec les photos ajoutées et les créer une à une dans la table Photos
  • Créer une méthode pour autoriser la modification d'une annonce seulement par son propriétaire
Modification de notre controller Room
05:10

Code source de la vidéo précédente.

Version texte: Modification de notre controller Room
00:38

Dans cette session, vous allez créer le visuel de l'ajout et l'affichage des photos dans notre formulaire.
Vous saurez:
  • Ajouter un bouton d'ajout photos sur notre formulaire de création d'annonce
  • Afficher les photos ajoutées sur notre formulaire de modification d'annonce
Création des vues Photo
07:13

Code source de la vidéo précédente.

Version texte: Création des vues Photo
00:40

Dans cette session, vous allez ajouter la possibilité de supprimer une photo.
Vous saurez :
  • Utiliser la fonction destroy pour supprimer une photo
  • Réactualiser les photos présentes
  • Utiliser javascript pour rendre la suppression immédiate
Suppression d'une ou des photo(s)
07:31

Code source de la vidéo précédente.

Version texte: Suppression d'une ou des photo(s)
00:37

Dans cette session, vous allez prendre à utiliser un cloud externe pour enregistrer les photos de votre plateforme.

Ajout des photos sur un cloud externe: Cloudinary
09:18

Code source de la vidéo précédente.

Version texte: Ajout des photos sur un cloud externe
00:38
+
Création de nos vues pour les pages d'annonces
11 Lectures 53:58

Objectifs et résultat de cette section.

Qu'allons nous réaliser dans cette section?
00:53

Dans cette session, vous allez créer une page index listant toutes vos annonces. Vous saurez:
  • Utiliser la variable @rooms de notre méthode index récupérant les annonces de current_user
  • Faire une boucle sur @rooms pour afficher chaque annonce
  • Afficher en miniature la première photo de l'annonce et son titre
Création de la page d’index pour mes annonces de logement
05:52

Code source de la vidéo précédente.

Version texte: Création de la page d’index pour mes annonces de logement
00:31

Dans cette session, vous allez afficher les détails de l'annonce à l'aide des attributs de la table Room.

Page de détail d’un logement
23:18

Code source de la vidéo précédente.

Version texte: Page de détail d’un logement
01:15

Dans cette session, vous allez adapter le code de bootstrap carousel pour afficher les photos de nos annonces.

Création de l'affichage du panel de photos
06:51

Code source de la vidéo précédente.

Version texte: Création de l'affichage du panel de photos
00:34

Dans cette session, vous allez apprendre à vous servir de l'API de google maps et de l'adapter à notre plateforme/projet.

Google maps API pour localiser les logements
08:35

Code source de la vidéo précédente.

Version texte: Google maps API pour localiser les logements
00:34

Dans cette session, vous allez recommander les logements situés à moins de 3 km et les afficher. Vous allez apprendre à utiliser la fonction nearbys() en miles et limit() pour limiter le nombre de logements.

Proposition des logements à proximité
05:09

Code source de la vidéo précédente.

Version texte: Proposition des logements à proximité
00:25
+
Réservations
20 Lectures 01:43:01

Objectifs et résultat de cette section

Preview 01:54

Dans cette session, vous allez créer le model Reservation lié aux tables User et Room

Création du model Reservation
02:49

Code source de la vidéo précédente.

Version texte: Création du model Reservation
00:18

Dans cette session, vous allez créer le contrôleur Reservation avec sa méthode create.

Création du controller Reservation
03:23

Code source de la vidéo précédente.

Version texte: Création du controller Reservation
00:16

Dans cette session, vous allez créer le visuel pour réserver un logement.

Création des vues pour la réservation
04:45

Code source de la vidéo précédente.

Version texte: Création des vues pour la réservation
00:22

Dans cette session, vous allez apprendre à utiliser Datepicker.

Jquery Datepicker
06:33

Code source de la précédente vidéo.

Version texte: Jquery Datepicker
00:24

Dans cette session, vous allez copier le formulaire de réservation du vrai Airbnb.

Amélioration de notre formulaire de réservation
10:07

Code source de la précédente vidéo.

Version texte: Amélioration de notre formulaire de réservation
00:51

Dans cette session, vous allez améliorer le module de réservation avec javascript. Vous saurez:
  • Charger les dates déjà bookées et les rendre non sélectionnables
  • Modifier les dates min et max de nos 2 calendriers
AJAX pour notre date d'arrivée
18:25

Dans cette session, vous allez continuer à améliorer notre formulaire de réservation. Vous saurez:
  • Créer une méthode pour interdire une réservation entre 2 dates s'il y a déjà une réservation au milieu
  • Notifier l'utilisateur si les dates ne sont pas disponibles
  • Notifier l'utilisateur dans le cas contraire du nombre de nuit et du prix total de la réservation
  • Enregistrer le prix total dans la table Reservation
AJAX pour notre date de départ
25:09

Code source des 2 vidéos précédentes.

Version texte des 2 précédentes sessions AJAX
01:20

Dans cette session, vous allez créer une page listant tous les voyages (réservations réalisées), dans le même style que la page index.

Création page Mes Voyages
11:17

Code source de la vidéo précédente.

Version texte: Création page Mes Voyages
00:40

Dans cette session, vous allez créer une page listant tous les réservations réalisées sur vos logements, dans le même style que la page index et mes voyages.

Création page Mes Réservations
08:37

Code source de la précédente vidéo.

Version texte: Création page Mes Réservations
00:41

Amélioration de notre page Utilisateur
04:38

Version texte: Amélioration de notre page Utilisateur
00:30
+
Système de notation
11 Lectures 46:42

Objectifs et résultat de cette section.

Qu'allons nous réaliser dans cette session?
01:24

Dans cette session, vous allez créer le model Review qui contiendra tous les commentaires et notations de la plateforme.

Création model Review
03:24

Code source de la vidéo précédente.

Version texte: Création model Review
00:22

Dans cette session, vous allez créer le contrôleur Review. Vous saurez:

  • Ajouter les méthodes de création et suppression de commentaires
  • Ajouter à la méthode show du contrôleur Room une variable permettant de vérifier si l'utilisateur a déjà réservé une annonce pour autoriser ou non à évaluer le logement
  • Vérifier à l'aider d'une méthode que l'utilisateur n'a pas déjà voté
Création controller Review
07:15

Version texte: Création controller Review
00:38

Dans cette session, vous allez créer les vues pour rédiger et afficher des commentaires avec une note.

Création des vues pour nos reviews
11:32

Code source de la vidéo précédente.

Version texte: Création des vues pour nos reviews
00:59

Dans cette session, vous allez apprendre à ajouter les étoiles de notation.

Ajout du système d'étoiles de notation
07:57

Code source de la vidéo précédente.

Version texte: Ajout du système d'étoiles de notation
00:33

Dans cette session, vous allez finaliser cette section en améliorant le système de notation et afficher les évaluations sur les pages utilisateur.

Amélioration de notre système de notation
11:58

Code source de la vidéo précédente.

Version texte: Amélioration de notre système de notation
00:38
+
Module de recherche
10 Lectures 01:09:06

Objectifs et résultat de la section.

Preview 00:42

Dans cette session, vous allez créer une fonction search permettant de sélectionner les résultats en fonction des critères de recherche et de la disponibilité du logement.

Notre fonction de recherche Search
13:26

Code source de la vidéo précédente.

version texte: Notre fonction de recherche
00:35

Dans cette session, vous allez enfin modifier la home page. Vous saurez:
  • Proposer la proposition de valeur
  • Ajouter un bandeau de recherche (lieu, dates...)
  • Ajouter des propositions de logements à l'aide de la fonction RANDOM()
Home page
14:52

Code source de la vidéo précédente.

Version texte: Home page
01:02

Dans cette session, vous allez entièrement créer notre page de recherche (avec tous les paramètres) et ajouter l'affichage des résultats.

Notre page de recherche
20:44

Code source de la vidéo précédente.

Version texte: Notre page de recherche
01:41

Dans cette session, vous allez afficher sur carte Google Maps les emplacements de tous les résultats de l'annonce. Vous saurez:
  • Placer un marqueur sur la carte pour chaque localisation
  • Toujours afficher la map à l'écran
Google Maps
13:11

Code source de la vidéo précédente.

Version texte: Google Maps
01:07

Validation de notre module de recherche.

Test et démonstration de notre module de recherche
01:45
5 More Sections
About the Instructor
Rod Paris
4.5 Average rating
48 Reviews
449 Students
2 Courses
Entrepreneur back-end dev et data scientist

Hey, je m'appelle Rod Paris et je suis un entrepreneur passionné de développement web et de data science. 

J'ai déjà investi beaucoup de mon temps à me former de façon autodidacte. Mon rêve c'est de vous former vous et des milliers de personnes. Et vous inspirer à créer quelque chose qui a du sens pour vous. Car c'est en étant passionné que l'on réussit le mieux dans un domaine, et que l'on est le plus heureux dans notre travail au quotidien.

Si j'ai pu apprendre à coder, pourquoi pas vous? Et justement, mes cours vont tous combiner toutes les compétences à avoir en développement web et en data science, en les appliquant à des cas concrets issus du monde réel.

J'ai hâte de vous retrouver dans mes cours et de partager mes passions avec vous!

Rod