LazyStack

Create a Xamarin Forms App

In this step we will create a new solution containing a Xamarin forms app project with a fully functional Authentication process and one simple page with content produced by a call against the PetStore Stack. We are creating this app in a separate solution to demonstrate one simple approach to separating client and server side code bases. This new solution will reside under the LazyStackTutorial folder.

We have covered a lot of ground in the tutorial lessons so far. This is a good time to take a moment to review the contents of the LazyStackTutorial folder and what that folder will look like with the addition of the PetStoreMobileApp solution.

  • LazyStackTutorial - folder
    • LazyStack - solution root folder
      • LazyStackAuth - project folder
      • LazyStackAuthTests - project folder
      • LazyStackAwsSettings - project folder
      • LazyStackDynamoDBRepo - project folder
      • LazyStackDynamoDBRepoTests - project folder
      • LazyStackGetSettings - project folder
    • PetStore - solution root folder
      • Controllers - folder
        • OrderController - project folder
        • OrderControllerImpl - project folder
        • PetController - project folder
        • PetControllerImpl - project folder
      • Lambdas - folder
        • Pet - project folder
        • Order - project folder
      • SolutionItems - solution folder
        • LazyStack.yaml
        • LocalApis.json
        • PetStore.yaml
        • SAM_Review.yaml
      • Stacks - folder
        • Dev - folder
          • serverless.template
          • AwsSettings.json
      • LazyStackAuth - ..\..\LazyStack\LazyStackAuth.csproj
      • LazyStackDynamoDBRepo - ..\..\LazyStack\LazyStackDynamoDBRepo\LazyStackDynamoDBRepo.csproj
      • PetStore - project folder
      • PetStoreClientSDK - project folder
      • PetStoreConsoleApp - project folder
      • PetStoreRepo - project folder
      • PetStoreSchema - project folder
      • PetStoreTests - project folder
    • PetStoreMobileApp - solution root folder
      • PetStoreClientSDK - ..\..\PetStore\PetStoreClientSDK\PetStoreClientSDK.csproj
      • PetStoreMobileApp - project folder
        • PetStoreMobileApp.csproj - file
          • AwsSettings.json - ..\..\PetStore\Stacks\Dev\AwsSettings.json
          • LocalApis.json - ..\..\PetStore\LocalApis.json
          • PetStoreClientSDK - ..\..\PetStore\PetStoreClientSDK\PetStoreClientSDK.csproj
      • PetStoreMobileApp.Andriod
Note the references in the PetStoreMobileApp.csproj solution to files and projects in the PetStore solution. It is possible that you can provide client apps with access to these resources in other ways. For the purpose of this demo, this approach is expedient, efficient and simple.

10.1 Create the PetStoreMobileApp Solution

  1. Launch a new instance of Visual Studio
  2. Click on Create a new Project. The "Create new Project" dialog appears.
  3. Type "Mobile App (Xamarin.Forms)" into the search field. A list of project templates is presented.
  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. Edit the Location to to point to the "LazyStackTutorial" folder.
  7. Check the "Place solution and project in the same directory" checkbox.
    We do this so that the projects created with Visual Studio Windows have the same folder hierarchy as those created with Visual Studio Mac. There is no restriction in LazyStack that you do this, but for the purpose of this demo, please do for this solution.
  8. Click on the Create button. The "New Mobile App" dialog appears.
  9. Select the "Blank" app option
  10. Select only Android target. (You may select the iOS target if your workstation is already setup for the iOS tool-chain.)
  11. Ensure only the Android target is selected.
  12. Click on the Create button. The PetStoreMobileApp and PetStoreMobileApp.Andriod projects are created.

10.2 Add External PetStore Projects

  1. Add External PetStoreClientSDK project
    1. Right Click on "Solution 'PetStoreMobileApp' in the Solution Explorer pane. The context menu appears."
    2. Select "Add → Exiting Project ..". The Add Exiting Project dialog appears.
    3. Select "LazyStackTutorial\PetStore\PetStoreClientSDK\PetStoreClientSDK.csproj". The project is added to your solution.

10.3 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="..\..\PetStore\PetStoreClientSDK\PetStoreClientSDK.csproj" />
            <EmbeddedResource Include="..\..\PetStore\Stacks\Dev\AwsSettings.json" />
            <EmbeddedResource Include="..\..\PetStore\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.

10.4 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.

10.5 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.

10.6 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.

10.7 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.