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. Configure the new web services project:

   1. Name the project.
   2. Select the file location for the project.
   3. Select an existing deployment target for the new server project, or click Add Target to create a new target. For information on adding new targets, see Managing Targets.
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 native mobile APIs in our mobile project, and on the server-side, example implementation of exposed Web services.

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 server-side project's 'gateway.xml' file, and the mobile project's 'mobile.appGUI' (Mobile GUI Editor) and 'config.xml' files, are opened and displayed.

To deploy our server-side project:

1. In the PHP Explorer, locate and open the server-project's 'deployment.xml' file.
2. In the Testing area to the right, click Deploy application.
   The Deploy PHP Application dialog is displayed with the target we selected when creating the CCM project.
3. Click Finish.
   The project is deployed.

To test method routes:

1. When we created our CCM project, the Zend Server Gateway graphic editor was automatically opened and displayed in the editor. To manually open it, in the PHP Explorer, open the 'config' folder of your CCM server-side project, and select the 'gateway.xml 'file .

2. Right- click the RPC GET/customers method, and select Test Service.
   The Test Service view is displayed, and the URL field automatically contains the target, the name of your project and the tested method.

3. 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 Route view is correct. If this problem persists, redeploy your server-side project.

To add and test a new RPC method:

1. In the Zend Server Gateway graphic editor, drag the RPC Service element from the Handlers list on the right, and drop it in the center of the editor.
   The Add New RPC Service dialog is displayed.

2. In the URL field, enter 'add'.
3. Select the POST method from the Method drop-down menu.
4. Right-click in the Request Parameters table, and select Add Request Body Parameter to add the following parameters: 'name', 'location', 'activity' and 'phone'.
5. Click OK.
   The new service is added to the Zend Server Gateway, and displayed in the graphic editor.
   In addition, the new method is updated in the 'RPCServices' file, which is also displayed.

6. Add code for passing the request parameters to 'CustomerRepository->add method', and then to handle the result of the 'add' method:

   <?php
   use ZendServerGateway\Controller\AbstractActionController;
   class RPCServices extends AbstractActionController {
   	public function postAddAction(){
   		$name = $this->bodyParam('name');
   		$location = $this->bodyParam('location');
   		$activity = $this->bodyParam('activity');
   		$phone = $this->bodyParam('phone');
   		//create new instance of CustomerRepository
   		$cr = new MyCompany\Model\CustomerRepository;
   		//call add method with request body parameters
   		$newId = $cr->add($name, $location, $activity, $phone);
   		//handle the result of adding new customer by setting correct HTTP response code and message
   		if ($newId > - 1) {
   			$result = "New customer added (id=" . $newId . ")";
   			$this->getResponse()->setStatusCode(201);
   		} else {
   			$result = "Error adding new customer";
   			$this->getResponse()->setStatusCode(422);
   			$this->getResponse()
   				->getHeaders()
   				>addHeaderLine('Content-type', 'application/error+json');
   		}
   		return array(
   		$result
   		);
   	}
   }
   ?>

7. In the Test Service view, the URL field should display the correct URL for the new 'add' method. Beneath the URL field, click inside the table, and enter some values for the available parameters:

• name - Daniel
• location - Los Angeles
• phone- 123456789
• activity- working

8. Click the Test icon .
   Results are displayed in the Response window.

If you retest the GET method, you will be able to see that the new user has been added. To do this, just select the method in the editor, and click the Test icon .

To add authentication:

1. In the Zend Server Gateway graphic editor, drag the Authenticate element from the Handlers list on the right, and drop it after the Initialize stage.
   The Authentication dialog is displayed.

2. Select HTTP Basic/Digest authentication type.

3. Select the Basic Authentication check-box, leave the default resolver settings as they are, and click OK.
   Authentication is added to the Zend Server Gateway, and is required for each service defined.

   

   In addition, the 'users.htpasswd' file containing the table of user names and passwords is displayed.

   
   

