Building AEM Mobile Apps – Part 2

In a previous post I talked about building and compiling mobile applications using the Starter Kit provided with AEM. Now I’ll go a step further and create a custom App with custom components using AngularJS, and PhoneGap.
Goal of the App

The App will display a list of events obtained from a REST service. Details on the event will be display on a new page upon tapping on it.

I’ll explain some interesting stuff with this simple example. To achieve this, I’ll develop two components. One will load and display the list of events, while the other will consist of the template used to display the details of the event.
What you’ll need before starting this tutorial

I’ll use the project and App created for a previous post (Building AEM Mobile Apps – Part 1). You’ll also need to understand the basics of AngularJS.
Let’s start

The first component to create will be called ‘event-list’.

Event-List Component
As I already explained, this component will get data from a RESTful service, and display the events with styles on it.
The first step you need to take to create the Event-List, is to use CRXDE Lite and create a new component (cq:component) under the project folder. In my case I’ll rename it to ‘conexio-mobile-app’. If you hadn’t renamed the original project, it should be called ‘brand_name_placeholder’ by default.
html: When you create a new component it contains a file for the markup named “app-name.jsp”. I’ll rename it to “eventList.html” for convenience. In this file I’ll create the list of events using the “ng-repeat” directive. I’ll also include a link to go to the details of the event. An object and method used in the iteration will be created in the controller.
js: This file wraps the functionality of the component. Basically, I used the ’$http’ service to create a GET method and use the response to fill the object mentioned in the previous paragraph.



To show the event details, I reused the methods ‘go’ and ‘navigateToPage’ implemented in the file: ‘ng-ionic-page/clientlibs/app-navigation.js’ provided by Adobe in the Starter Kit project. Here we add a parameter (the event id) which will be handled by the angular router.





As an additional feature, I’ll add methods to the controller that will allow to mark events as favorite.

To use this controller in the app, you’ll need to add it to the controllers list, (add a dependency to the main angular module) in the file ‘angular-module-list.jsp’. Simply add the name of the new module to the file.


‘angular-route-fragment.js’: As we explained, we will use ‘ngRoute’ to handle the navigation by sharing an event id between components, so you have to modify the routing as shown below.



Event-Detail Component
To start with this component, I started creating a new node of type cq:component, with the same structure as the previous one.
Event-detail.html: This file contains the markup for the component, here goes the template for the event detail page. I’ve included event title, image, and description.
controller.js: By using the ‘$routeParams’ we’ll read the parameter sent by Event-List component. Once we have the id of the event, we fill the scope variables binding to the html to display the event detail info.

Putting all together
Once you have made it to this step, the hardest part has already past, and it’s time to use AEM to create the pages in which the components will be located.

Create a page with the template ‘ionic-page’, and call it “Our events”. Then drag the ‘event-list’ component into the page. Afterwards, create another page named “Event List” and drag the ‘event-detail’ component into it.

Finally, it’s time to compile.

Compile the app
Now is time to see some results, compile the app for the device of your choice. If you don’t remember how to compile an App, please review our previous post.

References:
http://docs.adobe.com/docs/es/aem/6-0/develop/mobile/apps.html
https://docs.adobe.com/docs/en/cq/5-6-1/developing/mobile/phonegap_integration.html
http://docs.adobe.com/docs/en/aem/6-1/develop/mobile-apps/apps/single-page-applications.html