PWA : de 0 à héros - mettre en production en 30 minutes l'application Binôme

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
2. Coder un outil pour faire de la programmation en binôme
3. Déployer avec Netlify
4. 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 !
2. Des test unitaires, on n'a que 30 minutes,
3. 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
2. Nettoyer App.ts
3. Ajouter les règles à eslintrc

Code

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

Déployer sur Netlify

1. Créer le repo git.
2. Présenter Netlify, Vercel, surge.sh et le principe de CDN
3. 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