Code Monkey home page Code Monkey logo

eshop-mobile-client's Introduction

eshop-mobile-client

eShop sample applications have been updated and moved to https://github.com/dotnet/eShop. Active development will continue there.

eshop-mobile-client is a reference .NET MAUI multi-platform client app whose imagined purpose is to serve the mobile workforce of a fictitious company that sells products. The app allows you to manage the catalog, view products, and manage the basket and the orders.

Dependencies

Though eshop-mobile-client mobile app relies on the repo eShopOnContainers for its backend but by default it uses its internal MockServices for all its functionalities. For more details refer to the Setup section.

eShopOnContainers

Architecture

The app architecture consists of two parts:

  1. A .NET MAUI mobile app for iOS, macOS, Android, and Windows.
  2. Several .NET Web API microservices are deployed as Docker containers.

.NET MAUI App

This project exercises the following platforms, frameworks, and features:

  • .NET MAUI
    • XAML
    • Behaviors
    • Bindings
    • Converters
    • Central Styles
    • Animations
    • IoC
    • Messaging Center
    • Custom Controls
    • xUnit Tests
  • Azure Mobile Services
    • C# backend
    • WebAPI
    • Entity Framework
    • Identity Server 4

Backend Services

All the backend services-related code and components are maintained as eShopOnContainers repo.

Supported platforms

The app targets four platforms:

  • iOS
  • Android
  • macOS (must build and deploy from Mac)
  • Windows (must build and deploy from Windows)

Requirements

  • Visual Studio 2022 (2022 or higher) to compile C# language features
    • Visual Studio Community Edition is fully supported!
  • .NET MAUI add-ons for Visual Studio (available via the Visual Studio installer)

or

Setup

1. Ensure the .NET MAUI platform is installed

You can do that by following the steps mentioned in Installing .NET MAUI

2. Ensure .NET MAUI is updated

Visual Studio will periodically automatically check for updates. You can also manually check for updates using the Update Visual Studio options.

3. Project Setup

Restore NuGet packages for the project.

4. Ensure Android Emulator is installed

You can use any Android emulator or device. Refer to the Android Emulator documentation for details on setup.

Note: Android emulators cannot run well inside a virtual machine or over Remote Desktop or VNC since it relies on virtualization.

To deploy and debug the application on a physical device, refer to the Debug on an Android device article.

5. Optional iOS Deployment

To deploy to iOS you can directly deploy from a Mac machine or optionally from a Windows machine directly to a device or by pairing your Windows machine to a Mac.

6. Use Actual Microservices

By default eshop multiplatform client uses the internal mock services to let the user explore different sets of features in the app.

But if you want to test out the app using real services, you can do that too.

For that you'll need to do the following:

  1. Deploy the backend services of eShop applications from the eShopOnContainers repo. You can deploy the application to either Local Kubernetes or AKS environments.

  2. Enable microservices endpoint in the Settings section.

Microservices Endpoint Enable

Microservices Endpoint Configure

Identity Url : http://<YOUR_IP_OR_DNS_NAME>/identity Mobile Gateway Shopping Url: http://<YOUR_IP_OR_DNS_NAME>/mobileshoppingapi

  1. Enable HTTP traffic.

Android App

You'll also need to include the <YOUR_IP_OR_DNS_NAME> in the section <domain includeSubdomains="true"><YOUR_IP_OR_DNS_NAME></domain> of the network_security_config.xml file to use HTTP traffic.

For more details refer to Managing HTTP & Cleartext Traffic on Android with Network Security Configuration

IOS App

You'll need to make sure your info.plist file contains the following configuration.

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>

For more details refer to Opting-Out of ATS

NOTE: Please note, in production scenario you'll the services which uses HTTPS endpoint.

7. Setup Google Maps for Android

In the eShopOnContainers\Platforms\Android\AndroidManifest.xml you must replace the value of the com.google.android.geo.API_KEY with a valid Google Maps API key.

<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_KEY_GOES_HERE" />

For more details refer to .NET MAUI Map - Get a Google Maps API key.

Screenshots

Login

Login

Catalog

Profile

Order details

Clean and Rebuild

If you see build issues when pulling updates from the repo, try cleaning and rebuilding the solution.

Troubleshooting

Licenses

This project uses some third-party assets with a license that requires attribution:

Copyright and license

  • Code and documentation copyright 2023 Microsoft Corp. Code released under the MIT license.

eshop-mobile-client's People

Contributors

borjasanes avatar dependabot[bot] avatar erjain avatar ievangelist avatar jamesmontemagno avatar junian avatar mairaw avatar michaelstonis avatar nishanil avatar tjain-ms avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.