Build Real World ECommerce App with .NET MAUI

Download and open the ASP.NET Core web API project from GitHub, then prepare to consume its RESTful APIs in a .NET MAUI app.

Create an Azure web app using a resource group, dotnet runtime, and a publish profile, guiding you through subscription, region, and pricing choices for a code deployment.

Create an Azure SQL database in the portal, configure a new server and admin credentials, and set firewall rules to publish your .NET MAUI e-commerce app to Azure.

Publish your asp.net core web app to Azure by updating the app settings with the Azure SQL connection string, configuring self-contained deployment, and publishing to a live Azure URL.

Explore api documentation and endpoints for a tea store app. Use Postman to import the tea store ep collection with users, categories, products, shopping cart items, and orders.

Test user endpoints in Postman by registering and logging in to obtain an access token, then upload a photo and fetch the profile image URL using secure endpoints.

Learn to use categories and products endpoints to fetch category lists, retrieve products by type or category, and view detailed product information in a .NET MAUI ecommerce app.

Learn to use shopping cart items endpoints—adding items with post, updating quantities with put, and retrieving cart items with get—by working with product IDs, prices, totals, and customer IDs.

Explore the orders endpoint in the .NET MAUI ecommerce app: place orders via post, clear carts, view orders by user, and drill into order details and foreign key relationships.

Build a real-world ecommerce app with .NET MAUI, including login, home with categories and products, product detail with quantity, add to cart, favorites, and order management.

Create a new Dotmobi project using Visual Studio on Windows or Mac, select the dotted mobi app template, name the project, and choose the target framework, opting for dotnet seven.

Download and uncompress the assets, then import them into the MAUI project by adding them to the resources/images folder in Visual Studio using drag-and-drop.

Create C# model classes for users and categories by mapping json responses from register, login, and token endpoints, install Json.NET, and generate PascalCase properties for a Maui app.

Create product and cart models in .NET MAUI by converting JSON to C# classes, including Product detail, shopping cart, and shopping cart item, and map endpoints for cart operations.

Create model classes for orders in a real world ecommerce app with .NET MAUI, generating C# properties from postman json for order, order by user, and order detail.

Learn to implement the register user method in a .NET MAUI app by building the service layer, serializing with Json.NET, and posting via HttpClient.

Make the app service class static and convert all methods to static, so other classes can call register user without creating an instance. Prepare to explore the login method.

Implement a login method for the api to obtain an access token, deserialize the token from json, and store token, user id, and username in isolated storage.

Create a static app settings class to centralize the API URL, replacing repeated URLs in login and register methods with a single base URL concatenated to endpoints.

Retrieve the access token from preferences, call the user profile image endpoint with a bearer authorization header, and deserialize the json response into a profile image object.

Upload a user image to the rest API with multipart form data. Create a method that sends a byte array, passes an access token, and uses the image key.

Create service class methods for the category and product endpoints, using an access token, deserializing responses to lists of category or product, and a product detail method.

Implement cart service methods in the .NET MAUI app: add items, get cart items by user, and update cart quantity with post, get, and put requests using access tokens.

Build service class methods for orders, including post and get endpoints, serialize/deserialize order data, and retrieve orders and ordered details by user.

Create and wire a sign up page in .NET MAUI, handling name, email, phone, and password with an asynchronous register user call and success or error alerts.

Create a login page in dotnet maui, implement sign up and login navigation, handle login via app service, and set the home page as main to prevent back navigation.

Create a .NET MAUI app shell with four tabs: home, cart, favorite, and profile, by adding pages, wiring login to the shell, assigning icons, and styling the tab bar.

Implement one time login with an access token by storing it with preferences.set, retrieving via preferences.get in app.xaml.cs, and switching main page from signup to app shell when token exists.

Implement the home page by wiring up Xaml and data binding, retrieve the stored username from preferences, and display a personalized greeting on the home screen.

Fetch categories from the REST API and display them in the home page's categories collection view, using full image URLs built from the app API URL.

Fetch and display trending, best selling, and top pick products on the home page, binding them to the trending and best selling collection views.

Navigate from the home page categories collection view to the products list page by selection changed, passing the category id to the products list page and clearing the selection.

Display products list data by fetching category-specific results with an async GetProducts method and binding image URL, name, and price to a collection view.

Navigate from the product list collection view to the product detail page by handling selection, creating the detail page, and passing the product id via the page constructor.

Download the sample code and paste it into the product detail page. Fetch product details via the API service and bind name, detail, price, and image URL to the UI.

Implement cart quantity controls by wiring plus and minus buttons to increment and decrement actions, update total price accordingly, and prevent negative quantities on the product detail page.

Implement add to cart on the product detail page by passing a shopping cart object to the API service, handling responses with alerts and proceeding to the cart page.

Navigate the home page's trending and best selling products, using the collection view's selection changed events to open the product detail page with reusable navigation code.