CoroVi App

Created a cross-platform Covid19 mobile application written in Xamarin.Forms with SQLite database.

App idea and functionality

This app tracks the number of cases, recovered, and deaths from Corona.Lmao.Ninja API from a Global perspective or from a certain country.

These are the 3 major pages of the application:

  • HomePage – this is where data from the API will be displayed. The user will be able to check the death, recovery, and cases from a Global perspective or from a certain country.
    • Users can enter any country name they want to see to display their total cases, today cases, total recovered, today recovered, total deaths, and today deaths.
    • There is a list view that contains all countries listed with their cases, recovered, and deaths.
  • SelfAssesmentPage – this is where the SQLite will be used. The users will be asked to do a self assessment if they have COVID or not. The questions I used are from Ontario Self-Assessment
    • Users can start assessment where they will be asked if they are experiencing any of these:
      • Fever and/or chills
      • Cough or barking cough (croup)
      • Shortness of breath
      • Sore throat
      • Difficulty swallowing
      • Runny or stuffy/congested nose
      • Decrease or loss of taste or smell
      • Pink eye
      • Headache
      • Digestive issues like nausea/vomiting, diarrhea, stomach pain
      • Muscle aches
      • Extreme tiredness
    • All of the results will then be saved into the SQLite DB with the time taken.
  • AccountPage – this is where the users are able to see their status, if they have COVID or not from the saved SQLite DB
    • The users can do following manipulations of the SQLite data:
      • View more details
      • Update the existing assessment data
      • Remove the assessment data

Web Services Used

I used the API from:

  • Corona.lmao ALL : I used this API website to extract values to track the total cases, recovered, and deaths and display them on the application. 
  • Corona.lmao COUNTRIES + “any country name”: I used this API to extract values to track the total cases, recovered, and deaths of a SPECIFIC country name and display them on the application. I also used this to gather all the data from ALL countries to be displayed in a list view.

To be able to extract the data I have this Class to hold the data:

public class CountriesClass    {
        public string country { get; set; }
        public int cases { get; set; }
        public int todayCases { get; set; }
        public int deaths { get; set; }
        public int todayDeaths { get; set; }
        public int recovered { get; set; }
        public int todayRecovered { get; set; }

        public CountriesClass() { }    }

And then I have this function that takes in the corona.lmao.ninja link and parse it into a string and then to be returned as a list all through the help of sonConvert.DeserializeObject from NewtonSoft.

private string url_allCountry = “https://corona.lmao.ninja/v3/covid-19/countries“;

public async Task<List<CountriesClass>> GetCountriesCovid()        {
            try {
                HttpResponseMessage res = await client.GetAsync(url_allCountry);
                if (res.StatusCode == HttpStatusCode.NotFound || res.StatusCode == HttpStatusCode.ServiceUnavailable)
                    return new List<CountriesClass>();
                try {
                    var response = await client.GetStringAsync(url_allCountry);
                    return JsonConvert.DeserializeObject<List<CountriesClass>>(response);
                } catch (Exception e){
                    Console.WriteLine(e.Message);
                    return null;
                }
            }
            catch (Exception e)
            {
                Console.WriteLine(e.Message);
               return null;
            }
        }

Then later in my HomePage.xaml.cs I bind my data from the url above:

            allCountries.ItemsSource = null;
            var list = await summaryNetworkingManager.GetCountriesCovid();
            summary_list = new ObservableCollection<CountriesClass>(list);
            allCountries.ItemsSource = summary_list;

Then I display the Binded summary_list in from my HomePage.xaml

