Logo Aries

École Aries - Promotion 2017

Titre professionnel 01280 : Développeur•euse logiciel

HowTo

Présentation du projet de fin d'étude

Mathieu Schmidt

Le mardi 16 janvier 2018

Présentation de l’entreprise et du service

HowTo, sharing ideas to make management easier 🤹‍


  const happyManager = manager.reduce(labor,gif)
  • Upload and share gifs (Animated series of images )
  • A gift 🎁 for managers

Contexte du projet

Haas & Milan

Haas & Milan

Problématique

Comment, grâce à un outil innovant et facile d'utilisation, l'on peut transmettre de l'information ou du contenu rapidement et simplement à l'ensemble d'une équipe ?

Cahier des charges

Expressions des besoins

Besoins fonctionnels

  • Partager un gif avec l'url
  • Gestion de l'authentification
  • Téléverser des gifs
  • Suppression des gifs par l'admin

Besoins non fonctionnels

  • Temps chargement ≈ 10s avec 3G lent
  • Responsive
  • Compatibilité navigateurs
  • Application web

Environnement humain

Personas et UX Map

  • Persona primaire : Jerry Smith
  • Persona secondaire : Mr. Marklovitz
Jerry persona
Mr. Marklovitz persona

Environnement technique

  • IE9+
  • Android version 4
  • Javascript

Analyse

Technologies à utiliser

Frontend / Client

angular, ember, knockout, spine, vue, polymer, matreshka, framework, nuclear-js, backbone, react, aurelia, dojo...

todomvc.com/

http://todomvc.com/

Performance

Première peinture significative

Première peinture significative (ms) - Bas = bien

Google trends

Google Trends

React évolue très vite

Emploi

React jobs

2017 : React > jQuery (source: Indeed.com)

Choix du moteur de base de données

Choix d'implémentation

  • Gratuit
  • RDBMS / DBMS

MySQL, Postgres, Cassandra, SQLite...

MySQL, Postgres, Cassandra, SQLite popularité

MySQL

  • MySQL
  • Postgres 🏆 : production
  • Cassandra
  • SQLite 🏆 : développement

Backend / Serveur

php, Perl, ruby, java, go, node, python, C# et C++

↪️ Demande du client : Javascript

Framework Node.js

Meteor : 39007 ⭐️

Express : 36047 ⭐️

Next : 21097 ⭐️

...

Framework Node.js

Meteor

Express 🏆

Next

...

Dreamteam

logo express logo postgres logo react

Conception et codage

  1. Conception orientée technique
  2. Révision avec conception centrée utilisateur

Maquetter une application

Mockup : Figma - local

Maquetter une application

Prototype : Marvelapp - local

Concevoir une base de données

diagramme UML gif user 

// générer un hash
User.prototype.generateHash = pwd => bcrypt.hash(pwd, bcrypt.genSaltSync(8))
// Méthode de validation 
User.prototype.validPassword = function validPassword(pwd) {
  return bcrypt.compare(pwd, this.password)
}

Mettre en place une base de données

  • Choix de l'ORM (Sequelize)
  • Implémentation des entités Gif et User
  • Hashage du mot de passe
  • Préparer et tester le déploiement ( Heroku postgres)
  • Tester l'intégrité

Développer des pages web en lien avec une base de données

Côté serveur

  • Connecter l'ORM (Sequelize) à SQLite et Postgres
  • Connecter GraphQL à l'ORM (Sequelize)
  • Créer les routes
  • Gérer l'authentification
  • Server side rendering

Côté frontend

  • Installer semantic-ui-react
  • Connecter Redux (actions, reducers, constantes...)
  • Navbar
  • "Fetcher" les données GraphQL sur appel de route

Développer des composants d'accès aux données

admin en production

Démonstration de l’interface

Présentation des éléments les plus significatifs de l’interface de l’application

↪️ Révision avec conception centrée utilisateur

Scénario persona secondaire

Mr. Marklovitz teste l'application pour la première fois

Mr. Marklovitze premier contact
Etape 1 Etape 2 Etape 3
Actions Identifier le site Uploader des gifs Partage du lien dans un email ou via copier/coller
Pensées Où on va ? Besoin de confirmations Crainte que les utilisateurs ne comprennent pas comment s'utilise le site
Expériences 🙁 Légèrement mécontent ☹️ Mécontent 😔 Déçu
Opportunités Logo + présentation Clarifier Spinner + messages Création d'un tutoriel pour les utilisateurs qui doivent regarder des gifs

Scénario persona primaire

Jerry reçoit un email de Mr. Marklovitz

Jerry email
Etape 1 Etape 2 Etape 3
Actions Il reçoit un email du manager. Lien et objet de l'email "Bonne nouvelle" Regarder le gif Prépare son environnement reproduire tutoriel
Pensées "J'ai trouvé le bouton". Il est rassuré: "Ouf !" "Cool ça se répète". Visualiser le temps Eviter fermeture accidentelle pop up
Expériences 😌 Soulagé 🙂 Souriant légèrement 😀 Souriant
Opportunités Arriver sur le site avec un gif animé Reproduire le tutoriel Feedback et note

Synthèse et conclusion

Gestion du temps

Trello
Calendrier octobre
Calendrier novembre

Leçons tirées

  • Plus d'organisation
  • Faire les choses au fur et à mesure
  • ❤️ Postgres
  • ❤️ GraphQL

Remerciements 👋

Aries (Carole, Byron et Florence), Pascal, Sonia, Serge, Jérémy, Patrick, Coovia (Pol, Murielle et Laurenne) et Ex-Coovia (Alice, Manu, Damien, David, Sébastien, Philipe), Team Reactorz (Elo, Nico, Florent, Mehdi, Romain, Raphaël, Jordan, Loïc), Lolo, Paul, Alice, Antoine, Blandine, Françoise, Ulysse, Jérôme, Brian et bien sûr Juliane.

SQL Joins

Le salage, est une méthode permettant de renforcer la sécurité des informations qui sont destinées à être hachées en y ajoutant une donnée supplémentaire afin d’empêcher que deux informations identiques conduisent à la même empreinte

salt

ES2015

  • Constants
  • Scoping variables
  • Arrow functions
  • Extend parametic handling: default parameter, rest, spread
  • Template literals
  • Enhanced object properties: Property shorthand, Computed property names, method property
  • export (default) import

ES2015

  • Classes
  • Symbol type
  • Generators
  • Map, Set
  • Typed array
  • Promises

ES2016

  • Array.prototype.includes()
  • Exponentiation operator
  • Rest parameter destructuring

ES2017

  • Object.values() and Object.entries()
  • async/await
react lifecyle