Running Photos Finder : Développé en 2j avec Apiloop
On nous demande souvent s’il y a des projets qui ont été développés avec Apiloop pour voir ce que l’on peut faire avec.
Au lieu de faire un vulgaire “Hello World” ou encore une “TODO app” (les initiés comprendront), nous avons décidé de résoudre un vrai problème pour montrer que la plateforme permet de faire des applications de la vraie vie.
Quel problème ?
S’il y a des coureurs parmi vous, vous savez qu’après chaque course, un flot de photos est déposé sur les réseaux sociaux, souvent de très bonne qualité car prises par des photographes professionnels. Le problème est qu’il y en a trop et qu’il est difficile de retrouver des photos de vous ou de vos amis.
Quelle solution ?
Proposer une plateforme qui s’interface avec les albums photos Facebook et qui permet de tagger de manière collaborative des photos avec le numéro de dossard. Ainsi, avec une simple recherche du numéro, on retrouve les photos de sa course.
Entrons à présent dans le vif du sujet en expliquant les Comment et Pourquoi.
Le modèle de données
Comme le montre l’illustration, le modèle est très simple. Nous avons :
- User : les utilisateurs qui se connectent via Facebook Connect pour interagir avec les photos (tagger/rechercher)
- Event : un événement correspondant à une course précise avec un nom, une description, une belle photo d’illustration, une date et une localisation
- Album : un album photo posté sur Facebook lié à un événement
- Picture : une photo liée à un album comportant un titre et bien évidemment une liste de dossards qui y figurent
Le modèle de données d’une application est souvent difficile à trouver mais une fois qu’on l’a sous les yeux, ça paraît tout de suite plus évident.
Oui c’est exactement comme les solutions aux problèmes de maths à l’école :)
Génération du code
Grâce à Apiloop, nous avons pu générer très rapidement la structure de base du site web (AngularJS, Bootstrap).
Développement
À partir de là, nous avons juste eu à récupérer le code via Git et y apporter les modifications nécessaires pour implémenter nos différents écrans :
- Homepage avec un gros texte et la liste des événements du plus récent au plus ancien
- Liste des albums d’un événement
- Liste des photos d’un album avec un champ de recherche
- Une photo avec un formulaire pour tagger les dossards que l’on y voit
Concrètement, l’implémentation de ces écrans est très simplifiée car le backend Apiloop est déjà prêt pour permettre de lister des éléments, d’en charger un précis, de rechercher des éléments, etc.
Grâce au SDK Angular Apiloop, il suffit simplement de faire un peu de JavaScript, un peu de HTML et un zeste de CSS pour rendre un peu plus beau.
Collaboration
Sur ce projet il n’y avait qu’un seul développeur. Mais Apiloop permet évidemment de travailler à plusieurs sur un même projet. Par rapport à nos différents écrans, nous aurions pu créer des missions et demander à des développeurs de la communauté de s’en occuper.
Déploiement
Naturellement, il ne s’agit pas de développer le site web en mode tunnel et une fois terminé le mettre sur le serveur pour le tester. Ce sont des choses qu’il faut faire dès le départ pour s’assurer que toute la chaîne est validée. Cela permet de fournir un travail de meilleure qualité et d’assurer une meilleure communication sur un projet de plus grande envergure.
Encore une fois, Apiloop permet de se faciliter grandement le travail grâce à deux boutons très simples permettant d’envoyer le site internet dans le cloud pour le tester et le faire tester.
Une fois que tout est validé, il suffit de lier le nom de domaine et envoyer en production :
Et TADA ! Le site devient accessible via votre propre nom de domaine http://www.runningphotosfinder.com.
Et si on veut apporter des modifications ?
Aucun souci, Apiloop facilite également tout cela. Il est facile de poster une mission pour qu’un développeur tiers travaille sur l’application avec toutes les relecture de code et le suivi qualité nécessaires. Cela peut également être fait par vous ou par un développeur travaillant pour vous.
Pour implémenter un nouvel écran :
- Modification du modèle de données si besoin (ajout d’une entité par exemple)
- Implémentation de l’écran en JavaScript/HTML/CSS
- Relecture de code et contrôle qualité par nos soins
- Envoi en pré-production
- Validation que le travail répond bien à la mission par vos soins
- Envoi en production
Avec ce process, en quelques jours, voire à peine quelques heures, vous avez une nouvelle fonctionnalité prête à être utilisée par vos utilisateurs !
Et si on veut une application mobile ?
Oui vous l’avez vu le petit bouton sur une des captures d’écran :) C’est très simple : le modèle de données reste le même, les données restent les mêmes. Il n’y a que les écrans à changer pour vraiment donner un aspect d’application mobile, suivre le même process de développement et envoyer votre application sur l’AppStore et/ou le PlayStore.
Considérations “un peu” plus techniques
Pour les plus courageux, voici des aspects un peu plus techniques qui peuvent vous intéresser :
- Facebook : le réseau social propose tout un panel d’APIs permettant d’interagir avec les albums, les photos, etc. C’est une simple API REST.
- Recherche : nous sommes interfacés directement avec Algolia. Comme vous pouvez le voir sur la capture d’écran du modèle de données, dès qu’une petite loupe est adossée à une entité, cela signifie qu’elle est “recherchable”.
- Cloud : les versions de pré-production et de production sont envoyées sur le cloud Amazon (S3 pour le stockage, Route 53 pour le nom de domaine). L’API Apiloop est également hébergée sur AWS.
- Déploiement : nous utilisons ce bon vieux Jenkins pour construire et déployer les applications.
Le mot de la fin
N’hésitez pas à tester gratuitement : https://www.apiloop.io. On reste à votre disposition pour toute question.
Chafik