From 48030ff848f4d657d127ca1065c3cdda284b3700 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 4 Jul 2020 15:54:59 +0200 Subject: [PATCH] :pencil: (add summary of the formation) --- README.md | 75 +++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 56 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index d2be59b..737434c 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,61 @@ -# bons-programmeurs +# Bons programmeurs -## Project setup -``` -yarn install -``` +# De 0 à héros : Mettre une PWA en production _en 30 minutes_. -### Compiles and hot-reloads for development -``` -yarn serve -``` +## Étapes -### Compiles and minifies for production -``` -yarn build -``` +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) -### Lints and fixes files -``` -yarn lint -``` +## Avertissements -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +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