LazyStack

Create a Xamarin Forms App

In this step we will create a Xamarin app with a fully functional Authentication process and one simple page with content produced by a call against the PetStore class.

8.1 Create the PetStoreMobileApp Project(s)

  1. Right Click on "Solution PetStore" in the Solution Explorer. The context menu appears.
  2. Select "Add → New Project". The "Add new project" page appears.
  3. Type "Mobile App (Xamarin.Forms)" in the search field. The project template is listed.
  4. Select the "Mobile App (Xamarin.Forms)" template and click the Next button. The Configure your new project page appears.
  5. Edit the project name to read "PetStoreMobileApp".
  6. Click on the Create button. The "New Mobile App" dialog appears.
  7. Select the "Blank" app option
  8. Ensure only the Android target is selected.
  9. Click on the Create button. The PetStoreMobileApp and PetStoreMobileApp.Andriod projects are created.

8.2 Update the PetStoreMobileApp Project

In this tutorial we implement a very simple two page Xamarin app. The HomePage implements user sign up and authentication. Once the user is authenticated the page presents a "See Pets" button that navigates to a page showing pets available.

  1. Double Click on the PetStoreMobileApp project. The project's csproj file opens in an editor tab.
  2. Replace the contents of the csproj file with this content:
    <Project Sdk="Microsoft.NET.Sdk">
    
        <PropertyGroup>
            <TargetFramework>netstandard2.1</TargetFramework>
            <ProduceReferenceAssembly>true</ProduceReferenceAssembly>
        </PropertyGroup>
        
        <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
            <DebugType>portable</DebugType>
            <DebugSymbols>true</DebugSymbols>
        </PropertyGroup>
        
        <ItemGroup>
            <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="5.0.0" />
            <PackageReference Include="Xamarin.Forms" Version="5.0.0.2012" />
            <PackageReference Include="Xamarin.Essentials" Version="1.6.1" />
        </ItemGroup>
        
        <ItemGroup>
            <ProjectReference Include="..\..\PetStoreClientSDK\PetStoreClientSDK.csproj" />
        </ItemGroup>
        
        <ItemGroup>
            <EmbeddedResource Include="..\..\Stacks\Dev\AwsSettings.json" />
            <EmbeddedResource Include="..\..\LocalApis.json" />
        </ItemGroup>
        
        <ItemGroup>
            <EmbeddedResource Update="Views\ItemsPage.xaml">
            <Generator>MSBuild:Compile</Generator>
            </EmbeddedResource>
        </ItemGroup>
        
    </Project>
  3. Save the file.
  4. Right click on the MainPage.xaml file and select Delete. The MainPage.xaml and MainPage.xaml.cs files are deleted from the project and disk.
  5. Right click on the App.xaml file and select Delete. The App.xaml and App.xaml.cs files are deleted from the project and disk.
  6. Download App.xaml and move it into the PetStoreMobileApp project folder using Windows Explorer. Use Windows Explorer instead of dropping the file into Visual Studio to avoid Visual Studio trying to create an App.xaml.cs file for you.
  7. Download App.xaml.cs and move it into the PetStoreMobileApp project folder using Windows Explorer.
  8. Right click on the PetStoreMobileApp project. The context menu appears.
  9. Select Add → New Folder. A new folder is added to the project. Edit the folder name to read "Views".
  10. Right click on the PetStoreMobileApp project. The context menu appears.
  11. Select Add → New Folder. A new folder is added to the project. Edit the folder name to read "ViewModels".
  12. Download the following files and move them into the PetStoreMobileApp/ViewModels folder.
  13. Add a Views folder
  14. Download the following files and move them into the PetStoreMobileApp/Views folder using Windows Explorer.

8.3 Update to the latest Xamarin packages.

  1. Right click on the PetStore solution. The context menu appears.
  2. Select "Manage Nuget Packages for Solution". The "Nuget - Solution" tab opens.
  3. Select "Nuget - Solution → Updates". Available Nuget Package updates are listed.
  4. If Xamarin.Essentials or Xamarin.Forms is listed, click the checkboxes next to them and then click the Update button. The latest Xamarin packages are now referenced in the PetStoreMobileApp and PetStoreMobileApp.Android projects.

8.4 Configure the PetStoreMobileApp.Android Project

You may need to update the PetStoreMobileApp.Android project to use a newer TargetFrameworkVersion.

  1. Right click on the PetStoreMobileApp.Android project. The context menu appears.
  2. Select "Properties". The PetStoreMobileApp.Android properties tab opens.
  3. Select the latest installed Target Framework - for instance "Android 10.0". A dialog appears asking if you are sure you want to change the Target Framework. Click the Yes button.

8.5 Add Hero Image Resource to PetStoreMobileApp.Android Project

    • Download LazyLogo800x800.png and move it into the PetStoreMobileLapp.Android/Resources/drawable folder. If you move this file by dragging it onto the drawable folder in the Visual Studio Solution Explorer, it will be automatically added to the folder. If you move it using Windows Explorer, you may have to use Add Existing File to get Visual Studio to "see" this file.

8.6 Run App

  1. Right Click on the PetStoreMobileApp.Andriod project. The context menu appears.
  2. Select "Set as Startup Project".
  3. Debug the project. The Android emulator opens and the App launches.
  4. Sign In
  5. Click the "See Pets" button to see a list of Pets retrieved from the PetStoreDev stack.

Step Summary

In this step we started with a simple Xamarin two page application to demonstrate authentication services against AWS Cognito using the LazyStackAuth library. In addition, we used the PetStore class from the PetStoreClientSDK library to make secure calls against the PetStoreDev stack to show the available pet inventory.