72 lines
2.0 KiB
Markdown
72 lines
2.0 KiB
Markdown
# 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.
|
|
|
|
|
|
|
|
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 add @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
|