Projet synthèse A2022-IN : Générateur d'art météorologique

Membres de l'équipe : Jessica Chan et Sebastian Perez

Sommaire

Le Générateur d'art météorologique crée des animations en fonction de la météo.

Installations des dépendances du projet

FontAwesome

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

react-p5

npm i --save react-p5

react-router-dom

npm i react-router-dom

webm-writer

npm i webm-writer

Utilisation

Pour un démarrage dans l'environnement développeur à partir de VSCode

• Démarrer le backend avec WAMP ou MAMP pointant sur le dossier dev/projet-synthese/src/api
• Se connecter à la base de données
• Dans le terminal, se déplacer dans le dossier dev/projet-synthese
• Démarrer React avec la commande :

npm start

Pour accéder au site web en ligne

• À partir d'une adresse IP valide comme l'adresse IP du cégep, entrer dans l'URL :

3.17.148.76

UPDATE 20 décembre 2022 : Accéder au site web par l'adresse suivante en raison du pare-feu de l'école :

http://ec2-3-17-148-76.us-east-2.compute.amazonaws.com/

References

PHP

• REF : https://developer.okta.com/blog/2020/01/15/protecting-a-php-api-with-oauth
• REF : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
• REF : https://www.tutorialkart.com/php/php-get-ascii-value-of-a-character/#:~:text=PHP%20%E2%80%93%20Get%20ASCII%20Value%20of,value%20between%200%20and%20255.
• REF : https://www.tutorialkart.com/php/php-loop-through-characters-in-string/
• REF : https://stackoverflow.com/questions/13392842/using-php-regex-to-validate-username

CSS

• REF : https://www.sliderrevolution.com/resources/css-border-animation/

Javascript

• REF : https://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm

• REF : https://reactjs.org/docs/react-component.html#componentdidmount

• REF : https://www.geeksforgeeks.org/whats-the-difference-between-super-and-superprops-in-react/#:~:text=Super()%3A%20It%20is%20used,from%20one%20component%20to%20another

• REF : https://www.pluralsight.com/guides/react.js-br-tag-and-ajax-request

• REF : https://reactjs.org/docs/forms.html

• REF : https://github.com/processing/p5.js/wiki/Global-and-instance-mode

• REF : https://codesandbox.io/s/k09k8knxz5

• REF : https://betterprogramming.pub/implementing-a-queue-in-javascript-59b332c7ff0d

• REF : https://bobbyhadz.com/blog/javascript-change-position-of-element-in-array#:~:text=To%20change%20the%20position%20of%20an%20element%20in%20an%20array%3A&text=Use%20the%20splice()%20method%20to%20insert%20the%20element%20at,elements%20at%20a%20specific%20index

• REF : https://www.programiz.com/javascript/examples/stack

• REF : https://www.statology.org/normalize-data-between-0-and-1/

• REF : https://www.w3schools.com/js/js_random.asp

• REF : https://github.com/processing/p5.js/wiki/Global-and-instance-mode

• REF : https://dev.to/ramonak/javascript-how-to-access-the-return-value-of-a-promise-object-1bck

• REF : https://css-tricks.com/snippets/javascript/random-hex-color/

• REF : https://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm

• REF : https://www.npmjs.com/package/react-jsx

• REF : https://reactjs.org/docs/add-react-to-a-website.html

• REF : https://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm

• REF : https://rajdeep-das.medium.com/how-to-add-react-to-an-existing-website-or-web-project-11b598f989d3

• REF : https://reactjs.org/docs/introducing-jsx.html