Thứ Năm, 24 tháng 4, 2014

Zend Server Gateway [Building Mobile Applications]

Zend Server Gateway is a lightweight web services gateway based on Zend Framework 2, which allows for the mapping of web service routes to various controller/actions of the web services. Zend Server Gateway is responsiblefor authentication, validation, filtering, and routing for RPC and RESTful APIs used in CCM projects.

The routing configurations are mapped into config/gateway.xml; the routes and configurations can be managed using the gateway editor interface provided in Zend Studio.

In this task, we will be creating a simple search interface for searching the existing customer records by name using the following steps:

1.       We will need to create a search function in the CustomerRepository model (MyMobileService\src\MyCompany\Model\CustomerRepository.php):
public function getSearch($query)
{
$where = new \Zend\Db\Sql\Where();
$where->like('name', "%$query%");
return $this->customerTable->select($where)->toArray();
}

2.       Add a new action in RpcController (MyMobileService\src\MyCompany\ Controller\RpcController.php); this will handle the web service request:
public function getSearchCustomersAction ($query)
{
$cr = new CustomerRepository(); return $cr->getSearch($query);
}

3.       In the gateway editor, create a new RPC service; set the following options:
‰        URL: /search
‰        Method: GET
‰        Request Parameters(Add): Name – query; Source – Route
‰        Handler Method: MyCompany\Controller\RpcController::getSear chCustomersAction

4.       You can test the RPC service by right-clicking on the service and choosing Test Service. On the right-hand side you will be presented with an interface to provide test input and validate the service response:


5.       In the mobile GUI editor, create a new page searchCustomers, and add the following elements:
‰        Text Box: custsearchinput
‰        Button: searchbutton
‰        List View: custlistview

6.       In the binding section of the Search button, bind the button with the GET / search:query() web service. Map the custsearchinput textbox to the query route parameter in the data section. This actionwill bind the search text to the query route parameter. Note that the query route parameter is already mapped to getSearchCsutomerAction.


7.       Modify the onGetSearchquery JavaScript method in MyMobileApp/www/js/ my.js to handle the RPC response:
function onGetSearchquery(response) {
// TODO Custom logic to handle server response customers = response;

var newCustomers = '';
$.each(customers, function(index, item) { newCustomers += '<li data-theme="">'
+ '<a href="#page2?empId=' + index
+ '" data-transition="none">' + item.name + '</a>' + '</li>';
});

$('#custlistview li[role!=heading]').remove();
$('#custlistview').append(newCustomers).listview('refresh');
}

8.       Make sure that you link the Search page from the index page using a button.

9.       Now run the project in native mode; you will be able to see the search page, like the one shown in the following screenshot:


What just happened?
We have now created new web services for the existing cloud-connected mobile application and have tested the mobile app in a native emulator. With Zend Studio 10, you can see the simplicity in building mobile apps which are supported by web services running on the cloud.
Q1. Which of the following platforms are supported in Zend Studio 10 for native mobile application development?

1.       Android
2.       Firefox OS
3.       MeeGo
4.       Brew

Q2. Which of the following web services are not supported by Zend Server Gateway for building cloud-connected mobile applications?

1.      RPC
2.      SOAP
3.      REST


Summary


Cloud-connected mobile applications are a great step by Zend towards enabling PHP developers to build and support mobile apps using the cloud platform. With CCM, Zend is offering an extremely robust, yet simple-to-use platform for building these applications.

Native applications versus mobile web applications [Building Mobile Applications]

Native mobile applications provide great benefits over mobile web applications. Native web applications are run from the device memory, so there is little need for network interaction; these applications tend to load and runfaster. One of the other key advantages of native mobile applications is that they have access to the device's native features such as camera, device information, and accelerometer; this gives native applications an added advantage over mobile web applications.
In this task we will create a native iOS application using the Native Applications section of Zend Studio. Before you get started, make sure that Xcode IDE in installed on your Mac. Perform the following steps:
1.       Now, from our mobile application project choose Create iOS Application:


2.       You will be asked to provide the project details; please specify the Company Name and Bundle Id values. The Bundle Id value refers to the unique name that is used to identify the application; this is usually provided in the com.my-company-name. my-application-name format. When you register the application with the Apple Store, ensure that the bundle identifier matches with the one provided at Apple.


3.       Now the new iOS project is created in the workspace as you can see in the following screenshot:



4.       If you run the project, the application will launch the iOS emulator and will launch the mobile application as shown in the following screenshot:



What just happened?
We have created a new native iOS application using Zend Studio support for a native application; in our next section we will be using Zend Framework 2 to provide web services for this application.

PhoneGap and Zend Studio [Building Mobile Applications]

PhoneGap is a mobile application development framework which allows developers to build mobile applications using HTML, CSS, and JavaScript. The PhoneGap framework is used to convert these applications into native mobile applications, without having to rewrite the applications in native languages like Objective-C for iOS.

Zend Studio 10 now integrates PhoneGap into the Zend Studio IDE; this enables developers to easily build and test mobile applications without having to depend on external libraries.

For more information on cloud-connected mobile applications using Zend Studio 10; please refer the following documentation page:


Perform the following steps for building your first cloud-connected mobile application:

1.     Choose the Cloud Connected Mobile Project option from the New menu:


2.       In the Project wizard, you will be asked to provide the following details:
‰        Mobile Project Name: Name of the client-side mobile application project
‰        Web Services Project Name: Name of the web services project for the mobile application
‰        Web Services Project Deployment Target: Deployment target for the mobile application (you can choose the previously created phpcloud target here)
3.     In the template selection page, choose Simple Services as it will create a simple project with a client/server-side example as shown in the following screenshot:


4.       Clicking on Finish will create the mobile and web services projects. The user interface designer in the     mobile project lets us easily make changes to the mobile interface as shown in the following screenshot:


5.       Now run the project from the Zend Studio IDE; it should launch a Zend emulator interface as shown in the next screenshot:


What just happened?
We have successfully created our first mobile application using Zend's cloud-connected mobile application projects. In the subsequent sections we will understand how to extend these web services using Zend Framework 2 to build additional functionality into mobile applications.