CAW1 2014 Projet de Justin Barbette, Alexis Craipeau-Deneboude, Paul Del Perugia et Thibault Ramires

De Ensiwiki
Aller à : navigation, rechercher
Logo resp.png
Titre du projet Resp
Cadre Projet web

Équipe Justin Barbette Alexis Craipeau Paul Del Perugia Thibault Ramires
Encadrants Sebastien Viardot


1 - Présentation générale

1.1 Contexte

Dans le cadre de notre deuxième année à l'ENSIMAG, nous suivons un cours de Construction d'Applications Web. Ce cours aboutit à un projet de développement d'un site internet en équipe. Bien que de thématique libre, la réalisation de ce site est guidé par un certains nombre de contraintes techniques imposées, détaillées dans le cahier des charges.

1.2 Genèse

Resp est une plateforme de débat politique entièrement neutre et transparente. A travers la publication d'articles de fond sur des sujets divers (économie, société, sciences, environnement...), des acteurs politiques expriment leurs opinions auxquelles les autres utilisateurs peuvent réagir via des articles-réponse ou des commentaires.

Le manque de contact entre les citoyens et leurs représentants et la défiance aujourd'hui exprimée en France envers la politique ont été à la genèse de Resp. A travers ce projet étudiant, nous espérons faciliter l'émergence de propositions citoyennes et apporter un élément pédagogique à la politique en France.

1.3 Cahier des charges

