Skip to content

Latest commit

 

History

History
306 lines (184 loc) · 8.86 KB

02.dotNETMAUIIntro.md

File metadata and controls

306 lines (184 loc) · 8.86 KB
Raw

Learn .NET MAUI

Now to do front-end applications, you need to consider different operating systems, such as Windows, macOS, Linux, Android, iOS, and different terminal presentation methods, such as PCs, laptops, mobile phones, tablets, and different industrial IoT devices. To complete all the work is a very high requirement for the development team, and it is also a very large expense for the enterprise. .NET MAUI is the technology to solve this problem. With the unified technology C#, you can quickly build cross-operating platform and cross-terminal front-end applications.

The predecessor of .NET MAUI is Xamarin, which is now integrated into .NET SDK through integration. You can create .NET MAUI applications through traditional Visual Studio or command line.

Visual Studio Create .NET MAUI

Create .NET MAUI from the command line

Now .NET MAUI natively supports the development of Windows ( WinUI ), macOS , Android , iOS, while the development of Linux is not supported yet. Compared with the previous Xamarin, the structure of the project has been greatly adjusted. I summed up a few points:

  1. The project is unified, and the project file is no longer divided by platform

  2. UI construction not only has the traditional XAML, but now also has the Blazor UI construction method

  3. It is more convenient to compile through the command line

  4. Support multiple UI rendering methods, including native UI and self-drawing rendering

  5. Customize controls through Handler

How to get started with .NET MAUI

Or you are a .NET developer, or you have worked on Windows desktop before, or you have a .NET team, but all have a common question - how to seamlessly enter the .NET MAUI field. Here are a few issues to be aware of

  1. Each platform has its own API and special permission settings, you must understand clearly, such as:

    The Info.plist of iOS / macOS contains network authorization, storage authorization, and some system-related settings such as payment authorization, which must be set when using it, and the application signature release is related to this file, so you must read it carefully Developer Documentation for iOS / macOS

    Android's AndroidManifest.xml is similar to the Info.plist mentioned above. It is also related to the bottom layer and security of Android. It also involves application release signatures. You must also read the Android developer documentation carefully.

  2. The UI construction methods of different platforms are also very important. It is undeniable that .NET MAUI helps you unify the cross-platform UI, but we also have custom interfaces, so it is very important to master the UI of the native platform.

  3. Try to decouple the UI, business logic, and underlying logic, reduce the codes set by different platforms in the same code, and try to return to the files under Platform for platform adjustments

  4. If you want to use some mobile application native libraries, you must convert them. For iOS / Android, .NET MAUI continues to use the Xamarin Binding method, but this process still requires specific platform support. I also mentioned it in another series And, you can visit this link to learn about

  5. Keep .NET MAUI updated, because it can fix bugs and improve operating efficiency

Sample - Build a simple app to control a DJI Ryze Tello with .NET MAUI

In the previous , we learned how to use C# to control DJI Ryze Tello through UDP protocol. Next, we need to add these functions to iOS / Android applications. Next, we build related applications through .NET MAUI.

  1. use CLI to create .NET MAUI
dotnet new maui -o TelloMAUI
  1. Visual Studio 2022 open the project

  1. Because the iOS connection UDP needs to be set in the Apple developer account, it must also be added to the project settings of Visual Studio 2022 (see the development environment settings for details), open Perference - Publishing - Apple Developer Account to add the .p8 file

Open Platforms/iOS/Info.plist and select Advance

Add the namespace corresponding to the certificate signature

并添加

	  
<key>NSLocationUsageDescription</key>
<string>Using Your Tello Network</string>

In Platforms/iOS add Entitlements.plist

add this code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.developer.networking.multicast</key>
	<true/>
</dict>
</plist>

Open Platforms/Android/AndroidManifest.xml , Add

  1. Add Utils folder, and add TelloSDK.cs file, add the following code
using System.Net;
using System.Net.Sockets;
using System.Text;

namespace TelloMAUI;


public class TelloSDK
{

