Catégorie : Ruby on Rails

Dans cet article, nous allons vous montrer comment ajouter facilement une barre de recherche performante à votre application Ruby on Rails en utilisant la gem « pg_search ». La recherche est un élément essentiel pour offrir une expérience utilisateur optimale, en permettant à vos visiteurs de trouver rapidement et facilement l’information qu’ils recherchent sur votre site. La gem « pg_search » s’appuie sur la puissance du moteur de recherche PostgreSQL pour faciliter l’implémentation de fonctionnalités de recherche avancées et flexibles au sein de votre application Rails. Cette gem offre un ensemble d’options de configuration et de personnalisation qui permettent d’adapter la recherche aux besoins spécifiques de votre projet. Le principe de la recherche dans une application Rails repose sur l’indexation et la consultation des données stockées dans la base de données. La gem « pg_search » simplifie ce processus en intégrant directement la fonction de recherche au niveau du modèle de votre application, ce qui permet d’effectuer des requêtes de recherche complexes sans avoir à écrire manuellement des requêtes SQL. Le fonctionnement de « pg_search » est assez simple. Après avoir installé et configuré la gem, vous pourrez créer un « scope » de recherche dans le modèle concerné. Ce « scope » permettra d’exécuter des recherches sur un ou plusieurs champs de votre modèle en fonction des mots-clés saisis par l’utilisateur dans la barre de recherche. Enfin, vous pourrez personnaliser le comportement de la recherche en fonction de vos besoins, en choisissant parmi les différentes options et méthodes de recherche disponibles (recherche en texte intégral, trigrammes, etc.). Dans la suite de cet article, nous vous guiderons pas à pas à travers le processus d’installation et de configuration de la gem « pg_search », ainsi que la mise en place d’une barre de recherche fonctionnelle dans votre application Rails. Restez avec nous pour découvrir comment améliorer l’expérience utilisateur de votre site en intégrant une barre de recherche performante et facile à utiliser. 1 – Installer pg_search Pour commencer, ajoutez la gem « pg_search » à votre fichier Gemfile. Ouvrez le fichier Gemfile de votre application Rails et ajoutez la ligne suivante : gem ‘pg_search’ Ensuite, exécutez la commande bundle install pour installer la gem et ses dépendances. 2 – Coder le modèle pour faire fonctionner pg_search Supposons que vous ayez un modèle Article et que vous souhaitiez effectuer des recherches sur les champs title et content. Voici comment procéder : Ouvrez le fichier article.rb (ou le modèle correspondant) et ajoutez la ligne suivante en haut du fichier : Ensuite, ajoutez un « scope » de recherche en utilisant la méthode « pg_search_scope ». Par exemple : et de nommer une fonction de recherche personnalisée pour un modèle spécifique de votre application Rails. La méthode « pg_search_scope » est utilisée pour créer ce « scope » de recherche. En utilisant la méthode « pg_search_scope », vous pouvez définir un nom pour votre fonction de recherche (par exemple, search_by_title_and_content) et préciser sur quels champs du modèle la recherche doit être effectuée. La méthode prend également en compte les différentes options et stratégies de recherche que vous souhaitez utiliser, telles que la recherche en texte intégral, les trigrammes, ou la pondération des champs. 3 – Tester la méthode en console (rails c) de pg_search Pour tester la méthode de recherche, ouvrez la console Rails en exécutant la commande suivante dans votre terminal : Une fois dans la console, vous pouvez tester la méthode de recherche. Par exemple, pour rechercher tous les articles contenant le mot « Rails », exécutez la commande suivante : Vérifiez les résultats en affichant les articles trouvés : 4 – Créer le formulaire de recherche dans la vue Ouvrez le fichier de la vue où vous souhaitez ajouter le formulaire de recherche (par exemple, app/views/articles/index.html.erb). Ajoutez le code suivant pour créer un formulaire de recherche simple : 5 – Adapter le contrôleur pour la recherche Enfin, modifiez le contrôleur pour prendre en charge la recherche. Ouvrez le fichier articles_controller.rb (ou le contrôleur correspondant) et modifiez l’action index pour inclure la recherche : Votre barre de recherche est maintenant fonctionnel 💪🙈 En conclusion, cet article vous a guidé à travers les étapes essentielles pour intégrer une barre de recherche performante dans votre application Rails en utilisant la gem « pg_search ». Nous avons couvert les aspects importants de l’installation de la gem, de la configuration du modèle, du test de la méthode de recherche en console, de la création du formulaire de recherche dans la vue et de l’adaptation du contrôleur pour gérer la recherche. En suivant ces 5 points clés, vous pouvez facilement ajouter une fonctionnalité de recherche robuste et flexible à votre application Rails, permettant à vos utilisateurs de trouver rapidement et efficacement les informations qu’ils recherchent. Cet article vous fournit une base solide pour commencer à travailler avec « pg_search », mais n’hésitez pas à explorer davantage les options et les fonctionnalités offertes par cette gem. Vous pourriez approfondir les différentes stratégies de recherche, personnaliser la pondération des champs, paginer les résultats, styliser la barre de recherche et optimiser la performance de la recherche pour offrir la meilleure expérience utilisateur possible. En fin de compte, la mise en place d’une barre de recherche efficace et conviviale est un atout précieux pour votre application Rails. Nous espérons que cet article vous aidera à tirer le meilleur parti de la gem « pg_search » et à améliorer l’expérience utilisateur de votre site. Ressources : Lien du repo : https://github.com/alexisjps/search-live-demo Lien de la documentation : https://github.com/Casecommons/pg_search

