Developing Mobile Applications with Zend Studio

To create a new CCM project in Zend Studio:

1. In Zend Studio, go to File | New | Cloud Connected Mobile Project.
   The New Cloud Connected Mobile Project wizard is displayed.

2. Name your new mobile project.

3. By default, the Create Apigility project check-box is already selected, so all you have to do is configure the server-side Apigility project:

   1. Name the Apigility project.
   2. Select the file location for the Apigility project.
   3. Select an existing server for deploying the Apigility project, or click Add Server to add a new server. For information on adding new servers, see Adding PHP Servers.
4. Click Next.
   The Templates dialog is displayed.

5. From the Available Templates list, select the Simple Services template, which includes examples of how to consume mobile APIs in our mobile project, and on the server-side, an example implementation of an exposed RESTful Web service.

6. Click Finish.
   Your CCM project is created with new client and server side projects displayed in the PHP Explorer.

By default, after the new CCM project is created, the mobile project's configuration file (1) and the Apigility Editor (2) are opened and displayed.

Note:

The Apigility Editor UI requires certain Composer dependencies. These are added to the project, together with Composer Support.

To deploy the Apigility application:

1. In the PHP Explorer, open the server-side project's 'deployment.xml' file.
2. In the Testing area, click Deploy application.
   The Deploy PHP Application is displayed.
3. Select the server you wish to deploy to or click Add Server to add a new server.
4. Verify the application URL, and click Finish.
   The server-side project is deployed to the selected server.

To preview your application:

1. In the PHP Explorer, open the mobile project's 'index.html' file.

2. Right-click within the file, and select Run As | Run with CordovaSim.
   Your mobile application is opened in the CordovaSim emulator.

3. Click the Get List button in the emulator.
   A list of customers is displayed.

To test the REST service:

1. When we created our CCM project, the Apigility Editor was automatically opened and displayed in the editor.
   To open it manually, right-click the server-side project in the PHP Explorer, and select Open Apigility Editor .

2. Click the 'Customers' service that is listed as a REST service under the MyCompany API.
   The REST Services page is displayed, with the Customers service details.

3. The service already includes pre-defined settings, database settings, fields and controller files.
4. Hover over the colored bar for the service.
   Three buttons are displayed: a yellow Test Service button , a green Edit Service button , and a red DeleteService button .

5. Click the Test Service button .
   The Test Service view is displayed, and the URL field automatically contains the target, the name of your project and the tested method.

6. 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.

7. In the Test Service view, enter the following values for the request parameters displayed in the Parameters table below the URL:
   • name - Daniel
   • location - Tel Aviv
   • activity - Coding
   • phone - 123456789
8. Below the parameters table, change the request method to POST.
9. Click the Test icon .
   Results are displayed in the Response window.
   You should receive a '201 Created' response. If you receive a '404 Not Found' response, make sure the URL at the top of the Test Service view is correct.

To document the REST service:

1. Hover over the Customers service heading again, and this time click the Edit service button .
2. Select the Documentation tab.
   The service's Documentation tab is displayed in editing mode.

3. Insert a description for the REST service, and for the GET and POST methods:
   • REST service - Handles the company customers list
   • GET method - Retrieves the customers list
   • POST method - Adds a new customer to the list
4. At the bottom of the page, click the Save button to save the documentation.
   Your service is now documented!

For more information on working with Apigility in Zend Studio, check out the Apigility Integration in Zend Studio tutorial.

To design the GUI:

1. From the PHP Explorer, open the mobile project's 'index.html' file.
2. Add a new page to the GUI with input fields, a Submit button, a text area for response info, and a Back button.
   At the end of the file, just before the </BODY> tag, enter the following code:

<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>

3. Add a button on the index/entry-point page that links to the newly created Add Customer page.
   At the end of the <DIV> tag for the Index page, on line 43, add the following code:

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

4. In the PHP Explorer, open the 'my.js' file located in the mobile project's 'www/js' folder.

5. Bind the Submit button to send a POST request to the server-side API for adding the new customer.

   1. Bind the Submit button to a function named “postCustomers”.
      Locate the '$(document).ready(function() { … }' block (line 71), and insert the following code inside the block (line 75):

      $('#submit').bind('click', postCustomers);

   2. Add the implementation of the postCustomers() function.
      On line 70, add the following code:

      /**
      * 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);
      		}
      	});
      }

   3. Add the helper function on postCustomers() for handling the response from the POST request:
      

      /**
      * 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);
      }

6. Save your project.

Good job!

You've successfully added a new page to your mobile app, and bound it to the server-side APIs. To preview your development work, repeat Step 2 of this tutorial without deploying the server-side project again.

To preview as an Android native application:

In the PHP Explorer, right-click the mobile project, and select Run As | Run on Android Emulator.

The Android Emulator is displayed with your mobile application open.

To export a native application:

1. In the PHP Explorer, select the mobile application's 'config.xml' file.
2. In the Export area, click Export Platform Project(s).
   The Export Native Platform project dialog is displayed.

3. Select the project you wish to export, and the mobile platform you wish to export for.
4. Select the destination folder for the application.
5. Click Finish.
   The project is exported.

Congratulations! You have completed the tutorial. We recommend you see the Apigility Integration in Zend Studio tutorial for information on using Apigility in Zend Studio for to configure your APIs.