1893 avis : 5/5 ⭐⭐⭐⭐⭐

Wordpress développement

Developpeur wordpress fullstack

Ajouter Geocoder sur une application rails

Avant de commencer (template utilisĂ© 🙂

Avant de commencer, j’ai lancĂ© le template trĂšs basique de rails new avec webpack + postgrĂ©

rails new appname --webpack=stimulus -d postgresql

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 :

# Use geocoder
gem 'geocoder'

Puis nous allons ensuite, lancer dans le terminale :

bundle

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.

rails g scaffold produit

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 :

rails g migration AddColToProductuis :produits longitude:float latitude:float

Une fois le fichier de migration crĂ©Ă©, si nous sommes d’accord, lancer un rails db:migrate

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 :

<%= simple_form_for @produit do |f| %>
<%= f.input :address %>
<%= f.submit %>

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 :

geocoded_by :address
after_validation :geocode, if: :will_save_change_to_address?

Configurer Geocoder

Pour lancer la configuration automatique de geocoder lancer la commande :

rails generate geocoder:config

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)

geocoder config


VĂ©rifions notre vue :

Vérifions maintenant les données enregistrées dans la DB. Pour cela lancer dans le terminale :

rails c

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 de votre service de mapping Mapbox, il vous faudra ajouter les lignes de codes suivantes dans votre fichier application.html.erb

<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />

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 :

<div style="width: 100%; height: 600px;"
  data-controller="map"
  data-map-markers-value="<%= @markers.to_json %>"
  data-map-api-key-value="<%= METTRE VOTRE CLEF API !!! %>"></div>

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 :

@markers = @produits.geocoded.map do |produit|
      {
        lat: produit.latitude,
        lng: produit.longitude
      }

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 :

rails g stimulus map

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éé :

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="map"
export default class extends Controller {
  static values = {
    apiKey: String,
    markers: Array
  }
  connect() {
    mapboxgl.accessToken = this.apiKeyValue

    this.map = new mapboxgl.Map({
      container: this.element,
      style: "mapbox://styles/pdunleav/cjofefl7u3j3e2sp0ylex3cyb"
    })
    this.#addMarkersToMap()
    this.#fitMapToMarkers()
    this.map.addControl(new MapboxGeocoder({ accessToken: mapboxgl.accessToken,
      mapboxgl: mapboxgl }))
  }
  
  #addMarkersToMap() {
      new mapboxgl.Marker(customMarker)
        .setLngLat([ marker.lng, marker.lat ])
        .setPopup(popup)
        .addTo(this.map)
    }
}
#fitMapToMarkers() {
  const bounds = new mapboxgl.LngLatBounds()
  this.markersValue.forEach(marker => bounds.extend([ marker.lng, marker.lat ]))
  this.map.fitBounds(bounds, { padding: 70, maxZoom: 15, duration: 0 })
}

Articles dans la thématique Wordpress :
Ajouter Geocoder sur une application rails

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.

Lire l'article
RĂ©ussir son audit technique SEO

Un audit SEO technique est un prĂ©requis essentiel pour garantir Ă  votre site un bon positionnement dans les rĂ©sultats des moteurs de recherche. LĂ  oĂč le SEO « on page » et le SEO « off page » sont respectivement dĂ©diĂ©s Ă  l’optimisation du contenu des pages Web et Ă  la popularitĂ© du site,.

Lire l'article
devise authentification for rails
Installer Devise sur une app rails (authentification)

Qu’est ce que Devise ? Devise est une gem (librairie ruby) disponible dans la ruby gem, qui vous permet d’ajouter l’authentification et l’enregistrement d’utilisateurs sur votre application. Il est primordiale d’avoir Devise ! En effet, Devise vous permettra d’avoir accĂšs a de nouvelles mĂ©thodes. Nous avons alors comme nouvelles notions.

Lire l'article