<ListView x:Name=”allCountries” HasUnevenRows=”True”>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout>
                                    <StackLayout Orientation=”Vertical” Padding=”2″>
                                        <StackLayout HorizontalOptions=”CenterAndExpand”>
                                            <Label Text=”{Binding country}” TextColor=”#0A345E” FontAttributes=”Bold” FontSize=”Medium”/>
                                        </StackLayout>
                                    </StackLayout>
                                    <StackLayout VerticalOptions=”Start” Orientation=”Horizontal”>
                                        <yummy:PancakeView BackgroundColor=”#68CAD7″ CornerRadius=”15,5,15,40″ Margin=”15,0,0,5″ HorizontalOptions=”FillAndExpand”>
                                            <StackLayout Margin=”25,5,0,5″>
                                                <Label Text=”{Binding cases, StringFormat='{0:n0}’}” FontSize=”Small” FontAttributes=”Bold” TextColor=”White”/>
                                                <Label Text=”Total Cases” FontSize=”Micro” TextColor=”White” Margin=”-1,-7,-1,-1″/>
                                            </StackLayout>
                                        </yummy:PancakeView>
                                        <yummy:PancakeView BackgroundColor=”#AABBF3″ CornerRadius=”40,5,5,40″ Margin=”0,0,0,5″ HorizontalOptions=”FillAndExpand”>
                                            <StackLayout Margin=”25,5,0,5″>
                                                <Label Text=”{Binding recovered, StringFormat='{0:n0}’}” FontSize=”Small” FontAttributes=”Bold” TextColor=”White”/>
                                                <Label Text=”Total Recovered” FontSize=”Micro” TextColor=”White” Margin=”-1,-7,-1,-1″/>
                                            </StackLayout>
                                        </yummy:PancakeView>
                                        <yummy:PancakeView BackgroundColor=”#FB9C80″ CornerRadius=”40,15,5,15″ Margin=”0,0,15,5″ HorizontalOptions=”FillAndExpand”>
                                            <StackLayout Margin=”25,5,0,5″>
                                                <Label Text=”{Binding deaths, StringFormat='{0:n0}’}” FontSize=”Small” FontAttributes=”Bold” TextColor=”White”/>
                                                <Label Text=”Total Deaths” FontSize=”Micro” TextColor=”White” Margin=”-1,-7,-1,-1″/>
                                            </StackLayout>
                                        </yummy:PancakeView>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

SQLite DB Data

CoroVi app stores data into the SQLite DB when a user submits an assessment form.

My SQLite holds 12 Booleans for each question to be stored, 12 strings that hold results of each question and a Datetime to store the time of the assessment taken. 

Here’s an example of my Assessment Class

 public class Assessment 
    {
        public event PropertyChangedEventHandler PropertyChanged;

        [PrimaryKey, AutoIncrement]
        public int Id { get; set; }
 
        public DateTime dateTaken { set; get; } 

        public bool bq1 { set; get; }

        public string sb1 {
            get {
                if (bq1) return “You have fever and/or chills”;
                else return “You have NO fever and/or chills”;
            }
            set { }
        }

This is how we insert a new item in the db:

public async void startSelfAssessment(object sender, EventArgs e) {

            Assessment newAssessment = await AssessmentManager.InputBox(this.Navigation, null);
            if (newAssessment != null)
            { 
                allAssesments.Add(newAssessment); 
                dbModel2.insertNewToDo(newAssessment); 
            }
        }

This is how we Update existing item in the db

public async void updateDB(object sender, EventArgs e)
        {
            var toUpdate = ((sender as Button).CommandParameter as Assessment);
            var updatedTask = await AssessmentManager.InputBox(this.Navigation, toUpdate);
            if (updatedTask != null)
            {
                SelfcarePage.dbModel2.updateTask(updatedTask);
            }
        }

This is how we remove existing item in the db

public void deleteFromDB(object sender, EventArgs e)
        {
            var toDelete = ((sender as Button).CommandParameter as Assessment);
            SelfcarePage.allAssesments.Remove(toDelete);
            SelfcarePage.dbModel2.deleteTask(toDelete);
        }

This is how we display all the items from the db

protected async override void OnAppearing()
        {
            SelfcarePage.allAssesments = await SelfcarePage.dbModel2.CreateTable();
            allAssesmentTable.ItemsSource = SelfcarePage.allAssesments;
            base.OnAppearing();
        }

Outcome

I learned how to implement a TabbedPage, use different kinds of UI components, parse JSON from a web service, deserialize JSON using NewtonSoft, and store data locally through SQLite DB.

At the start of the pandemic my dad told me to make a mobile app to track COVID updates with a simple self-assessment questionnaire, and I made it happen! I installed this application in his phone so he can use it. He is very proud of me and that made my heart skip a beat.

I am so happy with the end result of this project, aside from learning Xamarin.Forms I also made my dad proud.

Click here for the GitHub link!

Thoughts

This is my first time touching Xamarin.Forms and C#. I must say that I am a bit sad that Microsoft announced Xamarin.Forms will be deprecated in November of 2021 because they are releasing a new .Net based product called MAUI(Multiform App User Interface). Maybe I should be excited for MAUI instead?

We are all truly blessed to have the chance to enjoy all these amazing cross-platform frameworks, each framework is only getting better and better each day!

Published by Nesa Bertanico

I am in my third year of Software Development degree at Seneca College. I am passionate about creating visually appealing websites. For now, I love designing prototypes/mockups and hopefully, be able to make them come to life soon while I learn more about web programming.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: