diff --git a/subjects/clonernews1/README.md b/subjects/clonernews/README.md similarity index 100% rename from subjects/clonernews1/README.md rename to subjects/clonernews/README.md diff --git a/subjects/clonernews1/audit/README.md b/subjects/clonernews/audit/README.md similarity index 100% rename from subjects/clonernews1/audit/README.md rename to subjects/clonernews/audit/README.md diff --git a/subjects/good-practices/README.md b/subjects/good-practices/README.md index fb28a7fa..9d3625a6 100644 --- a/subjects/good-practices/README.md +++ b/subjects/good-practices/README.md @@ -85,3 +85,7 @@ It is possible to remove painting by adding a layer: ``` By creating a new layer you can remove painting, but "there is always a tradeoff". If we add to much layers it will increase the **composition** and **update tree**. In conclusion you must promote a new layer only if you now you are going to use it. Performance is the key to a good animation. "Performance is the art of avoiding work". + +### UI/UX + +- [Best Practices](https://www.uxpin.com/studio/blog/guide-design-consistency-best-practices-ui-ux-designers/) diff --git a/subjects/graphql/README.md b/subjects/graphql/README.md new file mode 100644 index 00000000..79347098 --- /dev/null +++ b/subjects/graphql/README.md @@ -0,0 +1,181 @@ +## GraphQL + +### Objectives + +The objective of this project is to learn the query language [graphQL](https://graphql.org/) by creating your own profile page. 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. + +Your profile must have at least 3 sections of content at your choice, for example: + +- Basic user identification +- XP amount +- level +- grades +- audits +- skills + +Beside those sections it will have a mandatory section for the generation of statistic graphs. + +### Instructions + +You will have to create a profile UI where you can see your own school information. This information/data is present on the graphQL endpoint, where you will have to query it. + +For the UI it will be up to you to design it. But have in mind the principles of a [good UI](https://public.01-edu.org/subjects/good-practices/).\ +The UI will have a statistic section where you can generate graphs to see more about your journey and achievements on the school. This graphs must be done using [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG). You will have to do at least **two different statistic graphs** for the data given. + +Using SVG you can create several [types of graphs](https://www.tutorialspoint.com/svg/graph.htm) including interactive graphs and animated graph. It will be up to you to decide what type of graphs you are going to do. + +Here are some possible combinations for the creation of the graphs: + +- XP earned in a time period (progress over time) +- Levels over time +- XP earned by project +- Audit ratio +- Projects `PASS` and `FAIL` ratio +- Piscine (JS/Go) stats + - `PASS` and `FAIL` ratio + - Attempts for each exercise + +Any other information you desire to display is welcome and will be noted. + +### Hosting + +Besides the creation of your own profile you will have to host it! There are several places where you can host your profile,\ +for example: [github-pages](https://pages.github.com/), [netlify](https://www.netlify.com/) and so on. You are free to choose the hosting place. + +--- + +### Usage + +> To test your queries you can access the GraphQL IDE on _https://[[DOMAIN]]/public/subjects/graphql/_ or create your own [**GraphiQL Docs**](https://github.com/graphql/graphiql). This will give you a bigger picture of the tables, attributes and all the types of queries that you can do. + +Here are the list of tables that you are allowed to query (it will be only provided the columns present on the tables): + +- **User table**: + + This table will have information about the user + + | id | login | + | --- | ------: | + | 1 | person1 | + | 2 | person2 | + | 3 | person3 | + +- **Transactions table**: + + This table will give you access to XP and audits ratio + + | id | type | amount | objectId | userId | + | --- | :--: | -----: | -------: | -----: | + | 1 | xp | 234 | 42 | 1 | + | 2 | xp | 1700 | 2 | 2 | + | 3 | xp | 175 | 64 | 3 | + +- **Progress_view table**: + + | id | userId | objectId | grade | + | --- | :----: | -------: | ----: | + | 1 | 1 | 3001 | 1 | + | 2 | 2 | 198 | 0 | + | 3 | 3 | 177 | 1 | + +- **Results table**: + + Both progress and result table will give you the student progression + + | id | objectId | userId | grade | progressId | type | + | --- | -------: | -----: | ----: | ---------: | ---: | + | 1 | 3 | 1 | 0 | 58 | | + | 2 | 23 | 1 | 0 | 58 | | + | 3 | 41 | 6 | 1 | 58 | | + +- **Object table**: + + This table will give you information about all objects (exercises/projects) + + | id | name | type | attrs | childrenAttrs | + | --- | ---: | -------: | ------------------------: | ------------: | + | 1 | 0 | exercise | `{"language": "dom", ...` | `{}` | + | 2 | 0 | project | `{"language": "go", ...` | `{}` | + | 3 | 1 | exercise | `{"language": "js", ...` | `{}` | + +Examples: + +Lets take for instance the table `user` and try to query it: + +```js +{ + query { + user { + id + } + } +} +``` + +This simple query will return an array with the `id`s of the users. Imagine if you wanted the `login`,\ +you could just add this attribute to the query, example: + +```js +{ + query { + user { + id + login + } + } +} +``` + +You can try to `curl` the API endpoint to see the result given by the server: + +- `curl "https://[[DOMANIN]]/api/graphql-engine/v1/graphql" --data '{"query":"{user{id login}}"}'` + +Here is another example of a query using the table `user`: + +```js +{ + query { + user(where: { id: { _eq: 6 }}) { + id + login + } + } +} +``` + +**Note** that for this query is required the introduction of variables (arguments)\ + so it will return just one user, the user that has the `id` equal to `6`. + +You can see the result using `curl`: + +- `curl "https://[[DOMANIN]]/api/graphql-engine/v1/graphql" --data '{"query":"{user(where:{id:{_eq:6}}){id login}}"}'` + +In graphQL the usage of arguments can be specified in the schema of the API. Like said above you can visit the _docs_ for the graphQL endpoint, _https://[[DOMAIN]]/public/subjects/grapqhl_ + +Example of nesting, using the result and user table : + +```js +{ + result { + id + user { + id + login + } + } +} +``` + +For this example we ask for the results `id` and `user`s that are associated to the `result`, requesting the users `login`s and `id`s. + +**You must use all the types of querying present above** (_normal_, _nested_ and using _arguments_), do not forget that you can use the types together or separately. + +This project will help you learn about: + +- [GraphQL](https://graphql.org/) +- [GraphiQL](https://github.com/graphql/graphiql) +- [Hosting](https://en.wikipedia.org/wiki/Web_hosting_service) +- Basics of human-computer interface + - UI/UX diff --git a/subjects/graphql/audit/README.md b/subjects/graphql/audit/README.md new file mode 100644 index 00000000..ee18f6e5 --- /dev/null +++ b/subjects/graphql/audit/README.md @@ -0,0 +1,33 @@ +#### Functionals + +###### Does the profile have three sections? + +##### Try to confirm if the content on the three sections are correct, using the **GraphiQL**. + +###### Is the content present on the three sections correct? + +###### Does the profile present a 4th section with graph statistics? + +###### Does this section have at least two different graphs? + +##### Try to confirm if the content on the graphs are correct. + +###### Is the content on the graphs correct? + +##### Try to access the profile from the host domain. + +###### Is the profile being hosted (active/live/online)? + +#### General + +###### Does the project have at least the mandatory queries (_nested_, _normal_ and using _arguments_)? + +#### Bonus + +###### +Is the profile displaying other information beside the three mandatory sections? + +###### +Is the profile displaying other graphs beside the two mandatory ones? + +###### +Did the student generated their own GraphiQL? + +###### +Does the UI respect the [good practicies](https://public.01-edu.org/subjects/good-practices/)? diff --git a/subjects/graphql/index.html b/subjects/graphql/index.html new file mode 100644 index 00000000..60e86fe6 --- /dev/null +++ b/subjects/graphql/index.html @@ -0,0 +1,36 @@ + + + GraphiQL + + + +
+ + + + + + + + \ No newline at end of file diff --git a/subjects/sortable1/README.md b/subjects/sortable/README.md similarity index 100% rename from subjects/sortable1/README.md rename to subjects/sortable/README.md diff --git a/subjects/sortable1/audit/README.md b/subjects/sortable/audit/README.md similarity index 97% rename from subjects/sortable1/audit/README.md rename to subjects/sortable/audit/README.md index 37f1850a..ce11d39a 100644 --- a/subjects/sortable1/audit/README.md +++ b/subjects/sortable/audit/README.md @@ -52,4 +52,4 @@ ###### +Does the project runs quickly and effectively? (Favoring recursive, no unnecessary data requests, etc) -###### +Does the code obey the [good practices](https://public.01-edu.org/subjects/good-practices/README.md)? \ No newline at end of file +###### +Does the code obey the [good practices](https://public.01-edu.org/subjects/good-practices/README.md)?