Qu’est ce que Devise ? Vous utilisez Ruby on Rails 7 pour votre application web et vous souhaitez mettre en place une authentification sécurisée pour vos utilisateurs ? Devise est une gemme très populaire qui permet de gérer facilement l’authentification et la gestion des utilisateurs dans votre application. Dans cet article, nous allons vous montrer comment configurer Devise pour qu’il soit compatible avec Rails 7 et ainsi offrir à vos utilisateurs une expérience de connexion fluide et sécurisée. Suivez notre guide pas-à-pas pour une installation rapide et efficace de Devise sur votre application Rails 7. Application rails basique Pour créer notre application afin de faire un test sur l’authentification, je suis parti sur un template basique de rails : Pour les élèves du wagon vous avez un template prédéfini pour vous : (accessible que si vous êtes inscrit à la formation de développement web). Configurer notre application avant l’installation de devise Nous allons dans un premier temps, lancer la compilation de nos gems, lancer la création de notre base de donnée. Pour cela lancer dans le terminale : Installer devise Premièrement nous allons aller dans le gemfile, et ajouter la ligne de code suivante : Puis nous allons lancer l’installation des gems sur notre application rails. Pour cela nous connaissons la commande : Configuration automatiquement devise Pour lancer la configuration par défaut de devise, il nous suffit de lancer la commande suivante dans le terminale : Il nous suffit maintenant de suivre les 4 étapes données par devise : Vérifier que votre fichier developement.rb contient bien : (sinon l’ajouter manuellement) Ajouter la ligne de configuration pour la production : Rendez-vous dans le fichier application.html.erb et les ajouter dans le body Adapter le controller Pour commencer nous allons modifier le controller application en ajoutant cette ligne de code : Configurer les views par défaut de devise (automatiquement) Afin de générer automatiquement les views de devise, nous devons lancer la commande : Dernière étape, ajouter le model user à votre application Pour ajouter la table User afin que devise puisse fonctionner sur votre application rails, vous devez lancer la commande : Important !! Activer les turbos devise sur rails 7 Dans le fichier : config/initializers/devise.rb, décommenter le code ci-dessous : Il faudra d’autant plus modifier la ligne config.sign_out_via = :delete par : Vérifier que Devise est bien installé sur votre application Pour vérifier que la configuration de devise s’est bien déroulée, je vous invite à tester vos routes : localhost:3000/users/sign_in ainsi que la route localhost:3000/users/sign_up Pour aller plus loin (optionnel) Devise est un outil très puissant permettant également d’autoriser ou non l’accès à vos pages en étant connecté ou non. Pour n’autoriser que les utilisateurs connectés sur votre application. Vous devrez ainsi, vous rendre dans le fichier ApplicationController et ajouter cette ligne de code : Autoriser certaine page de votre application rails sans connection Il est très commun de trouver sur un site web, la page d’accueil (home page), libre d’accès sans devoir vous connecter. Pour cela il faudra ajouter une autorisation à chaque page que vous souhaitez rendre disponible à vos utilisateurs non connecté. Afin de réaliser cela, ajouter dans le controller concernée (pour notre exemple, la page d’accueil) : Comme l’indique l’image nous avons spécifier à notre controller pages, d’exclure la vérification de l’authentification d’un utilisateur via devise uniquement pour la méthode et le fichier index (soit notre page d’accueil). Vous pouvez bien sûr inclure plus de méthode et ainsi ajouter cette ligne sur les contrôleurs de votre choix. Ajouter des champs personnalisés sur notre registration formulaire pour user Afin de pouvoir ajouter des données à notre table user, nous allons devoir faire une migration afin d’ajouter par exemple le champs name ou prénom pour nos utilisateurs. Pour cela nous devons lancé la commande : Dans notre fichier de migration écrire : Pour venir incrémenter notre schema.rb nous devons lancer un rails db:migrate Adapter notre controller pour autoriser la soumission de nos champs personnalisés Afin de pouvoir accepter les params prénom dans notre application, nous devons ajouter une méthode dans notre controller application en autorisant tous les champs de notre table users : Conclusion En conclusion, l’installation de Devise sur Rails 7 est une tâche relativement simple et rapide qui peut grandement faciliter la gestion des utilisateurs dans votre application web. Avec les instructions étape par étape fournies dans cet article, vous devriez être en mesure d’installer Devise avec succès et de l’intégrer à votre application en un rien de temps. En utilisant Devise, vous pouvez offrir à vos utilisateurs une authentification sécurisée et personnalisable, ainsi qu’un ensemble d’outils de gestion de compte pour améliorer l’expérience utilisateur globale. Lien du repo github concerné : https://github.com/alexisjps/demo-device-importmap-rails-7

Flatpickr est une bibliothèque JavaScript légère et flexible qui permet de sélectionner des dates et heures à l’aide d’un calendrier. Elle est facile à utiliser et s’intègre parfaitement dans les projets Rails. Avec la nouvelle fonctionnalité d’importmap dans Rails 7, l’installation de Flatpickr est plus facile que jamais. Dans cet article, nous allons vous montrer comment installer Flatpickr sur Rails 7 avec importmap en quelques étapes simples. Que vous soyez un développeur débutant ou expérimenté, vous apprendrez comment utiliser cette bibliothèque pour améliorer l’expérience utilisateur de votre application Rails. Avant de commencer j’ai lancé un rails new contenant ce template : Installer Flatpickr Première étape : (installer la gem flatpickr) Dans un premier temps nous allons devoir ajouter la librairie flatpickr dans notre importmap. Pour cela rendez-vous dans le terminale, puis lancer la commande : Seconde étape : ajouter la librairie css de flatpickr Pour pouvoir utiliser le style de notre calendrier flatpickr, nous allons devoir inclure le lien cdn pour le stylesheet. Pour cela nous allons copier / coller cette ligne de code dans notre application.html.erb Troisième étape : générer un controller Stimulus Dans cette étape nous allons devoir générer un controller stimulus afin de coder le javascript. Pour cela, lancer la commande : Une fois le controller généré, nous allons ajouté dans notre fichier la librairie que nous avons importé sur importmap. Ajouté en seconde ligne : Coder notre function javascript Pour finir sur le javascript, dans la méthode connect, ajouté la ligne suivante : Modifier notre formulaire pour accepter le format string Afin de finir notre installation, rendez-vous sur votre formulaire new, afin de convertir le champs date en tant que string. Puis nous devons ajouter le controller stimulus précédemment créé. Pour cela nous allons ajouter sur la ligne f.input :date ces données : Conclusion Si vous lisez ce texte, c’est que votre installation de flatpickr a bien fonctionné ! Nous avons vu ensemble comment styliser notre formulaire ayant un champs de type date sur rails 7 avec importmap. Lien du repo Github : https://github.com/alexisjps/javascript-in-rails

La mise en production d’une application Rails peut être un processus complexe, mais grâce à la plateforme cloud Heroku, ce processus peut être simplifié. Heroku offre une gamme d’outils et de fonctionnalités pour déployer et gérer des applications web Ruby on Rails. Dans cet article, nous explorerons les commandes Heroku pour Rails qui sont essentielles pour la mise en production d’une application. Nous couvrirons les commandes de base, comme la création d’une nouvelle application, la gestion de la base de données, le déploiement de l’application et la configuration des variables d’environnement. Nous examinerons également comment préparer l’application pour le déploiement en production, y compris la compilation des actifs et la migration de la base de données. Si vous cherchez à déployer une application Rails sur Heroku, cet article vous aidera à comprendre les étapes clés pour y parvenir. Les commandes heroku utiles pour rails Les commandes pour interagir avec la base de donnée de production Commandes pour pusher en production Commande de débug serveur Les commandes complémentaires (essentiels)

