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 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 Apigility Editor (1), and the mobile project's GUI Editor (2) and configuration file (3), are opened and displayed.

Note:

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

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 .
   The service's Documentation tab is displayed in editing mode.

2. 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
3. At the bottom of the page, click the Save button to save the documentation.
   Your service is now documented!

1. When we created our CCM project, the Mobile GUI Editor was automatically opened and displayed. To manually open the editor, open the 'index.html' file, located in the 'www' folder of your mobile project.

2. The mobile project displays an entry-point 'index' page, with two widgets defined: a customers list, and a Get List button. An additional 'customerDetails' page contains text and map widgets, and a button for calling a customer.
3. In the displayed 'index' page, select the Get List button.
   The widget properties box is displayed.

4. In the Link to field, the REST service is selected, which means that clicking this button will display the list of customers.
5. We are now going to add a new page to the application to handle the process of adding a new customer:
   1. In the side-bar on the left of the editor, click Pages.
   2. In the toolbar, click .
   3. Name the new page "addCustomer", and click OK.
      The new page is added, and displayed in the mobile simulator.
6. Add a Home button to the new page:
   1. In the side-bar on the left of the editor, click Components.
   2. Drag and drop the Button widget to the top of the page.
   3. In the widget properties box, enter the following information:
      1. Text - Enter "Home"
      2. Link to - Click the drop-down menu, and select 'index'.
      3. Save the file.
7. Add text fields for entering the details of a new customer:
   1. Drag and drop the Text Input widget below the Home button.
   2. In the widget properties box, enter the following information:
      1. Id - Enter 'name'
      2. Title - Enter 'Customer Name'
      3. Save the file.
   3. Repeat steps a and b for remaining request parameters: location, activity and phone.
8. Add a button for sending new customer details:
   1. Drag and drop the Button widget to the bottom of the page.
   2. In the widget properties box, enter the following information:
      1. Text - Enter 'Add Customer'
      2. Link to - Click the drop-down menu, and select our REST service '/customers[/:id]'.
         The Bind to API dialog is displayed.

   

   3. Bind the page widgets and the Add Customer button to the REST service:
      1. In the Widget Id field, enter an ID for the widget (e.g., Button).
      2. Click the Method drop-down menu, and select POST.
      3. In the Parameter window, click inside the Form Field ID column for the 'name' parameter.

      

      4. Click the drop-down menu, and select the corresponding ID - 'name'.
      5. Repeat steps iii and iv for the remaining request parameters.

      

      6. Click OK.

9. In the side-bar on the left of the editor, click Pages, and select the Index page.
10. Add a button for navigating to the addCustomer page:
    1. Click Components, and drag and drop the Button widget to the bottom of the page.
    2. In the widget properties box, enter the following information:
       1. Text - Enter 'Add a Customer'
       2. Link to - Click the drop-down menu, and select 'addCustomer'
    3. Save the file.

To preview your application:

1. To preview the mobile application, the server-side project needs to be deployed first:
   1. In the Apigility project, select the 'deployment.xml' file.
   2. In the Testing area, click Deploy application.
      The Deploy PHP Application dialog is displayed.
   3. Select the server you wish to deploy the Agility project to, or click Add Server to create a new server. For more information on creating servers, see Adding PHP Servers.
   4. Click Finish.
      The Apigility project is deployed to the target you selected.
2. Open the Mobile GUI Editor ('index.html'), and in the tool-bar, click the Preview icon .
   -OR-
   Right-click your mobile project, and select Run As | Web Mobile Application.
   Your application is displayed in Preview mode.

3. Click Add a Customer.
   
4. Enter details for a new customer, and click Add Customer.
   The new customer is added.
5. Click Home to return to the home page.
6. Click Get List.
   The new customer is listed at the bottom of a list of customers.

7. Click the name of the new customer!

To create a new native Window Phone application:

1. In the PHP Explorer, open your mobile project and select the 'config.xml' file (this file was opened automatically when we created the CCM project).

2. Enter the following information:

• General Information area - General properties of the application (Name, ID, Version, Version Code).
• APIs area - PhoneGap APIs to be included in the application (e.g., Camera).
• Author area - Details of the application developer (Name, E-mail, Home page).

3. In the Native Applications area, click Create Windows Phone 7.5 Application or Create Windows Phone 8 Application.
   The native application is created and will appear in the 'platforms' folder of your mobile application.

   

To run your Windows Phone application:

In the PHP Explorer, right-click your mobile project, and select Run As | Windows Phone 7.5 Application/Windows Phone 8 Application.
The application is displayed in the Windows Phone emulator.

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.