How to Make a Health App in 5 Steps
By: Daniel Roncaglia
Tags: Serverless, Apps, Health, Development, Design

How to Make a Health App in 5 Steps

Development of a tool to organize medical records

Health data is essential for medicine in the work of saving lives. Medical records provide vital information about the patients’ physical situation.

We file these records disorganized, usually on a piece of paper. This information is also private. Medical confidentiality is people’s right.

When the doctor consults the patient, they transmit the information from memory. Data communication is inaccurate.

The professional has only time to read the latest tests if the patient remembered to take them.

This problem could be solved using an app.

# 1 Write the user story

Apps are stories, which can be a friendly conversation.

The user story is an agile software development approach. Its characteristic is the informal description of the system’s functions.

The most common format comprises three parts: as a <person who wants something>, I want <something I’m looking for> so that <I can what need>.

As a patient, I want to organize my medical records to secure access to my health data.

# 2 Modeling the data

JSON (JavaScript Object Notation) is a data exchange format. The language is natural to read and write by humans. It uses conventions that enable interpretation in almost programming languages: C#, JavaScript, and Python.

In JSON modeling, collections of name-value pairs structure the data. The other structure is the list of values.

The object encloses in square brackets {}, each name followed by a colon (:) and the name-value pairs are closed with a comma (,).

For the data model of this project, the patient has his records. The records contain the type of test, the result of the examination, and the date of collection.

{

"patient": "name",

"record": [

{

"labexam": "test name",

"result": "result number",

"date": "collection day"

}

]

}

# 3 Design an app prototype

A reference available when coding the app facilitates the work of the developer. Several programs are available to design prototypes. We chose Adobe XD, a vector-based user experience design tool for apps.

The header presents the app name and a subtitle.

The second component is the form for creating record data with three inputs: test, result, and date.

The reading card shows the archived records containing the test, result, and date. For development, the card could report the standard result indicators. There is also a progress bar. At this stage, we will take the example of the glucose test.

# 4 Configure the application environment

The Jamstack (JavaScript, APIs, and Markup) proposal is an architecture that is gaining attention because it is a cloud computing design model.

They present four arguments: better performance, top security, scalability, and proper development experience. The interesting point is to develop the entire project in a single folder.

To the data, the service is FaunaDB, which is a data server in the cloud “serverless.” The tests performed were very satisfactory because of the simplicity of use and the speed of the return.

For the API, the tool is Netlify, which is a website development and publishing platform.

To the user interface, the choice is the library React, the JavaScript code open maintained by Facebook. Versioning control is in GitHub.

Node.js makes JavaScript interpreting. Another installation is the development environment (IDE), which will be Visual Studio Code.

I consulted two tutorials: “Building Serverless CRUD apps with Netlify Functions & FaunaDB,” by David Wells, and “Let’s Build a Note-Taking App With React and FaunaDB,” by Indrek Lasn.

Creating the collection of the database

FaunaDB is an exciting option for database service. Through the website, it is possible to create the data collection where the information will store safely.

The steps are to login to the website and create a database, collection, index, and security key.

Please copy the letters and numbers of the key, as it is the only access.

Creating the project

In the terminal (Command Prompt in Windows), use the Create a New React App.

npm install -g create-react-app

npx create-react-app myhealth && cd myhealth

Inside the created folder, install React Bootstrap and FaunaDB dependencies.

npm install react-bootstrap bootstrap

npm install — save faunadb

Don’t worry about these “warn.”

Install the Netlify Dev package in the project.

npm install netlify-cli -g

Open the project in the Visual Studio Code.