Un nom de domaine est similaire à une adresse postale. Il est important pour votre application rails qu’elle soit accessible sur le nom de domaine de votre choix. Un nom de domaine peut pointer sur un serveur, qui un serveur contient vos fichiers sites ainsi que la base de donnée rattachée aux fichiers sites pour fonctionner. Dans ce tutoriel, nous allons voir ensemble comment faire pointer son nom de domaine sur un hébergeur qui prend en charge le ruby on rails (Heroku). Gérer votre propre nom de domaine sur heroku. Acheter votre nom de domaine Dans un premier temps, vous devez posséder votre propre nom de domaine pour le faire pointer sur heroku. Si vous n’en posséder pas, vous pouvez en obtenir un gratuitement si vous avez le student developper pack du wagon, via ce lien grâce à namesheap. Seule les extensions .me sont offertes. Si vous souhaitez acheter votre nom de domaine ailleurs ou que vous en posséder un chez un autre fournisseur de nom de domaine, pas de panique nous allons voir ensemble comment le faire pointer sur votre hébergement heroku. Déclarer votre nom de domaine à Heroku Une fois votre application déployée en production sur heroku, il vous est maintenant possible de déclarer votre nom de domaine afin d’obtenir l’enregistrement cname à modifier dans votre configuration dns de votre ndd (nom de domaine) pour le faire pointer sur heroku. Pour cela, rendez-vous sur votre compte heroku, cliquez sur le nom de votre application puis accédez à settings. Puis rendez-vous plus bas sur la page, dans add a domain. Renseignez votre nom de domaine afin d’obtenir votre enregistrement cname à mettre en place chez votre fournisseur de nom de domaine. Copiez le dns target puis rendez-vous chez votre fournisseur de nom de domaine. Nous allons maintenant cleaner toutes les données dns sauf les enregistrements de type cname. Avant : Après : Maintenant ajoutons notre enregistrement DNS comme indiqué par Heroku : Nice work ! Maintenant il vous suffit d’attendre une dizaine de minutes le temps que les dns se propagent. Tester notre application sur son nom de domaine Maintenant nous allons lancer notre app web en cliquant sur le lien fourni par heroku sur la page setting : Super il fonctionne ! Installer un certificat SSL (rapidement et facilement) Le ssl est le fameux cadenas quand vous naviguez sur un site. Il vous permet de chiffrer la connexion entre le client et le serveur de destination. En l’occurence le client c’est votre navigateur web et le serveur de destination votre compte heroku (hébergement). Le ssl est primordiale pour la sécurité ainsi que pour installer des modules de paiement tel que stripe. Afin de l’activer sans effort , il nous suffit de modifier nos dynos en dynos standard sur heroku. Il va alors automatiquement ajouter votre certificat SSL pour vous ! Vous n’avez rien de faire de plus pour son installation. Rendez-vous dans settings pour constater l’installation automatique de votre SSL ! Forcer la connexion https / ssl Malheureusement il nous reste encore une dernière étape pour nous assurer que notre traffic est bien redirigé par défaut et obligatoirement sur notre contenu sécurisé par le SSL. Testez votre lien en http://. Vous verrez qu’il est encore possible d’accéder à la version non sécurisée. Pour forcer le ssl, nous allons retourner sur notre éditeur de code et forcer le ssl. Rendez-vous sur le fichier production.rb, puis décommentez la ligne suivante : Une fois la ligne décommentée, n’oubliez pas le petit : Une fois le déploiement sur heroku terminé, vous pouvez toujours tenter d’accéder à votre url via le http. Sans succès … Nous avons bien forcé toutes les connexions en https ;). Configurer manuellement son certificat ssl Pour configurer vous même et ne pas laisser heroku gérer votre certificat ssl, vous avez deux possibilité pour le gérer gratuitement. Obtenir votre certificat ssl gratuitement sur sslforfree, ou sur cloudflare. Pour plus d’informations rendez-vous sur la vidéo ;).

