The project provides an easy-to-follow, and motivational web application development resource. It follows a step-by-step guideline to build web applications.
After completing the project (building the web applications, all or partially), rewards as badges are provided at the bottom of this page. The badges show the completion of the milestones.
When working on this repository, if necessary, use the links and content below:
- For reference on web development topics (HTML, CSS, JavaScript, React, and DHIS2), visit https://dhis2-app-course.ifi.uio.no.
Two crucial steps ( Step 1 and Step 2 ).
For any questions, changes, or any requests to the repository,
contact via: e-mail: yonatanf@ifi.uio.no, or via Telegram.
This step configures the repository to automate the badge (reward) process.
(needs to be completed before starting step 2)
Step-1 has two parts, start with part I, then part II:
- Part I: Configuration of the repository (one-time setup) and
- Part II: Configuration for a web application (before starting on one of the web applications to be done).
After completing Part II, jump to step 2
-
First, you might need to join in Github, because you will need the following features from Github: Personal Access Tokens, Github Secrets, and Github Gists.
-
After Signing into your Github account, proceed to forking this repository by clicking the fork button in the upper right hand corner of this page. (can see here about forking), then you will only be working on your forked repository.
-
Third, head over to tokens, generate a new token with gist scope
-
After that, COPY the token, e.g a token can look like e5565bedd8ff5cb53a367d9b2dac4602df4b8242.
-
After copying the token, head over to Setting of your repository, then click on Secrets.
In Secrets add a variable called AUTH and paste the token (you can create new, if you forget to copy it).
-
This part is to be done for every application.
-
Now, before going to the application you want to work on, create a gist file for the application.
Naming should be based on names in the table name.
Application html-js-css/level-1 react/level-1 dhis2/level-1 dhis2/evel-2 Gist file name html_level1.json react_level1.json dhis2_level1.json dhis2_level2.json Example for the React Level-1:
-
You would head over to gists and create a gist file for that application, called react_level1.json with a content of {}.
-
After creating the gist file for the application you are working on, do the following important three steps.
-
Find and copy the id of the created gist file:
-
Open the gist in a browser (you can find the created gist file in gists),
-
then click on the button named raw (found on the right side of the file),
-
then in your browser url COPY the id (everything after your github username/ and before the /raw). The gist id is different for different gists
In this sample url of a gist react_level1.json, we find the id is 67879aa1f153c6b783303f177fdbaf73 from the url https://gist.githubusercontent.com/yonatanhf/67879aa1f153c6b783303f177fdbaf73/raw/920af8d64ec652ddabc3ff8feb6d0354a0a71173/react_level1.json.
-
-
Now, head over to secrets of your repository and create a new repository secret to hold the id of the gist file.
Naming should be as names in the table name.
Application html-js-css/level-1 react/level-1 dhis2/level-1 dhis2/evel-2 Gist file name html_level1.json react_level1.json dhis2_level1.json dhis2_level2.json Secret name HTML_LEVEL1 REACT_LEVEL1 DHIS2_LEVEL1 DHIS2_LEVEL2 -
E.g. While working on the React Level1, call the secret as REACT_LEVEL1 and give it the id of the gist react_level1.json
In this sample example, the id is 67879aa1f153c6b783303f177fdbaf73. See below for more.
-
Third and important, edit this readme file, so as to display the badge of the completed application you worked on.
- Just under the Applications' completion status part in this page below where the badges are displayed, edit the the url of the badges.
- E.g. Use the same copied id and paste it inside the url of the badge level-1, that is to replace the pastecopiedidof-react-level-1 part of the url with the copied id. The url looks like: https://gist.githubusercontent.com/your-username/pastecopiedidof-react-level-1/raw/react_level1.json
- Similarly, replace the your-username part of the url by your Github username.
- Just under the Applications' completion status part in this page below where the badges are displayed, edit the the url of the badges.
-
-
Remember to do the same three steps for every level you are working on. E.g.: if started React level-2, then create a gist file called react_level2.json, then define a secret called REACT_LEVEL2. The content of the secret is id of the react_level-2.json (found in the url). At last, paste the same id in to the pastecopiedidof-reactlevel-2 at the level-2 badge below.
In this step-2, it is assumed that Step 1 is completed.
Now, to get started with the web application development, pick a folder (directory) in this repository, go to the directory of the level and follow the readme (steps for that level).
level-1:
level-1:
Level-1:
level-2:
