zend studio_Zend Studio开发移动应用

最新推荐文章于 2023-12-12 18:09:27 发布

culi3118

最新推荐文章于 2023-12-12 18:09:27 发布

阅读量208

点赞数

文章标签： java web python 大数据 ajax

原文链接：https://www.sitepoint.com/mobile-app-development-zend-studio/

版权

zend studio

The world has turned mobile. This is not new, and it should therefore be no surprise to anyone that the results of the 2015 DevPulse survey by Zend show that a vast majority of PHP developers are working on, or intend to work on, mobile apps.

世界已经变得移动。这并不是什么新鲜事物，因此，对于任何人来说，Zend 所做的2015年DevPulse调查结果都表明，绝大多数PHP开发人员正在开发或打算开发移动应用程序，应该不足为奇。

Mobile app development poses many challenges for developers, one of which is tying in the front end of the mobile application with the back-end web service APIs.

移动应用程序开发给开发人员带来了许多挑战，其中之一就是将移动应用程序的前端与后端Web服务API捆绑在一起。

This tutorial describes how to simultaneously create, test and modify both the front and back end of a modern mobile app using Zend Studio’s mobile development features.

本教程介绍了如何使用Zend Studio的移动开发功能同时创建，测试和修改现代移动应用程序的前端和后端。

The steps described in this article were performed using Zend Studio 12.5 and a Zend Server 8 AWS instance. You can, of course, use any PHP server of your choice, local or remote, to host the API project.

本文中描述的步骤是使用Zend Studio 12.5和Zend Server 8 AWS实例执行的。 当然，您可以使用您选择的任何PHP服务器(本地或远程)来托管API项目。

步骤1：建立云端连线的行动专案 (Step 1: Creating a Cloud Connected Mobile Project)

Your first step is to create a new Cloud Connected Mobile (CCM) project in your Zend Studio workspace. A CCM project contains both a hybrid mobile project defining the front-end of your mobile app and a project containing all the back-end APIs.

第一步是在Zend Studio工作区中创建一个新的Cloud Connected Mobile(CCM)项目。 CCM项目既包含定义您的移动应用程序前端的混合移动项目，又包含包含所有后端API的项目。

In Zend Studio’s menu-bar, go to File | New | Cloud Connected Mobile project.

在Zend Studio的菜单栏中，转到文件| 新增| 云连接移动项目 。
In the New Cloud Connected Mobile Project wizard, enter a name for both the mobile client side project and the server-side project.

在“新建云连接的移动项目”向导中，输入移动客户端项目和服务器端项目的名称。
In the PHP Server drop-down menu, select a PHP server, and then click Next.

在“ PHP服务器”下拉菜单中，选择一个PHP服务器，然后单击“ 下一步” 。
In the next step of the wizard, you can select from one of the available project templates. Each contains a different code package with implementation examples. Read the descriptions for more info. In this tutorial, we’re going to go for the Simple Services template, which contains an example implementation of a REST service, and a client – side project consuming this service.

在向导的下一步中，您可以从一个可用的项目模板中进行选择。每个都包含一个不同的代码包以及实现示例。阅读说明以获取更多信息。在本教程中，我们将使用“简单服务”模板，该模板包含REST服务的示例实现以及使用该服务的客户端项目。
Click Finish.
点击完成。

Two new projects appear in your workspace in the PHP Explorer.

在PHP资源管理器中，两个新项目出现在您的工作区中。

步骤2：预览您的应用 (Step 2: Previewing your App)

Our next step is to preview our mobile app using the CordovaSim emulator supplied with Zend Studio. Obviously, since we just created the project, we will be previewing the sample code supplied with the template.

下一步是使用Zend Studio随附的CordovaSim模拟器预览我们的移动应用程序。显然，由于我们只是创建了项目，因此将预览模板随附的示例代码。

The CordovaSim mobile application simulator is a lightweight and fast emulator that allows you to preview your mobile application during and after development. It’s also an easy way to emulate native events (like for the accelerometer, geolocation, networking, etc.) using a GUI panel, which is important for mobile app testing.

CordovaSim移动应用程序模拟器是一种轻巧且快速的模拟器，可让您在开发期间和开发之后预览移动应用程序。这也是使用GUI面板模拟本地事件(如加速度计，地理位置，网络等)的简单方法，这对于移动应用程序测试非常重要。

