The document discusses how to build mobile apps using CQ Mobile and leverage existing CQ investments. It presents PhoneGap as a way to create apps using HTML, CSS and JavaScript across multiple platforms. It also demonstrates how to reuse content from CQ using Content Sync and build custom mobile experiences while reusing the CQ backend infrastructure and content.

1. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 1 of 79http://localhost:8000/?print-pdf#/
CQ Mobile AppsCQ Mobile Apps
/
/
Andrew Savory @savs
Bruce Lefebvre @brucelefebvre

2. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 2 of 79http://localhost:8000/?print-pdf#/
IntroductionsIntroductions

3. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 3 of 79http://localhost:8000/?print-pdf#/
AndrewAndrew
Senior Technical Product Marketing Manager, Mobile
asavory@adobe.com
@savs

4. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 4 of 79http://localhost:8000/?print-pdf#/
BruceBruce
Computer Scientist, CQ
@brucelefebvre

5. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 5 of 79http://localhost:8000/?print-pdf#/

6. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 6 of 79http://localhost:8000/?print-pdf#/

7. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 7 of 79http://localhost:8000/?print-pdf#/
You are hereYou are here
You have a big investment in your existing website:
Lots of content
Lots of processes
Lots of training
Lots of integrations

8. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 8 of 79http://localhost:8000/?print-pdf#/
You need to address mobileYou need to address mobile

9. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 9 of 79http://localhost:8000/?print-pdf#/
Mobile challengesMobile challenges
Mobile websites
...are easy (with CQ)
Mobile apps are hard

10. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 10 of 79http://localhost:8000/?print-pdf#/
Mobile apps are hardMobile apps are hard
How do you:
Re-use your content
Provide back-end server infrastructure
Develop for multiple mobile platforms

11. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 11 of 79http://localhost:8000/?print-pdf#/
Mobile experiences are hardMobile experiences are hard
Unique challenges:
New functionality to use (touch, sensors)
Constraints (memory, performance, battery, connectivity)
Difficult to update

12. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 12 of 79http://localhost:8000/?print-pdf#/

13. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 13 of 79http://localhost:8000/?print-pdf#/
Key challengesKey challenges
Repurposing content and workflows from CQ
Leveraging existing infrastructure to feed complex apps
Empowering Marketing and giving control back

14. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 14 of 79http://localhost:8000/?print-pdf#/
CQ ArchitectureCQ Architecture
OSGi Framework
Java, JSP, JS
Content store
Scalable

15. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 15 of 79http://localhost:8000/?print-pdf#/
PhoneGapPhoneGap

16. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 16 of 79http://localhost:8000/?print-pdf#/
Apps written with web techApps written with web tech
you know and loveyou know and love

17. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 17 of 79http://localhost:8000/?print-pdf#/
"...using HTML, CSS, and Javascript to not get
locked into a proprietary vendor platform."
- Brian LeRoux

18. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 18 of 79http://localhost:8000/?print-pdf#/
Supported platformsSupported platforms
iOS
Android
Blackberry
Windows Phone
more on the way...

19. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 19 of 79http://localhost:8000/?print-pdf#/
Device APIDevice API
Geo location
Accelerometer
Camera
File system
Contacts
Notifications
<your custom plugin>

20. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 20 of 79http://localhost:8000/?print-pdf#/
Open sourceOpen source

21. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 21 of 79http://localhost:8000/?print-pdf#/
In the real worldIn the real world

22. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 22 of 79http://localhost:8000/?print-pdf#/
http://phonegap.com/app/feature/

23. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 23 of 79http://localhost:8000/?print-pdf#/
PhoneGap BuildPhoneGap Build
Compile in the cloud
Avoid vendor SDKs
Now part of Creative Cloud

24. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 24 of 79http://localhost:8000/?print-pdf#/
Content SyncContent Sync

25. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 25 of 79http://localhost:8000/?print-pdf#/
Standards based
Optimized for low bandwidth
All content welcome

26. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 26 of 79http://localhost:8000/?print-pdf#/
Scenario: BlueSkyScenario: BlueSky

27. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 27 of 79http://localhost:8000/?print-pdf#/
The requirementThe requirement
Custom mobile application
Re-use server architecture
Deliver a dynamic mobile experience

28. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 28 of 79http://localhost:8000/?print-pdf#/
What we builtWhat we built
Third-party client app
PhoneGap, Angular.js
Server-side JSPs emitting JSON
Hypermedia API

29. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 29 of 79http://localhost:8000/?print-pdf#/
DemoDemo

30. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 30 of 79http://localhost:8000/?print-pdf#/

31. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 31 of 79http://localhost:8000/?print-pdf#/

32. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 32 of 79http://localhost:8000/?print-pdf#/

33. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 33 of 79http://localhost:8000/?print-pdf#/

34. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 34 of 79http://localhost:8000/?print-pdf#/

35. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 35 of 79http://localhost:8000/?print-pdf#/

36. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 36 of 79http://localhost:8000/?print-pdf#/

37. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 37 of 79http://localhost:8000/?print-pdf#/

38. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 38 of 79http://localhost:8000/?print-pdf#/

39. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 39 of 79http://localhost:8000/?print-pdf#/

40. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 40 of 79http://localhost:8000/?print-pdf#/

41. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 41 of 79http://localhost:8000/?print-pdf#/

42. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 42 of 79http://localhost:8000/?print-pdf#/

43. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 43 of 79http://localhost:8000/?print-pdf#/

44. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 44 of 79http://localhost:8000/?print-pdf#/

45. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 45 of 79http://localhost:8000/?print-pdf#/

46. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 46 of 79http://localhost:8000/?print-pdf#/

47. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 47 of 79http://localhost:8000/?print-pdf#/

48. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 48 of 79http://localhost:8000/?print-pdf#/
The valueThe value
For users: mobile experience, not mobile effort
Leverages existing CQ investment, common technologies
Loosely-coupled API provides flexibility, minimises pain

49. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 49 of 79http://localhost:8000/?print-pdf#/
Scenario: NewsreaderScenario: Newsreader

50. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 50 of 79http://localhost:8000/?print-pdf#/
The requirementThe requirement
Repurpose content
Build apps across platforms
Keep content up-to-date

51. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 51 of 79http://localhost:8000/?print-pdf#/
What we builtWhat we built
A PhoneGap app (stored in CQ)
PhoneGap Build for cross-platform
ContentSync for content updates

52. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 52 of 79http://localhost:8000/?print-pdf#/
InterludeInterlude
Do you read the release notes?

53. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 53 of 79http://localhost:8000/?print-pdf#/

54. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 54 of 79http://localhost:8000/?print-pdf#/
“Integration with Adobe service
to generate mobile apps from within Experience Manager”
PhoneGap Build
“Enable more efficient developer workflow
to maintain and update content-driven mobile apps”

55. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 55 of 79http://localhost:8000/?print-pdf#/
DemoDemo

56. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 56 of 79http://localhost:8000/?print-pdf#/

57. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 57 of 79http://localhost:8000/?print-pdf#/

58. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 58 of 79http://localhost:8000/?print-pdf#/

59. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 59 of 79http://localhost:8000/?print-pdf#/

60. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 60 of 79http://localhost:8000/?print-pdf#/

61. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 61 of 79http://localhost:8000/?print-pdf#/

62. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 62 of 79http://localhost:8000/?print-pdf#/

63. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 63 of 79http://localhost:8000/?print-pdf#/

64. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 64 of 79http://localhost:8000/?print-pdf#/

65. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 65 of 79http://localhost:8000/?print-pdf#/

66. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 66 of 79http://localhost:8000/?print-pdf#/

67. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 67 of 79http://localhost:8000/?print-pdf#/
SummarySummary
You can integrate mobile apps with CQ
You can re-use your content
You can re-use your workflows and integrations

68. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 68 of 79http://localhost:8000/?print-pdf#/
One more thingOne more thing
CQ MobileCQ Mobile

69. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 69 of 79http://localhost:8000/?print-pdf#/

70. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 70 of 79http://localhost:8000/?print-pdf#/

71. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 71 of 79http://localhost:8000/?print-pdf#/

72. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 72 of 79http://localhost:8000/?print-pdf#/

73. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 73 of 79http://localhost:8000/?print-pdf#/

74. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 74 of 79http://localhost:8000/?print-pdf#/

75. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 75 of 79http://localhost:8000/?print-pdf#/

76. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 76 of 79http://localhost:8000/?print-pdf#/

77. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 77 of 79http://localhost:8000/?print-pdf#/
SummarySummary
Mobile websites are easy (with CQ)
Mobile apps are hard easy (with CQ)

78. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 78 of 79http://localhost:8000/?print-pdf#/
Thank YouThank You
Questions?Questions?

79. 28/08/2013 14:49Evolve 2013: CQ Mobile Apps
Page 79 of 79http://localhost:8000/?print-pdf#/
ResourcesResources
- Brian LeRouxPhoneGap Beliefs, Goals, and Philosophy
Mobile with Content Sync
ReferencesReferences
designed by from The Noun
Project
designed by from The Noun Project
designed by from The Noun Project
Question Anas Ramadan
Package Hakan Yalcin
Question Henry Ryder