forked from graduta/webui-workshop
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[OGUI-511] Update documentation and project (graduta#3)
* [OGUI-511] Add readme for local setup * [OGUI-511] Add initial template * [OGUI-511] Add link to webui framework * [OGUI-511] Add worshop exercises * [OGUI-511] Small updates on font-size * [OGUI-511] Add Development Process * [OGUI-511] Remove line separators * [OGUI-511] Update documenation * [OGUI-511] Solve merge conflicts
- Loading branch information
Showing
6 changed files
with
241 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -103,4 +103,5 @@ dist | |
| # TernJS port file | ||
| .tern-port | ||
|
|
||
| config.js | ||
| config.js | ||
| .vscode | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| # Development Process | ||
| - [Development Process](#development-process) | ||
| - [Unit Tests](#unit-tests) | ||
| - [Create a service class](#create-a-service-class) | ||
| - [Create a test file](#create-a-test-file) | ||
| - [Configure tests](#configure-tests) | ||
| - [Integration Tests](#integration-tests) | ||
| - [Install dependencies](#install-dependencies) | ||
| - [Create a test file](#create-a-test-file-1) | ||
| - [Add checks for your UI components](#add-checks-for-your-ui-components) | ||
| - [Code Coverage](#code-coverage) | ||
| - [GitHub Actions](#github-actions) | ||
| - [Contributing to AliceO2Group/WebUI](#contributing-to-aliceo2groupwebui) | ||
|
|
||
| ## Unit Tests | ||
| ### Create a service class | ||
| * Create a new folder `lib` at the root of your project | ||
| * In `lib`, create a new file `ApplicationService.js` | ||
| * Within the newly created file, create a class and add a method which will return the JSON with data about the application from `index.js` | ||
| * Update `index.js` to make use of this new class and method | ||
|
|
||
| ### Create a test file | ||
| * Create a new folder `test` at the root of your project | ||
| * Create a new file `mocha-application-service.js` | ||
| * Write a test which checks correct initialization of the service | ||
| * Write a test which checks the method added, returns the expected JSON | ||
|
|
||
| ### Configure tests | ||
| * Add command for running mocha tests in your `package.json` file | ||
| ``` | ||
| "test": "mocha --exit test/**/mocha-*" | ||
| ``` | ||
| * Install `mocha` as a dev dependency: | ||
| ``` | ||
| npm install --save-dev mocha | ||
| ``` | ||
| * Install `sinon` as a dev dependency: | ||
| ``` | ||
| npm install --save-dev sinon | ||
| ``` | ||
| * Import both new dependencies into your test file; | ||
| * Run tests via: `npm run test` | ||
|
|
||
| ## Integration Tests | ||
| ### Install dependencies | ||
| * Install puppeteer: | ||
| ``` | ||
| npm install --save-dev puppeteer | ||
| ``` | ||
| ### Create a test file | ||
| * Create a new file `mocha-index.js` within your test directory | ||
| * In the `before` step: | ||
| * make use of [puppeteer](https://github.com/puppeteer/puppeteer) to setup a test-browser | ||
| * make use of [spawn library](https://nodejs.org/api/child_process.html) to run your server | ||
| * Add a test which checks that it successfully connected to your application | ||
|
|
||
| ### Add checks for your UI components | ||
| * Add multiple tests to check if: | ||
| * Buttons were successfully created | ||
| * Buttons have as `classList` the elements you set | ||
| * Buttons behavior works as expected | ||
|
|
||
| ## Code Coverage | ||
| * Install [nyc](https://istanbul.js.org/) as a dependency | ||
| ``` | ||
| npm install --save-dev nyc | ||
| ``` | ||
| * Add a new command in your `package.json` file: | ||
| ``` | ||
| "coverage": "nyc npm run test" | ||
| ``` | ||
| * Run command as: `npm run coverage` | ||
|
|
||
| ## [GitHub Actions](https://help.github.com/en/actions) | ||
| * Create 2 new directories at the root of your project: `.github/workflows` | ||
| * Create a new file, `.gh-action.yml`, in the newly created directory `.github/workflows` | ||
| * Add a criteria for workflow to be triggered on each push to your branch | ||
| * Add 2 new jobs: | ||
| * Run tests on a `macOS-latest` machine | ||
| * Run tests on a `ubuntu-18.04` machine | ||
| * Commit & Push your changes; | ||
| * Go to "Actions" in the github repository and follow the progress of your workflow on your branch | ||
|
|
||
| ## Contributing to AliceO2Group/WebUI | ||
| * In order to make contributions to the framework, on top of an admin review, we have putin place multiple automated checks such as ESLint and minimum CodeCoverage for the newly added changes; | ||
| * More details can be found here: [Development Environment](https://github.com/AliceO2Group/WebUi/blob/dev/Framework/docs/guide/devel.md#development-environment) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| # Workshop: Back-end | ||
| - [Workshop: Back-end](#workshop-back-end) | ||
| - [Configure nodemon](#configure-nodemon) | ||
| - [Add HTTP Requests](#add-http-requests) | ||
| - [RemoteData](#remotedata) | ||
| - [Web Sockets](#web-sockets) | ||
| - [WebSockets Server side](#websockets-server-side) | ||
| - [WebSockets Client Side](#websockets-client-side) | ||
|
|
||
| ## Configure nodemon | ||
| * Install it as a dev dependency: `npm install --save-dev nodemon` | ||
|
|
||
| * Add command for running [nodemon](https://nodemon.io/) in your package.json file: | ||
| ``` | ||
| "dev": "nodemon --watch index.js --watch lib --watch config.js index.js" | ||
| ``` | ||
| * Usage: `npm run dev` | ||
| * This will enable us to make changes to the server without having to restart it as it will be done automatically | ||
|
|
||
| ## Add HTTP Requests | ||
| By making use of the documentation: [HTTP AJAX](https://github.com/AliceO2Group/WebUi/blob/dev/Framework/docs/guide/async-calls.md#frontend---async-calls-ajax) (15 min) | ||
|
|
||
| * Add an `HTTP GET` method in `index.js` to retrieve a mocked JSON with information about your application | ||
| * Use the newly created http method in `About.js` | ||
| * Method should update your data variable to contain the result of the request | ||
| * Use `Debug` tools from your browser and check network calls to see if data is received correctly | ||
|
|
||
| ## RemoteData | ||
| * Make use of [RemoteData](https://github.com/AliceO2Group/WebUi/blob/dev/Framework/docs/guide/async-calls.md#remotedata) to display information to the user when the requested data is in different states: | ||
| * NotAsked | ||
| * Loading | ||
| * Failure | ||
| * Successful | ||
|
|
||
| ## Web Sockets | ||
| ### [WebSockets Server side](https://github.com/AliceO2Group/WebUi/blob/dev/Framework/docs/guide/websockets.md#backend---websocket-module) | ||
| * Add a websocket on the server side, `index.js`, and bind it to the server | ||
| * Use it to send every 5 seconds a random number as a message under a certain command | ||
|
|
||
| ### [WebSockets Client Side](https://github.com/AliceO2Group/WebUi/blob/dev/Framework/docs/guide/websocket-client.md#frontend---websocket-client) | ||
| * Make use of `WebSocketClient.js` and add it to your `Model.js`; | ||
| * Add a new component in the header of `view.js` with the random number received via websocket | ||
| * Use DebugTools to watch all numbers sent via webSockets |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| # Workshop: Front-End | ||
| In this chapter we will tackle how to create various components on the newly setup project. | ||
|
|
||
| - [Workshop: Front-End](#workshop-front-end) | ||
| - [Title Changes](#title-changes) | ||
| - [Add a new page: home](#add-a-new-page-home) | ||
| - [Add a new page: about](#add-a-new-page-about) | ||
| - [Make use of the new components in `view.js`.](#make-use-of-the-new-components-in-viewjs) | ||
| - [Adding buttons](#adding-buttons) | ||
| - [Create a new class file `Home.js`](#create-a-new-class-file-homejs) | ||
| - [Create an new class file `About.js`](#create-an-new-class-file-aboutjs) | ||
| - [Build a table in `aboutPage.js`](#build-a-table-in-aboutpagejs) | ||
| - [Link pages between them](#link-pages-between-them) | ||
|
|
||
| ## Title Changes | ||
| * Modify the title component so that is shows the current page location | ||
| * Modify the title class style | ||
|
|
||
| ## Add a new page: home | ||
| * Create a new folder called `home` under `public` | ||
| * Create a new `homePage.js` file and use `export default content` | ||
|
|
||
| ## Add a new page: about | ||
| * Create a new folder called `about` under `public` | ||
| * Create a new `aboutPage.js` file and use `export default content`; | ||
|
|
||
| ## Make use of the new components in `view.js`. | ||
| * Import content as aboutContent into view.js | ||
| * Import content as homeContent into view.js | ||
| * Modify content of view.js by using `switchcase` to modify content based on current page location | ||
|
|
||
| ## Adding buttons | ||
| * Add a button in the `home` page which purpose will be to take the user to `about` page: | ||
| * This should have title "About" | ||
| * Should use one an icon: `info` | ||
| * Should print to the console its purpose | ||
|
|
||
| * Add a button in the `home` page to get the username: | ||
| * Should use one `iconPerson` icon | ||
| * Should print to the console its purpose | ||
|
|
||
| * Add a button in the `about` page which purpose will be to take the user to `home` page: | ||
| * This should have title "Home" | ||
| * Should use an icon | ||
| * Should print to the console its purpose | ||
|
|
||
| * Add a button in the `about` page which purpose will be to request data about the application: | ||
| * Add a title to it | ||
| * Should use an icon | ||
| * Should print to the console its purpose | ||
|
|
||
| ## Create a new class file `Home.js` | ||
| * Class should have a constructor | ||
| * Constructor should initialize super() and userName | ||
| * Write a `getUserName` method which will return the userName and will be used by the "User" button | ||
| * Write a `setUserName` method which will set the user to your name | ||
| * | ||
| * Add a label component in the home page which should use `getUserName` method to display the user. | ||
| * Use the `setUserName` method to change the label to your username when pressing the user button | ||
| * Press button. Was the label updated? | ||
| * Observable model - missing `this.notify()` | ||
|
|
||
| ## Create an new class file `About.js` | ||
| * Class should have a constructor | ||
| * Constructor should | ||
| * initialize super() | ||
| * an empty JSON variable details in which data will be placed | ||
| * a requestedTimes variable | ||
| * Add a method to `getDetails` which will set the JSON variable and increment the requestedTimes variable | ||
|
|
||
| ## Build a table in `aboutPage.js` | ||
| * The table should be filled with data from the `getDetails` method implemented earlier which is being called by the button with the same purpose | ||
|
|
||
| ## Link pages between them | ||
| Make use of [QueryRouter](https://github.com/AliceO2Group/WebUi/blob/dev/Framework/docs/guide/front-router.md) | ||
| * Add functionality to the 2 buttons (in home and about pages) to take the user from one page to the other |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters