Mobile apps development for Joomla

#JWC15 Joomla! World Conference 2015Bangalore, India Sheraton Hotel

November 6-8

Mobile apps development for JoomlaLearn | Connect | Share

Anibal Sánchez @anibal_sanchez@extly@joomgap


November 6-8

Extly leading developer

● 15+ years dev experience● Integrating Joomla since 2007

● Marketing Manager at Extensions Directory (JED)

● Contributor at Joomla! StackExchange (5000+)

● Contributor at Bug Squad

Aníbal Sánchez


November 6-8

Abstract

Mobile web-based applications are the best choice for individual, small

and large businesses developers to provide a way to continue a website

experience. This alternative allows you to work directly in the mobile

environment with nothing but JavaScript and HTML / CSS, using

technologies such as PhoneGap, Ionic and AngularJS Framework. Thus, it

is possible to implement the technology stack most used and known in

the world to launch apps, simultaneously, on all major platforms, from

day one, with the same source code. In Joomla! context, web-based

mobile apps can be integrated with the content management system to

query or execute operations safely. In this session, we will discuss the

main topic , solutions, challenges and a case to introduce how to combine

available technologies for mobile development integrated with Joomla.


November 6-8

Agenda

Welcome

Today’s stats

Definitions

JED Starter App

Talking to Joomla!

Conclusions


November 6-8

Welcome to Joomorrowland

http://www.tomorrowland.com


November 6-8

Welcome to Joomorrowland

● Joomla 4● PHP 7● Bootstrap 4

● Javascript ECMAScript 6● AngularJS 2 (Typescript)

http://www.tomorrowland.com


November 6-8

… and we develop apps for Joomla!

http://www.joomgap.com/jwc15




November 6-8

WAIT….

WHAT ?http://www.joomgap.com/jwc15




November 6-8

Wait … what?

● Content navigation● Search and browse● Site management● E-commerce apps● Enterprise apps (MEAP)


November 6-8

Today’s Stats

http://www.comscore.com/USMobileAppReport

The days of desktop dominance are over. Mobile has swiftly risen to become the leading digital platform, with total activity on smartphones and tablets accounting for an astounding 60 percent of digital media time spent in the U.S. The fuel driving mobile’s relentless growth is primarily app usage...




November 6-8

Today’s Stats


November 6-8

Definitions

Joomla! is a platform to built websites

● A content management system.

● Evolving from desktop usage.

● Supports responsive design.

● And, already supports mobile apps.


November 6-8

JED Starter App - Objectives

A prototype to show content navigation (smallest app, 2MB).


November 6-8

JED Starter App - A prototype


● Fork JGJEDStarter repo

● Create an account (or log in) in

PhoneGap build

● Connect your github account and

create a new App

● Pull JGJEDStarter source code and

build

● Download the new App and test it!



https://github.com/JoomGap/JGJEDStarter

https://build.phonegap.com


https://github.com/JoomGap/JGJEDStarter


November 6-8

A mobile web-based boilerplate


● Fork JGBoilerplate repo

● Create an account (or log in) in

PhoneGap build

● Connect your github account and

create a new App

● Pull JGBoilerplate source code and

build

● Download the new App and test it!



https://github.com/JoomGap/JGBoilerplate



https://github.com/JoomGap/JGBoilerplate


November 6-8

JED Starter App

● Mobile web-based app

● HTML, CSS and JavaScript

● Cordova - PhoneGap

● AngularJS Framework (optional)

● Ionic Framework (optional)





November 6-8

Cordova - PhoneGap

Easily create apps using the

web technologies you know

and love: HTML, CSS and

JavaScript. (+Plugins)

Target multiple platforms with

one code base.

Free and open source.


November 6-8

AngularJS / Ionic Framework

HTML enhanced for web apps!

Create mobile apps with the web technologies

you love. Free and open source, Ionic offers a

library of mobile-optimized HTML, CSS and JS

components, gestures and tools for building

highly interactive apps. Built with Sass and

optimized for AngularJS.


November 6-8

A new utility belt for developers

● HTML / CSS / JS Editor

● Local Debugging

○ Chrome DevTools

○ FireBug

● Remote Debugging

○ Chrome DevTools

○ GapDebug

● Device simulation

… a Javascript world ruled by Node.js, npm, Grunt, Bower, etc, etc


November 6-8

Local vs Remote Development

● Local Packaging

○ Android

○ Apple iOS *

● Remote Packaging

○ PhoneGap Build

○ AppGyver, trigger.io, etc.

● Other services

○ Firebase

○ AWS Mobile Hub


November 6-8

Talking to Joomla!

Application Program Interface (API)

HTML (JED App) vs Structured DataAtoms?

Molecules?Particles?

Cubes?


November 6-8

Talking to Joomla!

● Joomla Ajax Interface

● Custom APIs

● Joomla 3.6 - REST API

● Joomla 4 will be a mobile first CMS


November 6-8

… and we develop apps for Joomla!

https://www.extly.com/composer-app.html http://www.joomgap.com/

https://www.extly.com/composer-app.html








November 6-8

Talking to Joomla! - Joocial App

AutoTweetNG and Joocial are our extensions for social content management. Composer App is our new tool for social auto-publishing and content scheduling.

http://www.extly.com/autotweet-ng-pro.html

http://www.extly.com/content-management/social-media-tool.html

http://www.joomgap.com/

http://www.extly.com/autotweet-ng-pro.html




November 6-8

2-legged OAuth authentication(No remote password)

Talking to Joomla! - Joocial App

OAuth API OAuth API

Token


November 6-8

Conclusions● Mobile web-apps are ready for

prime time

● Joomla offers a sound content

model and a mature framework

● Responsive web design is only a

part of the solution

● Mobile apps for Joomla offer a

new “relentless growth”


November 6-8

Make It Happen

Are you interested Mobile Apps? Join to Mobile Apps Teamhttps://volunteers.joomla.org/working-groups/mobile-apps-team

The Mobile Apps working group is dedicated to people contributing to support mobile web-

enabled and native applications for Joomla that will be the best "mobile-first" CMS.

https://volunteers.joomla.org/working-groups/mobile-apps-team

https://volunteers.joomla.org/working-groups/mobile-apps-team


November 6-8

Questions and Feedback


November 6-8

JoomGap

Create amazing apps for Joomla!

http://www.joomgap.com



Documents

Mobile apps development for Joomla