4. In the 'users.htpasswd' file, click Add User to add a username and password for authentication.
5. In the 'gateway.xml' editor, right-click the service you wish to test authentication for, and select Test Service .
   The Test Service view is displayed.

6. Verify the URL at the top of the view. It should be automatically displaying the correct URL for the selected service.
7. Click .
   You will receive a '401 Unauthorized' response message.

8. Select the Authentication required check-box.
   The Service authentication dialog is displayed.

9. Enter a valid username and password in the relevant fields, and click OK.
   The authentication header is added

10. Click .
    You will receive a '200 OK' response message.

Important!

If you are using Windows, you will need to un-comment the following lines in the '.htaccess' file, in the server-side project's 'public' folder, to authenticate your requests:

*RewriteCond %{HTTP:Authorization} ^(.*)

*RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]

Important!

At all testing stages, make sure your changes to the Zend Server Gateway were properly uploaded to your server. If Auto Upload is enabled, this should be done automatically. If not, re-deploy the project to update and apply the changes.

To add validation:

1. In the Zend Server Gateway graphic editor, drag the Validation element from the Handlers list on the right, and drop it on a service in the editor.
   The Add Validation dialog is displayed with the list of request parameters.

2. Click Add Route Parameter, to add a validation rule to the route.
3. Name the new validation parameter, and click Add Validator.

4. From the Validator drop-down menu, select the alpha validator, to restrict requests to alphabetic characters.
5. Click OK.
   The validation parameter is added to the method route and displayed in the editor.

6. Save the Zend Server Gateway.
   
7. Test the validation in the Test Service view:
   1. Enter a faulty value for the name parameter (i.e., that contains non-alphabetic characters).
   2. Click the Test icon .
      The Results window displays a 400 error code, and a message describing what was wrong in the request.

Using the drag and drop feature, you can also add authentication to the Zend Server Gateway. For more information, see Adding and Testing Authentication.

Important!

At all testing stages, make sure your changes to the Zend Server Gateway were properly uploaded to your server. If Auto Upload is enabled, this should be done automatically. If not, re-deploy the project to update and apply the changes.

1. When we created our CCM project, the Mobile GUI Editor ('index.html' file) was automatically opened and displayed in the editor.
   The Device Simulator shows the interface of the application's opening page (Index).

2. Add a tab bar to your application's opening page:
   From the palette on the left, drag the Tab Bar widget and drop it below the displayed '/messages/'.

3. Add a new page:
   1. In the palette, click Pages.
   2. Click New page.
   3. Name the new page, and click OK.
      The new page is added and listed.
4. Link the Tab bar buttons to the application pages:
   1. From the Pages list, select the Index page.
   2. In the Device Simulator, select the Tab Bar widget you added in step 2.
   3. In the Properties box on the right, select each one of the buttons on the Tab Bar (named 'Items'), and link to pages using the Link to page drop-down menu:
   • Button/item One --> Index
   • Button/item Two --> userDetails
   • Button/item Three --> new page
5. Bind a widget to our RESTful API:
   1. Drag and drop the Button widget.
   2. In the Properties box, click the Link to drop-down menu, and select the GET/customers() method.
      The Bind to API dialog is displayed.
   3. In the Widget Id field, enter an ID for the widget (e.g., Button).
   4. Click OK.
6. In the toolbar, click the Preview icon .
7. Save your project.
8. In the PHP Explorer, right-click the mobile-project, and select Run As | Web Mobile Application.
   The application is launched on a mobile emulator.

Note:

This tutorial demonstrates only basic designing steps. For more information on using the Editor, see Using the Mobile GUI Editor.

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 Application.
   The New Windows Phone Application wizard is displayed.

4. Enter the following information:

• Project Name - Name your new project.
• Location - Select a location for the new project (default- current workspace).

5. Click Finish.
   The new project is created and displayed in the PHP Explorer.

To run your Windows Phone application:

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

To open your Zend Studio native application project in Microsoft's Visual Studio, right-click the project in the PHP Explorer, and select Open in Visual Studio.