Day-3 Live Demo-5 D2-USER-LIST-DHIS2-APP

App Name: D2-USER-LIST-DHIS2-APP

Step-1: React Project Setup, In your terminal, type:

create-react-app d2-dhis2-user-list-app

Step-2: Run this app

Type the below command in your terminal:

 npm start

Go to browser and type: http://localhost:3000

Step-3: Install React and React-Dom packages:

npm install –save react
npm install –save react-dom
npm install –save react-scripts
npm install –save d2

Now update your package.json file:

{
  "name": "d2-dhis2-user-list-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "d2": "^29.1.5",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Step-4: Create manifest.webapp Run in your terminal:

touch manifest.webapp

Generate manifest Or Add the below code:

{
  "launch_path": "index.html",
  "default_locale": "en",
  "activities": {
    "dhis": {
      "href": "*"
    }
  },
  "appType": "APP",
  "name": "d2-dhis2-user-list-app ",
  "version": "0.1.0",
  "description": "This is for demo Apps",
  "developer": {
    "name": "Julhas Sujan"
  },
  "icons": {
    "48": "/icon.png"
  },
  "manifest_generated_at": "Mon Nov 06 2017 20:23:35 GMT+0600 (Bangladesh Standard Time)"
}

Step-5: Update index.js file that located at src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';

// Import the init function from D2
import { init } from 'd2/lib/d2';

const rootEl = document.getElementById('root');

// Prepare the D2 init config:
const initConfig = {
  baseUrl: 'http://localhost:8080/dhis/api',
  schemas: ['user', 'dataSet'],
  headers: { authorization: `Basic ${btoa('admin:district')}` }
};

// User component - renders a single user
function User({ user }) {
  return {user.displayName};
}

// User list component - renders a list of User components
function UserList({ users }) {
  return (
    
      Got {users.size} users:
      {users.toArray().map(user => )}
    
  );
}

console.info('Initializing D2...');

init(initConfig)
  .then(d2 => {
    console.info('D2 initialized:', d2);
    window.d2 = d2;

    d2.models.dataSets.list()
      .then(dataSets => {
        const dataSet = dataSets.toArray()[0];
        dataSet.name = dataSet.name + '!';
        
        return dataSet.save();
      })
      .then(res => { console.info('Saved data set:', res); })
      .catch(err => { console.warn('Failed to save data set:'. err); });

    d2.models.dataSets.list().then(users => {
      ReactDOM.render(, rootEl);
    });
  })
  .catch(error => {
    console.warn('D2 failed to initialize:', error);
  })

Let’s run the application:

npm start

Step-6: Build the application and upload in app store. Run in console:

npm run build

Zip the build files and upload it in App-Management. See the output!

Step-1: Add the below code in your App.js file:

import {init} from 'd2/lib/d2';
import {getInstance} from 'd2/lib/d2';
init({baseUrl:'https://play.dhis2.org/2.29/api/29/'});

Step-2: Add the below code in your App class:

getInstance().then( d2=> {

    console.log(d2.currentUser.name)
    /*const req = new d2.analytics.request()
    .addDataDimension(['iReVg2xgFPL.REPORTING_RATE']) //'iReVg2xgFPL.REPORTING_RATE'
    .addPeriodDimension('LAST_12_MONTHS')// 'LAST_12_MONTHS'
    .addOrgUnitDimension('SJhtJq6WthC'); //'SJhtJq6WthC'*/

    const req = new d2.analytics.request()
    .addDataDimension(['BfMAe6Itzgt.REPORTING_RATE']) //'iReVg2xgFPL.REPORTING_RATE'
    .addPeriodDimension('LAST_12_MONTHS')// 'LAST_12_MONTHS'
    .addOrgUnitDimension('ImspTQPwCqd'); //'SJhtJq6WthC'

    d2.analytics.aggregate.get(req)
      .then(analyticsInfo => {
          console.log("analyticsInfo: ",analyticsInfo.rows);
      });

  });

App Name: D2-USER-LIST-DHIS2-APP