TADAAA, Après le dévoilement du concept, voilà l’inauguration de notre landing page (ou welcome page) :

www.babasport.fr

 

Une landing page, c’est quoi ?

C’est la vitrine provisoire de notre concept. Elle présente l’idée, donne un premier aperçu de notre charte graphique, et sert de support commercial.
En bonus, ça contribue à faire connaitre le domaine par les moteurs de recherche.
Enfin, comme on est sympa, on vous donne un endroit pour mettre votre mail pour être tenus au courant des derniers avancements, notamment de la mise en ligne du service !

Comme si cette nouvelle n’était pas assez bonne, je vais même vous montrer comment faire une landing page en 10 minutes.
Ok ok Selim et Antoine pouffent, ça m’a pris bien bien plus que ça mais bon, c’est le temps de le refaire quand on sait déjà comment le faire et qu’on a déjà tous les outils.

Je vous préviens tout de suite, cet article s’adresse à des profils plutôt techniques, je commence pas au B-A-BA. Si vous voulez plus de détails n’hésitez pas à poser des questions en commentaires !
Les outils :

  •  Interface : Bootstrap
  •  Backend : Ruby On Rails
  •  Hébergement : Heroku

L’idée globale : créer une application web basique avec Ruby On Rails, faire une “landing page” grâce à Bootstrap et l’exposer avec une route et un contrôleur dans Rails.
Pour déployer l’application, on utilisera Heroku, une PaaS (Plateform-as-a-Service), qui a le mérite de fonctionner très bien avec Rails, et d’être gratuit jusqu’à ce que le trafic s’intensifie.


1. Ruby On Rails

Ruby On Rails est un framework web MVC plus tout jeune (~2005) mais toujours canon, et qui en a inspiré beaucoup d’autres. Sa grande qualité : monter très rapidement une application web basique mais complète.
A partir de la description des objets du modèle, on peut générer vues, contrôleurs, tables dans la base de données, tests, et son API REST en une ligne de commande. Génial pour faire un prototype.
L’idée derrière Rails est de fonctionner par convention plutôt que par configuration. Ca veut dire : très peu de temps à décrire comment les choses doivent marcher, il suffit de respecter la convention fixée par Rails et Rails comprendra. Et Rails comprend effectivement.

Il faut d’abord installer Ruby & Ruby On Rails. Une fois que l’environnement est prêt on peut commencer par créer une appli Rails. Appelons la « baba ».

> rails new baba

On peut d’ores et déjà lancer le serveur:

> rails server

et aller voir un résultat sur localhost:3000. Vous devriez voir une page “Welcome aboard”.

On va customiser cette page en créant un nouveau contrôleur et une page d’accueil.
Pour ça on va commencer par faire pointer l’URL root sur un contrôleur à nous:

De base, Rails ne va exposer aucune URL, il faudrait pas exposer au grand public toutes les méthodes de tous les contrôleurs de l’application… On va donc rajouter une route pour pouvoir appeler cette méthode par une URL.

>> config/routes.rb
root ‘landing#hello’

Si je recharge la page localhost:3000, j’ai … une erreur. En effet (comme la page d’erreur le résume) la syntaxe root ‘landing#hello’ dit à Rails qu’il faut faire pointer l’URL root vers la méthode “hello” du contrôleur “landing”. Or on a ni le contrôleur, ni la méthode. On le crée fissa:

> rails generate controller landing

Rails nous a créé un fichier ruby (.rb) app/controllers/landing_controller.rb, c’est le contrôleur qui va servir la page d’accueil. Il est vide, on va lui rajouter une méthode “hello”

>> app/controllers/landing_controller.rb
class LandingController < ApplicationController

def hello
end

end

Comme ici, le backend n’a d’autre utilité que d’envoyer la page HTML à l’utilisateur, la méthode est vide. Plus tard on pourrait rajouter de la logique (authentification, customization, internationalization etc.). Mais comment Rails va-t-il savoir quelle vue envoyer au browser ? C’est justement la convention qui va jouer son role. Par défaut Rails va chercher un fichier html dans le répertoire app/views qui correspond au nom de la méthode du contrôleur dans le répertoire qui a le nom du contrôleur.
Et justement, ça tombe bien car en plus du contrôleur, Rails nous a également créé un répertoire app/views/landing pour y mettre les vues associées aux méthodes du contrôleur. Créons donc une vue dans ce répertoire qui a le nom de la méthode “hello” =>

>> app/views/landing/hello.html
Hello World !

Et voilà on a une application web qui renvoie une vue contre l’URL root. Maintenant, il faut faire une belle vue parce qu’un « Hello World » ça impressionne personne.


2. L’interface

On oublie Rails deux secondes pour se concentrer sur l’interface, on verra ensuite comment intégrer l’interface dans Rails.

