Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
{ Good Morning }
I’m Andy, pleased to meet
you 
{ Intro }
Hi, I’m Andy
• Twitter: @AndyGasman
• LinkedIn: agaskell
• Facebook: andy.gaskell.uk
• Work: ssofb.co.uk
• Home: Aberdeen,...
I live in Aberdeen
Scotland / UK
it’s...
• Dry
• Cold
• Windy
I’m a web developer
• PHP
• CSS
• HTML
• JavaScript / jQuery
• MySQL
• Joomla
Self employed, 20+ years writing code
{ A Story }
{ Backstory }
In the beginning...a Guy
called Jim
• Knows about schools
• Likes Apps
• Wants to build a business
• Keen to invest
• 95% ...
So we made Apps...lots of ‘em
{ The Team }
People & Skills
• Product manager: App
• App Dev: General + UI + Web
• App Dev: General + CI/CD
• Web Dev: PHP, JavaScipt,...
Team Anatomy
• All experienced
• All remote
• Assembla + Skype, no email
• Weekly conf call
• Monthly meetings
• 2 week de...
{ The App }
Anatomy
Features
• Info
• News
• Forms
• Surveys
• Push notification
• Events / Calendar
• Other categories of information
• iOS &...
Got to Be Useful
App Screens
• Home
• News
• Events / Calendar
• Info
• Contacts
• Push notification
• Forms
• Surveys
{ Making Apps }
Ways to make an App
• Native
– Java / Objective C / Swift
• Web Apps
– HTML5 & JavaScript
• Hybrid
– Using a platform or f...
Hybrid / Multi Platform Apps
• Write once
• Often write in higher level languages
• Leverage APIs through a wrapper
• Writ...
Platforms / Frameworks
• PhoneGap
• Appcelerator Titanium
• Sencha Touch
• Xamarin
• Corona
Appcelerator Titanium
• Logic in JavaScipt
• Layout in Alloy (a bit like HTML)
• Style in TSS (like CSS)
• Compiles to nat...
App Building Tools
• NodeJS: All build scripting done in JS
• GruntJS: JavaScript task runner
• Calabash: Automated Testin...
Build Process, Times X Apps
{ Backend }
What does the back-end
do?
• Enter content
– News
– Info
– Events
• Import calendars from ICS feeds
• Send push messages
•...
We chose
(of course)
Why Joomla?...
• Stable & Secure
• Mobile Friendly
• Great to develop on
• All the good stuff there...
– OO & MVC
– jQuery...
How?
• Uses Joomla! Front-end
• Each App back-end has a separate
Joomla! install
• One custom template, branded per
App
• ...
Joomla Approach
• Use as much of the core functionality
as possible
• Keep the number of extensions low
• Make the templat...
Backend UI
Push Notifications
• Any item can be a push notification
• Push goes via Appcelerator cloud API
endpoint, mapped to Apple ...
Extension - Fields Attach
• Means you can add structured data
to articles as required.
• Enables all “things” to be an art...
Extension - jBackend
• API Backend for Joomla
• Great for JSON
• Comes with boilerplate code to get
started
• Manages API ...
{ CI & DevOps}
App Continuous Integration
• All Apps have same code-base
• New features are built into all Apps
• Key for the project, go...
DevOps – Running Backends
• Initially running on Rochen shared
hosting, ok for 30 back-ends.
• Moved to a Rochen Managed C...
{ Lessons }
Lessons learnt - Apps
• A reliable and automated CI build
system is very complex to create
• Many App submission related t...
Lessons learnt - Back-end
• Develop with the future in mind
• Try not to accumulate technical debt
• Work closely with the...
Lessons learnt - Commercial
• Some schools are slow at decision
making
• Huge scope for growth, have to keep
it steady
• Q...
{ Questions? }
Try out the Apps
Try out the Back-end
Links and references on Twitter
{ Thanks }
@AndyGasman
@ssofb
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
Upcoming SlideShare
Loading in …5
×

Joomla as a mobile App backend - ideas, examples and experiences

1,897 views

Published on

Joomla as a mobile App backend.

Presented at J & Beyond, 2015 in Prague.

This talk described ideas, principles and methods related to building mobile App backends in Joomla. The Joomla front end is an ideal tool to provide app content administrators the ability to control their app. We'll look at several examples of this process for Apps developed for the UK education sector. The Apps typically use RESTful JSON interfaces to pull and push data to and from the Joomla backend.

Within Joomla the FieldsAttatch a jBackend are used and extended upon. We'll look at the Joomla solution, what we used and what we added. We'll also touch on App development, including cross platform native app development with Ti Appcelerator, continuous integration of multiple rolling releases, team skill-sets, privacy issues and business cases.

It'll be a narrative of the project's journey, ideas, paths and reflections.

Although there will be some technical detail, it should appeal more generally too.

The talk was recorded and is on YouTube at...
https://www.youtube.com/watch?v=OGw-bjM4kt8

J & Beyond page...
http://jandbeyond.org/programme.html?view=session&id=45&return=L3Byb2dyYW1tZS5odG1s

Published in: Internet
  • Be the first to comment

