binome/README.md

Bons programmeurs

De 0 à héros : Mettre une PWA en production en 30 minutes.

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

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