 Let's see what's going on. Hi everyone. So we are coming to the next sessions. It's about nursing. We have to play to play a standard report. So before we get started, I think we need some clarifications. Is anyone here ever make the standard report? And are you familiar with the reaction? Okay. So this is the agenda. Everything we will go through the session. The first one is what is the report. It's a very quick recap of what is the standard report. The next one is the comparison between the normal standard report and the few reactionary reports. And number three, and how to start and how to start development of the local reactionary reports. And the next one is how to deploy to the HL2. And the last one is one more for each other. We will show you this morning. We will make one standard report to be shown on the HL2. So the standard report will be an HTML file. Before we do, we make the HTML file and upload it to the HL2 in the standard report module. We get data from I think. So it's on the screen based on our logics. Yep. And now so for the comparison. The first one is the normal standard report. That's how we do it before. So more of the method. But we make the standard report after process comes. Okay. First with the normal standard report, what are the pros? So that's a very systematic test. Just HTML, JavaScript, and CSS. The last one will be very easy for the file to make the standard report. We don't need very high development skills to make the HTML standard report. Yep. Because that's very easy. We can say that's only for the simple requirements standard report. Okay. And quite other cons. So for the normal standard report, when people try to run the report, you need to select the activity and period outside the report and then we can run the report. What if people want to check the operating certificate? Or people want to check the period. We need to go all the way back to the list of the standard report. Select the standard report again. And then we select the operating and the period again. So that's very annoying. Okay. For the last one, it will be very time consuming for us to make the complex standard report. So for the normal standard report, that would be very easy for the simple. But by the time we're working here, we may have some very complex standard report. We got that jobs, the labs, and many, many more. And even people want to modify the data right on the report. For example, I want to have a list of all the COVID positive tests. And people want to try to modify it for some of the names of the person. The phone number, something like that. So that's very complicated. Okay. So that's what we go through is the React standard report. So the React standard report, we will make it using the new framework, which is React, and people here are very familiar with it. So what are the pros we have? For this one, we can do the very complex requirement. As you see the screenshot on the right-hand side, we have jobs. We have four jobs. And we also have the tab here. Up here, we have the tab. We can switch to many, many tabs. And each tab will have many jobs, many tables, many maps. Okay. And on the very top of the report, you can see the organization unit selector and period selector. So using this one, people don't need to go all the way back to the standard report list to select the organization unit and the period again. People can select it right in here. And then we click on run and standard report get updated. Okay. So for the next one, it's a very easy to make them because that's React, we can split our report to components and we can reuse it later. Okay. And the organization unit and period can be changed right directly on the report. And using this one, we can have good to be in the best than using HTML file. So the file. And it will have better performance and simpler deployment. So let me expand this one a bit. So like before, when we make the HTML report, we will try to design the HTML file on our local border. And then we upload it to standard report. So for example, I want to fix very small text in my standard form. I need to download. I modify that text. And then I need to upload that file to the standard form again. Okay. So for this one. We will deploy the standard form using command. For example, you want to modify one text. You come to the reactor report, you modify that text and run command. The deploy command. And all the standard report will be, you'll get uploaded to the test. Also, you don't have to even log in. Right. Okay. So that's very, very nice. And also the local development. So when we work with React, we design the HTML and we save it. So the HTML is automatically rendered. That's what we call hot reloading. So I think you all know about that. So using the standard report, we can have that one. Okay. And what is the concept of this one? So because it's based on the new technology for the development. So if we find higher development skills. That would be that time for people to learn how to do it. So that's the concept. Okay. So this is what I talked about. In here, we can have functionalities that we can modify that. But this is highly not recommended. I think it's got some program rules also. I think all of that. Suppose there is some program rules that can be implemented here. I don't think so because this is a very custom layout. It's not the form. This is what we have. We just want one very simple layout to input the data into one data. Yes, we can do that. We can do that. We need to do it on a star. It does not implement the program rules. We need to do it by ourselves to try to check the logic here. It does not use the program rules. Because this is, as I mentioned, this is not recommended. You can do it when exactly what you are going to do. That should be fine. Okay, a few minutes about the program. That will continue now. So we go to the next part. What's the preparation before we can start the development of the reactor. First, we need to go to the standard report app and create one blank report. Let me explain why we do this one. Because first we need one standard report on the list for the development. Because on a local development, when we finish our local development, we have to deploy it. But it needs to be overwrite one standard report on the list. So that's why we can do that. Just one very simple standard report on the list. Just say hello. Okay. Yes, HTML. You can see here, the report type is HTML. And you can put the name on all of your standard reports. HTML file for that one. Just very simple, this is a sample standard report. You can consider it's a blank standard report. We need to create it first. We select the sample HTML report for this one. Before, if you want the people to select the organization that you need. Or the period before the new report can click here. But for our React standard report, we don't have to tick the selection. Because people will select the period and the organization right directly on the standard report. So we don't need to check this. And then we submit the standard report. So we will have one repository on GitHub containing the standard report. We call it standard report EMP. That's the project. Okay. For the local development. This is how the project looks like. We have the source, we have some HTML, the package, the organization. And, okay, I will do more on how to do it later after this presentation. So now people can just have a look. First, we need to create one EMP file. This is content or the related information for that standard report. First, we have the URL for the SS2. So we need to input the URL for the SS2 instance that we want to make the standard report. The next one is the username and password. The username and password here is for the local development. When you try to get some data from I think in your local computer. So we need to input the username and password here. Yes, when we deploy the standard report to the SS2, the SS2 will be automatically removed. Because if we upload also the username and password to the SS2, it will expose our username and password. And the report ID. The report ID is the UID of the standard report that we created before. Yes. Yes, we need to input the UID. Finally. Notice that for the password, we should wrap it with the purpose because sometimes in our password there are many, many special characters. That's why we should wrap it with the purpose. Okay, so I will show you how to get the UID of the standard report. So there are many, many ways to get the UID of the standard report. We can use API to check the new standard report we created. Or this is a very simple way. We can go to the standard report list and click on the report we want to see and check the URL. On the last part of the review, we have the UID. You can copy this UID, put it in the EMP file. We put the UID in the bit before ID. We will create our report. So in here, this is our project. I can create one more folder in the SRC folder called reports. This is where you store all the standard reports. For example, we will use this one to create the standard report for HIV, for TB, for multiple projects. So we put every report inside this one. That's the place we store all the reports. All the reports we developed by the standard report at EMP. Okay. It's a bit confused. Inside the reports folder, we create one example report. And we name it as sample report or JSX. So we need to name the file as JSX. And in here, this is the code for the sample report. Okay. For the next step, we will go to the app JSX of the root folder. And include our standard report to this file. And then on the bottom, we will put our standard report inside the app PID. Okay. We will install the dependencies for the standard report. ENB. You can either use the EMR yard in this example I will use here. So the first command will be Jan install to install all the dependencies. Yes, yes, yes. All the dependencies are listed in packet notation. So we will install the dependencies there because we don't have any standard reports. NPM, yes, we can use NPM. PNPM app. Because we will use NPM on yard. Yeah, yeah, yeah. Okay. So it will be fine that we haven't tried that before but you can try it if it was. But first we usually use the NPM in yard. Okay. For the next thing that's very important you need to configure a data to to accept the C O R S. For example, when for our local developer. And if you get the data from the tattoo, the browser will block our request to get the data from the tattoo. So we need to configure the data to to accept the request because it's blocked by default. Then the next step is we can start the development of the standard report. After we input the command start, the standard report will be up and running on localhost 3000. Okay. Okay, and how to deploy the standard report. That's very simple. First, you need to check the EMP file. You need to check if the URL is correct, username is correct, password is correct and the most important one is the report ID. You need to check that if you put the wrong report ID, you will deploy the standard report to the wrong report on the attack. And then we use the commands that deploy and it will be automatically pushed into the tattoo. And in here, what do you see when we run the deploy command. Yes, and you can see that on the tattoo. Our standard for each. In the standard for you. Okay, and the last. One is how to deploy our standard report as one dashboard widget. Yeah, standard report. No, for this, for this lesson, we have to include how to include it like you show you after the presentation. So yeah, for this command, if you don't see any errors. We can check that we can just go to the standard report and check if your updates are there. Okay, for for the deployment of in order to make our standard report to be shown on data to dashboard. It needs to be an app widget on data to dashboard. See it. See it clearly. Okay, for anyone, you cannot see it. You can move forward because I will be the demonstration after this one. If you see another guy. After that, you cannot see the course. Okay. Anyone here have ever break the tattoo. Yeah. So, on every app, we will have the uptight. Yeah, uptight. So, for this one, we should put the app side of dashboard widget. By doing this, we can add this app as a dashboard widget. Okay, we will have the same method for standard report. We will convert our standard report into one app. In order to make the standard report to be shown on the dashboard, we need to have two more things. On the first one is the app name because we need to convert it into an app. Right. So we need the app name and the app shop and so the app name here. It should be the same as our standard report name. You can put whatever you want here. But I recommend that should be the same as standard report name. Shop name. We just put some lower case shop name here. For example, app name is example. And then we will run the command yarn. We will ask it to be automatically convert into an app. We will go to the report and add the widget. Go to the dashboard. Yes, we go to the dashboard and add the widget that we can just put our app there. After this command, it will convert our standard report into an app. That's the first step. And the next step is we need to go to the dashboard and add the widget to the dashboard. Yes. Now that's how it works. They have created just this command. They have created a dashboard and set the course. There is a best of apps in the app. So when you go to the app and it's not moving, it's not. Yes, yes. I think this is the yarn page. Yes. See this automatically. Yes, it's not for the other app also. Yes. When you go to the app, the app will be available. Yes, yes. This app will be automatically deployed. When you go to the app and the custom apps. It will be shown under the widget app. I will go to the app management. Yes. This is the app. Okay. Yes. So we have two, one is a sample which I deployed before and one is loudly provided. So it could be listed in the custom apps. And you can have that. No. The dashboard widget here for the app type. If this app will act as a dashboard widget. It will not be show up. We go to the dashboard. But when you have the updates for this dashboard, it will be added to the dashboard before. So when you deploy it again, it will be updated as a dashboard. Yes, yes. Okay. So that's for the questions. Do we have any more questions? Yes. Yes. All right. Yes. Okay, so, so this is the topic that we have. Okay, so now we go to the demo session. That's very, very quick and simple demo session. Can you, can you see what is on the screen? We will go for, I see we will create one more folder. So, for example, I need to create the ENVy file, go for the demo instant and create one example, one sample for, let's say, Asia, select a file, I have, I already have one file, please, I create one, you don't have to check this to get some video. At that time, you get the port UID, you have the UID for the star report, then we get the star report, we go forward for how three thousand, thank you, thank you so much. Here we have, hello, star report, so I will try to make some modification for the star report, but the, we have, I have only one DIV, we show the text, you know, star report, and we try to make sure. And I say this one, then after that I come back to the local development URL and see this gets updated. Okay, so let's try, I save it and it's automatically get updated. Okay, now let's try on how do we deploy the star report. And here, this is the sample report which I created and I've got to play to the demo server for the title, it's saying hello, now I will try to run the command, wait to view and deploy. So now, let's just go back to the star, to the star report on the demo instance and then I'll press see if this works, but it's getting updated now. That's our report, if we want to show this star report on the dashboard. Yes, yes, yes, yes, yes, yes, yes, yes, sorry, for starting the star report on this one, before we just when we use the command that is going, if we want to show this star report on the dashboard, it's only for, you know, just on the HTML. So everything we make do we come up to only one HTML file, that's very, very big, but no HTML file and upload it to star report, if we want to put the star report to the dashboard, it will convert our app, sorry, convert our star report to your app. The z5 will contain the manifesto, manifesto will have everything and upload to your app. Yeah, all right. That's very long. So would you have to upgrade the instance? I think yes. Yes, yes. We don't, we don't have to deploy again. We deploy only if we have any changes on the star report. When we upgrade the instance, if it works, so if we want, if something changes on the API, we don't have to modify the star report and deploy it. So we don't have to have any questions. I will send the PPT online and also the URL for the public repository. I think you will want to do the PPT. You are going to do the PPT. This would not like to compare now. I will give a quick demonstration on the star report on the dashboard. So first I will modify something. Hello, Miss Asia. This is all I say. Go back to the EMP file. We have two more things. Okay, let's go back to the demo instance and check the app management first. You will see there will be one more app called Hello, Miss Asia. It's not available on the app management. So next I will try to add it to the dashboard. I will create one more dashboard for example. I wish just for our star report. Hello, Miss Asia. So now I will try to make some changes for this one. Change. Save. And the dashboard is automatically updated. You don't have to deploy it. No deploy, but you have to. And this is the one that is automatically updated. This is one half star. So I will put my PPT on the dashboard. And also the URL to our subject. And I will put this on the support board. And it shows that you are not directed to us. So for the demo instance, I keep on doing it. It's still working because it's already set up, but not a demo instance. But it is required for only local development. This is being filed for local development. It will go to where I will show you. On the left hand side, you will have access. Scroll down a bit. Down, down. And you will add HTTP slash localhost 3000. And your local development will work. This is the demo. We have a demo instance. So localhost 3000 is already set up. So that's why I was starting from work. Thank you.