La gem rails admin disponible dans la rubygem, vous permet de fournir un environnement d’administration simple et efficace. Très utile pour gagner du temps, ou simplifier la gestion d’un site internet à votre équipe. Elle est très appréciée des datas scientistes et des bloguers no code. Nous allons voir ensemble comment configurer et installer rails admin. Dans un premier temps, j’ai lancé un template rails contenant Postgres et devise. Et oui, qui dis administrateur du site dis gestion des users. Devise vous permettra de créer des comptes administrateurs ainsi que des comptes standards pour votre application rails. Elle gère l’inscription à votre site ainsi que la connexion ou la modification d’un compte utilisateur. Exactement pareil que pour vos comptes facebook, amazon … Avant de pouvoir utiliser rails admin, j’ai créé une application simple : Création d’article de blog Notre structure de base de donnée (schema.rb) Comme nous l’indique la dernière ligne (en tant que visiteur je peux m’inscrire pour poster un article), nous avons une table user et une post ayant des references et une foreign key de user à post. Un post à un user_id (convention active record). Installer rails admin Pour installer rails admin, il vous suffit dans un premier temps de vous rendre dans le gemfile. Puis ajouter la gem suivante : Ne pas oublier de lancer un bundle install dans votre terminale. Configurer rails admin Pour configurer rails admin avec devise, il nous suffira de lancer la commande d’installation disponible dans la documentation github : On voit alors que la commande nous a créer un fichier de configuration appelé : rails_admin.rb. La commande vous demandera quel slug de lien souhaitez-vous avoir pour l’administration de site. Elle crée automatiquement la route dans le fichier routes.rb. (ligne 2 voir photo) Nous allons ensuite, nous rendre dans config > rails_admin et décommenter les lignes concernant devise. Ligne à décommenter dans le fichier de config rails_admin.rb : Dernière étape (créer un administrateur) Pour créer un administrateur, assurez-vous d’avoir une colonne dans votre table user : admin de type boolean. Si ça n’est pas le cas, je vous invite à lancer une migration : Dans le fichier de migration créé, nous allons ajouter une ligne de code : Lors de la création d’un utilisateur par défaut, nous le passerons en false pour admin. C’est en console que vous définirez quel(s) utilisateur(s) seront administrateur. C’est à l’équipe tech de donner les droits ou non à des utilisateurs. Pour cela, il vous suffira d’ouvrir la console rails en lançant : Puis de lancer : Vérifions maintenant que notre premier user est bien administrateur : Well done ! Notre premier user dans notre base de donnée de développement est bien administrateur ! Se connecter à notre panel d’administration rails admin Pour vous connecter à l’administration, il vous suffit de vous rendre sur le chemin définit dans votre fichier routes.rb afin de vous connecter à l’administration. Dans notre exemple nous avons choisit /exit Vous pouvez maintenant cliquer sur les différentes données contenu dans votre base de donnée afin de voir vos datas. Vous pouvez également modifier les données, attribuer de nouvelles valeurs etc. Laisser parler les besoins de votre équipe ! En savoir plus sur devise ? lien du repo github : https://github.com/alexisjps/demo-rails_admin

Qu’est ce que flatpickr sur rails ? Flatpickr est une librairie javascript disponible sur npm. Elle vous permet de styliser vos formulaires de réservation par exemple. Cette librairie est très facilement accessible pour rails. Installer flatpickr sur votre application rails Avant de commencer, une fois votre rails new lancé, vos routes, controllers et fichiers de vues en place, nous allons devoir ajouter la librairie javascript sur notre projet rails. Pour cela nous utilisons la commande dans le terminale : Coder flatpickr avec stimulus Pour commencer à utiliser flatpickr; il vous faudra générer un controller stimulus sur votre application rails. Utilisez la commande : Une fois le controller généré, nous allons importer la librairie flatpickr sur notre controller : Puis dans la méthode connect ajouter ce code : Configurer notre formulaire simple form Pour ajouter le controller stimulus à notre simple form pour styliser nos dates, nous devons transformer nos inputs de notre schema de type date en string. Pour cela nous allons insérer le : as: :string. Puis nous allons également ajouter le controller sur nos champs de dates. Voici un exemple du rendu : Ajouter le style de flatpickr Qui dit style, dit ajout des librairies externes de css ou de scss. Pour cela rendez-vous dans le fichier application.scss puis ajouter ces deux lignes : Tester notre vue ! Bravo, si vous avez tout bien suivi correctement il ne reste plus qu’à tester notre booking (vue sur laquelle nous avons installé flatpickr). Coupez puis relancer bien un serveur après un yarn add flatpickr