To preview our mobile app, we will first need to deploy our server-side project containing the services it consumes.

要预览我们的移动应用程序，我们首先需要部署包含其使用的服务的服务器端项目。

In the PHP Explorer, open the server-side project’s deployment.xml file. Tip: If there is no such file, simply right-click the server-side project, and select Configure | Add Application Deployment Support.

在PHP资源管理器中，打开服务器端项目的deployment.xml文件。提示：如果没有这样的文件，只需右键单击服务器端项目，然后选择Configure | 添加应用程序部署支持 。
In the Testing area, click Deploy application.

在“测试”区域中，单击“ 部署应用程序” 。
In the Deploy PHP Application dialog that pops up, select the server you wish to deploy to.

在弹出的“部署PHP应用程序”对话框中，选择要部署到的服务器。
Verify the application URL, and click Finish. The server-side project is deployed to the selected server.

验证应用程序URL，然后单击Finish 。服务器端项目已部署到所选服务器。
Right-click the project in the PHP Explorer, and select Run As | Run with CordovaSim. Your mobile application is opened in the CordovaSim emulator.

右键单击PHP资源管理器中的项目，然后选择“运行方式| 与CordovaSim一起运行 。您的移动应用程序已在CordovaSim模拟器中打开。

As you can see, the mobile app supplied with the template we chose for our CCM project is a very basic app that displays a list of customers with a button that retrieves the list. We will be developing this app later on in this tutorial.

如您所见，随我们为CCM项目选择的模板一起提供的移动应用程序是一个非常基本的应用程序，它显示客户列表并带有检索列表的按钮。我们将在本教程的后面部分开发此应用程序。

步骤3：开发后端API (Step 3 : Developing the Back-End APIs)

Now, let’s focus on the server-side project.

现在，让我们集中讨论服务器端项目。

The new server-side project we created is based on Apigility. Apigility is an API Builder that simplifies creating and maintaining useful, easy to consume and well structured APIs. If your mobile app has a back-end in the cloud serving data via REST API, Apigility should be your framework of choice.

我们创建的新服务器端项目基于Apigility。 Apigility是一个API Builder，可简化创建和维护有用，易于使用且结构合理的API。如果您的移动应用程序具有通过REST API在云中提供数据的后端，那么Apigility应该是您的首选框架。

Zend Studio’s integration with Apigility helps you create, document and test the APIs constructing the back-end of your applications within the same development environment. For more info on Apigility, click here.

Zend Studio与Apigility的集成可帮助您创建，记录和测试在同一开发环境中构建应用程序后端的API。有关Apigility的更多信息，请单击此处。

In this tutorial, we will test and document the REST service supplied with the template using the Apigility editor built into Zend Studio’s mobile development support. The REST service, called ‘Customers’, handles the customer list of a company – retrieving the list from the database, adding new customers, etc.

在本教程中，我们将使用Zend Studio移动开发支持中内置的Apigility编辑器来测试和记录模板提供的REST服务。称为“客户”的REST服务处理公司的客户列表-从数据库中检索列表，添加新客户，等等。

Open the Apigility editor by right-clicking the server-side project in the PHP Explorer, and selecting Open Apigility Editor. This will automatically start Apigility’s admin UI on a built-in PHP server and open the Apigility editor.

右键单击PHP Explorer中的服务器端项目，然后选择Open Apigility Editor ，以打开Apigility编辑器 。这将在内置PHP服务器上自动启动Apigility的管理UI并打开Apigility编辑器。
Click the ‘Customers’ service that is listed as a REST service under the MyCompany API. The REST Services page is displayed.

单击MyCompany API下列为REST服务的“客户”服务。显示“ REST服务”页面。
The service already includes pre-defined settings, database settings, fields and controller files, all supplied with the template we selected.

该服务已经包括预定义设置，数据库设置，字段和控制器文件，所有这些都随我们选择的模板一起提供。
In the REST service header, click the yellow Test Service button. The Test Service view is displayed, and the URL field automatically contains the target, which is the IP (localhost) and a random port of the built-in PHP server. This server was started for the Apigility editor, together with the test method.

