# Bons programmeurs

# De 0 à héros : Mettre une PWA en production _en 30 minutes_.

## É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, l'application sera un site web avec des traits d'application mobile, ce sera l'occasion de voir une nouvelle techno JavaScript !
1. Des test unitaires, on a que 30 minutes,
1. Des beaux commits, on a que 30 minutes.

### Une PWA avec VueJS

#### `vue-cli`

`vue create bons-programmeurs`

Fonctionnalités :

- node-sass
- babel
- typescript
- router
- vuex
- eslint

`yarn install @vue/composition-api`

1. Ajouter composition API au fichier principal `main.ts`
1. Nettoyer `App.ts`

#### 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. 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