Day 1 | Introductions

What you will learn

• An overview of the coming week
• An introduction to DHIS2
• Fundamental DHIS2 UI Principles
• Basics of the DHIS2 API
• Introduction to how we use Git at DHIS2
• Getting your local developer environment set up
• How to initialize an app using d2

Agenda

Time	Topic
8:30	Registration and name tags
09:00	General introduction During the welcome and opening of the Academy, we’ll explain the agenda, give a general overview of what everyone can expect to learn, and how certificates will be issued.
09:15	Welcome by Ministry of Health Côte d’Ivoire
09:30	General introductions
10:30 - 11:00	Coffee Break
11:00 - 13:00	Common courses and presentations DHIS2 Overview - Victor UI principles and patterns - Rene API Basics - Mozafar Git - Rene
13:00 - 14:00	Lunch break
14:00 - 15:00	Workshop Day 1 (Environment Setup)
15:15 - 15:45	coffee break
15:45 - 17:00	Workshop Day 1 (Environment Setup)
17:30 - 19:00	Social Event (10 minute walk)

Environment Setup

In this session, we will make sure your environment is set up correctly, and go through creating a new DHIS2 app using the d2 CLI.

Important

Are you able to run d2 --version on your terminal? If not, make sure to setup d2 following the setup instructions.

Initialize a new DHIS2 app

Note: Before you initialize your app, please make sure that you navigate using the terminal to the correct directory where you want your work to be saved.

For example, on your terminal, navigate to the directory where you'll be working:

cd academy

Now that you're in the correct directory, you're ready to create a new DHIS2 app.

Create my-app

We'll use the d2-app-scripts init command to create a new DHIS2 app:

d2 app scripts init my-app
cd my-app
ls

Note

If you call d2 app scripts init my-app, a new directory will be created at ./my-app with a pre-populated package.json. You can also run d2 app scripts init . to upgrade an existing app in the current directory.

Once you've created my-app, your directory structure should look like this:

 ── root
    └── my-app

Set up code-style with DHIS2 style

d2-style is a tool that runs prettier and eslint under the hood with a standardized configuration. It also installs git hooks with husky which will automatically check your code style before making a git commit.

Following the DHIS2 styleguide isn't strictly required, but it can be very helpful in ensuring you write clean, readable, and functional code for your DHIS2 apps.

yarn add @dhis2/cli-style --dev
yarn d2-style add eslint react
yarn d2-style add prettier
yarn d2-style install

This will set up the project to automatically follow the DHIS2 style guidelines.

Add lint and format scripts

Then, add the following scripts to package.json:

// package.json
{
    // ...
    "scripts": {
        // ...
        "lint": "yarn d2-style check",
        "lint:staged": "yarn lint --staged",
        "format": "yarn d2-style apply",
        "format:staged": "yarn format --staged"
    }
}

And try out your new scripts!

yarn lint
yarn format

Start your DHIS2 application locally

Please follow these steps to start your application on your browser.