|
1 | | -# Secure Web Development - Website v0 |
| 1 | +# Web Application |
2 | 2 |
|
3 | | -## 👷 Commentaires |
| 3 | +## Contenu du projet |
| 4 | +### Generalités |
| 5 | +Voici le lien du site produit par ce projet : [Webappfeli](https://webappfeli.netlify.app/) |
4 | 6 |
|
5 | | -Je n'ai malheureusement pas réussi à connecter le front au back... Après avoir cherché longtemps, j'ai fini par m'appuyer sur un template fournis par SvelteKit, mais même avec cela, le lien n'est pas opérationnel... |
6 | | -Je voulais garder séparé le front et le back. Le dossier svelte contient donc la partie front. Pour voir le front (incomplet donc), il faut se déplacer dans le dossier svelte (cd svelte au terminal), puis lancer la commande : "npm run dev" |
| 7 | +Ce projet consiste à appliquer un front-end sur un [back-end](https://github.com/RochMoreau/secure-web-dev-backend) établi précédemment. |
| 8 | +Ce site a : |
| 9 | +- Une page d'accueil |
| 10 | + - Lorsque l'on clique sur la page log out, on est déconnecté et l'on est redirigé vers la page d'accueil |
| 11 | +- Une page de location |
| 12 | + - Si l'on clique sur locations sans s'être connecté auparavant, on est redirigé vers la page de login |
| 13 | + - Dans la page location; il est possible d'ouvrir une page de creation de location si l'utilisateur est un administrateur |
| 14 | +- Une page register |
| 15 | + - La page register permet de se créer un compte si on n'en a pas |
7 | 16 |
|
8 | | -Pour faire compiler comme d'habitude la partie back il faut juste lancer le projet (start index.js en fait), et aller sur un visualisateur comme insomnia ou postman. J'ai essayé d'automatiser le lancement du front dans l'index.js initial, mais sans succes. Les lignes concernant ce point sont en commentaires pour ne pas empecher l'application de démarrer. |
| 17 | +Pour voir le front sans avoir déployé, il faut se déplacer dans le dossier svelte (cd svelte au terminal), puis lancer la commande : "npm run dev" |
| 18 | +Pour faire compiler la partie back sans avoir déployé, il faut juste lancer le projet (start index.js en fait), et aller sur un visualisateur comme insomnia ou postman. |
9 | 19 |
|
10 | | -## Commande principales |
| 20 | +### User Stories |
| 21 | +Voici les objectifs initiaux à atteindre : |
| 22 | +- US1: As a random visitor, I want to be able to register an account or log-in, so I can |
| 23 | +access all features => OK |
| 24 | +- US2: As a random visitor, I want to be redirected to the login/register page when I click on |
| 25 | +“location" tab, so that I know I must log-in to see its content => OK (vers login) |
| 26 | +- US3: As a logged-in user, I want to see locations and be able to click on one location to |
| 27 | +open a modal containing details, so that the website is useful => OK, mais il n'y a pas de paginations pour l'instant |
| 28 | +- US4: As an “admin" user, I want to see a “Add Location” button in the location page, so |
| 29 | +that I can create a new location => OK |
| 30 | +- US5: As an “admin" user, I want to see a button to edit locations in the array of locations, |
| 31 | +so that I can edit existing locations => OK |
| 32 | +- US6: As an “admin" user, I want to see a button to delete locations in the array of |
| 33 | + locations so that I can delete existing locations => OK |
11 | 34 |
|
12 | | -J'ai installé plusieurs éléments suplémentaires, j'espère que je n'en ai oublié aucun : |
13 | | -- npm create svelte@latest svelte pour créer le projet svelte |
| 35 | +## Structure du code |
| 36 | +### Démarche |
| 37 | +J'ai eu quelques difficultés à saisir comment le back et le front allaient être connectés et communiquer ensemble. Je me suis beaucoup appuyé sur un template de SvelteKit pour saisir le fonctionnement. |
| 38 | + |
| 39 | +### Composition du projet |
| 40 | +- Les documents permettant le lancement de l'application, ou bien le remplissage de la base de données sont dans le dossier principal. |
| 41 | +- Dans le dossier src, on peut trouver le back-end initial, construit avec javascript |
| 42 | +- Dans le dossier svelte, on peut trouver le front-end, construit avec svelte kit |
| 43 | + - Le dossier .netlify permet d'effectuer le déploiement du front |
| 44 | + - Le dossier public est un dossier demander lors du déploiement, qui sert d'output |
| 45 | + - Le dossier src contient les routes et les pages sveltes à proprement parler |
| 46 | + |
| 47 | +### Installations |
| 48 | +J'ai installé plusieurs éléments suplémentaires. Ils ne sont pas tous utiles, car parfois, je tatonnais juste, ou bien cherchais une solution en testant différentes options. |
| 49 | + |
| 50 | +J'espère que je n'en ai oublié aucun : |
| 51 | +- npm create svelte@latest svelte (pour créer le projet svelte) |
14 | 52 | - npm install axios |
15 | 53 | - npm install vite |
16 | | -- npm install --save-dev nodemon |
| 54 | +- npm install --save-dev nodemon |
| 55 | +- npm install rollup |
| 56 | +- npm install npx |
| 57 | +- npm install cors |
| 58 | +- npm install webpack |
| 59 | +- npm install svelte |
| 60 | +- npm install -g svelte-kit |
| 61 | +- npm install -g fly-cli |
| 62 | +- npm install flyctl |
| 63 | +- npm install passport-jwt |
| 64 | +- npm install yarn |
0 commit comments