.Net MAUI is a cross-platform framework for creating native mobile and desktop app with c# and Xaml. In my previous article, we did warn welcome to Dotnet MAUI and shared information about the History of Xamarin.

MAUI as everybody already knows is a name for a new upgrade solution as a Multi-platform APP UI framework for building native cross-platform apps with .Net for android, iOS, macOS, and Windows. I am going to show how to create, build and debug the First MAUI application using Visual Studio 2022.

NET MAUI is the .NET Multi-platform App UI, a framework for

MAUI and other third-party framework teams started working on support for upgrading the app and old NuGet package to MAUI. MAUI will also provide you support for building the apps in different modern patterns and frameworks MVVM, MVU and RxUI.

.NET MAUI IDE


Microsoft provided 3 fantastic IDE Tools to create and develop apps with .NET MAUI and the happy news is MAUI is an open source.
  1. Visual Studio
  2. Visual Studio for Mac
  3. Visual Studio Code

Visual Studio 2022

On Windows or Mac machines you can use Visual Studio Code or Visual Studio/ VS for Mac for development. You will need the visual studio 2022 17.1.0 preview version. Microsoft released Visual studio 2022 version 17.0 in Nov month, but MUAI is still in preview so you can start to install visual studio 2022 17.1.0 preview version to create your first MUAI application.

Build your first .NET MAUI app

After installation success, Open the Visual Studio IDE

What .NET MAUI Means for Xamarin Developers

In this sample demo application, I am  going to show Android, iOS, and Windows app using MAUI, so Get started with “Create New Project”

What is .NET MAUI, and How Does it Differ from Xamarin?

On the new Project template, select project type as an” MAUI” and you will all the MAUI preview template, if you are not finding the MAUI template means, you have not installed the latest preview version so make sure you have installed the latest preview version 17.1 ++.

Microsoft Replaces Xamarin Toolkits with New .NET MAUI

In the Configure your new project window, name your project, choose your project location where you need to save, and click the Create button

The future of Xamarin: .NET MAUI

MAUI Solutions Structure

After clicking on Create, MAUI solutions default template loaded with all the related MAUI NuGet packages. There is a single project with different platform folders and resources.

Creating first .Net MAUI project

MainPage.XAML

The main page, whichever design, will support all other platforms as well, and also Main Page XAML build action modified in MAUI app.

Main Page.Xaml build action modified with MAUIXAML, make sure Xaml Build action is correct.

Right click on the XAML page >>Properties>>BuildAction of XAML Page to MauiXaml.

Creating new .NET 6 MAUI project

.NET Generic Host


The Worker Service templates, create a .NET Generic Host, HostBuilder. The Generic Host can be used with other types of .NET applications, such as Console apps.

Maui Program class enables apps to be initialized from a single location, and provides the ability to configure fonts, services, and third-party libraries.

iOS, Android, windows, and all the platform entry point calls a CreateMauiApp method of the static MauiProgram class that creates and returns a MauiApp, while lunch the application

.NET MAUI: How MAUI Will it impact on Xamarin Native applications?

Application Class

The App class derives from the Application class

