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 - folder
        • 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. li>Click on New project. The "Choose a template for your new 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. Edit the Location to point to the LazyStackTutorial folder.
  8. Two projects are created:
    • PetStoreMobileApp -- this is the Xamarin.Forms project.
    • PetStoreMobileApp.iOS

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.

Note: In a production application you may choose to use the corresponding NuGet package instead of using this project directly. In this tutorial it is useful to be able to debug into these projects to understand how their features are implemented.

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. 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="..\..\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>
  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.

10.4 Update to the latest Xamarin packages.

  1. Right click on the PetStoreMobileApp 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.

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

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