Outils

descktop-editor2

Desktop Theme Editor

Éditeur de thème local

Desktop Theme Editor est une application à installer sur votre ordinateur. Elle permet aux intégrateurs de créer et de mettre à jour les thèmes des sites RestoReady et de les synchroniser avec l’application web en ligne. Ces avantages sont :

  • Utilisez votre éditeur de texte préféré pour éditer vos thèmes
  • Confidentialité avec clé de chiffrement personnelle
  • Conservez le versioning de vos fichiers en local
  • Transfert et synchronisation de tous les fichiers du thème (images, etc.)
  • Gérez plusieurs thèmes et restaurants
desktop-editor-schema2
Fonctionnement de Desktop Theme Editor

Prérequis

Desktop Theme Editor étant une gem Ruby il est indispensable d’avoir au minimum Ruby 1.9 ou 2.x, d’installer sur sa machine.

Installation Ruby

Mac OSX

Tout d’abord, nous devons installer Homebrew. Homebrew nous permet d’installer et de compiler des paquets logiciels facilement depuis une source donnée.
De plus Homebrew est livré avec un script. Quand il vous demande d’installer XCode CommandLine Outils, répondez oui.

Ouvrir un terminal et exécutez la commande suivante :

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Maintenant que nous avons Homebrew installé, nous pouvons l’utiliser pour installer Ruby à son tour.
La mamière la plus simple et recommendée sous mac est d’utiliser rbenv, il va s’occuper de gérer nos versions Ruby.

Pour ce faire, exécutez les commandes suivantes dans votre terminal :

brew install rbenv ruby-build

# Ajouter rbenv au bash pour qu'il se charge à chaque fois que vous ouvrez un terminal
echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
source ~/.bash_profile

# Installer Ruby 2.1.4 et enregistrer la version par défaut
rbenv install 2.1.4
rbenv global 2.1.4

ruby -v
# ruby 2.1.4

PS : Pour récupérer les derniers versions de ruby, après avoir installé rbenv, lancer la commande suivante :

brew upgrade rbenv ruby-build
Ubuntu

La première étape consiste à installer quelques dépendances pour Ruby.

sudo apt-get update
sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties

Ensuite, nous allons installer Ruby en utilisant rbenv. L’installation avec rbenv est un processus en deux étapes simples. D’abord, vous installez rbenv, puis ruby-build :

cd
git clone git://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL

git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
exec $SHELL

rbenv install 2.1.4
rbenv global 2.1.4
ruby -v
Windows

Rendez-vous sur http://rubyinstaller.org pour télécharger l’installateur Ruby. Lancer le fichier « .exe » et attendez la fin de de l’installation.

Installation

Desktop Theme Editor peut s’installer de deux manières différentes, la première étant avec une ligne de commande :

gem install restoready_theme

La deuxième manière consiste à créer un répertoire, « themes » par exemple, et d’y créer à l’intérieur un fichier nommé « Gemfile » avec les deux lignes suivantes :

source "https://rubygems.org"

gem 'restoready_theme'

Vous pouvez ensuite lancer la commande bundle install, à la racine de votre répertoire, pour installer la gem.

PS : Si bundler n’est pas installé, nous utiliserons cette commande :

gem install bundler

Utilisation

Desktop Theme Editor est un programme dit en lignes de commandes, c’est-à-dire qu’il s’utilise par le biais d’instructions qui vont ordonner au programme d’exécuter telle ou
telle autre fonctionnalité. Toutes les commandes qui vont vous être présenté sont à taper dans un terminal.

Informations indispensables

Deux informations sont nécessaires pour une bonne utilisation de cette gem :

  • Api Url : https://[restaurant_name].resto-ready.com
  • Api key : Disponible dans la rubrique « Paramètres > Mon compte » de votre back-office
Débuter

On trouve deux types d’utilisation pour cet outil, la création d’un nouveau thème ou la modification d’un existant. Dans le premier cas, il peut être intéressant de partir d’une base, c’est pourquoi la commande bootstrap a été créée. Elle permet d’ajouter le thème Starter à votre RestoReady et le télécharge automatiquement sur votre machine dans un nouveau répertoire du même nom que vous aurez donné au thème ( par défaut il sera nommé ‘starter’).

theme bootstrap api_key api_url site_url theme_name

Cette commande génère également un fichier de configuration avec les données transmises et enregistre l’identifiant du thème nouvellement créé.

Vous pouvez utiliser :whitelist_files: pour spécifier les fichiers autorisés. Les dossiers assets/, config/, layouts/, snippets/, templates/ et locales/ sont inclus par défaut.
Vous pouvez également utiliser :ignore_files: pour exclure des fichiers, par exemple votre configuration settings.html.liquid ou autres.

Exemple d’un fichier config.yml :

---
:api_key: api_key
:api_url: https://demo.restoready.com
:site_url: https://demo.restoready.com
:theme_id: '1'
:whitelist_files:
- directoryToUpload/
- importantFile.txt
:ignore_files:
- config/settings.html.liquid

Le plus simple, si l’on désire modifier un thème existant, est d’utiliser « configure » qui va créer le fichier de config. Pour ce faire, dans un nouveau répertoire, lancez la commande. L’option « theme id » représente l’identifiant du thème en ligne que vous désirez modifier.

theme configure api_key api_url site_url theme_id

Il ne reste plus qu’à télécharger le thème :

theme download
Utiliser

Maintenant que vous avez votre thème et un fichier de config, plusieurs commandes sont disponibles. Le « watch » est surement la plus utile, elle surveille votre répertoire courant pour reporter tous les changements détectés en ligne.

theme watch
sbl-desk-editor
Exemple d’utilisation de la commande ‘watch’

Les actions de création ou de suppression de fichiers peuvent être appelé séparément à l’aide de plusieurs commandes :

Uploader un fichier en ligne (seul de nouveaux assets ou snippets peuvent être créé). Si aucun path n’est renseigné, l’ensemble du thème sera uploadé.

theme upload assets/image.jpg

Supprimer un fichier du thème en ligne.

theme remove assets/image.jpg

Remplacer le thème en ligne par celui en local.

theme replace

Remplacer votre thème local par celui en ligne.

theme download

Compléments

Pour encore plus de simplicité, il est tout à fait possible de coupler cette gem avec une application, tel que LiveReload. Elle s’occupe de surveiller votre système de fichiers pour rafraichir automatiquement votre navigateur à chaque changement détecté.

Cerise sur le gâteau, si vous utilisez Sublime Text en tant qu’éditeur de texte, un plugin LiveReload existe. Ce plugin doit être associé au module LiveReload de votre navigateur ( Chrome, Firefox, … ).

haut de page