从 NativeScript 访问关系型、大数据和 SaaS 数据

我们大多数人的数据都存储在关系型数据库中，如 SQL Server、DB2、Oracle 或 MySQL，或者存储在利用任何可用版本的大数据生态系统中，如 Apache 或 Cloudera，或者存储在云端系统中，如 Salesforce 或 Google Analytics。在构建您的 NativeScript 应用程序时，您可能需要从任何地方访问这些数据源，而您需要一个 REST API 来完成此操作。当然，您可以自己构建 REST API，但之后您需要专注于扩展、性能问题、维护 API，最终会不必要地消耗大量精力。

如果您可以通过仅配置连接参数来生成基于标准的 REST API，而不必担心扩展、安全或性能问题呢？Progress DataDirect 混合数据管道 (HDP) 正好可以做到这一点。Progress DataDirect 混合数据管道是一个轻量级的软件自助服务，旨在允许应用程序访问云端或本地的数据源中的数据。它提供

• 一个标准接口 - ODBC、JDBC 或 OData (REST) - 用于访问我们支持的任何数据源类型 - 云、SQL、大数据和 NoSQL。
• 使用 DataDirect 的本地连接器访问任何本地数据源的防火墙友好型访问，无需更改任何防火墙策略。
• 高度安全 - 所有客户敏感数据元素（包括存储的远程凭据或数据库配对）都通过加密保护，包括静止状态（AES-256）和传输状态（SSL/TLS）

要详细了解混合数据管道，我建议您观看此 视频。

在本教程中，我们将向您展示如何使用 HDP 为自己的数据库生成 OData API，并在您的 NativeScript 应用程序中使用它来获得对数据的实时访问。我将使用一个 SQL Server 数据库，并使用开源的 chinook 数据集。Chinook 还有针对其他数据库（如 Oracle、DB2 和 MySQL）的脚本。如果您使用此项目中的脚本，无论数据库是什么，本教程中的 NativeScript 应用程序都将运行。

要详细了解 OData，请访问 odata.org。

为您的数据库生成 REST API

要开始，您需要下载并安装 混合数据管道。您可以在本地计算机、VM 或服务器上执行此操作。

如果您在安装过程中遇到问题，请按照 本教程 中的说明进行安装，或者访问文档。

完成安装后，转到 http://localhost:8080，您应该会看到如下所示的登录页面

默认凭据为 d2cadmin/d2cadmin。登录到门户网站，转到数据源选项卡 -> 并单击新建数据源按钮。您应该会看到一堆受支持的数据存储

单击 SQL Server（或您自己的数据库），您现在应该会看到如下所示的连接配置页面。使用数据库的连接信息填写它，然后单击测试连接按钮以验证连接

现在您已经成功连接，让我们开始为您的数据库生成 OData API。转到OData选项卡，然后单击配置架构

在下一个屏幕上，系统会要求您选择架构。如果您使用的是 SQL Server，请选择dbo作为您的架构。当您选择架构时，您应该会看到如下所示的 Chinook 数据集中所有表的列表。选择所有表格，然后单击保存并关闭按钮

注意：如果您没有看到如下所示的表格，本教程中的 NativeScript 应用程序将无法为您运行。

保存后，您应该会返回到 OData 选项卡页面。复制OData 访问 URI，然后单击保存以保存对该数据源所做的所有更改。

就是这样！您现在拥有数据库的 OData REST API，无需编写任何代码。

打开您的浏览器或 Postman，尝试一个 GET 请求并使用基本身份验证，凭据与您用于混合数据管道的登录凭据相同。您应该会看到如下所示的响应，其中显示了通过此端点可用的所有表格

{
    "@odata.context": "http://<host>:8080/api/odata4/pocketmusic/$metadata",
    "value": [{
            "name": "Albums",
            "url": "Albums"
        }, {
            "name": "Artists",
            "url": "Artists"
        }, {
            "name": "Customers",
            "url": "Customers"
        }, {
            "name": "Employees",
            "url": "Employees"
        }, {
            "name": "Genres",
            "url": "Genres"
        }, {
            "name": "Invoices",
            "url": "Invoices"
        }, {
            "name": "InvoiceLines",
            "url": "InvoiceLines"
        }, {
            "name": "MediaTypes",
            "url": "MediaTypes"
        }, {
            "name": "Playlists",
            "url": "Playlists"
        }, {
            "name": "PlaylistTracks",
            "url": "PlaylistTracks"
        }, {
            "name": "Tracks",
            "url": "Tracks"
        }
    ]
}

注意：您可能会看到由于您的本地 HDP 安装中缺少 SSL 证书而导致的安全错误，这是正常的。出于测试目的，您可以回退到 http 并使用端口 8080 来规避此问题。不要在生产环境中使用此变通方法，因为它不安全。

创建 NativeScript 应用程序

现在我们已经拥有了应用程序所需的后台 API，让我们开始创建应用程序。通过我们目前拥有的数据集，让我们构建一个音乐商店应用程序，您可以在其中浏览、搜索和购买/退款音乐。

您可以在 GitHub 上找到此应用程序的源代码，您可以在开发自己的应用程序时参考它。