    string telloIP = "192.168.10.1";
    int port = 8889;
    UdpClient udpClient;

    public TelloSDK()
    {
        this.udpClient = new UdpClient();
    }
    public void Connect()
    {
        this.udpClient.Connect(telloIP, port);
    }

    public void TakeOff()
    {
        Command("takeoff");
    }
    public void Land()
    {
        Command("land");
    }

    public void FlyCMD(string cmd)
    {
        Command(cmd);
    }

    public void Close()
    {
        this.udpClient.Close();
    }

    public void Dispose()
    {
        this.udpClient.Dispose();
    }

    public void Command(string cmd)
    {

        Byte[] sendCmdBytes = null;

        sendCmdBytes = Encoding.UTF8.GetBytes(cmd);

        //this.udpClient.Send(sendCmdBytes, sendCmdBytes.Length);


        if (cmd != "command" && cmd != "land" && cmd != "streamon" && cmd != "takeoff")
        {
            var start = DateTime.Now;

            bool status = true;

            while (status)
            {
                var current = DateTime.Now;

                if ((current - start).Seconds < 5)
                {

                    status = false;
                    Console.WriteLine("please wait 5 seconds");
                }
                else
                {
                    this.udpClient.Send(sendCmdBytes, sendCmdBytes.Length);
                    status = false;
                }

            }
        }
        else
        {
            this.udpClient.Send(sendCmdBytes, sendCmdBytes.Length);
        }
    }
}
  1. Update MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TelloMAUI.MainPage">


    <StackLayout Margin="20">

        <Button Text="TakeOff" x:Name="btnTakeOff" Clicked="btnTakeOff_Clicked" Margin="20,20,20,10"/>

        <Button Text="Land" x:Name="btnLand" Clicked="btnLand_Clicked" Margin="20,20,20,10"/>

        <Button Text="Up" x:Name="btnUp" Clicked="btnUp_Clicked" Margin="20,20,20,10"  />

        <Button Text="Down" x:Name="btnDown" Clicked="btnDown_Clicked" Margin="20,20,20,10"  />

        <Button Text="Left" x:Name="btnLeft" Clicked="btnLeft_Clicked" Margin="20,20,20,10" />

        <Button Text="Right" x:Name="btnRight" Clicked="btnRight_Clicked" Margin="20,20,20,10" />
    </StackLayout>

</ContentPage>
  1. Modify MainPage.xaml.cs, add connection, takeoff, land, left, right instructions
namespace TelloMAUI;

public partial class MainPage : ContentPage
{
    TelloSDK tello = new();

    public MainPage()
	{
		InitializeComponent();


        tello.Connect();
        tello.Command("command");
    }


    void btnTakeOff_Clicked(System.Object sender, System.EventArgs e)
    {
        tello.TakeOff();
    }

    void btnLand_Clicked(System.Object sender, System.EventArgs e)
    {

        tello.Land();
    }

    void btnUp_Clicked(System.Object sender, System.EventArgs e)
    {
        tello.FlyCMD("up 30");
    }

    void btnDown_Clicked(System.Object sender, System.EventArgs e)
    {
        tello.FlyCMD("down 30");
    }

    void btnLeft_Clicked(System.Object sender, System.EventArgs e)
    {
        tello.FlyCMD("left 30");
    }

    void btnRight_Clicked(System.Object sender, System.EventArgs e)
    {
        tello.FlyCMD("right 30");
    }
}
  1. Connect to the real device, and connect to the wifi on Tello through the real device (refer to - C# UDP Programming), execute

Congratulations, you have successfully built a simple drone application through .NET MAUI. Next, we will optimize this application

The code of this chapter can be downloaded from https://github.com/kinfey/dotNETMauiHOL/tree/main/code/apps/ProtoType/TelloMAUI

Resources

  1. Learn .NET MAUI https://learn.microsoft.com/en-us/training/paths/build-apps-with-dotnet-maui/

  2. iOS / macOS Developer portal https://developer.apple.com/

  3. Android Developer Portal https://developer.android.com/