Le projet devra comporter les éléments suivants :

  • Utilisation d'un framework : play(conseillé) utilisant le patron modèle-vue-contrôleur (Play ou Symfony) ou modèle-vue-modèle (meteor)
  • Gestion des rôles avec des utilisateurs différents ayant des droits et des rôles différenciés (2 rôles au minimum)
  • Site adapté à plusieurs terminaux dont une version mobile (par exemple en utilisant Bootstrap)
  • Mise en place de jeux de tests unitaires : pour tester la partie modèle et contrôleur.
  • Souhaitable : Mise en place de jeux de tests fonctionnels avec des technologies de type selenium.
  • Souhaitable : utilisation webservice (cf. https://code.google.com/intl/fr/apis/language/translate/v2/getting_started.html)
  • Optionnel : abonnement rss
  • Optionnel : partie du site en gwt ou au moins avec un framework type smartclient


2 - Réalisation

2.1 Modélisation

Resp-ClassDiagramResp.png

2.2 Environnement de développement

Bien que nous ayons opté pour que chacun d'entre nous soit libre de disposer de son propre environnement de développement, nous travaillons tous avec l'IDE PhpStorm de Jetbrains. Couplé à un certains nombre de plugins, cet outil nous permet de développer efficacement Resp.

Un gestionnaire de versionnement Git est également utilisé au sein de l'équipe. Nous respectons sur cet outil des règles simples pour faciliter son utilisation : commit "atomiques", clairement décrits... Nous utilisons également dans notre développement des serveurs locaux, MAMP, WAMP ou encore LAMP, hébergeant la version 5.5.10 de PHP, ainsi que le module de cache OPCache.


2.3 Technologies utilisées

  • Symfony 2
  • Bootstrap 3
  • Solr-elastic

Bundles Symfony utilisés

  • Friends Of Symfony User Bundle
  • Sonata Admin Bundle
  • FPN Tag Bundle
  • HWI OAuth Bundle
  • KPN Paginator Bundle
  • STOF Doctrine Extensions Bundle

2.4 Fonctionnalités

Utilisateurs

  • Formulaire d’inscription
  • Connexion / Déconnexion
  • Connexion via Facebook ou Google+
  • Consultation d’un profil utilisateur

Articles

  • Création d’un article
  • Suppression d’un article
  • Edition d’un article
  • Consultation d’un article

Blogs

  • Création d’un blog utilisateur
  • Suppresion d’un blog utilisateur
  • Consultation de la liste des blogs du site
  • Consultation d’un blog (liste d’article associés à un blog)

Forum

  • Consultation des articles n’appartenant à aucun blog

Tags

  • Consultation de la liste des tags
  • Consultation de la liste des articles associés à un tag

Recherche

  • Consultation de la liste des articles contenant une chaîne de caractère

API

Une API est disponible. Elle permet de récupérer au format JSON :

  • tous les articles
  • les dix derniers articles
  • un article à partir de son identifiant

2.5 Identité graphique

Logo resp.png

Nous avons choisi de réaliser un logo simpliste, moderne et sobre. Reprenant simplement le nom de notre site internet, le logo rappelle la proximité souhaité entre citoyens et représentant par le faible interlettrage. La couleur bleu rappelle quand à elle un symbole de paix, comme utilisé par exemple dans le drapeau européen ou celui de l'ONU.

Webdesign / Template

Avant que ne commence la phase de développement, de nombreux essais ont été réalisés sur le logiciel Adobe Photoshop afin de trouver l’identité graphique qui correspondrait le mieux à notre projet. Couleurs, style, police d’écriture : beaucoup d’éléments ont été pris en compte. Nous voulions un design moderne, flat, dans l’ère du temps, avec des couleurs sobres facilitant la lecture des futurs utilisateurs. Parmi nos essais, on retrouve par exemple :

Resp webdesign.jpg

Malgré cela, il a été choisi d’utiliser, dans un premier temps, un template. Le fait d’utiliser un template nous permet de nous concentrer sur le dévellopement des fonctionnalités, le but premier du projet. Deux templates distincts pour deux interfaces différentes ont été choisis : un pour le front-office, Magalla, et un pour le back-office, Caplet, tous deux utilisants Bootstrap.

Resp template.jpg

Mockups

Une fois les templates choisis et mis en place, des mockups ont été dessinés pour choisir les disposition des éléments de chaque page. Ces mockups ont ensuite permis de remodeler les templates.

Resp mockup.jpg

Éléments spécifiques

Plusieurs éléments graphiques spécifiques manquants aux templates ont été ajoutés, comme par exemple une boîte de connexion. Utilisant du JavaScript et des propriétés CSS3, cette boite de connexion se veut à l’image de notre charte graphique : sobre et moderne.

Resp login.jpg

2.6 Données de tests

3 - Avancement

  • Mise en place des environnements de développement
100 %
  • Mise en place de la structure du projet
100 %
  • Mise en place du template
100 %
  • Développement
    100 %
    • Core
      100 %
      • BlogBundle
      • CoreBundle
      • FloatingPageBundle
      • RedirectBundle
      • PollBundle
      • ArticleBundle
      • NotificationBundle
      • DisqusBundle
      • UserBundle
    • Front
      90 %
      • Pages clients
      • Admin
    • APIBundle
      100 %
  • Design
    95 %
    • Front
    • Admin
  • Tests
    20 %
    • Unitaires
    • Fonctionnels

4 - Installation et aperçu

4.1 Installation

Éléments requis

- PHP 5.5.10+ (l'extension intl doit être activée, à la fois pour le php-cgi et le php-cli)

- MySQL 5.5.15+

- Elasticsearch : elasticsearch.org

Éléments conseillés

- Un accélérateur : OpCache

Installation

1. Dézipper l'archive du projet: Archive

2. Créer un virtual host nommé : http://resp-fr.com et le faire pointer dans le dossier web du projet

3. Télécharger Composer

4. Exécuter la commande : php composer.phar install

- Bien remplir les paramètres de la base de données
- Utiliser les paramètres par défaut du mailer
- La locale doit être : fr
- Laisser le secret par défaut (non important dans un environnement local)
- Laisser l'url du CDN par défaut
- Insérer l'url de Elasticsearch (ex : http://localhost:9200/)

5. Créer la base de données avec la commande : php app/console doctrine:database:create

6. Créer les schémas avec la commande : php app/console doctrine:schema:create

7. Charger les fixtures avec la commande : php app/console doctrine:fixtures:load (peut prendre plusieurs minutes selon votre connexion)

8. Mettre à jour Elasticsearch avec la commande : php app/console fos:elastica:update

9. Accéder à l'application :

- En mode développement : http://resp-fr.com/app_dev.php
- En mode production : http://resp-fr.com/

4.2 Videocast

Vous trouverez le screencast de notre site en suivant ce lien: Vidéo

5 - Pour aller plus loin

5.1 Application Android

En parallèle du site internet, et pour illustrer l’utilisation de notre API, nous avons développer une application Android. Le fonctionnement de cette application est simple : après avoir effectué de manière asynchrone une requête GET permettant de récupérer la liste des derniers articles publiés au format JSON, le résultat est parsé puis affiché. Chaque article peut ensuite être consulté dans son ensemble, la liste initiale n’affichant qu’un extrait.

Cette application pourrait facilement accueillir de nombreuses fonctionnalités supplémentaires au cours des prochaines semaines.

Téléchargement des sources : Fichier:CAW1 2014 Resp AndroidApp.zip

Resp android.jpg

5.2 Fonctionnalités non développées

Dans cette section, vous trouverez la liste des fonctionnalités prévues mais non développés au cours de la période de projet. Ces fonctionnalités prévues initialement n’ont pas été jugées prioritaire d’un point de vue académique, et n’ont pu être développés faute de temps.

Front Office

  • Inviter un élu : formulaire d’invitation
  • Actualités : page d’actualité du site
  • Affichage des derniers tweets de notre compte

Back Office

  • Gestion des Questions/Réponses liés à un blog

Modules complémentaires

  • Module de newsletter
  • Module de sondage

Social

Développement de notre présence sur les réseaux sociaux (Facebook, Twitter, Google+...)

5.3 Améliorations envisageables

Back Office

Une interface permettant de visualiser des informations statistiques sur les blogs ou les articles serait un atout interessant pour les utilisateurs.

Le portage

A l’image de l’application Android, une application destinée aux terminaux iOS serait indispensable. Une amélioration du responsive design est également à prévoir afin de permettre une consultation agréable à un maximum de terminaux, mobiles ou non.