在REST服务标题中，单击黄色的“测试服务”按钮。显示“测试服务”视图，并且URL字段自动包含目标，即IP(本地主机)和内置PHP服务器的随机端口。该服务器是与Apigility编辑器一起启动的，并带有测试方法。
Click the Test icon. Results are displayed in the Response window. You should receive a ‘200 OK’ response. If you receive a ‘404 Not Found’ response, make sure the URL at the top of the Test Service view is correct.

单击测试图标。结果显示在“响应”窗口中。您应该收到“ 200 OK”答复。如果收到“ 404未找到”响应，请确保“测试服务”视图顶部的URL正确。
Now let’s test the POST method for this service. In the Test Service view, enter the following values for the request parameters displayed in the Parameters table below the URL:

现在让我们测试该服务的POST方法。在“测试服务”视图中，为URL下面“参数”表中显示的请求参数输入以下值：
- name – Daniel
  名字– Daniel
- location – Tel Aviv
  地点–特拉维夫
- activity – Coding
  活动–编码
- phone – 123456789
  电话– 123456789
Below the parameters table, change the request method to POST.
在参数表下方，将请求方法更改为POST。
Click the Test icon. Results are displayed in the Response window. You should receive a ‘201 Created’ response.

单击测试图标。结果显示在“响应”窗口中。您应该收到“ 201 Created”响应。
Next, we’re going to document our API. Select the Documentation tab.

接下来，我们将记录我们的API。选择文档选项卡。
Insert a description for the REST service and for the GET and POST methods. Something along the lines of:

为REST服务以及GET和POST方法插入描述。类似于以下内容：
- REST service – Handles the company customers list
  REST服务–处理公司客户列表
- GET method – Retrieves the customers list
  GET方法–检索客户列表
- POST method – Adds a new customer to the list
  POST方法–将新客户添加到列表中
At the bottom of the page, click the Save button to save the documentation.

在页面底部，单击“ 保存”按钮以保存文档。

Your service is now documented!

您的服务已记录在案！

There are plenty more aspects to Apigility than what is entailed in this tutorial. For example, Apigility will also help you build the authentication and authorization systems for your APIs. Check out Apigility’s docs to find out more.

除本教程中介绍的内容外，Apigility还有很多其他方面。例如，Apigility还可以帮助您为API构建身份验证和授权系统。查看Apigility的文档以了解更多信息。

步骤4：开发前端 (Step 4: Developing the Front-End)

Now that we’ve finished developing the back-end plumbing of our mobile app, let’s focus on improving the UI of our mobile app.

现在，我们已经完成了对移动应用程序的后端管道的开发，接下来让我们集中精力改进移动应用程序的UI。

In this step, we will be adding a new page to our app, which will handle the process of submitting a new customer to our company’s customer list.

在这一步中，我们将向我们的应用程序添加一个新页面，该页面将处理向我们公司的客户列表提交新客户的过程。

The front-end project created with the template we chose for our CCM project is based on jQueryMobile. Other template options include alternative frameworks such as Ionic, Bootstrap, etc.

使用我们为CCM项目选择的模板创建的前端项目基于jQueryMobile。其他模板选项包括替代框架，例如Ionic，Bootstrap等。

I’ve included some code snippets to use throughout the steps, so let’s dive right into it.

我已经包括了一些在整个步骤中都可以使用的代码段，因此让我们直接研究一下。

添加新页面 (Adding a New Page)

As a first step, we’re going to add a new page to the UI with: input fields, a Submit button, a text area for response info from the server and a Back button for returning to the homepage of the app.

第一步，我们将向UI添加一个新页面，其中包括：输入字段，一个Submit按钮，一个用于从服务器获取响应信息的文本区域以及一个用于返回应用程序主页的Back按钮。

From the PHP Explorer, open the mobile project’s ‘index.html’ file.

在PHP资源管理器中，打开移动项目的“ index.html”文件。
At the end of the file, just before the BODY tag, enter the following code:
在文件末尾的BODY标记之前，输入以下代码：