Front-end rails : Setup Avant de commencer, j’ai utilisé le template rails new suivant : Tutoriel complet en vidéo : Configurer son application rails avant de commencer Avant de commencer à se lancer dans le front-end de notre application, nous allons vérifier que notre environnement de travail (notre dossier d’application) est correctement configuré. Premier point de contrôle : Vérifier que la gem sassc est bien active dans le gemfile. Pour se faire nous allons soit ajouter cette ligne dans le fichier gemfile, soit la décommenter : Ne pas oublier de lancer un petit bundle des familles sans quoi, vous ne pourrez pas faire de style sur votre application, car vous n’aurez pas installer les dépendances de la librairie (gem) sassc. Nous pouvons désormais utiliser le SCSS sur notre application rails ! Deuxième point de contrôle : Nous allons maintenant vérifier que nous avons bien un fichier application.scss et non application.css dans notre dossier stylesheet. Si ça n’est pas le cas, aucune panique il vous suffira de renomer le fichier application.css par application.scss (oui on ne modifie que l’extension du fichier). Jamais deux sans trois, le dernier point de contrôle : Nous allons maintenant vérifier le fichier manifest.js. Il doit contenir la source du fichier application style de notre application avec notre nouvelle extension qui est le scss et non le css. En ligne deux, nous voyons que nous avons bien la ligne suivante : Commencer le front-end de notre application Pour commencer nous allons attaquer le front de notre home page. On va alors aller sur notre fichier home.html.erb. Structure css d’une landing page Une home page est souvent composée de plusieurs éléments statiques. En premier lieu, nous avons une navbar de navigation Nous avons ensuite, un bandeau héro (une banner autrement dit) : En second temps, nous allons afficher les produits de notre application (appartements dans notre exemple) Créer une navbar Pour créer notre navbar sur notre application, nous allons devoir créer deux fichier. Un fichier qui sera une partial (ajouter un _ avant le nom du fichier.) dans nos vues, puis nous allons créer un fichier de style scss (partial également). Je créé un nouveau dossier qui s’appelera shared dans le dossier views. Puis je créé un nouveau fichier dans le dossier shared que nous venons à l’instant de créer : Nous allons ensuite éditer notre fichier html.erb, afin de générer le html de notre composant (navbar). Appeler notre fichier sur notre application Pour rappel, nous avons créer un fichier partial. Sans son appel sur une view spécifique, il ne sera jamais lu en front sur un navigateur client. Sachant que nous souhaitons avoir notre navbar sur l’ensemble de toutes nos pages, nous allons alors l’appeler dans le fichier application.html.erb. Pour l’appeler nous ajoutons ce code : Le html de notre navbar est maintenu lu sur toutes nos pages ! 💪 Ajouter le style d’affichage Continuons sur notre lancée, nous devons maintenant ajouter le fichier style correspondant à notre navbar. Pour cela, nous allons faire exactement la même chose. 1- Créer une partial scss, puis l’appeler dans notre fichier maitre de style de l’application global. Rendez-vous dans le dossier stylesheet, puis nous créons un fichier partial : _navbar.scss Dans ce fichier collez le code suivant : Dernière étape pour que notre style soit lu par notre application rails ! Bien penser à ajouter notre partial dans le fichier : index.scss : Pour cela ajouter la ligne : Ajouter d’autres composants Pour ajouter d’autres composants comme une banner, bouton, je vous donne rendez-vous sur l’UIKITT pour les élèves du wagon. Sinon bootstrap est votre meilleur ami. Rendre notre page dynamique avec Stimulus Ajouter un effet de style sur notre page d’accueil, nous allons faire un peu de javascript avec le framework Stimulus. Nous allons installer la librairie js typed.js puis coder le controller pour afficher son comportement dynamique. Pour installer la librairie typed, voici la commande à taper dans le terminale : Créer un controller Stimulus Pour créer notre controller Stimulus, il vous suffit simplement de lancer la commande : Pour aller plus vite, je vous invite à copier / coller ce code en remplaçant uniquement l’array de string par vos phrases à afficher : Afficher notre comportement dynamique Pour le moment, si nous nous amusons à rafraîchir notre localhost, nous ne voyons toujours pas notre animation typed. C’est normale ;). Jettons un oeil sur la ligne deux créé automatiquement lors de la génération de notre controller Stimulus : Nous devons alors ajouter cet attribut à la balise de notre choix dans notre fichier view afin de pouvoir l’afficher sur le front de notre application. Dans mon cas, nous sommes sur le fichier _banner.html.erb : Compiler le javascript Bravo ! 🎊 Si vous en êtes à ce stade c’est que vous avez quasiment terminé ! Pour afficher vos modifiers sur votre serveur local, nous devons compiler le javascript et relancer notre serveur rails (puma) via deux commandes. Ouvrir deux onglets différent sur votre terminale : Ainsi que (la compilation webpack pour la javascript) : Et voici le résultat final !

