# Binôme

# PWA : de 0 à héros - mettre en production _en 30 minutes_.

## Objectif

Créer une appli qui aide les développerus à gérer leurs sessions de programmation en binôme.

![maquette](./doc/maquette.png)

Avec cette application, on va voir qu'il est facile de créer un projet et de le partager au reste du monde.

## Étapes

1. Créer un projet grâce à VueJS
1. Coder un outil pour faire de la programmation en binôme
1. Déployer avec Netlify
1. Tester sur MacOS et Android (limité sur iOS)

## Avertissements

Dans cette formation, il n'y aura pas :

1. React ou React-Native, le but est de réaliser un site web avec des traits d'application mobile, ce sera l'occasion de voir une nouvelle techno JavaScript !
1. Des test unitaires, on n'a que 30 minutes,
1. Des beaux commits, on n'a que 30 minutes.

### Une PWA avec VueJS

#### `vue-cli`

`vue create bons-programmeurs`

Fonctionnalités :

- node-sass
- babel
- typescript
- router (ne sera pas utilisé)
- vuex (ne sera pas utilisé)
- eslint

`yarn install @vue/composition-api`

1. Ajouter composition API au fichier principal `main.ts`
1. Nettoyer `App.ts`
1. Ajouter les règles à `eslintrc`

#### Code

1. `Home.vue` - présenter un Single File Component
1. Créer le composant `DevSession` et l'utiliser dans `Home.vue`
1. Faire un point sur les variables qu'on veut utiliser
1. Créer le hook `useTimer`, l'utiliser dans `Home.vue`
1. Créer le fichier `app.scss` et l'importer dans `App.vue`
1. Créer le système de notification
1. Créer le logo et utiliser `npx vue-pwa-asset-generator -a public/logo.svg -o public/img`
1. Présenter `vue.config.js` pour alimenter le `manifest.json`
1. Créer la fonctionnalité de musique.

#### Déployer sur Netlify

1. Créer le repo git.
1. Présenter Netlify, Vercel, surge.sh et le principe de CDN
1. Créer le projet sur Netlify, build avec `yarn build --modern` et changer le le nom du DNS.

#### Tester

Installer l'appli sur MacOS, présenter l'appli sur Android. Voir ses limitations

#### Questions