Telerik AppBuilder入门

介绍

许多Web开发人员回避开发移动应用程序，认为他们花很长时间来学习移动应用程序开发的绳索。 嗯，这不是完全错误的，因为学习如何为移动平台开发本机应用程序通常确实意味着不仅要熟悉一种新的编程语言，而且要熟悉特定于平台的概念和模式。

如果您是这些开发人员之一，则应该考虑创建混合应用程序，因为这样您就可以使用已经熟悉的语言：HTML5，CSS和JavaScript。 此外，您可以使用Twitter Bootstrap或jQuery Mobile这样的流行框架来创建您的应用程序。

现在，您引起了我的注意，让我们深入研究Telerik AppBuilder ，这是一个功能强大的基于云的开发环境，它使创建混合应用程序变得异常容易。 在本教程中，我们将研究AppBuilder提供的功能，并在此过程中创建一个简单的混合应用程序。

为什么选择Telerik AppBuilder

使用AppBuilder的最令人信服的原因之一是其浏览器内客户端，即在浏览器中运行的成熟的IDE（集成开发环境）。 它使您可以从任何计算机或移动设备创建，测试甚至发布混合应用程序，而无需在本地安装任何内容。

能够使用运行Windows或Linux的计算机开发iOS应用程序是您要使用AppBuilder的另一个原因。 iOS设备模拟器也可以在任何操作系统中使用。

最后，由于AppBuilder是Telerik平台的一部分，因此使用它意味着您的应用程序可以轻松访问分析，推送通知，用户身份验证和云数据存储等功能。

先决条件

为了遵循本教程，您只需要一个Telerik帐户 。 如果您还没有，则可以免费注册并立即开始30天的试用期。

1.创建一个新的应用程序

在本教程中，我们将主要与AppBuilder的浏览器内客户端一起使用。 在浏览器中打开一个新标签，然后登录Telerik平台 。 登录后，您将看到一个列出所有应用程序的页面。

要创建新应用，请单击创建应用按钮。 现在将要求您指定有关该应用程序的各种详细信息。

首先，选择要构建的应用程序的类型。 现在，选择Cordova Hybrid，因为我们将使用Apache Cordova （一种流行的混合应用程序开发框架）来创建我们的应用程序。

接下来，通过填写“ 应用程序名称”和“ 描述”字段为应用程序提供有意义的名称和描述。 我将使用“ 我的第一个应用”作为名称。

最后，单击“ 创建应用程序”按钮以生成默认情况下使用Kendo UI框架的完全配置的混合应用程序。

2.创建视图

创建应用程序后，您将被带到Views服务。 使用此服务，您可以创建混合应用程序的所有视图，而无需编写任何HTML代码。

在本教程中，我们将创建一个非常简单的应用程序，将公斤转换为磅。 它将有两个视图：

• 一个称为Converter的视图，用户可以在其中输入以千克为单位的重量
• 一个名为About的视图，其中显示有关该应用程序的详细信息

首先创建“ 关于”视图。 为此，选择主视图 ，然后单击更改视图类型 。 现在，您将看到几个视图模板。 单击关于模板。

在下一个屏幕中，将“ 标题”设置为“ 关于” ，然后单击“ 模板”标题以配置视图的内容。 通常，“关于”屏幕上包含应用程序的名称，版本和说明。 因此，请适当填写这些字段。 该模板还包括社交按钮。 我们今天将不再使用它们，因此请取消选中与我们联系 ， Facebook按钮和Twitter按钮字段。

单击“ 应用”按钮后，您将能够看到刚刚创建的视图。

现在，通过单击添加视图按钮来创建Converter视图。 系统将提示您再次选择一个模板。 这次，选择“ 表单”模板，因为此视图将具有两个输入字段：

• 一个领域接受公斤的重量
• 另一个以磅为单位显示重量的字段

在下一个屏幕中，将Title字段设置为Converter ，将Name字段设置为converter 。 要添加两个输入字段，请首先单击“ 表单字段”标题，然后单击“ 添加表单字段”按钮。 现在将要求您选择表单字段的类型。

因为以千克为单位的重量应该是一个数字，所以从选项列表中选择“ 输入数字” 。 将其命名为kgs并为其加上适当的标签。

同样，创建一个文本框并将其命名为result 。 确保您也给它加上适当的标签。

现在已经准备好表单字段，单击“ 按钮”标题。 默认情况下，表单模板具有确认按钮和取消按钮。 我们不需要取消按钮，因此请取消选中“ 取消按钮”字段。

单击“ 应用”保存更改。 视图现在应如下所示：

3.配置导航布局

为了使用户可以在我们创建的两个视图之间进行导航，Views服务已经向我们的应用程序添加了导航布局。 要配置它，请切换到“ 导航布局”部分。

您将看到该应用程序当前使用选项卡菜单作为导航布局。 我将采用这种方式，但是您可以自由尝试其他可用选项。

