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
Utiliser la librairie logging :
https://docs.python.org/fr/3/howto/logging.html
Publish Scratchy REST API using Open API standard.
gather all components files in only one file
Like the room, use mongoengine for users.
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.
curl --request GET
--url http://localhost:5000/api/user/60438da3a27c7d79a52e8aa9
Return json inside string
Make a better read me with some syntax
README.md :
server/README.md :
front/README.md :
Need to add .vscode
folder to .gitignore
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>
Adding get and delete with mongoengine for room
add a put command to change data in database
delete the model file
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.
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": []
}
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
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>
<message-editor v-on:send-message="api.sendMessage(roomId, $event)"></message-editor>
La valeur de l'event c'est le contenu du message.
link to yamllint here
make a better css
create a function that delete every data
Rename docker-composer.yaml into docker-compose.yaml to be docker-compose compliant (use default filename).
To prevent relative import add a package for the server.
scratchy-server
(that will take advantage of the Flask CLI)make every pseudo unique
Like the room, use mongoengine for messages.
Replace ressources and datbase with mongo engine.
http://mongoengine.org/
efficient and easy one: https://eslint.vuejs.org/
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.
Faire une maquette de l'interface d'une Room.
Décrire les différents composants VueJS qu'on va utiliser.
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.
Remove import database in user and message resources.
Add docker-compose file with mongoDB.
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.
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.
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
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
room have a users list but it's name is user instead of users
Replace database.py in memory with mongo database using pymongo : https://pymongo.readthedocs.io/en/stable/
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
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
Ajouter un endpoint GET /api/room qui renvoie toutes les room.
add a profile image in user in the uml diagram fix all the mistakes
We can try to add this linter : https://pypi.org/project/html-linter/
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.