1893 avis : 5/5 ⭐️⭐️⭐️⭐️⭐️

Wordpress développement

Developpeur wordpress fullstack

Ajouter Cloudinary sur une application rails existante

Avant de commencer

Voici le schema de notre base de donnée. Nous souhaitons attacher des images à notre table lists

Et non, pas besoin de migration 😉

schema de DB rails

Modifier le model list pour ajouter la méthode picture

Aller dans le model concerné (en l’occurence pour notre exemple : /models/list.rb)

Puis nous allons ajouter en dessous de la classe :

has_one_attached :picture

Bien mettre la nouvelle ligne en dessous de la class ⚠️

Installer cloudinary

Premièrement nous allons ajouter la gem Cloudinary à notre gemfile. La seule spécificité est de l’ajouter au dessus du groupe de développement et de production dans le gemfile.

# Use Cloudinary for load image
gem 'cloudinary'
# Protect my api key rails
gem "dotenv-rails", groups: [:development, :test]

N’oubliez pas de lancer la commande dans le terminale :

bundle
commande bundle rails

Ajouter la clef API Cloudinary

Afin de sécuriser votre clef API cloudinary, nous allons créer un fichier .env la contenant. Pour cela lancer à la racine de votre application :

touch .env
echo '.env*' >> .gitignore

La commande echo ‘.env……’ vous permet d’ajouter une ligne dans le fichier .gitignore afin de lui spécifier de ne pas pusher votre fichier .env sur github. Si votre fichier .env est envoyé sur github, tout le monde a accès à cette dernière.

ruby en rails .env
fichier .env rails

Ajouter votre clef cloudinary

Pour cela, rendez-vous dans le fichier .env créé ensemble. Puis aller sur cloudinary et copier via dashboard votre secret API. Voir capture :

clef api cloudinary rails

Copier / coller la clef (ctrl c / ctrl v ou cmd c / cmd v pour les macs)

clef api cloudinary fichier .env

Active record pour ajouter la relation des images à la base de donnée

Dernière ligne droite avant de pouvoir envoyer / afficher vos images utilisateur sur votre application Rails. Il vous faut installer active record. Pour cela on va lancer les commandes :

rails active_storage:install
active record pour image cloudinary ruby on rails

Un fichier de migration a été créé avec les tables active record. Nous avons besoin de lancer le fameux rails db:migrate pour mettre à jour notre schema de base de donnée.

rails db:migrate

Voici votre nouveau schema.rb :

active record schema.rb

Adapter notre stockage de fichier sur notre application rails

Pour ce faire, rendez-vous dans le fichier storage.yml (dans le dossier config de votre application ruby on rails) :

# chemin du fichier pour ajouter le code : config/storage.yml
cloudinary:
  service: Cloudinary
  folder: <%= Rails.env %>

Modifier le comportement du fichier developement

Nous devons maintenant indiquer au fichier developement.rb le comportement de stockage de nos images. Nous allons chercher la ligne :

Nous allons modifier la valeur = :developement par :cloudinary

Mettre à jour le fichier test et production

Il faut effectuer la même manip pour le fichier test.rb et production.rb :

Ajouter un champ d’upload d’image

Pour donner la possibilité à l’utilisateur de pouvoir uploader une image lors de la création de son compte par exemple, où pour un appartement à mettre en location en second exemple. Il faut modifier le simple_form en ajoutant un champ file.

Voici le résultat côté front :

Adapter le controller pour accepter le nouveau champ

Comme vous le savez, lors de la création d’un élément (user, post, flat ou tout autre object ruby) nous avons définis par sécurité des strongs params permettant ainsi aux utilisateurs de créer / modifier uniquement les valeurs données dans le controller. Ne pas oubliez que tout ce qu’on expose en front peut être voler / modifier en inspecteur d’élément > éditer en html. Un utilisateur peut facilement ajouter des champs qui ne sont pas prévus.

Il nous faut alors aller dans le contrôleur lié au model appartement ou celui qui peut désormais recevoir des images pour lui ajouter un complément de code :

Et voilà ! Nous pouvons tester notre application maintenant

Remplir le formulaire en passant une image de votre choix sur votre ordinateur. Puis, si tout est bien configuré, vous devriez avoir un dossier développement sur votre compte Cloudinary contenant toutes vos images uploadées :

Afficher votre image :

Pour afficher votre image, vous pouvez placer la balise cl_image_tag sur la show concernée / index :

<%= cl_image_tag(@list.photo.key,
      width: 400, height: 300, crop: :fill) %>

Le @list.photo.key permet de récupérer la clef de l’image pour votre variable d’instance. Car la balise cl_image_tag prend une string contenant la clef Cloudinary de l’image. Nous souhaitons afficher les images dynamiquement en fonction de l’upload de l’utilisateur, et non mettre en brut notre clef Cloudinary pour l’image

Envoyer des images sur votre serveur de production

Pour configurer Cloudinary sur Heroku ou votre environnement de production, n’oubliez pas de lancer la commande dans votre terminale :

heroku config:set CLOUDINARY_URL=PASSERLACLEFAPI

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