Joomla as a mobile App backend - ideas, examples and experiences

  1. 1. { Good Morning } I’m Andy, pleased to meet you 
  2. 2. { Intro }
  3. 3. Hi, I’m Andy • Twitter: @AndyGasman • LinkedIn: agaskell • Facebook: andy.gaskell.uk • Work: ssofb.co.uk • Home: Aberdeen, Scotland • I work from a home office
  4. 4. I live in Aberdeen Scotland / UK it’s... • Dry • Cold • Windy
  5. 5. I’m a web developer • PHP • CSS • HTML • JavaScript / jQuery • MySQL • Joomla Self employed, 20+ years writing code
  6. 6. { A Story }
  7. 7. { Backstory }
  8. 8. In the beginning...a Guy called Jim • Knows about schools • Likes Apps • Wants to build a business • Keen to invest • 95% of UK state schools don’t have an App = opportunity • 24k State Schools in UK • Plus, nurseries, clubs, churches...
  9. 9. So we made Apps...lots of ‘em
  10. 10. { The Team }
  11. 11. People & Skills • Product manager: App • App Dev: General + UI + Web • App Dev: General + CI/CD • Web Dev: PHP, JavaScipt, CSS etc + • MD: Sales & Strategy • Sales Manager: Sales
  12. 12. Team Anatomy • All experienced • All remote • Assembla + Skype, no email • Weekly conf call • Monthly meetings • 2 week development cycles, mostly • Front end and back-end working closely • agile but not Agile
  13. 13. { The App }
  14. 14. Anatomy
  15. 15. Features • Info • News • Forms • Surveys • Push notification • Events / Calendar • Other categories of information • iOS & Android, Tablet & Phone
  16. 16. Got to Be Useful
  17. 17. App Screens • Home • News • Events / Calendar • Info • Contacts • Push notification • Forms • Surveys
  18. 18. { Making Apps }
  19. 19. Ways to make an App • Native – Java / Objective C / Swift • Web Apps – HTML5 & JavaScript • Hybrid – Using a platform or framework for multi platform Apps
  20. 20. Hybrid / Multi Platform Apps • Write once • Often write in higher level languages • Leverage APIs through a wrapper • Write in one language • Compile to Android, iOS, WinPhone, BB and Tizen.
  21. 21. Platforms / Frameworks • PhoneGap • Appcelerator Titanium • Sencha Touch • Xamarin • Corona
  22. 22. Appcelerator Titanium • Logic in JavaScipt • Layout in Alloy (a bit like HTML) • Style in TSS (like CSS) • Compiles to native components • Lots of modules available • Lots of APIs • Quite good community & traction • Open Source with corporate overlord • Services in cloud API
  23. 23. App Building Tools • NodeJS: All build scripting done in JS • GruntJS: JavaScript task runner • Calabash: Automated Testing • Go.cd Server: build-test-release • KrauseFX Fastlane tools – Deliver: publishes to App stores – Snapshot: does screen grabs for submission
  24. 24. Build Process, Times X Apps
  25. 25. { Backend }
  26. 26. What does the back-end do? • Enter content – News – Info – Events • Import calendars from ICS feeds • Send push messages • Set-up forms & surveys • View & download form & survey data • Access control
  27. 27. We chose (of course)
  28. 28. Why Joomla?... • Stable & Secure • Mobile Friendly • Great to develop on • All the good stuff there... – OO & MVC – jQuery – Bootstrap • Huge time-saver compared to writing from scratch, provides many required features out-of-the-box
  29. 29. How? • Uses Joomla! Front-end • Each App back-end has a separate Joomla! install • One custom template, branded per App • Visually customised to match look & feel • Extension for structured data - FieldsAttatch
  30. 30. Joomla Approach • Use as much of the core functionality as possible • Keep the number of extensions low • Make the template adaptable and responsive
  31. 31. Backend UI
  32. 32. Push Notifications • Any item can be a push notification • Push goes via Appcelerator cloud API endpoint, mapped to Apple and Android push API • Custom code • Runs every 2 mins as a cron job • And, yes, it does work on an Apple Watch
  33. 33. Extension - Fields Attach • Means you can add structured data to articles as required. • Enables all “things” to be an article, with fields added as required. • Used for events, notifications, surveys, forms • UI driven • Code in Spanish, a little hard to read for me
  34. 34. Extension - jBackend • API Backend for Joomla • Great for JSON • Comes with boilerplate code to get started • Manages API keys • API endpoint code transmits and receives data • Basically exposes many common CMS functions as API endpoints
  35. 35. { CI & DevOps}
  36. 36. App Continuous Integration • All Apps have same code-base • New features are built into all Apps • Key for the project, got to keep per-App costs low • Very Automated building system • Structured UI themes • Streamlined yet flexible back-ends • Lots of “pretending to be a person” done using PhatomJS • Maintaining backend compatibility over versions
  37. 37. DevOps – Running Backends • Initially running on Rochen shared hosting, ok for 30 back-ends. • Moved to a Rochen Managed Cloud Server • New backends created from a Akeeba backup seed file. • Scripted using UNiTE • All scripting done in JavaScript node.js
  38. 38. { Lessons }
  39. 39. Lessons learnt - Apps • A reliable and automated CI build system is very complex to create • Many App submission related tasks are not easily automated • iTunes submissions still get rejected for random reasons • Android fragmentation is not really an issue • App stores don’t really want you to automate stuff
  40. 40. Lessons learnt - Back-end • Develop with the future in mind • Try not to accumulate technical debt • Work closely with the App developers • Users are typically quite non-technical, so simple UI best • Things need to “just work” for users • Write a good base API and evolve it • APIs are just awesome • “Shell” scripting in JavaScript / Node.js is quite nice actually
  41. 41. Lessons learnt - Commercial • Some schools are slow at decision making • Huge scope for growth, have to keep it steady • Quite a good idea actually • Different value propositions for different types of schools
  42. 42. { Questions? } Try out the Apps Try out the Back-end Links and references on Twitter
  43. 43. { Thanks } @AndyGasman @ssofb

×