<div data-role="page" data-control-title="Add Customer" id="page3">
    <div data-theme="a" data-role="header">
        <a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
            Back
        </a>
        <h3>
            Add Customer
        </h3>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain" data-controltype="textinput">
            <label for="name">
                Name
            </label>
            <input name="" id="name" placeholder="" value="" type="text">
        </div>
        <div data-role="fieldcontain" data-controltype="textinput">
            <label for="location">
                Location
            </label>
            <input name="" id="location" placeholder="" value="" type="text">
        </div>
        <div data-role="fieldcontain" data-controltype="textinput">
            <label for="activity">
                Activity
            </label>
            <input name="" id="activity" placeholder="" value="" type="text">
        </div>
        <div data-role="fieldcontain" data-controltype="textinput">
            <label for="phone">
                Phone
            </label>
            <input name="" id="phone" placeholder="" value="" type="text">
        </div>
        <a id="submit" data-role="button" href="#">
            Submit
        </a>
        <div data-role="fieldcontain" data-controltype="textarea">
            <label for="response">
                Response
            </label>
            <textarea name="" id="response" placeholder=""></textarea>
        </div>
    </div>
</div>

在入口点页面上添加按钮 (Adding a Button on the Entrypoint Page)

Next, we’re going to add a button on the index/entry-point page of our mobile app that links to the newly created Add Customer page.

接下来，我们将在移动应用程序的索引/入口点页面上添加一个按钮，该按钮链接到新创建的“添加客户”页面。

To do this, at the end of the DIV tag for the index page, on line 43 of the same index.html file, add the following code:

为此，请在同一index.html文件的第43行的索引页的DIV标记的末尾，添加以下代码：

<a data-role="button" href="#page3">
    		Add Customer
	</a>

将Submit按钮绑定到API (Binding the Submit Button to the API)

What we’re going to do now is bind the Submit button we added to our new page to our APIs. Clicking the button will send a POST request to the server and result in a new customer added to the Customers list.

我们现在要做的是将添加到新页面的Submit按钮绑定到我们的API。单击该按钮会将POST请求发送到服务器，并导致将新客户添加到“客户”列表中。

