Défis

Une startup californienne spécialisée dans les solutions immobilières a contacté Elinext avec l'idée de créer une application permettant aux agents immobiliers de présenter les caractéristiques, les services et les commodités des bâtiments aux potentiels acheteurs d'appartements. Les principales exigences comprenaient :

• Accès en un clic à tous les services et commodités.
• Un CMS personnalisé ou tableau de bord administratif pour mettre à jour facilement les images des appartements, les informations textuelles et les statuts.
• Une interface utilisateur (UI) et une expérience utilisateur (UX) intuitives.
• Vue à 360 degrés du bâtiment.

1. Application iOS

L'idée générale de l'application est la suivante: lorsque le représentant parle au client dans le bureau et interagit avec l'application, le client doit voir tous les changements sur l'écran de télévision installé dans la même pièce (l'image sur l'écran de télévision ne reflète pas certains boutons administratifs pour que le client reste concentré sur le contenu).

Sur cette base, nous avons créé 2 applications:

A. Visite du Bâtiment

La première application est conçue pour les représentants commerciaux.

L'application est faite pour iPad et connectée à AppleTV. Nous avons finalement décidé de:

• Utiliser des images au lieu de modèles 3D pour éviter l'effet de "gel" lors de la rotation du bâtiment à 360 degrés sur la télévision.
• Ajouter la carte avec des points d'intérêt (POI) autour du bâtiment, tous divisés en catégories.
• Gérer les catégories, les images associées et les métadonnées côté serveur.
• Appliquer des filtres pour permettre à un utilisateur de trouver facilement une pièce qui répond à ses besoins et voir son statut: vendu ou disponible.
• Générer du matériel promotionnel en PDF à la volée. N'importe quelle pièce peut être ajoutée à la brochure et envoyée au client comme suivi de la réunion.
• Gérer l'application depuis le panneau d'administration et mettre à jour automatiquement les nouveaux matériaux à chaque nouveau démarrage de l'application.

B. Zone de Résidence

Cette application est également destinée au bureau de vente de l'agence immobilière et est basée sur la même plateforme que la visite du bâtiment avec quelques changements dans l'UI:

• Le tri par prix a été remplacé par le tri par numéro de maison.
• L'application peut facilement montrer la position de votre maison sur le plan par des marqueurs sur la page principale.

2. Synchronisation iPad + TV

L'un des principaux problèmes était la synchronisation de l'application avec AppleTV.

L'application n'utilisait pas la duplication TV car les écrans TV et iPad avaient des résolutions d'écran différentes. Il était donc possible de démarrer l'application iPad en premier, sélectionner l'écran et constater la désynchronisation du contenu sur la télévision.

La solution au problème était de faire en sorte que l'application surveille les états des processus lancés. Si un nouveau processus commence, tous les autres processus en cours dans l'application passent à l'état par défaut.

3. Images à 360 degrés

La caractéristique essentielle de l'application est les vues à 360 degrés des bâtiments qui peuvent être rendues à la volée sur les écrans iPad et Full HD TV.

Comme les images étaient stockées sur le serveur en haute résolution, elles étaient trop grandes pour être rendues instantanément. En conséquence, toutes les images étaient mises en cache dans la RAM de l'appareil.

L'équipe de développement d'Elinext a décidé d'optimiser toutes les images pour l'appareil spécifique côté client afin qu'elles soient maintenant disponibles dans la plus haute qualité possible. Cela a conduit à ce que l'application ne gaspille pas les ressources de l'appareil, quelle que soit la taille des images.

4. Panneau d'administration Web

Le prochain défi était de décider de la gestion du contenu de l'application depuis les côtés de l'administrateur et de l'utilisateur. Nous avons appliqué les règles suivantes :

1. Le panneau d'administration Web peut être intégré au site web de l'agence immobilière. Seul l'administrateur peut se connecter à l'application et créer un nouvel utilisateur.
2. L'utilisateur passe au panneau d'édition des bâtiments où il peut créer de nouveaux bâtiments et mettre à jour ou supprimer les existants. Il peut choisir entre deux types de bâtiments "single" ou "area".
3. a) Type de bâtiment unique:

• L'utilisateur peut définir les propriétés: titre, description, localisation (latitude et longitude), ajouter des photos dans la galerie et éditer un modèle 3D (une séquence d'images)
• L'utilisateur peut ajouter un ou plusieurs étages au bâtiment en sélectionnant un nombre d'étages et le type de plan d'étage. Attacher des unités à l'étage en les caractérisant avec la description, les images, etc. est également possible.
• Sur la page principale, l'utilisateur peut créer un ou plusieurs quartiers et spécifier leur emplacement sur la carte.

b) Le type de bâtiment de zone a les mêmes caractéristiques que le panneau "bâtiment unique" mais:

• Il n'a pas d'équipements.
• Il n'a pas d'étages. Les unités sont attachées directement au bâtiment.

5. Backend

• Archivage des données

Le client a insisté pour stocker les images zip archive sur Amazon Web Services S3 et utiliser Elastic Beanstalk. Le duo visait à rendre le téléchargement des fichiers image très rapide, quelle que soit la charge du serveur. Le plan semblait bon à moins d'un léger problème : Elastic Beanstalk ne peut pas stocker de fichiers statiques car ils sont supprimés lors de la prochaine mise à jour de l'application.

La solution au problème est l'utilisation de la bibliothèque s3fs-fuse. Elle permet de monter un seau s3 comme un disque dur sur une instance ec2. Après chaque nouvelle mise à jour déployée, l'instance s3 bucket est connectée à l'instance et peut être accédée comme un système de fichiers Linux.

• Déploiement de la base de données

La base de données ne peut pas être stockée sur l'instance dans l'application en raison du problème de service de contenu statique dans Elastic Beanstalk. De plus, AWS ne fournit pas de SaaS (software as a service) comme Relational Database Services pour les bases de données SQL.

Les ingénieurs logiciels d'Elinext ont ajouté une instance pour MongoDB afin qu'elle permette désormais un dimensionnement et un contrôle faciles

Résultat

En conséquence, nous avons obtenu 2 applications pour les représentants commerciaux des agences immobilières qui leur permettent de présenter des propriétés et des commodités associées à leurs clients, avec la possibilité de projeter des vues à 360 degrés et des plans d'étage directement de l'iPad à AppleTV.