Workload Repair failed: `dotnet workload repair - MAUI



Resources

The resources are a good improvement in MAUI. The AppIcon, image and font folder will be available under the MAUI project and it is just a single SVG, Looks like Maui will just automatically take care of generating all the different icon sizes for different devices.


How do I determine where the error is when I check MAUI compatibility with maui-check?How do I determine where the error is when I check MAUI compatibility with maui-check?

Run IOS App

Building MAUI iOS applications requires access to Apple's build tools, which only run on a Mac. Because of this, Visual Studio 2022 must connect to a network-accessible Mac to build iOS applications.

You must install the Xcode 13.1++ version on the Mac machine before connecting Visual Studio 2022 to the Windows machine.

Windows Configuration 

  1. Connect same wifi network
  2. Download and install Visual Studio 2022 with MAUI

Mac Configuration

  1. Connect same wifi network
  2. Install Xcode 13.1 ++
  3. On Network preference > switch on Remote login
Pair to Mac machine from windows

Pair to Mac for Xamarin.iOS Development

Program.cs

Program class file is the main entry file on IOS app and executes the main method of the application, here you can define your custom app delegate file and other configuration files

Appdelegate.cs

Each platform will call MauiProgram static class for initialize. On iOS will call as below

You can select iOS simulator and device and click Run icon for executing the application



The out as like below



Run Android App

The android application, MainApplication.cs will execute first, it will call the MauiProgram static class initially as like below
 
You can select android simulator or device as below, press F5 to run the application
 


The output like below



Run Windows App


The Windows application executes  App.xaml.cs file first, it will call the MauiProgram static class initially as like below

Select the device and run the Application



MAUI Windows device

Demo Video

I have shared a recorded demo video with two versions, English and Tamil. It will help you to understand more about creating, building, and debuging the First MAUI application.

English Demo Video



Tamil Demo Video 



Hope this article is very useful for you, If you have any questions/ feedback/ issues, please write in the comment box

Xamarin was released 10 years before, it has helped many developers to develop mobile apps with multi-platform with native feel but now it’s time to say goodbye to Xamarin and happily welcome .NET MAUI (Multi-platform App UI).

Let’s go back a bit in time first, the name Xamarin comes from the name of the Tamarin monkey, replacing the leading T with an X.

On May 16, 2011, Miguel de Icaza announced on his blog that Mono would be developed and supported by Xamarin.

In 2016, Xamarin has been acquired by Microsoft, after that Xamarin is open source and removed payment options. This helped the adoption of Xamarin. Microsoft then integrated Xamarin into Visual Studio. All the mobile development company started using visual studio in both Windows and Mac, it is great improvement after Microsoft acquires Xamarin.

Announcing .NET Multi-platform App UI Preview 3

Every developer and company should be very clear, Microsoft isn’t throwing away Xamarin. Mono won’t be going anywhere yet. .NET MAUI is the next generation of Xamarin Forms, intended to allow developers to build an app once in a single Visual Studio project with a single codebase, targeting any supported device. The aim is to deliver a simplified project structure. Rather than a single solution with separate projects for each platform you’re targeting, with MAUI a single project will contain the resources needed to target specific platforms.

David blog helped me to understand more about setup. In this article, I will explain how to create the first hello world app using the MAUI application.

Visual Studio 2019 Preview

Visual studio 2019 early access preview version you can download from Microsoft website . This release is not "go-live" so not recommended to use on production computers or for creating production code.

Introducing .NET Multi-platform App UI

Verify MAUI SDK Installation

Previously was install all the required SDK is manual, Now, Jonathan Dick has put together a useful dotnet tool that evaluates your system and gathers as many of the required pieces as it can. To get started, install maui-check globally from the command line.

Open Run CMD as an Administrator mode and install MAUI Check tool using the below line

dotnet tool install -g Redth.Net.Maui.Check

5 Advantages of .NET MAUI Over Xamarin

After MAUI check tool install, will start to execute the below the line of code to verify the SDK installation

maui-check

Introducing .NET Multi-platform App UI (MAUI)

You need to install the Preview 2 version of the dotNet 6 SDK, as well as the Preview 2 Android, iOS, and Mac Catalyst workloads so if you are getting any error alert saying SDK is missing, keep give input as “Yes” for install the missing SDK and wait for the “Congratulations, everything looks great!” message, that means, you are ready to start the new MAUI application.

Goodbye Xamarin.Forms, Hello .NET MAUI!

Create a new MAUI Mobile application

Visual Studio 2019 Preview version default available MAUI project template and select Create a new project, otherwise, you can download the default project sample available in the Git MAUI official repository.

MAUI in .NET 6: Xamarin.Forms Does Desktop, but Not Linux or VS Code

Search for "MAUI" or choose Mobile from the Project type menu. Select the .Net Maui Mobile application

Understanding .NET MAUI and the future of Xamarin

Choose a project name – the example uses "HelloMaui" and click on Create

Understanding .NET MAUI and the future of Xamarin

Once you click on create button automatically solutions will generate. Before building the solutions, Let quickly understand all the folders and files.

MAUI Application Startup

Multi-targeted .NET MAUI Single Project for iOS and Android. .NET MAUI starts every application using Microsoft.Extensions HostBuilder.

What Is .NET MAUI?

Each platform has a different starting point, and the consistent point of entry for your application is Startup.cs will allow the following. It includes a Configure method to pipe service registration, handler registration
public class Startup : IStartup

{
public void Configure(IAppHostBuilder appBuilder)
{
appBuilder .UseMauiApp<App>();

}
}


Application customization processes, this is where you can do such things as register fonts and register compatibility for Xamarin.Forms renderers or your own custom renderers, By default, if you don't want to customize anything special, ignore this

appBuilder

.UseFormsCompatibility()

.UseMauiApp<App>()

.ConfigureFonts(fonts => {

fonts.AddFont("ionicons.ttf", "IonIcons");

})

MAUI Application Life cycle

.Net MAUI Application preview 3 Support to manage the life cycle of the application. Life Cycle API included in Startup.cs file and will write platform-specific.

public void Configure(IAppHostBuilder appBuilder)

{

appBuilder

.ConfigureLifecycleEvents(lifecycle => {

#if ANDROID

lifecycle.AddAndroid(d => {

d.OnBackPressed(activity => {

System.Diagnostics.Debug.WriteLine("Back button pressed!");

});

});

#endif

});

}

MAUI App.Xaml

In App.Xaml.cs project inherited by Microsoft.Maui.Controls.Application and make sure MAUI namespace added specify common Image directory for all the platform


using Microsoft.Maui;
using Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;

namespace HelloMaui

{

public partial class App : Microsoft.Maui.Controls.Application

{

public App()

{

InitializeComponent();

}
public override IWindow CreateWindow(IActivationState activationState)

{

Microsoft.Maui.Controls.Compatibility.Forms.Init(activationState);


this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>()

.SetImageDirectory("Assets");


return new MainWindow();

}

}

}

In App.Xaml, will work same like xamairn form and will add all the common resources and style



<Application xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:HelloMaui"

x:Class="HelloMaui.App">

<Application.Resources>

<ResourceDictionary>


<!-- Add any additional resources here. -->

<Color x:Key="PageBackgroundColor">White</Color>


<Color x:Key="PrimaryTextColor">Black</Color>


<Color x:Key="GlyphColor">#2B0B98</Color>


<Style TargetType="Label">

<Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />

</Style>


<Style TargetType="Label" x:Key="Glyph">

<Setter Property="TextColor" Value="{DynamicResource GlyphColor}" />

<Setter Property="FontFamily" Value="IonIcons" />

<Setter Property="FontSize" Value="32" />

</Style>

</ResourceDictionary>

</Application.Resources>

</Application>

Application icon

The application icon is one great improvement, the AppIcon folder will available under the MAUI project and it is just a single SVG, Looks like Maui will just automatically take care of generating all the different icon sizes for different devices.

MAUI Design Screen

AssemblyInfo.cs file is removed from solutions. Main Page Name not changed. The xaml looks like below and you can observe below code the concept of SemanticProperties is added


<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="HelloMaui.MainPage"

BackgroundColor="{DynamicResource PageBackgroundColor}">


<ScrollView>

<StackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">


<Label Text="Getting started with MAUI Xamarin Forms Application using Visual Studio 2019 Preview 16.10"

SemanticProperties.HeadingLevel="Level1"

FontSize="32"

HorizontalOptions="CenterAndExpand" />

<Label Text="Welcome to .NET MAUI!"

HorizontalOptions="CenterAndExpand" />
<Image

Source="dotnet_bot.png"

SemanticProperties.Description="Cute dotnet bot waving hi to you!"

Margin="40,0" />

</StackLayout>

</ScrollView>

</ContentPage>

In MainPage.xaml.cs removed using Xamarin.Forms, add an inheritance from IPage, added the Maui namespace


using System;

using Microsoft.Maui;

using Microsoft.Maui.Controls;

using Microsoft.Maui.Controls.Xaml;


namespace HelloMaui

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class MainPage : ContentPage, IPage

{

public MainPage()

{

InitializeComponent();

}

public IView View { get => (IView)Content; set => Content = (View)value; }

}

}

Restore MAUI Nuget package

Before you will build and run solutions make sure NuGet packages referenced in the configuration file.

Right Click on Solutions > Open Folder in File Explorer

Say Hello to .NET MAUI! A First-Class UI Framework

Make sure global.json and NuGet.config file available before building the solutions

MAUI global.json

global.json file look like below

{

"sdk": {

"version": "6.0.100-preview.3.21202.5",

"rollForward": "disable",

"allowPrerelease": true

}

}

MAUI Nuget.Config

Nuget.Config looks like the below and have the reference key for dotnet6,Xamarin, and public.

<?xml version="1.0" encoding="utf-8"?>

<configuration>

<packageSources>

<clear />

<!-- ensure only the sources defined below are used -->

<add key="dotnet6" value="https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet6/nuget/v3/index.json" />

<add key="xamarin" value="https://pkgs.dev.azure.com/azure-public/vside/_packaging/xamarin-impl/nuget/v3/index.json" />

<add key="public" value="https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet-public/nuget/v3/index.json" />

</packageSources>

<config>

<add key="globalPackagesFolder" value="packages" />

</config>

</configuration>

Build and Run MAUI Android App

Inside Android Folder, not find any MainActivity.cs, only available Resource folder and Androidmanifest file. You will need the Android SDK installed as well as Android SDK Platform 30. When you did a verified MAUI check, SDK was download and installed, if no, a simple way to get this is to install the current Xamarin workload and go to Tools > Android > Android SDK Manager from within Visual Studio.

Say Hello to .NET MAUI! A First-Class UI Framework

Try to click on Run Icon, if you are getting any issue, Right-click on the solution and Select in the open terminal

Say Hello to .NET MAUI! A First-Class UI Framework

Build the MAUI Project, run the below comment in the Visual studio terminal
dotnet build HelloMaui
You can launch the Android project to an attached emulator or device
dotnet build HelloMaui -t:Run -f net6.0-android


Once the build is successful, the Android emulator / on-device application will run like below 

Say Hello to .NET MAUI! A First-Class UI Framework

Build and Run iOS Project in window machine

The build and debug .NET 6 iOS applications from Visual Studio 2019 preview. iOS folder is very clean, you can find Appdelegate.cs, Entitlements.plist, info.plist, Launchscreen.storyboard and Program.CS(Main.cs gets renamed Program.cs)

Xamarin : Step-by-Step Guide To Building .NET Multi-platform App (MAUI) using Visual Studio 2019 Preview 16.10

If while connecting Visual Studio to your Mac through XMA you are prompted to install a different version of the SDK, you can ignore that since it refers to the legacy one. Make sure Xcode 12.4 installed in mac machine,
Xamarin : Step-by-Step Guide To Building .NET Multi-platform App (MAUI) using Visual Studio 2019 Preview 16.10

You can launch the iOS project to an attached iOS Simulator. Initially not working for me run the ios app in windows after that start working.
dotnet build HelloMaui -t:Run -f net6.0-ios
Once the build is successful, the iOS simulator/ Device will show the output like below 

Xamarin : Step-by-Step Guide To Building .NET Multi-platform App (MAUI) using Visual Studio 2019 Preview 16.10

Summary

In this article, you learned about the setup Maui development preview environment and you said hello to Maui, Will share details in the next article for setup Visual Studio Code and Visual Studio for Mac. If you have any questions/ feedback/ issues, please write in the comment box
Introduction

The Passwords and Security Codes (OTP) are a modern necessity required for security and privacy but initially iOS does not support auto read feature. iOS 12 eases the tedious aspects of account setup and sign-in by automatically suggesting and using strong, unique passwords and by bringing one-time password to the QuickType bar so users can fill them with one tap. Here we’ll learn how to implement autofill OTP in your app using Xamarin Forms .

Automatic OTP verification in iOS using Xamarin Forms


Message Format Rules

Security code is only work with System keyboard. So, avoid using custom keyboard.
Make sure OTP message phrase has “code” or “passcode” and message is copy.

Create New Xamarin Forms Application

In order to implement Autofill OTP message, let’s start creating a new Xamarin.Forms project using Visual Studio 2019 or VS mac. When accessing Visual Studio 2019 mac for the first time, you will come across a new interface for opening a creating the projects.

Open Visual Studio Mac >>Create New Project or select open recent application.

Automatic OTP verification in iOS

The available templates will appear on a mac like below. Select Xamarin.Forms application with different mobile platforms.

Automatic OTP verification in iOS

Custom Control

One time code type available only specific to iOS device, not in Android, so create a Xamarin.Forms custom Entry control in the .NET Standard library project, enabling developers to override the default native rendering with their own platform-specific customization.

using System;

using Xamarin.Forms;


namespace ReadOTPIOS

{

public class AutoFillControl : Entry

{

public AutoFillControl()

{

}

}

}

UI Design


The AutoFillControl control can be referenced in XAML in the .NET Standard library project by declaring a namespace for its location and using the namespace prefix on the control element. The following code example shows how the AutoFillControl control can be consumed by a XAML page:

<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:ReadOTPIOS" x:Class="ReadOTPIOS.MainPage"

>


<StackLayout Orientation="Horizontal">

<Label

FontSize="Large"

HorizontalOptions="Center"

Text="Welcome to iOS 12 Read and Autofill OTP from SMS using Xamarin Forms" />


<local:AutoFillControl

FontSize="Large"

HorizontalOptions="Center"

Keyboard="Numeric"

Placeholder="XXXXXX" />

</StackLayout>

</ContentPage>

IOS Renderer

The following code example shows the custom renderer for the iOS platform. The call to the base class's OnElementChanged method instantiates an iOS UITextField control, with a reference to the control being assigned to the renderer's Control property.

To enable password autofill on a UITextField we need to set the UItextContentTypeproperty as a OneTimeCode.


using ReadOTPIOS;

using ReadOTPIOS.iOS;

using UIKit;

[assembly: ExportRenderer(typeof(AutoFillControl), typeof(AutoFillRenderer))]

namespace ReadOTPIOS.iOS

{

public class AutoFillRenderer: EntryRenderer

{

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)

{

base.OnElementChanged(e);


if (e.NewElement != null)

{

Control.TextContentType = UITextContentType.OneTimeCode;

}

}

}

}

The application source code available in Github. IOS simulator won’t allow to send messages, so let you try and deploy applications to IOS device and send a message to device for testing.

Automatic OTP verification in iOS


Summary

This article has demonstrated how to create a Read and Autofill OTP from SMS using Xamarin Forms Entry control. I hope this article will help you. Please leave your feedback/query using the comments box, and if you like this article, please share it with your friends.
The Bot Application runs in  an application, like Skype, web chat, Facebook, Message, etc. Users can interact with bots by sending them messages, commands, and inline requests. You control your bots using HTTPS requests to the bot API.

The better visibility, the higher will be the chance of customers making a purchase. Unlike other bots which are available on business web pages which provide visibility only to the customers visiting their site, a Facebook bot is very easy to find. It is visible to around 1.3 billion users of Facebook. A Facebook bot interacts very well with customers. It can receive and send messages, images and provide clickable buttons like Buy Now. In this article, I am going to show how we can connect Facebook Messenger's channel and integrate Bot Application to the Messenger app.

In this Article, I am going to show how we can connect Facebook messengers’ channel and integrate Bot Application to the messengers App.


Create FAQ Bot Application

You can refer my previews article to create and build a Xamarin FAQ Bot using the Azure Bot Service and deploy it into Azure. I am not using any coding for developing the Bot Application, you can follow the steps provided in the article to create and deploy FAQ Bot.


Setup Facebook Page

We can implement Bot Application to the Facebook page. You can create Facebook page or select existing page and navigate to “About page” for fining and copy the Page ID.


Login to Facebook APP

Create a new Facebook App (https://bit.ly/1D0BHpg) on the Page and generate an App ID , App Secret and Page Access Token for integrating Bot to the page messenger. You can click on “Skip and Create APP Id” from following screen.




Create New App ID



Provide display Name and Contact Email for integrating Bot application and Click on Create.


After Create button, it will navigate to the App dashboard screen. The side navigation menu having Settings > Basic and copy the APPID and APP Secret. Provide the Privacy URL, Terms of Service URL, App icon and Select Category.




I have shown the following screen to Select Setting > Advanced and Set the "Allow API Access to App Settings slider to "Yes" and click on Save Changes.

Setup Message

Select Dashboard and Click on Setup button from messenger group


Create Page Access Token

Select Setting from the messenger side navigation menu to generate token, you can select the Page and generate access token and copy the page access token.

Setup Webhooks

Click Set up Webhooks to forward messaging events from Facebook Messenger to the bot.



Provide following callback URL and Verify token to the webhooks setup page and select the message, message_postbacks, messaging_optins and message_deliveries subscription fields. The following Steps 2, will show how to generate Callback URL and verify token from Azure portal.


You can click on “Verify and Save “and select the Facebook page to Subscribe the webhook to the Facebook page.

Connect Facebook Channel

Step 1: Login to Azure portal > Select the “All Resources” > Select Channels > Select Facebook Messengers, let we start configure “Facebook Messengers “Channel and follow below steps, the end of this article you can able to deploy Bot into the Facebook messenger



Step 2:The Azure Facebook configuration channel will generate following Callback URL and verify token, You can copy those information and Past to the Facebook webhook setup screen. (Return to the Facebook messenger setup screen).






Step 3: You can paste the Facebook App ID, Facebook App Secret, Page ID,and Page Access Token values copied from Facebook Messenger previously. You can use the same bot on multiple facebook pages by adding additional page ids and access tokens.


Submit to Facebook Review

Select App preview and Click and Submit for review after submit will take some time for the facebook team testing to the messenger bot and you can mark your app live available to the public , then you can test messenger from the Facebook page .


Facebook Team reviews and Testing

You can verify Facebook team testing progress, navigate to your Facebook page and Click on Inbox and verify, if anything problem to the messenger bot, the Team will update the bug list from App review screen.

Xamarin FAQ Messengers testing

You can select your Facebook page and test your bot application. I have trained 7000+ more questions to the Facebook messenger bot from Xamarin Q & A Page, If you want to look the xamarin FAQ demo. Navigate to Xamarin Q & A Facebook page and ask your xamairn related question.





Summary

In this article, you have learned how to integrate bot application right into your Facebook Page via Azure Microsoft AI. If you have any questions/feedback/issues, please write in the comment box.


jsAdd

Addvetegement01