├── README.md ├── Remises.md └── Enonce.md /README.md: -------------------------------------------------------------------------------- 1 | # ugram 2 | 3 | ugram est le dépôt contenant toutes les ressources nécessaires à la réalisation du projet de session du cours Développment d'applications web avancé. Le projet est réalisé en équipe de 4 à 6 et comporte 3 livrables. Les étudiants auront à réaliser le frontend et le backend de l'application. 4 | 5 | Il est bien important de lire les pages suivantes: 6 | 7 | * [Énoncé](https://github.com/GLO3112/ugram/blob/master/Enonce.md) 8 | * [Remises](https://github.com/GLO3112/ugram/blob/master/Remises.md) 9 | * [Grille de correction](https://docs.google.com/spreadsheets/d/1C52Qwlf5l4wu_2_SGlAbJ6PKlXMl4jJfihJuSchRRSM/edit?usp=sharing) 10 | 11 | ## Compte AWS 12 | 13 | Chaque équipe devra posséder un compte AWS Free. Voir les détails [ici](https://aws.amazon.com/free/). Il est important de prendre conscience des limitations que le compte Free offre. L'enseignant se dégage de tout coût supplémentaire entrainé par le dépassement de ces limites. 14 | 15 | ## Développement 16 | 17 | Les étudiants auront des dépôts Git fournis pour leurs projets. 18 | Si votre équipe désire avoir plusieurs dépôts, svp envoyez un courrier à l'enseignant au début de la session. 19 | 20 | ## Frontend 21 | 22 | L'utilisation de **TypeScript** est obligatoire pour le projet. 23 | Le framework JavaScript est laissé au choix de l'équipe (React, Vue, Angular, Svelte etc.) tout comme le framework CSS (Tailwind, Bulma etc.). 24 | 25 | ## Backend 26 | 27 | Le backend peut être développé dans le langage de préférence de l'équipe, quoique _NodeJs_ ou _Java_ sont fortement suggérés. 28 | La technologie choisie doit s'intégrer avec AWS si applicable. 29 | 30 | Certaines restrictions s'appliquent: 31 | * L'utilisation de PHP est **interdite**. 32 | * L'utilisation de technologies fonctionnent exclusivement sur Windows est **interdite**. 33 | 34 | Notez que les frameworks de SSR telles que Next ou Nuxt sont également permis. 35 | -------------------------------------------------------------------------------- /Remises.md: -------------------------------------------------------------------------------- 1 | # Remises 2 | 3 | Les remises ne seront pas effectuées par le portail des cours. Au contraire, les étudiants seront responsable de déployer leurs applications, et tout sera géré à partir du dépôt GitHub. 4 | 5 | Pour chaque livrable, les équipes devront suivre la procédure suivante: 6 | 7 | * Créer une branche nommée release-X (où X est le numéro du livrable) dans le dépôt GitHub. 8 | * Fournir un README du livrable avec les instructions pour les correcteurs. 9 | * Respecter les spécificités listées plus bas. 10 | 11 | La branche **ne doit plus être touchée** une fois la date de remise passée. Une modification de la branche après la date de remise peut entraîner de fortes pénalités. Les correcteurs utiliseront le code directement sur GitHub. 12 | 13 | ## Livrable 0 14 | 15 | Le livrable 0, également appelé _design_ sur le portail des cours, consiste en un simple document décrivant l'architecture de votre projet et les technologies que vous désirez utiliser. Ce document devrait être écrit à même le README du dépôt GitHub, et comprendre les éléments suivants: 16 | 17 | * Frameworks choisis pour le frontend 18 | * Langage choisi pour le backend 19 | * Frameworks choisis pour le backend: framework REST, ORM, logging, etc. 20 | * Base de données choisie 21 | * CI/CD choisi 22 | * Méthode de déploiement si différente de celle proposée plus bas (si vous n'êtes pas certains, simplement mentionner que le déploiement suivra les méthodes démontrées dans le cours) 23 | * Tout autre information pertinente à l'architecture si désirée 24 | 25 | Le but du livrable 0 est simplement que l'enseignant s'assure que les équipes soient sur le bon chemin pour la réalisation du projet. 26 | 27 | ## Livrable 1 28 | 29 | Le livrable 1 consiste en une remise de client et serveur, sans déploiement pour l'instant. 30 | 31 | Puisque l'application n'est pas encore déployée, les étudiants devront fournir un **docker compose** contenant l'application et toutes ses dépendances (base de donnée, notamment). Les correcteurs ne devraient qu'avoir à rouler docker pour faire fonctionner l'application. Toute manipulation supplémentaire entrainera de fortes pénalités. 32 | 33 | Les instructions pour rouler l'application devront être incluses dans le README de la branche de release. L'application *ne devra aucunement être modifiée* après la date de remise. 34 | 35 | ## Livrable 2 36 | 37 | Le livrable 2 consiste en une remise de client et serveur et inclut le déploiement. 38 | 39 | Il existe plusieurs possibilités de remise, mais la méthode proposée en est une hybride. 40 | 41 | * L'entièreté du code frontend pourrait être déployé dans Amazon S3 sous forme de site statique. Voir la [documentation suivante](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html) pour la procédure et [cette documentation](http://docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html) pour un exemple détaillé. 42 | * Le serveur pourrait être déployé dans Amazon Elastic Beanstalk. Voir instructions et exemples [ici](https://aws.amazon.com/documentation/elastic-beanstalk/). 43 | 44 | Le lien de l'application (lien S3 ou Cloudfront) devra être inclus dans le README de la branche de release. Le site *ne devra aucunement être modifié* après la date de remise. Il est donc recommandé de vous faire 2 environnements AWS afin de ne pas interférer. 45 | 46 | ## Review intermédiaire 47 | 48 | Vous trouverez sur le portail des cours un livrable nommé *review intermédiaire*, situé entre les livrables 2 et 3. 49 | Il s'agit simplement d'une plage horaire qui sera attribuée à votre équipe afin de discuter de votre travail avec le correcteur. 50 | Au minimum un membre de l'équipe doit être présent durant la plage attribuée. 51 | 52 | De plus amples informations seront données par l'enseignant au courant de la session. 53 | 54 | 55 | ## Livrable 3 56 | 57 | Le livrable 3 consiste en une remise de client et serveur. 58 | 59 | La remise est sensiblement identique au livrable 2. Par contre, dans le README, vous devrez également expliquer la stratégie/les outils de _monitoring_ que vous employez pour votre application. Vous devrez également indiquer quelles fonctionnalités additionnelles vous avez choisi et le fonctionnement de leurs implémentations respectives. 60 | 61 | Le lien de l'application (lien S3 ou Cloudfront) devra être inclus dans le README de la branche de release. Le site *ne devra aucunement être modifié* après la date de remise. Il est donc recommendé de vous faire 2 environnements AWS afin de ne pas interférer. 62 | -------------------------------------------------------------------------------- /Enonce.md: -------------------------------------------------------------------------------- 1 | # Énoncé du projet de session 2 | 3 | Le projet de session consiste à développer une application web similaire à [Instagram](https://www.instagram.com). Les étudiants devront développer les parties client ET serveur de l'application. Il est très important pour les étudiants de lire les sections [Remises](https://github.com/GLO3112/ugram/blob/master/Remises.md) et [Grille de correction](https://docs.google.com/spreadsheets/d/1C52Qwlf5l4wu_2_SGlAbJ6PKlXMl4jJfihJuSchRRSM). Les remises seront passablement différentes des autres cours! 4 | 5 | Le projet doit être fait en équipe de 4 à 6 étudiants. L’équipe doit utiliser les dépôts GitHub fournis par l'enseignant. L'application doit être réalisée en *anglais*. 6 | 7 | Voir dates de remise sur le portail des cours. 8 | 9 | ## Livrable 1 10 | 11 | Le livrable 1 consiste au développement des bases de l'application. 12 | 13 | Les fonctionnalités suivantes devront être implémentées: 14 | * L'usager doit pouvoir consulter son profil usager. 15 | * Photo de profil 16 | * Nom d'usager 17 | * Prénom/Nom 18 | * Email 19 | * Numéro de téléphone 20 | * Date d'inscription 21 | * L’usager doit pouvoir éditer son profil usager. 22 | * Prénom/Nom 23 | * Email 24 | * Numéro de téléphone 25 | * L'usager doit pouvoir consulter la liste des usagers. 26 | * L'usager doit pouvoir consulter le profil d'un usager ainsi que ses images. 27 | * L'usager doit pouvoir téléverser une image avec les champs suivants. 28 | * Description 29 | * Mots clés (hashtags) 30 | * Mention d'un usager 31 | * L'usager doit pouvoir modifier les champs d'une de ses images. 32 | * L'usager doit pouvoir supprimer une de ses images. 33 | * L'usager doit pouvoir consulter ses images. 34 | * L'usager doit pouvoir consulter une image en particulier. 35 | * L'usager doit pouvoir consulter une liste d'images ordonnées par date, tout usager confondu. 36 | 37 | ## Livrable 2 38 | 39 | Le livrable 2 consiste au développement de la partie client ET de la partie serveur de l'application, ainsi que quelques fonctionnalités supplémentaires. 40 | 41 | En addition des fonctionnalités du livrable 1, les fonctionnalités suivantes devront être implémentées: 42 | 43 | * L'usager doit pouvoir s'authentifier dans l'application en utilisant un fournisseur OAuth connu. (Facebook, Google etc.) 44 | * S'il ne possède pas de compte, l'usager doit pouvoir s'enregistrer dans l'application. 45 | * L'usager doit pouvoir se déconnecter de l'application. 46 | * L'usager doit pouvoir supprimer son compte. 47 | * L'usager doit pouvoir rechercher un autre usager. 48 | * L'usager doit pouvoir rechercher pour des images contenant un mot précis dans leur description. 49 | * L'usager doit pouvoir rechercher pour des images contenant un mot clé (hashtag) précis. 50 | 51 | Des points seront également attribués pour: 52 | * Le déploiement automatisé de l'application 53 | * La gestion des privilèges sur les opérations d'édition (Ne pas supprimer une image d'un autre usager, par exemple...) 54 | 55 | ## Livrable 3 56 | 57 | Le livrable 3 consiste au développement de la partie client ET de la partie serveur de l'application, ainsi que quelques fonctionnalités supplémentaires. 58 | 59 | En addition des fonctionnalités du livrable 2, les fonctionnalités suivantes devront être implémentées: 60 | 61 | * L'usager doit pouvoir réagir aux images d'un autre usager. 62 | * L'usager doit pouvoir commenter les images d'un autre usager. 63 | * L'usager doit pouvoir consulter les réactions et commentaires sur l'une de ses images. 64 | * L'usager doit pouvoir recevoir des notifications lorsqu'un usager réagit ou commente sur l'une de ses images. 65 | * L’application doit gérer le _resizing_ des images téléchargées et offrir les images en différents formats. 66 | 67 | Les fonctionnalités suivantes sont aux choix des étudiants. Chaque fonctionnalité possède un nombre de points associé, et l'équipe doit implémenter au minimum **15** points. La fonctionnalité doit être complète et fonctionnelle afin de recevoir le nombre de points associé, assurez-vous de choisir judicieusement... 68 | 69 | * (3) L'usager doit pouvoir envoyer un message privé à un autre usager 70 | * (5) L'usager doit pouvoir rechercher par mot clé ou description avec autocomplétion 71 | * (8) L'usager doit pouvoir discuter en temps réel avec un autre usager 72 | * (8) L'usager doit pouvoir se faire recommander les comptes d'usager les plus populaires 73 | * (10) L'usager doit pouvoir se faire recommander des comptes d'usager basés sur ses intérêts 74 | * (10) L'usager doit pouvoir être intégrée avec un autre fournisseur de photos (Google Photos..) 75 | * (5) L'usager doit pouvoir consulter les mots-clés les plus populaires 76 | * (5) L'usager doit pouvoir appliquer des filtres sur ses photos lors du téléversement 77 | * (5) L'usager doit pouvoir dessiner sur la photo lors du téléversement 78 | * (5) L'usager doit pouvoir prendre une photo avec sa webcam 79 | 80 | En plus des points mentionnés au livrable 2, des points seront également attribués pour: 81 | * Le monitoring de l'application 82 | * Les métriques de l'application 83 | * La sécurité de l'application 84 | * La documentation dynamique de l'application 85 | 86 | Encore une fois, consultez la section [Remises](https://github.com/GLO3112/ugram/blob/master/Remises.md) ! Bonne chance. 87 | 88 | --------------------------------------------------------------------------------