mdl29 / scratchy Goto Github PK
View Code? Open in Web Editor NEWScratchy, application de tchat projet LPH
License: GNU General Public License v3.0
Scratchy, application de tchat projet LPH
License: GNU General Public License v3.0
Faire une maquette de l'interface d'une Room.
Décrire les différents composants VueJS qu'on va utiliser.
Replace ressources and datbase with mongo engine.
http://mongoengine.org/
room have a users list but it's name is user instead of users
Like the room, use mongoengine for users.
efficient and easy one: https://eslint.vuejs.org/
connaissant l'id d'une room, afficher la liste des messages.
Exemple d'utilisation du composant :
<messages v-bind:messages="messages"></messages>
<script>
//...
data: {
messages: [
{content: "Bonjour tata", author: "toto", timestamp: 1618585021 },
{content: "Salut toto", author: "tata", timestamp: 1618585121 },
]
};
//...
</script>
delete the model file
Replace database.py in memory with mongo database using pymongo : https://pymongo.readthedocs.io/en/stable/
create a function that delete every data
text editor should be renamed into message_editor (both the file and the code), the input should be changed to a styled textarea (to support multiline messages) and the css should be moved to a message_editor.css fil (in front/css). The final HTML should include links to both front/css/global.css and front/css/message_editor.css
add a put command to change data in database
Need to add .vscode
folder to .gitignore
<message-editor v-on:send-message="api.sendMessage(roomId, $event)"></message-editor>
La valeur de l'event c'est le contenu du message.
add a profile image in user in the uml diagram fix all the mistakes
Usage :
<room-list v-bind:rooms="rooms" v-on:room-selected="displayRoom($event)"></room-list>
<script>
//...
rooms = [
{
"_id": {
"$oid": "6071ac5176e5bd456a859d9d"
},
"description": "ma description",
"title": "Room 1",
"user": []
},
{
"_id": {
"$oid": "6071ac5176e5bd456a859d9d"
},
"description": "ma description",
"title": "Room 2",
"user": []
}
]
//...
</script>
$event is the selected room object
Ajouter un endpoint GET /api/message qui renvoie tous les messages.
use insomnia export files with yalm format
make insomnia file with all request and environment variables
export this file in yaml format
add commentary to make a better documentation
Methods for REST API in scratchy service (javascript) for:
Message
User
Room
Methods are:
get by id
update by id
delete by id
get all
Using axios
make every pseudo unique
Interface qui affiche les détail d'une room.
En tant qu'utilisateur de scratchy, je suis pouvoir voir sur la page d'accueil les détail d'une room donnée c'est à dire : son nom, son ID, sa description et la liste des ID des utilisateurs présent dedans.
To enforce PEP8 coding style convention we should add a python linter to the backend code, such as Flake8 (might be the easiest one to add).
A github action that runs it could also be interesting, maybe this one : https://github.com/marketplace/actions/python-code-quality-and-lint
Rename docker-composer.yaml into docker-compose.yaml to be docker-compose compliant (use default filename).
Ajouter un endpoint GET /api/room qui renvoie toutes les room.
Adding get and delete with mongoengine for room
link to yamllint here
We can try to add this linter : https://pypi.org/project/html-linter/
Remove import database in user and message resources.
To prevent relative import add a package for the server.
scratchy-server
(that will take advantage of the Flask CLI)Make a better read me with some syntax
README.md :
server/README.md :
front/README.md :
Add docker-compose file with mongoDB.
Mise en place de l'API Flask avec 1 ressource room, GET qui pour la room id:0
renvoi :
GET HTTP /api/room/0 :
{
"id": 0,
"title": "Mon premier salon",
"description": "Salon de test",
"users": []
}
Utiliser la librairie logging :
https://docs.python.org/fr/3/howto/logging.html
make a better css
Publish Scratchy REST API using Open API standard.
Like the room, use mongoengine for messages.
Front App needs more structuration and macro visualisation, we need a first draft of the VueJS components organisation, Api related services and the model.
Model will be the same as the API and serveur site model.
This diagram should help developers understand what are the props/data/methods of the components.
Use case :
As a end user I need to choose my pseudo to use the app.
As a end user I would like to automatically create an account if the pseudo doesn't exists.
As a end user I would like to use the same account each time I use the app with the same pseudo.
We need a VueJS component that invites the user to type it's pseudo before using the app it should emit an event when the user wants to validate it's pseudo.
curl --request GET
--url http://localhost:5000/api/user/60438da3a27c7d79a52e8aa9
Return json inside string
We wrote the model on a whiteboard last time, @landerneRPi as the export :
This should be added to a documentation folder in this repository. Model should be improved also.
Apparently @yannis-mlgrn is already writing some css on #104 so this may not end up in the final product but i'd like to add my take on the style anyway, so i'll open a PR soon
Front guys need a way to retreive a user using it's pseudo, will be used in the first version login (a bit like IRC).
We need a get endpoint : /api/user/?pseudo=totoPseudo
that will return the corresponding profile of 404 if nothing is found.
Usage :
<user-list v-bind:users="users"></user-list>
<script>
//..
users = {
{
"_id": {
"$oid": "607ae876f59d21d5a50ac3c9"
},
"pseudo": "mon pseudo",
"user": "default",
"roomsId": []
},
{
"_id": {
"$oid": "607ae876f59d21d5a50ac3c9"
},
"pseudo": "mon pseudo",
"user": "default",
"roomsId": []
}
}
//..
</script>
gather all components files in only one file
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.