A high school student contributed to the development of COCOA, the Japanese COVID-19 contact-confirming app— Learn Xamarin in a day and improve COCOA
Tags: Covid 19, Cocoa, Oss, Civictech

A high school student contributed to the development of COCOA, the Japanese COVID-19 contact-confirming app— Learn Xamarin in a day and improve COCOA あんはる Feb 14·7 min read

Hello, I’m Anharu.

I’d like to share with you my contribution to the development of COCOA, the Japanese COVID-19 contact-confirming application, and how you can easily join the development.

The contact-confirming app “COCOA” is OSS!

“COCOA” was the topic of conversation. I was wondering who and what company was developing it, but then I found out that it is OSS.

This means that I can contribute “COCOA” by myself.

Improvements I’ve made (the merged pull request)

Found the problem

When you launch the app for the first time, you will see the page to agree to the Terms of Service.

At that time, the Terms of Service web page is inserted, but the problem is that nothing appears while it is loading.

I’m wondering if it’s frozen.

Edit the source code

This app is written in Xamarin. I’ve never used it before, so I had to learn it.

Edited parts

First, I added a ProgressBar.

Covid19Radar/Covid19Radar/Views/Tutorial/TutorialPage3.xaml

<Grid Style="{StaticResource DefaultGridLayout}">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Label Grid.Row="0" Margin="0,0,0,20" Style="{StaticResource DefaultTitleLabel}" Text="{x:Static resources:AppResources.TutorialPage3Title}" />

<StackLayout Grid.Row="1">

<ProgressBar Progress="0.0" IsVisible="false" HorizontalOptions="FillAndExpand" x:Name="activity_indicator" />

<views:NavigatePopoverWebView

Source="{x:Static resources:AppResources.UrlTermOfUse}"

Style="{StaticResource DefaultWebView}"

VerticalOptions="FillAndExpand" Navigating="OnNavigating" Navigated="OnNavigated" HorizontalOptions="FillAndExpand" />

</StackLayout>

<Button Grid.Row="2"

AutomationId="NextButton"

Command="{Binding Path=OnClickAgree}"

Style="{StaticResource DefaultButton}"

Text="{x:Static resources:AppResources.TutorialPage3ButtonText}" />

</Grid>

Then, I made the ProgressBar work and disappear when the loading is finished.

Covid19Radar/Covid19Radar/Views/Tutorial/TutorialPage3.xaml.cs

using Xamarin.Forms;

using Xamarin.Forms.Xaml; namespace Covid19Radar.Views

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class TutorialPage3 : ContentPage

{

public TutorialPage3()

{

InitializeComponent();

}

protected async override void OnAppearing()

{

base.OnAppearing();

await activity_indicator.ProgressTo(1.0, 900, Easing.SpringIn); } public void OnNavigating(object sender, WebNavigatingEventArgs e)

{

activity_indicator.IsVisible = true;

} public void OnNavigated(object sender, WebNavigatedEventArgs e)

{ activity_indicator.IsVisible = false; }

}

}

Submit a pull request ( an improvement request)

I submitted this edit as a pull request and have reviewers review it.

Screenshot of the pull request↓.

Adopted in less than a day🎉

My improvement has been adopted by @Kazumihirose’s review/merge 🎉 🎉.

The app now reflected the improvement.

You can do it too, learn Xamarin in a day and improve your app!

If you’ve ever thought, “I’m having trouble using COCOA,” or “This display looks weird. Let’s try to improve the application.

It is good for OSS that anyone can improve it.

Report problems and bugs you find on GitHub issues.

Go to https://github.com/Covid-19Radar/Covid19Radar/issues

Press the new issue button in the lower right corner.

This will take you to the issue creation screen, where you will need to explain the issue and clarify what steps are required to cause the issue.

There are no rules and regulations, but many people write in English, so English is probably better. (Japanese is also OK)

Building the Environment

https://github.com/Covid-19Radar/Covid19Radar/blob/master/doc/HOT_TO_CREATE_DEV_ENV.md

This link will tell you what you need to install.

The main operation is to install Xamarin, so https://docs.microsoft.com/ja-jp/xamarin/get-started/installation/

for reference.

Getting Started with Xamarin

If you want to improve the code, you need to know Xamarin.

However, if you want to improve the appearance of your app, you really only need to know a few things, so it doesn’t take much time to get started.

Getting Started with Xamarin to Improve the appearance of the app

Since I think the majority of problems you will find when working with the app is improving the look and behavior of the app, I’ll show you how to create a user interface (the appearance of the screen) with Xamarin.forms.

If you want the official version, you can find it at https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/

for the official version.

It’s written in C#.

For c# syntax, see https://ufcpp.net/study/csharp/

Let’s create the user interface (the look and feel of the screen)

The user interface (UI) is the appearance of the screen.

There are four concepts that you need to understand to create a UI.

・Page

・Layout

・View

Page

It takes up all or most of the screen.

Quote from

This is like Activity in Android.

