Bonjour les zesteux!
Voici une petite présentation d'un site web que j'ai commencé ce weekend : Code Civil Cloud. Mon objectif est de m'améliorer en AngularJS et de m'amuser tout en se rendant utile (peut-être).
Lien vers le site web : http://codecivil.bytevortex.net
Présentation
Il s'agit d'un site web permettant de parcourir le Code Civil français et de rechercher des articles, mais surtout rapidement et facilement. La particularité du site est qu'il s'appuie sur l'API de GitHub et ce dépôt git pour fournir le contenu du Code. Le dépôt (non-officiel) dispose des textes versionnés du Code Civil. Il est ainsi facilement possible de suivre l'évolution du Code Civil.
Objectifs
Les principaux objectifs du projet sont les suivants :
- présenter de manière claire le contenu du Code Civil,
- proposer une navigation très rapide et agréable, sur ordinateur ou mobile,
- permettre de facilement suivre l'évolution du Code Civil.
Avancement
Deux fonctionnalités principales sont actuellement disponibles :
- parcourir le Code Civil en suivant les Livres et Titres,
- rechercher du texte dans tout le Code Civil à l'aide du champ de recherche en haut de page,
- Afficher les modifications récentes apportées au Code Civil par le gouvernement (à travers les commits effectués sur le dépôt GitHub du Code Civil) et les présenter de manière claire,
- Mode Sombre pour lecture nocturne.
Il est possible d'afficher le contenu des articles dans l'arborescence du Code en cliquant sur le bouton "Afficher les articles". L'option sera mémorisée pour votre prochaine visite.
Le design du site est responsive et compatible mobile.
Parmi les futures fonctionnalités, en priorité :
- Enregistrer son email pour recevoir une notification lorsque le Code Civil est modifié,
- (Peut-être) Fil de discussion Disqus sur les articles,
- Faire un vrai logo ?
Captures d'écran
Sous le capot
Le site web est entièrement réalisé avec ces trois langages du web bien connus :
- HTML
- CSS
- Javascript
On peut d'ailleurs voir les statistiques du code sur le GitHub :
Le niveau de compatibilité est HTML 5 et CSS 3. Normalement, tout navigateur moderne devrait être capable d'afficher correctement le site web.
Javascript
Le gros morceau se trouve côté Javascript : en effet, le site est entièrement structuré autour du framework AngularJS de Google. Le site suit donc une logique de séparation des responsabilités, avec différents composants :
- le routeur qui va appeler le template et le contrôleur adéquats en fonction de l'adresse URL de la page,
- un contrôleur pour l'Accueil, un autre pour l'affichage de l'arborescence, un autre pour l'affichage d'un article, un pour la recherche…
- des directives pour définir de nouveaux éléments et attributs HTML comme
ng-enter="search()"
,<search-result>
et<article-preview>
, - des services : un pour la connexion à l'API RESTful de GitHub pour obtenir les données, un autre pour la sauvegarde des préférences de l'utilisateur à l'aide de l'objet
localStorage
et un dernier regroupant plusieurs fonctions utiles.
Aussi, une grande partie du site est générée dynamiquement par AngularJS : liste des dossiers et des fichiers, liste des résultats de recherche, affichage des articles en markdown, etc. Tout ceci à grand renfort de data-binding ! (Le data-binding permet de mettre automatiquement à jour l'affichage lorsqu'on modifie une donnée dans l'application, ou inversement de mettre à jour une variable si l'utilisateur modifie le contenu d'un champ de saisie, ce qui est le cas pour le champs de recherche.)
Liens
Site web : http://codecivil.bytevortex.net
Code source : https://github.com/Akryum/code-civil
Données : https://github.com/steeve/france.code-civil
AngularJS : https://angularjs.org/
Brackets.io (l'éditeur que j'utilise) : http://brackets.io/
Fontawesome (les icônes) : https://fortawesome.github.io/Font-Awesome/
Le petit mot de la Fin
Merci de m'avoir lu ! Si vous avez des questions, remarques, suggestions ou idées, n'hésitez pas à les partager !