Bootstrap, la boite à outils web de Twitter est inestimable pour faire une interface responsive, mobile et desktop à la fois, avec un design au goût du jour sans se poser de questions. Tout le monde l’utilise et c’est un peu la garantie d’avoir un site stylé (ou au moins qui ressemble aux autres sites stylés). C’est devenu tellement populaire qu’il suffit de chercher “bootstrap landing page” pour avoir des thèmes tout faits qu’on a plus qu’à adapter. C’est ce qu’on fera ici. Pour plus d’informations sur la customization de Bootstrap, se référer à la doc.

Les thèmes suivants sont pas mal: http://startbootstrap.com/template-categories/landing-pages/, on choisit celui-là, et on le télécharge.

Dans le répertoire qu’on a téléchargé, on trouve des fichiers JS et CSS qui contiennent les ressources nécessaires pour faire tourner Bootstrap. On a aussi un fichier index.html qui contient le thème de la landing page. Il suffit de double-clicker sur ce fichier pour voir dans notre browser le thème qu’on a téléchargé.

Pour la personnaliser on fait un copier-coller dans un nouveau fichier hello.html dans le même répertoire que index.html pour que les fichiers Javascript et CSS de Bootstrap soient toujours disponibles.

Là on enlève tout ce dont on veut pas: la navigation bar du haut, les images, le texte, on garde juste la structure et on met notre texte et nos images. Je vous laisse vous faire plaisir ici, pour voir le résultat qu’on recherchait pour Baba Sport vous pouvez checker sur www.babasport.fr ! Les paresseux pourront simplement laisser le thème tel quel.


3. Intégrer l’interface dans Rails

Maintenant il reste à intégrer tout ça à Rails…

Rien de plus simple. Grâce à sa forte communauté, on trouve pas mal de modules (les gems) pour répondre aux besoins classiques. Ici je vais utiliser ‘bootstrap-sass’ qui rajoute bootstrap aux ressources de Rails.
On déclare la dépendance dans le Gemfile en ajoutant la ligne suivante:

>> Gemfile
gem ‘bootstrap-sass’

On lance ensuite dans la console:

> bundle install

ce qui va effectivement télécharger le module dans l’application.

Deux petites modifications à faire pour inclure Bootstrap dans toutes les vues:

>> app/assets/javascripts/application.js

rajouter « //= require bootstrap-sprockets » avant « //=require_tree . »
Votre fichier devrait ressembler à ca:

>> app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Dans app/assets/stylesheets/, renommer application.css en application.scss pour pouvoir rajouter des directives SASS. Et rajouter les imports :

>> application.scss
@import « bootstrap-sprockets »;
@import « bootstrap »;

Pour les curieux, cet autre tutoriel explique plus en détail ces dernières étapes.

Attention à redémarrer le serveur après ça:

Ctrl+C
> rails server

Tout est prêt maintenant pour intégrer notre landing page dans notre application Rails.
Voyons les différentes étapes:

  • Récupérer le HTML qu’on a customizé en étape 2

Il suffit de copier le contenu de notre hello.html créé en étape 2 et on le copie dans notre hello.html créé en étape 1.

<theme_folder>/hello.html => app/views/landing/hello.html

  • Récupérer le CSS du thème Bootstrap téléchargé

Si vous regardez dans votre hello.html vous devriez avoir une ligne similaire à cela:

<link href=’css/business-frontpage.css’ rel=’stylesheet’>

C’est le CSS qui complète Bootstrap pour définit notre thème, il faut l’intégrer également dans Rails. On copie donc ce fichier css/business-frontpage.css dans un nouveau fichier landing.scss dans le répertoire app/assets/stylesheets/ de l’appli Rails.

<theme_folder>/css/business-frontpage.css => app/assets/stylesheets/landing.scss

  • Supprimer les imports JS et CSS du HTML

On a intégré par défaut à toutes les vues de Rails les imports de Bootstrap et de jQuery. Plus besoin de les importer manuellement dans le HTML. On supprime donc les lignes suivantes du <head>:

<!– Bootstrap Core CSS –>
<link href=’css/bootstrap.min.css’ rel=’stylesheet’><!– Custom CSS –>
<link href=’css/business-frontpage.css’ rel=’stylesheet’>

et les lignes suivantes en fin de <body>

<!– jQuery –>
<script src=’js/jquery.js’></script><!– Bootstrap Core JavaScript –>
<script src=’js/bootstrap.min.js’></script>

On recharge localhost:3000, TADAAA !
Vous avez votre landing page, servie par une application Rails, prête à être déployée sur Heroku.  Ce sera d’ailleurs l’objectif du prochain épisode à la fin duquel vous pourrez fièrement envoyer votre URL à vos clients.

En attendant, n’oubliez pas de vous inscrire sur www.babasport.fr !

AUCUN COMMENTAIRE

Un commentaire, un avis, un conseil à partager ?