There are six types of pages: ContentPage, MasterDetailPage, NavigationPage, TabbedPage, CarouselPage, and TemplatedPage.

A page for the “COCOA” contact confirmation application

Let’s see the code for the HomePage.

from https://github.com/Covid-19Radar/Covid19Radar/blob/master/Covid19Radar/Covid19Radar/Views/HomePage/HomePage.xaml

HomePage.xaml

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage

x:Class="Covid19Radar.Views.HomePage"

xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"

xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"

xmlns:prism="http://prismlibrary.com"

xmlns:resources="clr-namespace:Covid19Radar.Resources;assembly=Covid19Radar"

ios:Page.UseSafeArea="true"

prism:ViewModelLocator.AutowireViewModel="True"

NavigationPage.TitleIconImageSource="HeaderLogo.png"

Style="{StaticResource DefaultPageStyle}"

Visual="Material">

<ContentPage.ToolbarItems>

<ToolbarItem

AutomationId="LabelMainTutorial"

Command="{prism:NavigateTo 'HelpMenuPage'}"

Order="Primary"

Priority="1"

Text="{x:Static resources:AppResources.MainTutorial}" />

</ContentPage.ToolbarItems> <ScrollView>

<StackLayout

Padding="15"

BackgroundColor="#EEEEEE"

Spacing="15">

<Frame

Padding="10"

CornerRadius="10"

HasShadow="False">

<StackLayout Spacing="0">

<Label HorizontalTextAlignment="Center" Style="{StaticResource DefaultLabel}">

<Label.FormattedText>

<FormattedString>

<Span Text="{Binding StartDate}" />

<Span Text="{x:Static resources:AppResources.HomePageDescription0}" />

<Span Text=" " />

<Span Text="{Binding PastDate}" />

<Span Text=" " />

<Span Text="{x:Static resources:AppResources.HomePagePastDays}" />

<Span Text=" " />

<Span Text="{x:Static resources:AppResources.HomePageDescription1}" />

</FormattedString>

</Label.FormattedText>

</Label>

<Button

AutomationId="ButtonExposures"

Command="{Binding Path=OnClickExposures}"

Style="{StaticResource DefaultButton}"

Text="{x:Static resources:AppResources.HomePageDescription2}" /> </StackLayout>

</Frame>

<Frame

Padding="10"

CornerRadius="10"

HasShadow="False">

<StackLayout Spacing="0">

<Label Style="{StaticResource DefaultSubTitleLabel}" Text="{x:Static resources:AppResources.HomePageDescription3}" />

<Grid ColumnSpacing="15" RowSpacing="0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.2*" />

<ColumnDefinition Width="0.8*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<ffimageloading:CachedImage

Grid.Row="0"

Grid.Column="0"

Aspect="AspectFit"

Source="HOMEPage10.png" />

<Label

Grid.Row="0"

Grid.Column="1"

Style="{StaticResource DefaultLabelSmall}"

Text="{x:Static resources:AppResources.HomePageHeader2Description}"

VerticalTextAlignment="Center" />

</Grid> <Button

Command="{prism:NavigateTo 'SubmitConsentPage'}"

Style="{StaticResource DefaultButton}"

Text="{x:Static resources:AppResources.HomePageDescription4}" />

</StackLayout>

</Frame>

<Frame

Padding="10"

CornerRadius="10"

HasShadow="False">

<StackLayout Spacing="0">

<Label Style="{StaticResource DefaultSubTitleLabel}" Text="{x:Static resources:AppResources.HomePageHeader3Title}" />

<Grid ColumnSpacing="15" RowSpacing="0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.2*" />

<ColumnDefinition Width="0.8*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<ffimageloading:CachedImage

Grid.Row="0"

Grid.Column="0"

Aspect="AspectFit"

Source="HOMEPage11.png" />

<Label

Grid.Row="0"

Grid.Column="1"

Style="{StaticResource DefaultLabelSmall}"

Text="{x:Static resources:AppResources.HomePageHeader3Description}"

VerticalTextAlignment="Center" />

</Grid>

<Button

Command="{Binding Path=OnClickShareApp}"

Style="{StaticResource DefaultButton}"

Text="{x:Static resources:AppResources.HomePageDescription5}" />

</StackLayout>

</Frame>

</StackLayout> </ScrollView>

</ContentPage>

As you can see, the largest unit of the screen is the Page, and for HomePage, ContentPage is used.

Layout

Layout is responsible for dividing the screen and grouping elements together.

In the HomePage, a layout called Frame is used for each chunk.

HomePage.xaml

<Frame

Padding="10"

CornerRadius="10"

HasShadow="False">

<StackLayout Spacing="0">

<Label HorizontalTextAlignment="Center" Style="{StaticResource DefaultLabel}">

<Label.FormattedText>

<FormattedString>

<Span Text="{Binding StartDate}" />

<Span Text="{x:Static resources:AppResources.HomePageDescription0}" />

<Span Text=" " />

<Span Text="{Binding PastDate}" />

