From 6c612f165e065f426ed849572d79d5c51f1b5c5b Mon Sep 17 00:00:00 2001 From: lee Date: Mon, 31 Aug 2020 16:17:53 +0100 Subject: [PATCH] clean up and subject update --- subjects/graphql/README.md | 97 +++++++++++++++++++++----------- subjects/graphql/index.html | 2 +- subjects/graphql/lib/schema.js | 8 ++- subjects/graphql/lib/schema.json | 22 ++++---- 4 files changed, 82 insertions(+), 47 deletions(-) diff --git a/subjects/graphql/README.md b/subjects/graphql/README.md index bc8962c0..c04ea039 100644 --- a/subjects/graphql/README.md +++ b/subjects/graphql/README.md @@ -2,7 +2,7 @@ ### Objectives -The objective of this project is to learn graphql query language by creating your own profile. It will be provided,\ +The objective of this project is to learn graphql query language by creating profiles. It will be provided,\ by the platform, a graphql endpoint that is connected to the database. So you can query this endpoint to obtain the information you desire.\ **Note** that for security reasons some tables are private and some are public, you will only be provided with certain content. @@ -23,7 +23,7 @@ GraphQL is a query language for any API endpoint and runtime. The syntax lets yo You must have in mind that this language is used for API endpoints and not database. Unlike SQL,\ graphql query does not go to your database directly but to your graphql API endpoint which can connect to a database or any other data source. -You are already familiar to REST, since REST is a robust methodology of creating APIs and not elastic/scalable.\ +You are already familiar with REST, since REST is a robust methodology of creating APIs and not elastic/scalable.\ It can be at the same time painful, because it requires individual creation of each API, example: `v1/user/item/{id}`, `v1/post/item/{id}` and so on. The main feature of graphql compared to REST is that it lets you ask for specific information. And even better then that is the nesting feature. @@ -65,62 +65,95 @@ query { } ``` -For this example we ask for the users followers and request their names and ids.\ -The examples above are simple examples, **note** that this query is require the introduction of variables(arguments)\ +For this example we ask for the user followers attribute, requesting the followers names and ids.\ +The examples above are simple examples. **Note** that for this query is required the introduction of variables (arguments)\ so it will return just one user, the user that as the id equal to `13`. -In graphql the usage of arguments can be specified in the schema of the API endpoint. Here is the *docs* for the graphql endpoint you are going to use, [Schema](https://01.alem.school/public/subjects/grapqhl) +In graphql the usage of arguments can be specified in the schema of the API endpoint. Here is the _docs_ for the graphql endpoint you are going to use, _https://[[DOMAIN]]/public/subjects/grapqhl_ - +--- + +### **profile** + +You will have to create a profile system where you can see all the info of a student. The information/data is present\ + on the graphQL endpoint, where you will have to query it. + +The display of the information is up to you to design, but it must include: +- Basic user identification, for example **githubLogin** +- **XP** amount +- **level** +- **grades** +- **skills** +- **statistics** +Any other information you desire to display is welcome and will be noted + +Beside this information, you will have to create a search engine which returns a selection of students profiles, based on the students: + +- Name +- XP +- level +- skills + +For instance you can search for a student by their `githubLogin` or filter the students by the amount of `XP` or which `level`/`skill`. --- ### Usage -> Here are the list of tables that you are available to query: +> Here is the list of tables that you are allowed to query, for more information you can check out the _docs_ `https://[[DOMAIN]]/public/subjects/grapqhl`: - **User table**: -| id | githubLogin | -| --- | ----------: | -| 1 | person1 | -| 2 | person2 | -| 3 | person3 | + This table will have information about the user + + | id | githubLogin | + | --- | ----------: | + | 1 | person1 | + | 2 | person2 | + | 3 | person3 | - **Transactions table**: -| id | type | amount | userId | createdAt | -| --- | :--: | -----: | -----: | -------------------------------: | -| 1 | xp | 234 | 1 | 2019-03-14T12:02:23.168726+00:00 | -| 2 | xp | 1700 | 2 | 2019-03-14T12:02:23.168726+00:00 | -| 3 | xp | 175 | 3 | 2019-03-14T12:02:23.168726+00:00 | + This table will give you access to XP and audits ratio + + | id | type | amount | userId | attrs | createdAt | + | --- | :--: | -----: | -----: | -----------------------: | -------------------------------: | + | 1 | xp | 234 | 1 | `{"objectId": 3001, ...` | 2019-03-14T12:02:23.168726+00:00 | + | 2 | xp | 1700 | 2 | `{"objectId": 3001, ...` | 2019-03-14T12:02:23.168726+00:00 | + | 3 | xp | 175 | 3 | `{"objectId": 3001, ...` | 2019-03-14T12:02:23.168726+00:00 | - **Progress table**: -| id | userId | attrs | bestResultId | objectId | -| --- | :----: | -----------------------: | -----------: | -------: | -| 1 | 1 | `{"name": "memory", ...` | s | 198 | -| 2 | 2 | `{"name": "memory", ...` | s | 198 | -| 3 | 3 | `{"name": "memory", ...` | s | 198 | + | id | userId | attrs | bestResultId | objectId | + | --- | :----: | -----------------------: | -----------: | -------: | + | 1 | 1 | `{}` | 61 | 3001 | + | 2 | 2 | `{"name": "memory", ...` | NULL | 198 | + | 3 | 3 | `{"name": "memory", ...` | 14319 | 177 | - **Results table**: -| id | grade | progressId | -| --- | ----: | ---------: | -| 1 | 0 | 58 | -| 2 | 0 | 58 | -| 3 | 1 | 58 | + Both progress and result table will give you the student progression + + | id | createdAt | updatedAt | grade | progressId | attrs | + | --- | --------------------: | --------------------: | ----: | ---------: | ---------------------------: | + | 1 | 2019-07-06T13:52:5... | 2019-07-06T13:52:5... | 0 | 58 | `{}` | + | 2 | 2019-07-06T13:52:5... | 2019-07-06T13:52:5... | 0 | 58 | `{"errors": {"steps": ...}}` | + | 3 | 2019-07-06T13:52:5... | 2019-07-06T13:52:5... | 1 | 58 | `{}` | - **Object table**: -| id | grade | progressId | -| --- | ----: | ---------: | -| 1 | 0 | 58 | -| 2 | 0 | 58 | -| 3 | 1 | 58 | + This table will give you information about all objects (exercises/projects) + + | id | name | type | status | attrs | childrenAttrs | createdAt | updatedAt | + | --- | ---: | -------: | -----: | ------------------------: | ------------: | --------------------: | --------------------: | + | 1 | 0 | exercise | draft | `{"language": "dom", ...` | `{}` | 2019-03-14T12:02:2... | 2019-03-14T12:02:2... | + | 2 | 0 | project | online | `{"language": "go", ...` | `{}` | 2019-03-14T12:02:2... | 2019-03-14T12:02:2... | + | 3 | 1 | exercise | online | `{"language": "js", ...` | `{}` | 2019-03-14T12:02:2... | 2019-03-14T12:02:2... | This project will help you learn about: - [Graphql](https://graphql.org/) language +- Custom search operations (`include`/`exclude`/`fuzzy`) +- Basics of human-computer interface diff --git a/subjects/graphql/index.html b/subjects/graphql/index.html index abdbc553..51cc370e 100644 --- a/subjects/graphql/index.html +++ b/subjects/graphql/index.html @@ -62,7 +62,7 @@ input { height: 50px; } -h3, h4 { +h3, h4, li { font-weight: 300; width: 100%; margin: 15px; diff --git a/subjects/graphql/lib/schema.js b/subjects/graphql/lib/schema.js index 34ea5408..3538c323 100644 --- a/subjects/graphql/lib/schema.js +++ b/subjects/graphql/lib/schema.js @@ -1,7 +1,6 @@ const backImg = 'https://cdn1.iconfinder.com/data/icons/thin-ui-1/100/Noun_Project_100Icon_1px_grid_thin_ic_arrow_left_simple-512.png' const body = document.body -const main = document.querySelector('.doc-explore-content') const docDisplay = document.querySelector('.display-doc') const exist = () => document.querySelector('.back') const removeComments = (obj) => @@ -60,10 +59,13 @@ const generateContent = (t, data) => { generateLinks(` ${k}: `, v) } docDisplay.innerHTML += `}

