1 of 27

Joomla! Integration with mobile apps

Aníbal Sánchez

@anibal_sanchez - http://blog.anibalhsanchez.com�JoomGap - http://www.joomgap.com

Extly Extensions - http://www.extly.com

​

Jueves, 28 Abril 2016�https://joomlaes.org

http://tinyurl.com/jdlarioja16-mobile

2 of 27

Overview

How to develop hybrid apps based on Joomla! Website data

​

The Web is already mobile, and will be even more in the coming years. Although it will not lose its site at all, it does change its operation as the way people consume content and access the user data will be increasingly based on mobile devices. Therefore, the "traditional" websites must adapt to new times.

​

In this talk we will see how it is possible to create "hybrid" mobile apps able to interact with a website Joomla! and the various mobile operating systems and real examples and technologies behind them.

3 of 27

About ...

  • @extly and @joomgap Leading Developer
  • 15+ years experience of Internet dev
  • Integrating Joomla! since 2007
  • Joomla! Volunteer
    • Marketing Manager at Extensions Directory (JED)
    • Contributor at Joomla! Bug Squad
    • Contributor at Joomla! StackExchange (6000+)
    • Contributor at Joomla! Community Magazine EN & ES

​

4 of 27

About ...

  • AutoTweetNG & Joocial
  • XTDir for SobiPro
  • XT Adaptive Images
  • Starters
  • Mobile Apps for Joomla!

5 of 27

A mobile app per Joomla! website

Paradigm

Shift

6 of 27

A mobile app per Joomla! website

How to change our projects?

7 of 27

A mobile app per Joomla! website

Approach �"Mobile first"

8 of 27

Not going to happen …. This is not “mobile first”

I want my site looks on mobile devices and in an app.

9 of 27

Approach "Mobile first"

  • Does this project need an App?

​

  • Can we include an App in the project proposal now?

​

  • Cell phones? Tablets? Watches? GPS? Cameras?

10 of 27

Approach "Mobile first"

  • Does this project need only a responsive website?
  • Is it enough to just have a responsive website?

​

​

11 of 27

Mobile Apps for Joomla!

  • Opportunities of technological change
    • Content navigation and search
    • Site Management
    • E-commerce
    • Corporate Apps

​

​

12 of 27

Joomla! Extensions Directory - Mobile Apps

“Mobile Apps”

Category for Joomla!

13 of 27

JDay La Rioja 2016 News - XT Backup for Akeeba

#1 Extension for Joomla!

​

1º Top Rated

1º Most Reviewed

14 of 27

JDay La Rioja 2016 News - XT Backup for Akeeba

http://tinyurl.com/xt-backup

Coming soon

15 of 27

XT Backup for Akeeba Case

App for Management,

based on Open Source,

with Web technology,

for Android and Apple iOS,

with the same code base,

stable and enterprise level.

16 of 27

XT Backup for Akeeba Case

XT Backup for Akeeba

17 of 27

About JoomGap

JoomGap is an open source SDK for developing hybrid mobile applications for Joomla! CMS

  • Starters
    • JG Boilerplate
    • JG Boilerplate 2 Beta (Angular 2)
    • JG Boilerplate Material

​

  • Joocial Composer App
    • Production ready
    • JoomGap SDK
    • PhoneGap, AngularJS and Ionic

​

  • XT Backup App for Akeeba

18 of 27

About JoomGap - JG Boilerplate Material

How to create a JoomGap mobile app based on JG Boilerplate Material Design

http://www.joomgap.com/docs/how-tos/boilerplate-material

19 of 27

Summary

There are evolved tools,

open source,

for web application development,

to support Android, Apple iOS and Win Phone,

with Html5 / CSS / JavaScript.

​

20 of 27

Next Steps

Joomla! integration with mobile apps

21 of 27

Questions and Feedback

Aníbal Sánchez

​

@anibal_sanchez

http://blog.anibalhsanchez.com

​

​

JoomGap

http://www.joomgap.com

​

​

Extly Extensions

http://www.extly.com

22 of 27

Tech Stuff - Step 1 - Hybrid Web App

  • Cordova - PhoneGap
    • Local Web Application
    • Html5 / CSS / JavaScript
    • Plugins

23 of 27

Tech Stuff - Paso 1 - Hybrid Web App

  • Option A - Remote compilation
    • PhoneGap Build
    • AppGyver, trigger.io, etc.
  • Option B - Local compilation
    • Android
    • Apple iOS *

24 of 27

Tech Stuff - Step 2 - Programming Utility Belt

  • Html5 / CSS / Javascript Editor
  • Local Debugging
    • Chrome DevTools
    • FireBug
  • Remote Debugging
    • Chrome DevTools
    • GapDebug
  • Version auto-installation
  • Device simulation

25 of 27

Tech Stuff - Step 2 - Development with Angular & Ionic

  • AngularJS / Ionic Framework

​

http://market.ionic.io/starters/multiplatform

26 of 27

Tech Stuff - Step 3 - End to end test

  1. Desktop
  2. Android 4, 5 & 6
  3. Apple iOS 8 & 9
  4. Cells
  5. Tablets
  6. Watches

​

27 of 27

Tech Stuff - Talking to Joomla!

  • Full Html page load (?)�
  • AJAX Communication (XHR)
  • JSON vs. JSONP / CORS
  • Joomla Ajax Interface (docs.joomla)
  • Others: Web-Services, WebSockets, Native Sockets, etc.

​

API

Note: Browser security - Cross-site scripting / Same-origin policy & JSONP