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 function. setDelay 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. We decided to use Flutter as same code can be used for making apps on all platforms. Current one is an android app. How it's made: So first we made two functions in 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. http-functions.js Then in Flutter app, we used package to get JSON response from API we exposed as a function and show the data in app. HTTP 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 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. wix-users-backend 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. How it's made: 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 that login users and retrieve token. login.jsw wixUsersBackend ; { wixUsersBackend.login(body.email, body.password)
        .then( { result;
        })
        .catch( { err;
        });
} import from 'wix-users-backend' export ( ) function loginFnc body return ( ) => result return ( ) => err return In module we made a function which receive email and password from app and calls above to check if users exist. It returns result with token to app. http-functions POST loginFnc Other two functions: These functions are quite simple which includes one function to get logged in hospitals data and one function to update the hospitals data. GET PUT 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 package. When user logs in, we will store his data in storage and when he logs out we erase it. secure_storage 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 all hospitals data to show to public get_beds : get all cylinder providers data to show to public get_cylinders : Function to verify Hospital's and Cylinder Provider's login credentials post_userAuth : Receive logged in Hospital's email and returns their data post_bedData : Updates logged in Hospital's data put_updateBeds : Receive logged in Cylinder Provider's email and returns their data post_cylinderData : Updates logged in Cylinder Provider's data put_updateCylinders And one function in module. login login.jsw 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: https://www.mandvi.online/covid https://www.mandvi.online/beds-login https://www.mandvi.online/cylinders-login Links for trying Apps These are test accounts for app. You can try using these accounts to test the functionality. Id Hospitals App: , Password: intergalacticdeveloper@gmail.com 123456 Id Cylinders App: , Password: jaymehta7600@gmail.com 123456 Covid Counter Apps: Download apks from Google Drive Thanks for reading. Share with Velo enthusiasts! Jay, Empyrean Studio

Google

Instantly

Visit my new startup

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

73 Stories To Learn About Velo

Accepting Payments With The Wix Payment API

Basic Guide to Creating a Page Using Velo by Wix

Building a Heritage Trees Registry with Velo

Building a Professional CV Using Velo

73 Stories To Learn About Velo

Accepting Payments With The Wix Payment API

Basic Guide to Creating a Page Using Velo by Wix

Building a Heritage Trees Registry with Velo

Building a Professional CV Using Velo

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps