Building A Flutter Native App with Wix Velo for Local Covid Hospital and Oxygen Tracking

Three Apps connected with Wix Collection via Velo, all working in sync with Wix Website

THE WEBSITE

Recently Covid 19 Surge here in India, people had too much difficulty in getting bed in hospitals and oxygen demand was off the charts and faced severe shortage.

People had to wander here and there and called everyone in their connection to get bed and oxygen cylinder. Not big charity but at least we could help locals of the town. Town name is Mandvi. So, we talked with local health officer that we could help.

A system could be developed where visitors can see how much and what types of bed are available in hospitals and how much oxygen cylinders are available with whom. For hospitals and cylinder services have to use their own login to update from their end. This way people can see counter in real time and not wander hopelessly in this dark times.

So, in one day, due to ease of making websites in Wix we made three pages:

Counter for Visitor: It shows count of beds, testing kits and oxygen cylinder available in hospital.
Login for Hospital: Where hospitals can login and update status of beds and kits.
Login for Cylinder Service: Where Cylinder Service Providers update number of oxygens cylinder they have.

Page was quite simple and easy to read. So, page loaded instantly for all visitors. Login pages were kept simple. But the problem was redirecting to personal page after entering email id and password.
As we were using code to make custom sign in page, when hospital or cylinder provider registers, we add the entry in respective collection of dynamic page.
The thing is if we redirect the user to dashboard instantly it will show Error 404 as dynamic page was still not generated. So we had to add some delay using JavaScript's

setDelay

function.

This small delay after login was a problem, as people working at hospitals don't have much time to open website, wait 2-3 sec for login and login delay, after which they are redirected to update page.

A more fast and instant way was required. Where user open a app and can update numbers instantaneously. Also, these days people prefer apps over website when they are in hurry.

Enters 3 Different app made in Flutter which uses Wix as backend.

[App 1] Covid Mandvi - App for Visitors

Screenshot 1: showing Hospital's screen:

Screenshot 2: showing Oxygen Cylinder's screen:

This is the App for visitors who can check several types of beds and test-kits available at different hospitals in real time. We have given direct CTA for calling directly to hospital whose intent loads in dialer. And a refresh button on top right. All the data including name of hospital, number, beds, and test kits is fetched from our Wix Website.

How it's made: We decided to use Flutter as same code can be used for making apps on all platforms. Current one is an android app.

So first we made two functions in

http-functions.js

module of wix which query beds collection for getting beds and test kits data. Another that query for cylinders data. Both functions then return json array of all items.

Then in Flutter app, we used

HTTP

package to get JSON response from API we exposed as a function and show the data in app.

Making this app was easy as it needed no authentication, and everyone was allowed to see data.

[App 2] Covid Mandvi Hospitals - App for Updating Hospital's Data

Screenshot 1: Login Page where Hospitals logs in.

Screenshot 2: Screen where hospitals update counter of different types

In this app, we haven't given option to register as it will have risk of fake accounts. Instead, we ourselves make account of hospital and give login credentials to hospitals.

The email id and password entered in app are authenticated with

wix-users-backend

module. After login, the data is fetched and shown in middle of addition and subtraction signs buttons. User can update any value and it will be updated in Wix database of hospitals.

How it's made: For this we need three functions. One to authenticate user, second to get data of logged in user and third to update data of logged in user.

Function to authenticate user:

This function takes as input email and password and return a response with token if those email and password matches with registered user's database.

Then we made a

login.jsw

that login users and retrieve token.

import wixUsersBackend from 'wix-users-backend';

export function loginFnc(body) {
    return wixUsersBackend.login(body.email, body.password)
        .then((result) => {
            return result;
        })
        .catch((err) => {
            return err;
        });
}

http-functions

module we made a

POST

function which receive email and password from app and calls above

loginFnc

to check if users exist. It returns result with token to app.

Other two functions:

These functions are quite simple which includes one GET function to get logged in hospitals data and one PUT function to update the hospitals data.

The problem we faced with Sign In in app:

One problem we faced while making flutter app was keeping user logged in to app even after app is closed, so user don't have to enter login credential every time.

We found solution by using flutter's secure_storage package. When user logs in, we will store his data in storage and when he logs out we erase it.

As a result, when user open app later, he will directly go to update page saving lot of time.

[App 3] Covid Mandvi Cylinders- App for Updating Oxygen Cylinders Availability

Same app as hospitals updates app. And any number of required fields can be added here to be updated.

In a nutshell

Below function were made in Wix:

```
get_beds
```
: get all hospitals data to show to public
```
get_cylinders
```
: get all cylinder providers data to show to public
```
post_userAuth
```
: Function to verify Hospital's and Cylinder Provider's login credentials
```
post_bedData
```
: Receive logged in Hospital's email and returns their data
```
put_updateBeds
```
: Updates logged in Hospital's data
```
post_cylinderData
```
: Receive logged in Cylinder Provider's email and returns their data
```
put_updateCylinders
```
: Updates logged in Cylinder Provider's data

And one

login

function in

login.jsw

module.

What' Next

Wix is really easy to use and reliable. Now we figured out how to make basic native app connected to Wix website. It pretty much opens possibility of making anything.

The main thing is time taken. The app took 7 days to be made and completely tested. Wix website can be fully made and deployed in a day or two.

Now the app can be made in record time. So this thing really helps when there is urgent need of technology to solve problems. And best part its really easy to use.

We are working on identifying member role by emails. So we don't have to keep different app for different members. Based on email it will open appropriate screen. So hospitals and cylinders update from single app for example. Soon we will submit app in Google Play if needed.

We are looking forward to developing and trying more things with this workflow. Starting with Wix Stores. Trying to achieve the ability for Ecommerce app for visitors, multi vendor app and tracking driver and orders' app. All connected with Wix website.

Links for Wix Website:

Links for trying Apps

These are test accounts for app. You can try using these accounts to test the functionality.

Id Hospitals App: intergalacticdeveloper@gmail.com , Password: 123456

Id Cylinders App: jaymehta7600@gmail.com , Password: 123456

Covid Counter Apps:

Download apks from Google Drive

Thanks for reading. Share with Velo enthusiasts!

Jay, Empyrean Studio