使用 Azure 认知服务与 NativeScript

让我们直面现实：计算机已经赢了！未来实际上掌握在我们最高级的机器人领导者手中。

虽然当下还没有达到像《终结者》那样完全由机器人统治的现实 🤖，但事实是，“认知服务”正在爆炸式增长。从机器学习到人工智能，以及其他认知 API，这些“思考”服务正在将令人难以置信的能力卸载到云端。

了解更多关于 Progress 在 加速认知应用程序开发 方面的努力，还可以阅读关于 新移动开发环境 的免费电子书。

Microsoft Azure 是一个可靠的选择，它提供了专门的认知 API，例如 视觉、知识、语言、语音 和 搜索。让我们看看如何在使用 NativeScript 构建的原生 iOS/Android 应用程序中利用这些 API 之一。

Azure 面部 API

Azure 的 面部 API 是一个非常有趣的 API 可以用来玩。使用面部 API，你可以向 Azure 发送包含人脸的图像，它将返回各种解释的属性

{
    "faceId": "da450841-201c-40a4-b330-2e43ba7f509f",
    "faceRectangle": {
        "top": 87,
        "left": 61,
        "width": 107,
        "height": 107
    },
    "faceAttributes": {
    "gender": "male",
    "age": 21,
        "emotion": {
            "anger": 0,
            "contempt": 0.001,
            "disgust": 0,
            "fear": 0,
            "happiness": 0.762,
            "neutral": 0.237,
            "sadness": 0,
            "surprise": 0
        }
    }
}

让我们来看看如何开始使用面部 API。

设置 Azure 帐户

Azure 提供完全免费的 7 天试用期来使用其认知服务（以及更多）。之后，您需要使用信用卡才能继续访问。

不过不用担心，因为 Azure 还提供前 30 天 200 美元的信用额度，并且会在您开始产生任何费用之前提醒您。

创建 Azure 帐户后，打开 Azure 门户，导航到 **创建资源**，搜索“面部”并启用面部 API

点击 **创建** 按钮后，您需要填写一个简短的表格，包括服务的 *名称*、*订阅* 类型（预先填写）、*位置*（选择离您最近的！）、*定价层级*（选择免费的！），并输入一个 *资源组* 名称

此时，请记下两件事（您将在 NativeScript 应用程序中需要这两件事）

1. 您的 API 密钥。
2. 您的 Azure 终结点的 URL。

完成了？**太好了！** 我们从 Azure 控制台中只需要这些。

简要介绍 NativeScript

如果您不熟悉 NativeScript，不要害羞。它是一个很容易上手的框架！

NativeScript 是一个免费的开源框架，用于使用单个代码库为 iOS 和 Android（以及 Web）创建 *真正的原生* 应用程序。

NativeScript 允许您使用 Web 技能（如 JavaScript/TypeScript 和 CSS）以及流行的 JavaScript 框架（如 Angular 和 Vue.js）来创建移动应用程序。它在很多方面与 Ionic 类似，但它不使用 Web 视图作为 UI 层。

提示：开始使用 NativeScript 的最佳方法是完成 NativeScript Playground 上的快速教程。您还可以在 Learn NativeScript Layouts 上学习 UI 布局系统的使用方法！

构建 NativeScript 应用程序

让我们构建一个简单的应用程序，它有两个页面/视图。一个视图用于列出人员，另一个用于显示个人图片以及从 Azure 返回的面部属性。

注意：此应用程序的灵感来自 Ignacio Fuentes 在 JavaScript NYC 会议上的一次聚会环节。点击这里 查看完整的会议。

由于 Meetup API 很乐意返回照片，我们可以很容易地将其用作我们第一个视图的数据源。

https://api.meetup.com/JS-NYC/events/246938509/rsvps?response=yes&only=member

...对于选定的 JavaScript NYC 会议，它返回以下 JSON