默认情况下，我们的应用使用“ 关于”视图作为初始视图。 要将Converter用作初始视图，请单击应用程序启动标题，并将Initial view的值设置为Converter 。 不要忘记单击“ 应用”以保存您的更改。

您应用的导航布局现在应如下所示：

4.添加自定义代码

现在我们的应用程序的用户界面已经准备就绪，让我们编写一些JavaScript代码来完成从公斤到磅的实际转换。

在左侧，单击代码以打开代码编辑器。 这将揭示混合项目的结构。 您将看到我们创建的每个视图都有一个目录，其中包含名为view.html和index.js的文件。 view.html包含定义视图布局HTML代码，而index.js包含可处理各种UI事件JavaScript代码。

打开Converter视图的index.js文件。 您会注意到AppBuilder已经创建了一个名为converterModel的kendo.observable对象来管理我们创建的表单。 它具有一个fields属性，其中包含我们创建的表单元素的名称。 它还具有一个submit功能，当用户按下“ 确认”按钮时，该功能将被调用。 您可能已经猜到了，我们所有的代码都应该添加到submit函数中。

从公斤到磅的转换代码几乎是微不足道的。 您需要做的就是获取fields.kgs的值，将其乘以2.2046，然后更新fields.result的值。 要获取和设置converterModel的属性，您必须使用其get和set方法。 将以下代码添加到index.js文件：

// START_CUSTOM_CODE_converterModel
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes

var model = app.converter.converterModel;
model.set("submit", function() {
    var lbs = model.get("fields.kgs") * 2.2046; // get fields.kgs and multiply with 2.2046
    model.set("fields.result", lbs + " lbs"); // set fields.result
});

// END_CUSTOM_CODE_converterModel

请注意，您应该在自动生成的START_CUSTOM_CODE和END_CUSTOM_CODE注释之间编写自定义代码。 否则，当您使用Views服务对视图进行进一步更改时，代码将丢失。

5.使用设备模拟器

我们的应用程序已准备就绪。 要对其进行测试，我们可以使用AppBuilder包含的众多设备模拟器之一。 现在，通过按Control + F6启动iPhone模拟器。 应用启动后，通过在第一个文本字段中键入数字并按“ 确认”按钮来检查转换逻辑是否正常工作。

您可以更改设备模拟器的方向，以查看其在横向模式下的外观。 为此，请单击顶部的“ 旋转”按钮之一。

AppBuilder还允许您在不同的iOS版本上测试您的应用程序。 您可以通过单击顶部的“ 版本”下拉菜单来更改操作系统的版本 。

既然您已经了解了该应用在iPhone上的外观和行为，现在让我们在其他设备模拟器上运行它。 点击包含设备列表的下拉菜单，然后选择Android Phone 。

您会注意到该应用程序也可以在Android模拟器上正常运行。 但是，它的外观和感觉并不像Android应用程序。 那是因为我们的应用程序当前使用的skin名为flat 。 要使其具有材料设计外观，请打开app.js并将skin的值更改为material 。

该应用程序现在应如下所示：

6.使用AppBuilder的配套应用

设备模拟器在开发过程中非常有用。 但是，确定应用程序在真实手机或平板电脑上的性能始终是一个好主意。 通过使用AppBuilder的配套应用 ，在设备上运行该应用就像在模拟器中运行一样容易。

在物理设备上安装配套应用程序后，打开代码编辑器并按Control + B开始构建过程。 系统将要求您选择要在其上运行应用程序的平台。 确保您选择的平台与安装配套应用程序的设备的平台匹配。 接下来，选择AppBuilder配套应用程序选项，然后按“ 下一步”按钮。

构建成功完成后，您将看到以下屏幕：

现在，您可以在设备上打开AppBuilder配套应用，然后扫描QR码以运行您的应用。

7.使用AppBuilder的CLI

如果您希望从命令行在本地工作，则可以使用AppBuilder的CLI（命令行界面），它几乎可以完成浏览器内客户端可以执行的所有操作。 由于CLI是Node.js软件包，因此您可以使用npm（节点软件包管理器）轻松安装它。

sudo npm install -g appbuilder

只有登录到Telerik帐户后，才能使用CLI包含的大多数功能。 因此，在执行任何其他操作之前，请使用以下命令登录：

appbuilder login

登录后，您可以使用-h选项查看appbuilder命令可以为您做什么。

appbuilder -h

为了帮助您入门，可以按照以下方法下载我们在浏览器内客户端中创建的应用程序的所有代码：

appbuilder cloud export "My First App"

结论

在本教程中，您学习了如何使用Telerik AppBuilder创建一个简单的混合应用程序。 您还学习了如何使用AppBuilder的配套应用程序和设备模拟器来测试该应用程序。 即使我们今天专注于浏览器内客户端，对于喜欢使用常规IDE的开发人员，AppBuilder也提供了独立的Windows客户端和Visual Studio扩展 。

立即开始免费试用 。 要了解有关AppBuilder的更多信息，可以参考其综合文档 。

翻译自: https://code.tutsplus.com/tutorials/getting-started-with-telerik-appbuilder--cms-25537