Tutorials
No Results
Tutorial

Intermediate · 1 hour

Create a Mobile App (Android/iOS) using Xamarin Forms

This tutorial teaches you how to:

  • How to create Mobile Applications using the Xamarin Framework
  • How to install and use the Algorand Package in your application
  • Interactivity between your application and the Algorand network to create account addresses, fund account address, and also dispense funds into the account address.

Requirements

Background

Creating Account Addresses should be easy. In this tutorial, we will learn how to generate account addresses on mobile devices. This example walks through the process of creating account addresses for use on the Algorand Blockchain Network.

This video demonstrates the entire process covered below:

Steps

1. Create New Xamarin Project in Visual Studio

Open Visual Studio, File | New (Search for Xamarin)
EditorImages/2020/12/16 10:00/2020-12-16_10_54_30-Window.png
Figure 1-1
Search for Xamarin and Create a Xamarin Forms Application as shown in Figure 1-1

2. Install the Algorand Package

Insall the Algorand Package to your application. This can be done using the Package Manager Console with the following command:
“Install-Package Algorand”
Or using the NuGet Package Manager as shown in the image below:
EditorImages/2020/12/16 10:24/2020-12-16_11_19_12-Window.png
Figure 1-2

3. Create an Account Class

To create an account class, navigate to the Models folder as shown in Figure 1-3 below
EditorImages/2020/12/23 16:37/2020-12-23_17_35_15-MobileAlgorand_-_Microsoft_Visual_Studio.png
Figure 1-3
Add the following fields in your Account Class
EditorImages/2020/12/23 16:39/2020-12-23_17_38_15-MobileAlgorand_-_Microsoft_Visual_Studio.png
Figure 1-4

4. Create a View Page

EditorImages/2020/12/23 17:04/2020-12-23_18_04_18-MobileAlgorand_-_Microsoft_Visual_Studio.png
Figure 1-5
In the Views Folder, create a C# content Page called account address Page and follow along with the code snippet below:

using Algorand;
using Algorand.V2;
using MobileAlgorand.Models;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Essentials;
using Xamarin.Forms;

namespace MobileAlgorand.Views
{
    public class AccountPage : ContentPage
    {
        //Entry for Address
        private Entry address;

        //Entry for Balance
        private Entry balance;

        //Entry for Key
        private Entry key;

        //Storage fields for Accounnt Storeage for Restore
        public string StorageAccountName1 = "Account 1";
        public string StorageAccountName2 = "Account 2";
        public string StorageAccountName3 = "Account 3";
        public AccountPage()
        {
            //Page Title
            this.Title = "Account Address Page";
            StackLayout stackLayout = new StackLayout();
            Button button = new Button();
            button.Text = "Check Account Address Balance";
            button.Clicked += Button_Clicked;
            stackLayout.Children.Add(button);
            //Address Text Entry Field
            address = new Entry();
            address.Placeholder = "Address Here..";
            address.Keyboard = Keyboard.Default;
            stackLayout.Children.Add(address);
            //Account Balance Entry Field
            balance = new Entry();
            balance.Placeholder = "Balance Here..";
            balance.Keyboard = Keyboard.Default;
            stackLayout.Children.Add(balance);
            //Account Key Address Field
            key = new Entry();
            key.Placeholder = "Key Here..";
            key.Keyboard = Keyboard.Default;
            stackLayout.Children.Add(key);
            //Button to create an account address and mnemonic key
            Button button2 = new Button();
            button2.Text = "Generate Account Address";
            button2.Clicked += Button2_Clicked;
            stackLayout.Children.Add(button2);
            Content = stackLayout;
        }

        //Button Event Handler to Check Account Balance
        private async void Button_Clicked(object sender, EventArgs e)
        {
            string ALGOD_API_ADDR_TESTNET = "https://testnet-algorand.api.purestake.io/ps2";
            string ALGOD_API_TOKEN_TESTNET = "B3SU4KcVKi94Jap2VXkK83xx38bsv95K5UZm2lab";
            AlgodApi algodApiInstances = new AlgodApi(ALGOD_API_ADDR_TESTNET, ALGOD_API_TOKEN_TESTNET);
            var c = address.Text;
            var accountInfo = algodApiInstances.AccountInformation(c.ToString());
            balance.Text = $"{accountInfo.Amount}";
            await DisplayAlert("Account Address", $"MicroAlgos: {accountInfo.Amount}", "OK");

        }

        //Button Event Handler to Create Account Details (Address and Key)
        private void Button2_Clicked(object sender, EventArgs e)
        {
            Account account = new Account();
            AccountClass accountClass = new AccountClass()
            {
                Address = address.Text = account.Address.ToString(),
                Key = key.Text = (account.ToMnemonic())
            };
        }
        //How to Restore Accounts
        public async Task<Account[]> RestoreAccounts()
        {
            Account[] accounts = new Account[3];

            string mnemonic1 = "";
            string mnemonic2 = "";
            string mnemonic3 = "";

            try
            {
                //Using Xamarin Esentials for Secure Storage
                mnemonic1 = await SecureStorage.GetAsync(StorageAccountName1);
                mnemonic2 = await SecureStorage.GetAsync(StorageAccountName2);
                mnemonic3 = await SecureStorage.GetAsync(StorageAccountName3);
            }
            catch (Exception ex)
            {
                Debug.WriteLine("Error: " + ex.Message);
                // Possible that device doesn't support secure storage on device.
            }
            // restore accounts
            accounts[0] = new Account(mnemonic1);
            accounts[1] = new Account(mnemonic2);
            accounts[2] = new Account(mnemonic3);
            return accounts;
        }
    }
}

5. Application Startup Page

In this closing phase, we will set up the page our application will navigate to after we start it up. In this scenario, we will use the AccountPage as our startup page. We can do that by following the code in the image below:

EditorImages/2020/12/23 16:51/2020-12-23_17_48_19-MobileAlgorand_-_Microsoft_Visual_Studio.png
Figure 1-6
Add the following code to change the startup page:
EditorImages/2020/12/23 16:53/2020-12-23_17_52_40-MobileAlgorand_-_Microsoft_Visual_Studio.png
Figure 1-7

6. Fund Account

To fund your account after generating your account address, visit the Algorand Bank TestNet dispenser to fund your account:
https://bank.testnet.algorand.network/

EditorImages/2020/12/23 16:58/2020-12-23_17_57_30-Algorand_dispenser_-_Personal_-_Microsoft_Edge.png
Figure 1-8

7. Deploy Application

Select the Startup Project and Proceed to deploy the application on either your Emulator, iOS or Android Device.

8. Sample Image of Application

EditorImages/2020/12/23 17:07/WhatsApp_Image_2020-12-21_at_01.59.58.jpeg
Figure 1-9
EditorImages/2020/12/23 17:08/WhatsApp_Image_2020-12-21_at_01.59.58_1.jpeg
Figure 1-10
EditorImages/2020/12/23 17:09/WhatsApp_Image_2020-12-21_at_01.59.58_2.jpeg
Figure 1-11

Check the Account Balance after funding the account using the Algorand Dispenser shown above in Figure 1-8 and check the balance:
EditorImages/2020/12/23 17:10/WhatsApp_Image_2020-12-21_at_02.10.37.jpeg

9. Complete Project

Source code can be found on GitHub: https://github.com/KusuConsult-NG/MobileAlgorand

dapp

addresses

smart contracts

c#

.net

Xamarin

Algorand SDK

December 30, 2020