远程控制 LED / 气象站 / 消息显示 (第 2 部分 - Xamarin 移动应用)

• 下载源代码 - 438.9 KB

引言

在我的项目的第 1 部分中，我详细讨论了在 Raspberry Pi 上构建和编写设备代码。在这一部分中，我想讨论我构建的用于控制（LED）和显示（天气）来自 Raspberry Pi 的信息的移动应用。

Xamarin 是一个移动开发平台，适用于想要使用 C# 开发 iOS / Android / Windows mobile 原生移动应用的 .NET 开发人员。

在本文中，我想讨论使用 Xamarin Forms 构建跨平台移动应用以发送请求和接收来自 Raspberry Pi 的响应是多么容易。

背景和设置

请确保您阅读了第 1 部分，以了解此移动应用的目的。

我假设读者对 C# 和 WPF 有一些基本的了解。我假设开发是在 Windows 环境（典型的 .NET 开发人员）中完成的，并且目标是为 Android、iOS 移动设备和 Windows 移动设备开发。

Visual Studio 和 Xamarin

如果您尚未这样做，请按照这些步骤安装 Xamarin，它包含在所有版本的 Visual Studio 中。 您需要进行自定义安装，并在安装期间选择 Xamarin 组件。我在整个开发过程中使用了 Microsoft Visual Studio Community 2015。

Android 模拟器设置

Android SDK

确保已安装以下内容

• Android SDK 工具
• Android SDK 平台工具
• Android SDK 构建工具
• Android 6.0 或 7.0
  • SDK 平台
  • Intel x86 Atom 系统映像

我附上了一个屏幕截图供您参考我的 SDK 管理器。

Android AVD

设置 Android AVD，如果您运行的是 Intel 图形芯片，您可以通过安装 Intel HAXM 来利用额外的性能，然后使用 AVD 管理器（通常安装在 *C:\Program Files (x86)\Android\android-sdk* 中）设置 Android 虚拟设备。

就我而言，我添加了一个名为 Nexus 5 的，具有以下设置

iOS 模拟器设置

如果您打算在 Android 上运行您的移动应用，您可以跳过此步骤。

首先，您需要一台 Mac 来测试和部署您的 Xamarin 应用到 iOS。 安装涉及到几个步骤。 您需要在 Mac 中安装 Xamarin Studio、Xamarin.iOS SDK 和 Apple Xcode。

这里有非常详细的说明，所以我就不再赘述了。

Using the Code

首先，因为我只想展示构建设备远程控制器的最快方法，所以我没有在此应用中使用 MVVM 设计模式，这是构建 WPF 应用的首选设计模式。

如果您有兴趣学习如何在 Xamarin 中使用 MVVM，请阅读此。

MainPage.xaml - 这是屏幕的布局，您可以看到所有按钮、标签和输入框都使用 Grid 布局进行排列。

 <Grid.RowDefinitions>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" 
    Grid.ColumnSpan="2" HorizontalOptions="CenterAndExpand" 
    FontAttributes="Bold" TextColor="Blue">The Joses' 
    Traffic Light</Label>

    <Button x:Name="RedOn" Text="Red ON" 
    TextColor="White" BackgroundColor="Red" 
    Grid.Row="1" Grid.Column="0" 
    Clicked="RedOn_OnClicked"></Button>
    <Button x:Name="RedOff" Text="Red OFF" 
    TextColor="Red" Grid.Row="1" Grid.Column="1"  Clicked="Redoff_OnClicked"></Button>

按钮的 Clicked 操作链接到代码隐藏 (MainPage.xaml.cs) 中的方法。

private void RedOn_OnClicked(object sender, EventArgs e)
{
    RunCommand(RedOn,"redon");
}

它向 Raspberry Pi 发送 Http 请求。

public async void RunCommand(Button b, string command)
        {
            try
            {
                b.IsEnabled = false;
                HttpSender httpsender = 
                new HttpSender("http://" + HostEntry.Text.Trim() + ":5000/");
                string ok = await httpsender.MakeRequest(command);

                if (ok.Contains("OK"))
                {
                    b.IsEnabled = true;

                    //Save IP settings if it has been changed
                    if (_originalIP != HostEntry.Text)
                    {
                        Settings.StationIP = HostEntry.Text;
                    }
                }
            }
            catch (Exception ex)
            {
                b.IsEnabled = true;
                await DisplayAlert("Cannot find the station",
                                   "Please specify the correct host/IP 
                                   at the bottom.","Cancel");
            }
        }

为了确保响应性，我使用了 async / await。 如果出现异常（通常是主机地址错误），将会弹出一个窗口。

Raspberry Pi 的 IP 地址会自动保存，并在下次打开应用时加载。 我使用了这个库来帮助实现。

 //Save IP settings if it has been changed 
if (_originalIP != HostEntry.Text) 
{ 
   Settings.StationIP = HostEntry.Text; 

在 Android 模拟器中运行

按照上述方法设置 AVD，并以典型方式从 VS 启动

在 iOS 模拟器上运行

确保 Mac 已经设置好。

要在 iOS 模拟器上运行，请确保 Mac 启动并运行，并按照以下步骤操作

1. 打开 Xamarin mac agent 弹出窗口
2. 找到 Mac 并单击连接
3. 连接后将出现连接图标

在选择模拟器后，以典型方式从 VS 启动应用程序

这是一个 App 的 Android 和 iOS 的并排屏幕截图

环境设置确实需要一段时间，但一旦完成，这些小应用可以构建得如此之快，真是令人惊叹。

享受编码！

历史

• 2016 年 12 月 31 日：初始版本