Apprenez à créer votre app mobile hybride (Android et iOS avec le même code)
Besoin de rapidement apprendre à développer une application mobile sous Android ou iOS ? En 6 heures, vous allez recréer un Tinder like permettant de ré-utiliser certains concepts ou morceaux de code pour votre propre application mobile.
Dans cette formation, je vais vous guider à travers toutes les étapes pour développer une application mobile type Tinder. Nous allons créer à partir de zéro toutes les fonctionnalités basiques de Tinder. Pas besoin d'être un as en HTML, CSS ou Javascript 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 toutes questions - demandes d'explications supplémentaires - accompagnement sur la réalisation de votre Tinder like.
Méthode d'apprentissage :
On n'apprend pas à coder avec de la théorie. Décidez ce que vous voulez construire et apprenez à le construire. Avoir un objectif final en tête vous guidera et chaque progrès réalisé vers cet objectif vous motivera. Vous rencontrerez des défis inattendus qui vous frustreront, mais c'est ainsi que vous apprendrez. C'est ce que j'appelle l'apprentissage en profondeur. Vous apprendrez donc à construire un projet fonctionnalité par fonctionnalité. Vous pourrez entrer dans les détails techniques vraiment plus tard, ainsi vous aurez un contexte pratique à appliquer à la théorie.
Technologies utilisées :
Pour la réalisation de ce clone Tinder nous allons utiliser 3 technologies principales :
- Ionic 1 (framework privilégié à Ionic 3)
- AngularJS 1.5 (avec la librairie AngularFire 2.0.2)
- Firebase > 4
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 (hybride). Même si nous n’utiliserons pas les dernières versions de ces technologies, l'approche et la philosophie vous aideront dans la réalisation d'un projet d'application mobile concret et hybride !
Formation par la pratique :
Le principe de cette formation est de reproduire pas à pas des lignes de code (chaque ligne de code est expliquée afin de comprendre ce que vous codez et le résultat de tel fonction ou concept sur votre application mobile). Cela ne fera pas de vous un expert en développement web ou mobile mais cela vous donnera l'envie de creuser le sujet et d'aller chercher des réponses à vos questions.
Alors foncez !
- Près de 6 heures de formation vidéo
- Accès au code source
- Une communauté pour s'entraider
MAJ mai 2018: Suite à la RGPD, Facebook a restreint les informations qu'ont peut récupérer depuis l'API Graph Facebook, il n'est donc plus possible de récupérer la description, mais heureusement on peut toujours obtenir prénom, nom, date de naissance, lieu et les photos de profil. Quoiqu'il arrive le code et la logique utilisés dans cette formation sont tout à fait adaptable à de nombreux projets donc le problème de la RGPD n'en est pas réellement un.
N'hésitez plus et rejoignez cette formation au plus vite, vous ne le regretterez pas, à bientôt :)
Table des matières de cette formation AngularJS (durée : 5h41m)
-
Introduction aux technologies utilisées dans la formation
- 1.1 Qu'allons-nous faire dans cette formation? gratuit 00:03:03
- 1.2 Environnement de développement gratuit 00:01:07
- 1.3 Installation de Node.js gratuit 00:02:06
- 1.4 Installation de Ionic gratuit 00:04:34
- 1.5 présentation de Firebase gratuit 00:02:27
- 1.6 Installation et présentation de Sublime Text gratuit 00:04:54
-
Mise en place du projet
- 2.1 Qu'allons-nous faire dans cette section? gratuit 00:00:43
- 2.2 Création de l'application gratuit 00:05:55
- 2.3 Modification du side menu 00:10:42
- 2.4 Customisation du side menu 00:05:31
- 2.5 Création de la page de login 00:08:13
-
Authentification avec Facebook
- 3.1 Qu'allons-nous faire dans cette section? 00:00:53
- 3.2 Création de l'App Facebook 00:04:42
- 3.3 Configuration Firebase 00:05:48
- 3.4 Mise en place de l'authentification via Facebook 00:15:04
-
Sauvegarde des utilisateurs dans la base de données Firebase
- 4.1 Qu'allons-nous faire dans cette section? 00:00:51
- 4.2 Structure de notre base de données 00:03:44
- 4.3 Sauvegarde d'un utilisateur dans Firebase 00:14:10
-
Extraire des informations supplémentaires depuis facebook
- 5.1 Qu'allons-nous faire dans cette section? 00:01:28
- 5.2 Récupérer toutes les données depuis l'API Graph de Facebook 00:17:05
- 5.3 Création de la page de profil 00:17:17
- 5.4 Design Tinder like 00:04:49
-
Création de la page des réglages
- 6.1 Qu'allons-nous faire dans cette section? 00:00:46
- 6.2 Design de la page des réglages 00:06:08
- 6.3 Création du controller pour les paramètres 00:11:51
- 6.4 Stocker des réglages en local 00:08:35
-
Lister les profils à partir des paramètres de réglage
- 7.1 Qu'allons-nous faire dans cette section? 00:00:53
- 7.2 Ajout des utilisateurs Test 00:01:10
- 7.3 Affichage de la liste de tous les profils sur la home page 00:08:21
- 7.4 Filtrer les profils en fonction des paramètres de réglage 00:13:11
-
Création des slidings cards & Ajout des Likes
- 8.1 Qu'allons-nous faire dans cette section? 00:00:32
- 8.2 Création des fiches profil ou sliding cards 00:13:21
- 8.3 Amélioration de nos sliding cards 00:10:18
- 8.4 Création des boutons Like et Dislike 00:08:21
- 8.5 Ajout attribut Likes dans Firebase 00:13:27
- 8.6 Actualisation automatique de la liste des profils 00:14:38
-
Création des Matchs
- 9.1 Qu'allons-nous faire dans cette section? 00:00:44
- 9.2 Détection d'un Match entre 2 utilisateurs 00:09:21
- 9.3 Lister tous les Matchs 00:12:15
- 9.4 Supprimer un Match ou Unmatch 00:06:11
-
Affichage de la page de détails d'un profil
- 10.1 Qu'allons-nous faire dans cette section? 00:00:27
- 10.2 Afficher le Modal Infos 00:07:35
- 10.3 Afficher les détails d'un profil 00:03:28
-
Mise en place d'un système de messagerie Chat
- 11.1 Qu'allons-nous faire dans cette section? 00:01:09
- 11.2 Création du Modal pour les messages 00:04:50
- 11.3 Style des messages dans le Chat 00:06:03
- 11.4 Amélioration du style des messages 00:07:42
- 11.5 Création de la fonction d'envoi de messages 00:12:30
- 11.6 Mise à jour du modal Message 00:13:06
- 11.7 Afficher les statuts "En Ligne" et "Hors Ligne" 00:09:16
- Fichiers sourcestélécharger
- Certificat
Formateur : Rod Paris
-
Avec quelle version de logiciel ce tuto est-il compatible ?AngularJS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?- Une MAJ par rapport à l'API facebook suite à la RGPD - Quelques explications supplémentaires si besoin - Code source par chapitre (de 2 à 11)
