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 "Choose a template for your project" dialog appears.
  3. Select "Multiplatform → App → Blank Forms App" and click on the Next button. The "Configure your Tabbed Forms App" dialog appears.
  4. Edit the project name to read "PetStoreMobileApp".
  5. Ensure only the iOS Target Platform is "checked".
  6. Click on the Next button. The second page of the "Configure your Blank Forms App" dialog appears.
  7. Click the Create button. A question dialog appears warning that the PetStoreMac directory already exists. Click on the "yes" button.
  8. Two projects are created:
    • PetStoreMobileApp -- this is the Xamarin.Forms project.
    • PetStoreMobileApp.iOS

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. Right click on the PetStoreMobileApp project. The context menu appears.
  2. Select "Edit Project File". The project's csproj file opens in an editor tab.
  3. 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="..\PetStoreMacClientSDK\PetStoreMacClientSDK.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>
  4. Save the file.
  5. Right click on the MainPage.xaml file and select Delete. A confirmation dialog appears. Click the Delete button. The MainPage.xaml and MainPage.xaml.cs files are deleted from the project and disk.
  6. Right click on the App.xaml file and select Delete. A confirmation dialog appears. Click the Delete button. The App.xaml and App.xaml.cs files are deleted from the project and disk.
  7. Download App.xaml and move it into the PetStoreMobileApp project folder using Finder. Use Finder instead of dropping the file into Visual Studio to avoid Visual Studio trying to create an App.xaml.cs file for you.
  8. Download App.xaml.cs and move it into the PetStoreMobileApp project folder using Finder.
  9. In Visual Studio, right click on the PetStoreMobileApp project. The context menu appears.
  10. Select Add → New Folder. The New Folder dialog appears. Edit the folder name to read "Views" and click on the Add button. A new folder is added to the project.
  11. Right click on the PetStoreMobileApp project. The context menu appears.
  12. Select Add → New Folder. The New Folder dialog appears. Edit the folder name to read "ViewModels" and click on the Add button. A new folder is added to the project.
  13. Download the following files and move them into the PetStoreMobileApp/ViewModels folder.
  14. Add a Views folder
  15. Download the following files and move them into the PetStoreMobileApp/Views folder using Finder.

8.3 Update to the latest Xamarin packages.

  1. Right click on the PetStore solution. The context menu appears.
  2. Select "Manage Nuget Packages". The "Manage NuGet Packages - Solution" dialog opens.
  3. Select "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 Package" button. The latest Xamarin packages are now referenced in the PetStoreMobileApp and PetStoreMobileApp.Android projects.

8.4 Add Hero Image Resource to PetStoreMobileApp.iOS Project

  1. Download LazyLogo800x800.png and used Finder to move it into the PetStoreMobileLapp.iOS/Resources directory.
  2. Right click on the "PetStoreMobileApp.iOS/Resources" Solution Explorer folder. The context menu appears.
  3. Select "Add → Existing Files" and add the new LazyLogo800x800.png file.

8.5 Run App

  1. Right Click on the PetStoreMobileApp.iOS project. The context menu appears.
  2. Select "Set as Startup Project".
  3. Debug the project. The Apple simulator 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.