Integrating Phonegap and AEM 6 (including third party libraries)

[JoseBerciano]

Hello newbe here,

I am trying to create a brand new Phonegap app and insert in the pages some of the components I have just created. So basically I am working over the project Bruce Lefebvre made in this page: https://github.com/blefebvre/aem-phonegap-starter-kit

I have been able to run this app in my iOS emulator and everything seems to work fine, but when I add my components (which are using some external libraries like jQuery and PathFinding.js ) seems to be like the libraries are not being loaded.

So that is basically my problem, how can I set the libraries in order to get them loaded when the app runs? 

PD: The way I indicate the libraries in my *.jsp files is by adding this line <cq:includeClientLib categories="jquery"/>

PD2: I am able to load the libraries and making everything work fine at the author instance, loading the pages directly from Chrome.

[shekhardhiman]

Hi There,

Thanks for reaching out to Adobe Community.

Please go through the below doc and see if that helps:

http://docs.adobe.com/docs/en/aem/6-0/develop/mobile/apps/managing-aem-mobile-apps/configure-your-ad...

Thanks!

[Anthony_R · Accepted solution]

Hello Jose,

Any clientlib you reference also has to be included in the content sync config for your app. If you haven't done that yet the desired library JS will not be included in the ZIP you download from AEM.

For example, this is how the Angular JS library gets added to the ZIP in the starter kit example you mentioned.

https://github.com/Adobe-Marketing-Cloud-Apps/aem-phonegap-starter-kit/tree/master/content/src/main/...

Another good practice is to have your page only reference your design's clientlib. That clientlib can then embed all of your custom JS plus have dependencies on any third-party libs as well. Including the clientlib at the component level should work too however as long as your content sync config is defined correctly.

/Anthony

[JoseBerciano]

It was indeed helpfull, thank you!

But I am afraid this has nothing to do with the question I asked above:

I am able to compile my PhoneGap app on my computer using the phogeGap command line interface (CLI)
I downloaded the ZIP file and built it through the command line:

"phonegap run ios --emulator"

The problem is that some of my components are using jQuery and some other libraries, and these libraries are not getting included somehow in the build process, I guess.

So my question is, how can I specify which libraries my app needs to properly being loaded when launching the app?

Thank you in advance. 

[kalyanar]

When you unzip the apk (for example), do you see the missing js library included in the folder?

[JoseBerciano]

When I unzip the file I do not see the jQuery file anywhere, but I could not find out why.

[JohnFait]

AEM Apps builds upon the existing ContentSync framework. See http://docs.adobe.com/docs/en/aem/6-0/develop/mobile/contentsync.html

ContentSync is used to export the content from AEM into a zip which contains the static files representing your app (content and resources)

If you use libraries or more and do not see them once exported from AEM you should review your ContentSyncconfiguration(s).  The shell configuration exports several clientlibs as seen at https://github.com/blefebvre/aem-phonegap-starter-kit/tree/master/content/src/main/content/jcr_root/.... As Anthony mentioned earlier there are options on how to get you libraries in.

Looking at Bruce's repo there are several ContentSync configs (searching for node type of contentsync/config over repo);

aem-phonegap-starter-kit-master\content\src\main\content\jcr_root\content\phonegap\app_name_placeholder\en\_jcr_content\pge-app\app-config\.content.xml(9): sling:resourceType="contentsync/config"
aem-phonegap-starter-kit-master\content\src\main\content\jcr_root\content\phonegap\app_name_placeholder\en\_jcr_content\pge-app\app-config-dev\.content.xml(9): sling:resourceType="contentsync/config"
aem-phonegap-starter-kit-master\content\src\main\content\jcr_root\content\phonegap\app_name_placeholder\shell\_jcr_content\pge-app\app-config\.content.xml(9): sling:resourceType="contentsync/config"
aem-phonegap-starter-kit-master\content\src\main\content\jcr_root\content\phonegap\app_name_placeholder\shell\_jcr_content\pge-app\app-config-dev\.content.xml(9): sling:resourceType="contentsync/config"
aem-phonegap-starter-kit-master\content\src\main\content\jcr_root\content\phonegap\app_name_placeholder\shell\_jcr_content\pge-app\app_name_placeholder\.content.xml(9): sling:resourceType="contentsync/config"
aem-phonegap-starter-kit-master\content\src\main\content\jcr_root\content\phonegap\app_name_placeholder\shell\_jcr_content\pge-app\app_name_placeholder-dev\.content.xml(9): sling:resourceType="contentsync/config"

Note 6 configs.

There are main 2 packages contributing content; en and shell.

Each has a complimentary dev copy of the config. (dev to latest JCR changes, main/production to manage production app updates).

Shell has an additional aggregate package (also has a complimentary dev copy) that represents the full app. This config is the one that pull in all other content packages into a single consolidated export (in this case en + shell).

You may have more package then you choose to include in the initial app. Package not included in the initial app can be delivered to the app as an update as needed as they would not be part of initial app.

John

[JoseBerciano]

All of your comments have been really helpful, many thanks. But unfortunately I am not able to synchronize well the libs in my project, I guess I am committing some mistake when making the configuration of the cq:ContentSyncConfig node.

So following the above example (using the aem-phonegap-starter-kit project) I added a new node (the same way the angular.js is being set) just to include the jquery.js library

[img]1.png[/img]

And as you can see, jquery is in this location:

[img]2.png[/img]

But for some reason when I download the ZIP file I do not see my library added to the project:

[img]4.png[/img]

Sorry for uploading so much pictures but I thought it was the best way to explain how I have everything configured, and thank you again in advance.

[JoseBerciano]

Okay so, I found the mistake. It was as simple (and tedious) as check every file and to find out that the folder: My /etc/clientlibs/jquery folder had one property missing: jrc:PrimaryType=cq:ClientLibraryFolder

Once I fixed that my jquery library is properly copied to www/etc/clientlibs/

But I am still not being able to make jQuery work un my app... I realise that the file /www/content/phonegap/app_name/en.html is not including my library in the <body> of the html

The only ones I can see are these:

<script type="text/javascript" src="../../../cordova.js"></script> <script type="text/javascript" src="../../../etc/clientlibs/angularjs.js"></script> <script type="text/javascript" src="../../../apps/geometrixx-outdoors-app/components/splash-page/clientlibs.js"></script>

What would it be a possible reason for this? (In case this has something to do with my problem)

Thank all of you in advance.

[Anthony_R]

Hi again,

You either need to explicitly include a clientlib on your page or component or make it a dependency on another clientlib. Now that you have your jQuery lib being successfully included in your ZIP you still actually need to reference it on your rendered pages.

In the case of your splash page example above that would be adding a dependency to your jquery category just like angular is added.

Go to the properties for apps/geometrixx-outdoors-app/components/splash-page/clientlibs and add your dependency there. If the pages after your splash page also require jquery you will also probably need to add the dependency to the design all your pages use (eg. under /etc/designs/phonegap).

Here is an example from the Geometrixx App but the same principle applies when using the starter kit.

[img]Screen Shot 2015-04-21 at 9.07.01 PM.png[/img]