In the PHP Explorer, open the my.js file located in the mobile project’s www/js folder.
在PHP资源管理器中，打开移动项目的www/js文件夹中的my.js文件。
Locate the $(document).ready(function() { … } block (line 71), and insert the following code inside the block (line 75):

找到$(document).ready(function() { … }块(第71行)，然后在该块中插入以下代码(第75行)：
```
$('#submit').bind('click', postCustomers);
```

Then, add the implementation of the postCustomers() function. To do this, on line 70, add the following code:

然后，添加postCustomers()函数的实现。为此，在第70行，添加以下代码：

/**
	 * Sends POST /customers[/:id] to API.
	 */
	function postCustomers() {
		jQuery.mobile.showPageLoadingMsg('Loading');
		$.ajax({
			url : gatewayURL + '/customers',
			cache : false,
			type : 'POST',
			contentType : 'application/json',
			data : JSON.stringify({
				'name' : $('#name').val(),
				'location' : $('#location').val(),
				'activity' : $('#activity').val(),
				'phone' : $('#phone').val(),
			}),
			success : function(data, status, xhr) {
				jQuery.mobile.hidePageLoadingMsg();
				onPostCustomers(data);
			},
			error : function(xhr, status, errorThrown) {
				jQuery.mobile.hidePageLoadingMsg();
				onPostCustomers(xhr);
			}
		});
	}

And right after that, add the helper function on postCustomers() for handling the response from the POST request:

然后，在postCustomers()上添加辅助函数，以处理POST请求的响应：

/**
* Shows POST /customers[/:id] response string in #response.
*
* @param response JSON object with response
*/
function onPostCustomers(response) {
	var raw = (typeof(response) == 'string') ? response : JSON.stringify(response);
	$('#response').html(raw);
}

预览我们的更改 (Previewing our Changes)

After saving the project, it’s time to preview our work. To do this, we’re going to use the CordovaSim simulator again.

保存项目后，是时候预览我们的工作了。为此，我们将再次使用CordovaSim模拟器。

Right-click on the project in the PHP Explorer, and select Run As | Run with CordovaSim.

右键单击PHP Explorer中的项目，然后选择“运行方式| 与CordovaSim一起运行 。

Give it a try and add a new customer!

尝试一下并添加新客户！

To sum up, what we’ve done is added a new page to our mobile app and bound it to the server-side API.

总而言之，我们所做的就是在移动应用程序中添加了一个新页面，并将其绑定到服务器端API。

步骤5：作为Android Native App测试 (Step 5: Testing as an Android Native App)

Now that we’ve finished developing both the front and back end sides of our application, it’s time to pick it up a notch.

既然我们已经完成了应用程序的前端和后端的开发，那么该是时候了。

Zend Studio is integrated with Apache Cordova, the most popular and commonly used hybrid mobile development framework today. Amongst other features, this integration provides launchers for testing applications on native emulators and devices, and it also includes a series of generators that are capable of exporting native platform projects such as XCode or Android projects, and compiling them.

Zend Studio与Apache Cordova集成在一起，Apache Cordova是当今最流行和最常用的混合移动开发框架。除其他功能外，此集成还提供了用于在本机仿真器和设备上测试应用程序的启动器，并且还包括一系列能够导出本机平台项目(例如XCode或Android项目)并进行编译的生成器。

In the next two steps, we will be using these features to test our mobile app, as an Android native app, and export it, as a native application package.

在接下来的两个步骤中，我们将使用这些功能来测试作为Android本机应用程序的移动应用程序，并将其作为本机应用程序包导出。

Important! To run a mobile app on the Android emulator, and to export an APK file, there are some setup steps that have to be completed first. Namely, an Android SDK must be installed.

重要！ 要在Android模拟器上运行移动应用程序并导出APK文件，必须先完成一些设置步骤。 即，必须安装Android SDK 。

So, in Zend Studio’s PHP Explorer, right-click on the mobile project, and select Run As | Run on Android Emulator. The Android Emulator is displayed with your mobile application open!

因此，在Zend StudioPHP资源管理器中，右键单击移动项目，然后选择运行方式| 在Android Emulator上运行 。显示Android模拟器并打开您的移动应用程序！

步骤6：导出本机应用程序包 (Step 6: Exporting a Native Application Package)

In this final step, we will export our mobile app as a native mobile application for the Android platform.

在最后一步中，我们将移动应用程序导出为Android平台的本机移动应用程序。

Zend Studio also allows you to export the project as a native project, which allows you to continue working on the project using native tools (e.g. Xcode for iOS).

Zend Studio还允许您将项目导出为本机项目，这使您可以继续使用本机工具(例如，iOS的Xcode)来处理该项目。

In the PHP Explorer, select the mobile application’s config.xml file.

在PHP资源管理器中，选择移动应用程序的config.xml文件。
In the Export area, click Export Mobile Application. The Export Mobile Application dialog is displayed.

在“导出”区域中，单击“ 导出移动应用程序” 。显示“导出移动应用程序”对话框。
Select the native platform you wish to export to – in this case Android.

选择您要导出到的本机平台(在本例中为Android)。
Select the destination folder for the application.
选择应用程序的目标文件夹。
Click Finish.
点击完成。

Zend Studio builds all the native binaries and our project is exported as an Android native application package (.apk).

Zend Studio会构建所有本机二进制文件，并且我们的项目将导出为Android本机应用程序包(.apk)。

Note: Since Zend Studio does not currently support signing of the exported application files, you have to sign them manually according to the respective platform guidelines, before submitting them in app stores.

注意：由于Zend Studio当前不支持对导出的应用程序文件进行签名，因此您必须根据各自的平台指南对它们进行手动签名，然后才能在应用商店中提交它们。

What are you waiting for? Send it off to Google Play!

你在等什么？将其发送到Google Play！

摘要 (Summary)

To sum it all up, Zend Studio allows mobile developers to seamlessly work on the back and front end of their mobile app, develop, test and manage new web services and go native, by exporting the project, as a native application package for Android, iOS or Windows Mobile.

总而言之，Zend Studio通过移动项目将其导出为Android的本机应用程序包，从而使移动开发人员可以在其移动应用程序的后端和前端无缝地工作，开发，测试和管理新的Web服务并实现本机化。 iOS或Windows Mobile。

Hope you enjoyed the ride!

希望您喜欢这个旅程！

有用的链接 (Useful Links)

More about Zend Studio
关于Zend Studio的更多信息
Zend Studio videos
Zend Studio视频
Feedback: Zend Studio Forums or the comments below!
反馈： Zend Studio论坛或以下评论！

翻译自: https://www.sitepoint.com/mobile-app-development-zend-studio/

zend studio

culi3118

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
zend studio_Zend Studio开发移动应用

zend studioThe world has turned mobile. This is not new, and it should therefore be no surprise to anyone that the results of the 2015 DevPulse survey by Zend show that a vast majority of PHP develope...
复制链接

扫一扫