GUIDE.md

Benzimag website

Rédigé par Paul Vernin

Document permettant de guider les autres développeurs débutants à travailler sur ce projet.

Technologies utilisées

• Repo manager : [email protected]
• Backend :
  • [email protected] : framework global du backend
  • Express.js
  • Sequelize : ORM (lien entre backend et base de données)
  • SQLite3 : SQL engine (facile à mettre en place)
• Frontend :
  • Svelte : framework global frontend
  • SvelteStrap : framework CSS
  • Axios : pour créer des requêtes API.

---

Mise en place de l'environnement de travail

1. Installer Node.js
2. Installer Yarn (node install yarn)
3. lancer yarn install afin d'ajouter les différentes librairies nécessaires au fonctionnement de l'application (qu'on retrouve dans package.json)

---

Lancer l'application en local

yarn dev

L'application sera lancé à cette adresse : http://localhost:5050/

---

Développemet

Pages du site

Pour développer le frontend, on va principalement utiliser un framework CSS qui est SvelteStrap. C'est un framework qui met à disposition plein de composant déjà fait et qui aide beaucoup au développement.

Pour tester le responsive : aller sur localhost:5050 -> clique droit -> inspecter -> en haut du panel cliquer sur le bouton "toggle device toolbar"

---

Git

Pour travailler sur le site :

1. Commencer par cloner le site

git clone --branch development https://github.com/Paul-vrn/benzimag.git

2. Switch sur la branche development (si pas déjà le cas)

git checkout development

3. Après ça, les commandes pull, commit et push se feront sur la bonne branche

---

Arborescence

.
├── public
│   ├── custom.css
│   ├── global.css
│   ├── fonts
│   ├── images // ici on met toutes les images "statiques"
│   ├── index.html
│   └── login.html
├── src
│   ├── backend // Partie backend (express.js)
│   │   ├── config.js
│   │   ├── data // données stockées en dur
│   │   │   ├── db.sqlite
│   │   │   └── liste.json
│   │   ├── model // (Sequelize) models liées à la BDD
│   │   │   ├── QG.js
│   │   │   ├── commande.js
│   │   │   ├── detail_commande.js
│   │   │   ├── index.js
│   │   │   ├── livreur.js
│   │   │   ├── produit.js
│   │   │   └── stock.js
│   │   └── routes // routes API
│   │       ├── api.js
│   │       └── liste.js
│   └── frontend // Partie frontend (Svelte)
│       ├── api // (Axios)
│       │   ├── api.js
│       │   └── getListe.js
│       ├── components // composants de Svelte
│       │   ├── App.svelte
│       │   ├── admin // partie serveur du front (pour les admins)
│       │   └── main // partie client du front (pour les clients)
│       ├── main.js // Application
│       └── stores.js // stores.js (check doc svelte)
├── README.md
├── package.json // liste des packages installés et autres infos
├── rollup.config.js 
├── server.js // fichier qui load le serveur
└── yarn.lock

---

Ressources

Des ressources pour en apprendre plus sur les technologies utilisées :

• HTML :
  • HTML basics
• CSS :
  • CSS docs
  • Flex box
  • Exercice flex-box
• JavaScript :
  • Quick guide JS
  • Concept de Functional programming
  • 5 JavaScript Concepts You HAVE TO KNOW
  • Concept avancé utile :
    • Async func
    • LocalStorage
    • Axios
• Svelte
  • Svelte Docs
  • SvelteStrap

---

Quelques extensions utiles pour développer

• HTML CSS Support
• IntelliSence for CSS puis cliquer sur le petit éclair en bas à gauche
• Material Icon Theme
• Svelte for VS Code