Une auto-complétion d'adresse sans service tiers, comme Mapbox ou Google Maps ? C'est possible !

Coucou par ici 😁,

Merci d'avoir cliqué sur cet article, j'espère qu'il vous plaira 😝.

Bon aujourd'hui, on va parler de formulaire d'adresse et de comment auto-compléter une adresse, ça semble être une bonne addition à LFMaps .

Vous êtes prêts ? Alors c'est parti !

Pourquoi cet article ?

Faire un freemium, c'est difficile.

Commençons par le début, ViteUneTable est désormais un freemium, pour diverses raisons dont j'ai parlé sur Twitter. Globalement, passer mon temps chez des restaurateurs, ce n'est pas mon truc.

Je préfère faire une version avec les fonctionnalités de base en gratuit, plutôt que de me prendre le chou à leur courir après, face à des solutions qui ont des gros commerciaux et tout et tout, de toute façon, je n'ai aucune chance.

Il m'est donc venu l'idée du freemium, mais un freemium, ce n'est pas si simple en fait...

Pour l'hébergement, ça, aucun problème, j'ai ma petite infra qui gérera très bien tout ça sans problème, par contre le problème que je rencontre, ce sont les API externes...

C'est d'ailleurs pour ça que LFMaps est sortie cet été 😁 (pour un autre projet en fait, on en reparlera)

Lors de l'inscription, je voulais que la saisie d'adresse du restaurant soit ultra simple... mais je ne voulais pas utiliser une API externe comme Google Maps ou encore Mapbox, car si ça arrive, alors je peux me prendre une facture violente dans la tête, et je préfère des coûts totalement prévisibles que des factures hallucinantes.

Un simple rendez-vous chez le coiffeur

Puis un jour, en sortant de chez le coiffeur, je devais ajouter un élément à mon calendrier, et mon calendrier c'est Hey Calendar .

Je me rends compte d'une chose, ils ont une auto-complétion d'adresse mais ça ne ressemble en rien à ce que je connais dans les résultats, ce n'est pas de l'API Google... 😛.

En rentrant chez moi, je me dis "Tiens, on va regarder un peu ce qui se passe, où partent les requêtes HTTP ?"

Et du coup, évidemment tout part sur leurs propres serveurs, donc ils ont en interne quelque chose qui leur permet de faire ça, sûrement basé sur un logiciel open source...

De là, je me suis dit qu'il fallait que je trouve quelque chose d'équivalent, et ça marche, c'est le gif que vous avez vu plus haut 😁.

Photon, pas foufou avec les adresses françaises...

Dans un premier temps, j'ai testé Photon, il propose une base de données mondiale mais il est possible de choisir uniquement un pays, dans mon cas, la France.

En ce qui me concerne, pour le faire tourner, j'ai simplement utilisé cette image Docker.

En ce qui concerne le docker-compose :

Ici, on ne télécharge que la France 😀, pour le reste du monde, il suffit de commenter la "region".

Le premier lancement va être lent, il va télécharger toutes les données nécessaires au fonctionnement, une fois que c'est fait.

Rendez-vous ici pour voir les requêtes à faire pour retrouver les adresses

Addok, le top pour la France ?

Après avoir testé Photon et avoir été déçu avec, j'ai tenté ma chance avec Addok

On ne va pas se mentir, c'est le jour et la nuit... Addok fonctionne beaucoup mieux pour les adresses françaises, c'est le gif que vous avez vu en début d'article.

Tout comme pour Photon, il y a un conteneur Docker pour Addok .

Un petit coup de docker-compose ? Allez, celui-là c'est celui que j'utilise en production, c'est cadeau.

Tout comme Photon, avant de fonctionner correctement, il faut qu'il télécharge les données, c'est à peu près 7 Go.

En ce qui concerne son utilisation, vous trouverez la documentation sur l'API ici .

Le petit bonus, le contrôleur Stimulus.

Bah oui hein... vous connaissez mon amour pour Hotwired, donc oui, j'ai mon petit contrôleur Stimulus.

Il n'est pas fou, et je me suis aidé de l'IA pour le faire, mais c'est une bonne base 😁.

Conclusion

Et voilà, maintenant vous pouvez auto-héberger votre auto-complétion d'adresse 🙂.

On se retrouve prochainement pour un prochain article, en attendant, très bonne journée 😁.