Let's build the ultimate clinical calculator Android App with NativeScript

Part 1. Introduction

Introducing the ultimate clinical parameter calculator app designed to make the lives of medics and paramedics easier!

This cutting-edge app has been meticulously crafted with the latest and safest technologies on the market to provide fast and reliable calculations for mean arterial pressure, Apgar score, and BMI.

With its intuitive interface and sleek design, the app allows you to effortlessly calculate critical clinical parameters in mere seconds. The results are presented clearly and concisely, enabling you to make informed decisions quickly and confidently.

But this app isn't just about functionality - it's also about style. The designers have gone above and beyond to create an interface that is not only aesthetically pleasing but also easy to navigate. The app's color scheme and typography have been carefully selected to create a sense of calm and professionalism, reflecting the high standards of the medical profession.

Whether you're a seasoned healthcare professional or a student just starting, this app is an invaluable tool that will help you deliver the best possible care to your patients.

Prerequisites: you have to know Angular.

The long list of our app features

Since we want our clinical calculator, to be that good and complete, here is the list of features it needs to support

The basic modes

• BMI mode to calculate the body mass index

• Apgar mode to calculate the Apgar score in New Borns

• PAM mode to calculate the mean arterial pressure

The advanced modes

• NIHSS mode for quantifying stroke severity

• Glasgow score to evaluate conscientiousness

• Glomerular filtration rate for assessing the patient's kidneys

Considering the complexities of our app, we must design it to make the navigation easily understandable

The temporary mockups

Our app should, for basic modes, should look like this:

Apgar mode

BMI(IMC in french)

Mean arterial pressure, abbreviated PAM in french

The first steps

Make sure you have installed everything that is required to run a NativeScript app by reading this introductory article.

In your terminal, start a new NativeScript project by running:
ns create calculator --angular

Let's choose a blank template, we will be building our app from scratch.

In src > app, our app.module.ts should look like this:

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptModule } from '@nativescript/angular'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component';

@NgModule({
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, AppRoutingModule],
  declarations: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA],

})
export class AppModule {}

Let's create a home module

Create a new folder and call it home. In it, let's create the files below:

_
-home-routing.module.ts
-home.component.css
-home.component.html
-home.component.ts
-home.module.ts
_

Let's write the home.module.ts file

This file will define our home page as a feature module.

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptCommonModule } from '@nativescript/angular'

import { HomeRoutingModule } from './home-routing.module'
import { HomeComponent } from './home.component'


@NgModule({
  imports: [NativeScriptCommonModule, HomeRoutingModule],
  declarations: [HomeComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class HomeModule {}

Let's write the home.component.ts file

This file will create a component from which we will create the logic supporting the layout that we will soon write in the home.component.html file.

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'Home',
  templateUrl: './home.component.html',
  styleUrls: ["./home.component.css"],
})
export class HomeComponent implements OnInit {
constructor() {
  }

  ngOnInit(): void {

  }
}

Let's write the home-routing.module.ts

This file will manage the routes to our home component.

import { NgModule } from '@angular/core'
import { Routes } from '@angular/router'
import { NativeScriptRouterModule } from '@nativescript/angular'

import { HomeComponent } from './home.component'
const routes: Routes = [
  { path: '', component: HomeComponent }
]

@NgModule({
  imports: [NativeScriptRouterModule.forChild(routes)],
  exports: [NativeScriptRouterModule],
})
export class HomeRoutingModule {}

Let's now update the app-routing.module.ts file

import { NgModule } from '@angular/core'
import { Routes } from '@angular/router'
import { NativeScriptRouterModule} from '@nativescript/angular';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule),
  }

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule],
})
export class AppRoutingModule {}

Time to build the layout of our Home page.

I do not know if that's the case for you but, the first thing I write in a template file is normally a section. I do so to give it a class and then write some CSS. This is how I build virtually every layout in HTML.

I had this in mind when I started with NativeScript. I tried some layouts components proposed by NativeScript but nothing could equal, for my needs at least, the flexibility and the power of the GridLayout.

Understanding nativescript's GridLayout

A GridLayout is organized in columns(vertical) and rows(horizontal).

In our home.component.html file, we write:

<GridLayout></GridLayout>

This code however is not sufficient and does pretty much nothing we need to specify the kind of grid we want. But before doing that let's first visualize

In the image above, we have 5 columns starting from column 0(far left) to column 4(far right).

We also have 5 rows starting from row 0(top) to row 4(deepest down).

It's important to keep this model in mind: columns and rows are index based. So the first row and column should be referenced by 0.

Let's say we have 5 buttons, how could we place them on our grid?

In our template, we will pass some parameters to our GridLayout element.

<GridLayout columns="*, *, *, *, *" rows="*, *, *, *, *"></GridLayout>

This code gives our grid, 5 columns, and rows.

The * means that the column or the row needs to take up all the available space. So with 5 *, we only tell Nativescipt to divide the entire available space of the screen, both horizontally(for rows) and vertically(for columns) in 5 equal parts.

Let's now add our 5 buttons

<GridLayout columns="*, *, *, *, *" rows="*, *, *, *, *"> 
    <Button text="button 1"></Button> 
    <Button text="button 2"></Button>
    <Button text="button 3"></Button>
   <Button text="button 4"></Button>
    <Button text="button 5"></Button>

</GridLayout>

To specify where these 5 buttons need to be placed in our grid, we will give them a col(column)and a row(without the a) to occupy.

<GridLayout columns="*, *, *, *, *" rows="*, *, *, *, *"> 
    <Button text="button 1"col="0" row="0"></Button> 
    <Button text="button 2"col="1" row="1"></Button>
    <Button text="button 3"col="2" row="2" ></Button>
   <Button text="button 4"col="3" row="3"></Button>
    <Button text="button 5"col="4" row="4" ></Button>

</GridLayout>

Can you guess how this code will translate on our screen?
Well don't guess, see it by yourself:

ns run android

Now that we know how a GridLayout works, we will design our app according to the model of our mockup and it'll be fun.

See you next time...

Ps: let me know if you face some problems or have some corrections to make. We all are learners.