我不想从头开始，因为这是我第一次构建应用程序，我想要一个侧边抽屉导航应用程序。执行此操作的最佳方法是使用 NativeScript Sidekick，它可以帮助您生成入门模板，以便轻松入门。生成模板后，我使用我喜欢的编辑器 Visual Studio Code 打开项目来进行编码。

使用该模板，开始将侧边抽屉导航项目重命名为 资料库、浏览商店、搜索商店和设置，操作位置为 /shared/MyDrawer.xml，现在您的应用程序应该看起来像这样

让我们从浏览商店开始，因为它将列出所有可用的专辑，当您单击每个专辑时，它将列出该专辑中可用的所有曲目。为了让您了解，以下是我们将实施内容的屏幕截图

当您打开浏览商店时 - 显示所有专辑

当您打开专辑时 -> 显示所有曲目

对于“浏览商店”的第一次交互，它需要在 ListView 中显示所有可用的专辑。实现此操作的最简单方法是使用 NativeScript UI 中的 Listview 组件。您需要通过运行以下命令来安装 NativeScript UI 包

npm i nativescript-pro-ui

安装 NativeScript UI 后，在 browse/browse-page.xml 中，使用以下代码来显示专辑名称、艺术家名称、隐藏的专辑 ID 和该专辑的专辑封面

<lv:RadListView id="listview" class="list-group" items="{{ items }}" selectionBehavior="Press" multipleSelection="false" itemSelected="onItemSelected"> 
    <lv:RadListView.listViewLayout>
        <lv:ListViewLinearLayout scrollDirection="Vertical"/>
    </lv:RadListView.listViewLayout>
    <lv:RadListView.itemTemplate>
        <GridLayout rows="auto" columns="auto, *" class="album-browse">
            <Image src="{{ '~/images/' + AlbumId + '.jpg' }}" row="0" col="0" width="50" height="50" class="thumb img-rounded"/>
            <StackLayout class="list-group-item" row="0" col="1"> 
                <Label text="{{ Title }}" class="list-group-item-heading label-track-name" />
                <Label text="{{ Name }}" textWrap="true" class="list-group-item-text" />
                <Label text="{{ AlbumId }}" class="list-group-item-text list-albumid" />
            </StackLayout>
        </GridLayout>
    </lv:RadListView.itemTemplate>
</lv:RadListView>

下一步是获取数据并将其绑定到 Listview。如果您观察我们拥有的架构，我们将看到 Album 表包含专辑 ID 和专辑名称，而 Artist 表包含艺术家 ID 和艺术家名称。对于此视图，我们需要专辑和艺术家数据。一般来说，如果您处理的是任何其他 API，您需要先获取专辑数据，然后获取艺术家数据并将它们混合在一起才能获得结果。

但是 OData 提供了一个很方便的功能，名为 $expand，它允许您扩展到相关实体，前提是您在数据库中定义了这些表格之间的外键关系。以下是用于在单个请求中使用 $expand 选项获取专辑和艺术家数据的 OData 查询。

http://<host>:8080/api/odata4/pocketmusic/Albums?$expand=Artist

响应应该像这样

在您的 browse-page.js 文件中，您向此端点发出请求并将数据绑定到 Listview，如下面的代码所示

fetch(odata_URL, init).then(function (response) {
    if (!response.ok) {
        var toast = Toast.makeText(response.status);
        toast.show();
    }
    return response.json().then(function(json){

        var albumData = json.value;

        for(var i=0; i< albumData.length; i++)
        {
            var album = albumData[i];
            listItems.push({
                AlbumId: album.AlbumId,
                Title: album.Title,
                Name: album.Artist.Name
            })
        }

        pageData.set("items", listItems);
        appSettings.setString("albumData", JSON.stringify(listItems._array));
    });
}).catch(function (error) {
    var toast = Toast.makeText("Something bad happened: " + error);
    toast.show();
});

完成此操作后，您应该会看到 Listview 中填充了专辑和艺术家。您可以以相同的方式实施下一个操作，即单击专辑时，您需要显示该专辑中的所有曲目。

OData 的另一个有趣功能是对列进行文本 $search。要执行此操作，您需要在打算执行搜索的文本类型列上创建索引。对于此应用程序，我希望有一个功能，用户可以使用该功能搜索专辑名称。要执行此操作，您必须在专辑表中的 title 列上创建非聚集索引（如果您使用的是 SQL Server）。

要启用 $search，请返回到混合数据管道“配置 OData”页面并启用高级设置，如下所示。

在设置选项卡下，选择“子字符串”作为搜索选项，如下所示

现在返回到列选项卡，然后单击标题列旁边的微型搜索按钮以启用搜索，如下所示

保存并关闭配置以启用 OData 搜索。要测试它，请运行此 OData 查询，它将搜索标题中包含“Billy”的专辑

http://<host>:8080/api/odata4/pocketmusic/Albums?$search=Billy

使用此端点，您现在可以在此应用程序中实施搜索功能并使用 ListView 显示结果，如下所示

提醒：您可以在 GitHub 上找到此应用程序的源代码！

总结

我希望本教程能帮助您了解如何使用 Progress DataDirect 混合数据管道 将任何数据库 REST 化，并在 NativeScript 应用程序中使用它。如果您有任何问题，请随时在 GitHub 或以下评论中与我们联系。