Avant de commencer (template utilisé 🙂 ) Avant de commencer, j’ai lancé le template très basique de rails new avec webpack + postgré Installer Geocoder Geocoder est une gem disponible dans la ruby gem (librairie de ruby), permettant ainsi de rajouter les points coordonnées GPS sur un élément. Une adresse est composée avant tout de la longitude et de la latitude. Une fois l’adresse saisie dans un champs par exemple, geocoder pourra ainsi vous ajouter les coordonnées GPS afin de les afficher sur un service de mapping de votre choix. Pour information, il existe plusieurs services comme google maps api, mapbox (version free environ 50 000 requêtes API / mois). Pour installer la gem, aller dans le gemfile puis ajouter : Puis nous allons ensuite, lancer dans le terminale : Afin de pouvoir installer la gem sur notre application rails : Générer notre controller + model Pour générer rapidement un model avec un controller ainsi que toutes les routes du CRUD,nous pouvons utiliser la commande scaffold (à ne pas utiliser pour des projets long terme). L’objectif de cet article étant de vous accompagner sur l’installation de geocoder avec un service de mapping online. Vérifier notre schema pour ajouter une adresse Afin de pouvoir Geocoder, nous allons ajouter un champs adresse ainsi que longitude et latitude à notre table produit afin d’avoir une localisation. Geocoder se chargera par la suite de remplir la colonne longitute et latitude en fonction des données rentrées par le user. Générer une migration Nous souhaitons ajouter trois colonnes dans notre table, nous allons alors lancer un fichier de migration. En utilisant la commande : Une fois le fichier de migration créé, si nous sommes d’accord, lancer un rails db:migrate Ajouter le champs adresse : Pour ajouter une adresse sur notre formulaire, il vous suffit d’aller dans la view et de rentrer cette ligne : Nous avons maintenant un champ adresse dans notre formulaire de création : Nous allons créer un produit avec une adresse et vérifier notre enregistrement en base de donnée : Erreur commune, nous devons ajouter les params dans le controller de notre model (produit) : Adapter notre model pour recevoir une adresse Pour adapter notre model, il nous faut indiquer à la gem geocoder, dans le model produit : Configurer Geocoder Pour lancer la configuration automatique de geocoder lancer la commande : Nous devons aussi aller dans le fichier geocoder config afin de modifier la configuration sur les unités de mesure ainsi que sur la langue. Décommenter les lignes + modifier par vos valeurs (voir screen) Vérifions notre vue : Vérifions maintenant les données enregistrées dans la DB. Pour cela lancer dans le terminale : Voici la data complété par notre gem ! Bravo 🎉 🎊 Connecter un service de mapping Avant de commencer il vous faudra, vous créer un compte sur Mapbox. Une fois connecté récupérer la clef API qui doit être mise dans le fichier .env de votre application rails. ⚠️ N’oubliez pas de partager votre clef avec vos collaborateurs Installer le javascript ainsi que le css de votre carte Pour installer le style et les functions de javascript / css de votre service de mapping Mapbox, il vous faudra ajouter les lignes de codes suivantes dans votre fichier application.html.erb Insérer votre map dans la view Pour insérer et voir si notre map s’affiche, nous allons installer le code suivant dans la view index de nos produits : Coder le controller pour afficher la map Pour pouvoir afficher votre map, nous allons devoir aller dans le controlleur de notre view est insérer le code suivant : Connecter notre map / controller avec du javascript (stimulus framework) Avant de terminer et de pouvoir afficher notre map avec nos markers, nous allons devoir créer un controller javascript via le framework stimulus afin de rajouter quelques lignes de codes pour afficher notre map avec la localisation de nos produits. Pour créer notre contrôleur stimulus : Ajouter notre code pour afficher les markers et la map dans notre controller stimulus Remplacer et copier / coller tous le code présent dans votre contrôleur stimulus créé : Dernière étape pour faire fonctionner la pop up Ajouter dans le controller : Puis vous aller créer un fichier : _info_window.html.erb