<Span Text=" " />

<Span Text="{x:Static resources:AppResources.HomePagePastDays}" />

<Span Text=" " />

<Span Text="{x:Static resources:AppResources.HomePageDescription1}" />

</FormattedString>

</Label.FormattedText>

</Label>

<Button

AutomationId="ButtonExposures"

Command="{Binding Path=OnClickExposures}"

Style="{StaticResource DefaultButton}"

Text="{x:Static resources:AppResources.HomePageDescription2}" /> </StackLayout>

</Frame>

<Frame

Padding="10"

CornerRadius="10"

HasShadow="False">

<StackLayout Spacing="0">

<Label Style="{StaticResource DefaultSubTitleLabel}" Text="{x:Static resources:AppResources.HomePageDescription3}" />

<Grid ColumnSpacing="15" RowSpacing="0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.2*" />

<ColumnDefinition Width="0.8*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<ffimageloading:CachedImage

Grid.Row="0"

Grid.Column="0"

Aspect="AspectFit"

Source="HOMEPage10.png" />

<Label

Grid.Row="0"

Grid.Column="1"

Style="{StaticResource DefaultLabelSmall}"

Text="{x:Static resources:AppResources.HomePageHeader2Description}"

VerticalTextAlignment="Center" />

</Grid> <Button

Command="{prism:NavigateTo 'SubmitConsentPage'}"

Style="{StaticResource DefaultButton}"

Text="{x:Static resources:AppResources.HomePageDescription4}" />

</StackLayout>

</Frame>

<Frame

Padding="10"

CornerRadius="10"

HasShadow="False">

<StackLayout Spacing="0">

<Label Style="{StaticResource DefaultSubTitleLabel}" Text="{x:Static resources:AppResources.HomePageHeader3Title}" />

<Grid ColumnSpacing="15" RowSpacing="0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.2*" />

<ColumnDefinition Width="0.8*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<ffimageloading:CachedImage

Grid.Row="0"

Grid.Column="0"

Aspect="AspectFit"

Source="HOMEPage11.png" />

<Label

Grid.Row="0"

Grid.Column="1"

Style="{StaticResource DefaultLabelSmall}"

Text="{x:Static resources:AppResources.HomePageHeader3Description}"

VerticalTextAlignment="Center" />

</Grid>

<Button

Command="{Binding Path=OnClickShareApp}"

Style="{StaticResource DefaultButton}"

Text="{x:Static resources:AppResources.HomePageDescription5}" />

</StackLayout>

</Frame>

Also, there are StackLayout, Grid, and others.

Each of these has its own role, so please see https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/controls/layouts for details.

Views

Views are elements such as buttons, labels (which can display text), and images (which can display images). In other frameworks, it is sometimes called a widget.

If you look at the code above, you can see that a lot of Buttons and Labels are used.

Where is the UI of the contact confirmation application “COCOA” written?

・Page

・Layout

・View

if you understand these, we can improve the UI by changing the attributes and adding elements.

The part that provides the data is already in place, so you can concentrate on improving the UI without thinking about it.

Finally, let’s see which screen is in which file.

HomePage

You can find it at https://github.com/Covid-19Radar/Covid19Radar/blob/master/Covid19Radar/Covid19Radar/Views/HomePage/HomePage.xaml.

HelpMenuPage

Available at https://github.com/Covid-19Radar/Covid19Radar/blob/master/Covid19Radar/Covid19Radar/Views/HelpPage/HelpMenuPage.xaml.

MenuPage

Available at https://github.com/Covid-19Radar/Covid19Radar/blob/master/Covid19Radar/Covid19Radar/Views/MenuPage.xaml.

NotContactPage

Available at https://github.com/Covid-19Radar/Covid19Radar/blob/master/Covid19Radar/Covid19Radar/Views/HomePage/NotContactPage.xaml.

SubmitConsentPage

Available at https://github.com/Covid-19Radar/Covid19Radar/blob/master/Covid19Radar/Covid19Radar/Views/HomePage/SubmitConsentPage.xaml.

SettingsPage

Available at https://github.com/Covid-19Radar/Covid19Radar/blob/master/Covid19Radar/Covid19Radar/Views/Settings/SettingsPage.xaml.

I have introduced the main Pages. If you find a problem, go to the Page of the problem and try to edit the source code.

Submit a pull request!

To reflect your UI improvements, send a pull request and get the reviewer’s permission, and your improvements will be reflected. (The process is review -> merge to master -> release)

I’d be happy to show you how to send a pull request at https://qiita.com/Anharu/items/572f5f6c30c6edbec349#コードを編集する.

Summary

“COCOA” has had its pros and cons. However, if you find something wrong with it and fix it yourself, I think “COCOA” will get better and better.

The initial members of the development team (@kazumihirose, @DarkCrash3, noriji, and runceel) may be feeling pressure and stress from the social nature of the app, which will be used all over Japan.

I think it’s important to show respect to these people and to improve them by taking advantage of OSS and everyone’s combined efforts.