` - for (let v of document.getElementsByTagName('a')) { - v.addEventListener('click', (e) => changeContent(e, data)) + if (t === 'query') { + for (let v of document.getElementsByTagName('a')) { + v.addEventListener('click', (e) => changeContent(e, data)) + } } } + const backArrow = () => { const title = document.querySelector('.title') const typeDescription = document.querySelector('.comment') diff --git a/subjects/graphql/lib/schema.json b/subjects/graphql/lib/schema.json index 8b749501..6bbd67d7 100644 --- a/subjects/graphql/lib/schema.json +++ b/subjects/graphql/lib/schema.json @@ -20,22 +20,22 @@ { "user": { "id": "ID!", - "attrs": "String!", + "attrs": "Jsonb!", "createdAt": "String!", "discordDMChannelId": "String!", "discordId": "String!", "discordLogin": "String!", "githubId": "String!", "githubLogin": "String!", - "profile": "String!", + "profile": "Jsonb!", "updatedAt": "String!" }, - "comment": "Fetch data from the table: \"user\"" + "comment": "Fetch data from the table: \"user\"\nThis table will have information about the user" }, { "object": { "id": "ID!", - "attrs": "String!", + "attrs": "Jsonb!", "authorId": "String!", "childrenAttrs": "String!", "createdAt": "String!", @@ -45,23 +45,23 @@ "status": "String!", "updatedAt": "String!" }, - "comment": "Fetch data from the table: \"object\"" + "comment": "Fetch data from the table: \"object\"\nThis table will give you information about all objects (exercises/projects)" }, { "transaction": { "id": "ID!", - "attrs": "String!", + "attrs": "Jsonb!", "amount": "Int!", "createdAt": "String!", "type": "String!", "userId": "Int!" }, - "comment": "Fetch data from the table: \"transaction\"" + "comment": "Fetch data from the table: \"transaction\"\nThis table will give you access to XP and audits ratio" }, { "progress": { "id": "ID!", - "attrs": "String!", + "attrs": "Jsonb!", "bestResultId": "Int!", "createdAt": "String!", "eventId": "Int!", @@ -70,18 +70,18 @@ "updatedAt": "String!", "userId": "Int!" }, - "comment": "Fetch data from the table: \"progress\"" + "comment": "Fetch data from the table: \"progress\"\nBoth progress and result table will give you the student progression" }, { "result": { "id": "ID!", "progressId": "Int!", - "attrs": "String!", + "attrs": "Jsonb!", "createdAt": "String!", "grade": "Int!", "updatedAt": "String!" }, - "comment": "Fetch data from the table: \"result\"" + "comment": "Fetch data from the table: \"result\"\nBoth progress and result table will give you the student progression" } ], "arguments": {