{
    "member": {
        "id": 207291595,
        "name": "Adam Chen W.",
        "photo": {
            "id": 271369722,
            "highres_link": "https://secure.meetupstatic.com/photos/member/c/2/3/a/highres_271369722.jpeg",
            "photo_link": "https://secure.meetupstatic.com/photos/member/c/2/3/a/member_271369722.jpeg",
            "thumb_link": "https://secure.meetupstatic.com/photos/member/c/2/3/a/thumb_271369722.jpeg",
            "type": "member",
            "base_url": "https://secure.meetupstatic.com"
        },
        "event_context": {
            "host": false
        }
    }
},

在 NativeScript 中使用它非常简单，只需要一个简单的 http 调用

function fetchAllPeople() {
  http
    .getJSON(
      'https://api.meetup.com/JS-NYC/events/246938509/rsvps?response=yes&only=member'
    )
    .then(
      function(u: any) {
        vm.set('items', u);
      },
      function(e) {
        console.log(e);
      }
    );
}

人员列表

然后我们可以使用 NativeScript ListView（它是原生 iOS 和 Android 列表视图控件的跨平台抽象）来显示此数据

<ListView items="{{ items }}" itemTap="fetchPerson" class="list-group">
    <ListView.itemTemplate>
        <GridLayout class="list-group-item" rows="auto" columns="auto, *">
            <Image row="0" col="0" src="{{ member.photo.thumb_link }}" class="thumb img-rounded" />
            <StackLayout row="0" col="1" >
                <Label text="{{ member.name }}" class="list-group-item-heading" />
                <Label text="{{ member.photo.type }}" class="list-group-item-text" />
            </StackLayout>
        </GridLayout>
    </ListView.itemTemplate>
</ListView>

让我们加一些 CSS 来整理应用程序的外观

.btn {
    font-size: 22;
    background-color: royalblue;
}

.action-bar {
    background-color: royalblue;
    color: white;
}

.lbl-bold {
    font-size: 20;
    font-weight: bold;
}

.lbl {
    font-size: 20;
}

是的，您在 Web 上使用的相同 CSS 用于为您的原生移动应用程序进行跨平台样式设置！了解更多关于 在 NativeScript 中使用 CSS 的信息。

这应该会在 iOS 和 Android 上神奇地返回以下屏幕

现在可以注意到，此应用程序的完整源代码（使用 TypeScript 构建）可以在 此 GitHub 存储库 中找到。如果您正在寻找类似的 Angular 版本，请 查看这里。

照片详细信息和面部属性

当我在 ListView 中点击一个人时，我可以将图像的 URI 发送到 Azure 和面部 API

http.request({
  url:
    'https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age,gender,emotion&subscription-key=YOURAPIKEY',
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  content: JSON.stringify({
    url: vm.get('photo') // a reference to your photo
  })
})

...此时，Azure 的魔法就会发挥作用，并返回以下内容

{
  "faceId": "1cd4bd2e-c88c-491d-b6f0-7f20d75ae579",
  "faceRectangle": {
    "top": 87,
    "left": 61,
    "width": 107,
    "height": 107
  },
  "faceAttributes": {
    "gender": "male",
    "age": 21,
    "emotion": {
      "anger": 0,
      "contempt": 0.001,
      "disgust": 0,
      "fear": 0,
      "happiness": 0.762,
      "neutral": 0.237,
      "sadness": 0,
      "surprise": 0
    }
  }
}

您会看到，我们可以获取 Azure 对 年龄、性别 和 情绪（情绪是所有可能情绪中 **最高** 的数值）的最佳猜测。

只要我们没有遗漏任何内容（嘿，我偶尔会写出糟糕的代码，你永远不知道！），我们应该会看到一个类似于这样的屏幕

我们完成了！ 😀

结论

虽然这是一个相当简单的例子，但它确实让你瞥见了认知服务的强大功能。无论您使用的是 Azure、AWS 还是 Progress，请放心，认知优先是所有设备和体验中引人入胜的应用程序开发的未来。