BUILDING HYBRID MOBILE APPS WITH ORACLE JET

Transcription

1 BUILDING HYBRID MOBILE APPS WITH ORACLE JET Luc Bors ) Oracle ACE Director / Developer Champion Technical Director eproseed Oracle Code Chicago Tuesday March Copyright 2017, Oracle and/or its affiliates. All rights reserved. Building Agile and Resilient Schema Transf. using Kafka and ESB's

2

3 BUILDING HYBRID MOBILE APPS WITH ORACLE JET Oracle Code Chicago Tuesday March 20 th 2018 Luc Bors

4 WHO AM I? Luc Bors Technical Director, Partner ADF, JET, MAF, MCS ACE Director / Developer Champion Working with Oracle Tech since 1999 About eproseed Local offices in several parts of world HQ in Luxemburg Award winning Oracle partner

5 PROGRAM AGENDA Introducing the Technologies Setting up your Local Environment Developing the initial app Getting into the Cloud Offline Persistence Toolkit Summary

6 PROGRAM AGENDA Introducing the Technologies Setting up your Local Environment Developing the initial app Getting into the Cloud Offline Persistence Toolkit Summary

7 INTRODUCING ORACLE JET

8 APACHE CORDOVA Webview WebApp Plugins Mobile OS

9 INTRODUCING ORACLE MOBILE CLOUD SERVICE

10 PROGRAM AGENDA Introducing the Technologies Setting up your Local Environment Developing the initial app Getting into the Cloud Offline Persistence Toolkit Summary

11 THE STEPS TO GET STARTED WITH THE APP Install Node Install JET CLI Install Cordova Create App

12 SETTING UP YOUR ENVIRONMENT Install Node.js Install the Oracle JET Command-Line Interface npm g

13 SETTING UP YOUR ENVIRONMENT Install Apache Cordova npm install -g cordova Optional: Upgrade to latest version of Apache Cordova npm install -g Optional: Check Cordova version cordova --version

14 PLATFORM DEVELOPMENT TOOLS Installing Platform Development Tools Install Android Development Tools Install ios Development Tools Install Windows Development Tools

15 PROGRAM AGENDA Introducing the Technologies Setting up your Local Environment Developing the initial app Getting into the Cloud Offline Persistence Toolkit Summary

16 CREATING THE JET HYBRID MOBILE APP Scaffold a Hybrid Mobile Application with the Oracle JET CLI Available Templates: basic, navbar, navdrawer ojet create [directory] hybrid [--appid=application-id] [--appname=application-name] [--template={template-name:[web hybrid] template-url template-file}] [--platforms=android,ios,windows --platform=android ios windows]

17 BUILDING THE JET HYBRID MOBILE APP Build a Hybrid Mobile Application with the Oracle JET CLI ojet build [android ios windows] [--build-config=path/buildconfig.json --destination=device emulator --theme=themename[:android ios web windows] --themes=theme1,theme2,... --sass --platform-options="string"]

18 SERVING THE JET HYBRID MOBILE APP Serve a Hybrid Mobile Application with the Oracle JET CLI ojet serve [ios android windows] [--build-config=path/buildconfig.json --server-port=server-port-number --livereload-port=live-reload-port-number --destination=emulator[:emulator-name] browser[:browser-name] device[:device-name] server-only --livereload build --theme=themename[:android ios windows web]] --themes=theme1,theme2,... --sass --platform-options="string"]

19 DEMO 1 : SETUP A NEW APP

20 ADDING CONTENT TO THE APP

21 INVOKING THE CAMERA Calling the Cordova API s is simple

22 DEMO 2: ADD DEVICE INTERACTION

23 PROGRAM AGENDA Introducing the Technologies Setting up your Local Environment Developing the initial app Getting into the Cloud Offline Persistence Toolkit Summary

24 GETTING INTO THE CLOUD Configure our MCS Setup the MB Register the client (=app) Create a user for the app Download the SDK Install the SDK Setup a helper Class Call the MCS API( s)

25 CREATING A MOBILE BACKEND

26

27 DOWNLOAD THE MCS CORDOVA SDK html

28 ADDING THE MCS SDK TO YOUR JET APP Extract the SDK Copy to your App Add to Bootstrap File Configure the App

29 ORACLE MOBILE CLOUD SERVICE

30 USING ORACLE MCS IN JET Configure the App

31 ORACLE MOBILE CLOUD SERVICE

32 USING ORACLE MCS IN JET Configure the App

33 ORACLE MOBILE CLOUD SERVICE

34 USING THE MCS STORAGE API IN JET How to call the Storage API?

35 DEMO 3: SAVING IMAGES IN THE CLOUD

36 PROGRAM AGENDA Introducing the Technologies Setting up your Local Environment Developing the initial app Getting into the Cloud Offline Persistence Toolkit Summary

37 ORACLE OFFLINE PERSISTENCE TOOLKIT Client-side JavaScript library that Oracle maintains as an opensource project Provides caching and offline support at the HTTP request layer Done through the Fetch API and an XHR adapter Can use pouchdb (currently v6.3.4) Support for shredding and unshredding Support for syncing and conflict handling

38 ORACLE OFFLINE PERSISTENCE TOOLKIT HTTP Fetch API XHR Adapter

39 ORACLE OFFLINE PERSISTENCE TOOLKIT Add the persistence toolkit to your application npm install offline-persistence-toolkit Add pouchdb & pouchdb-find(optional) npm install pouchdb pouchdb-find

40 ORACLE OFFLINE PERSISTENCE TOOLKIT Configure requiresjs requirejs.config({ paths: { 'pouchdb': 'js/libs/pouchdb-6.3.4', 'pouchfind': 'js/libs/pouchdb.find', 'persist' : 'js/libs/persist/v1.1.1/min, }

41 ORACLE OFFLINE PERSISTENCE TOOLKIT Configure main-release-paths.js {..... "pouchdb" : "libs/persist/min/pouchdb-6.3.4", "pouchfind" : "libs/persist/min/pouchdb.find", "persist": "libs/persist/min" } Also add libraries to oraclejet-build.js.

42 ORACLE OFFLINE PERSISTENCE TOOLKIT Initialize pouchdb in main.js Register pouchdb as persistence Store

43 ORACLE OFFLINE PERSISTENCE TOOLKIT Map the endpoint that needs to be cached persistencemanager.init().then(function(){ persistencemanager.register({scope: '/employees }).then(function(registration) { registration.addeventlistener('fetch', function() { // Implement response caching here. var responseproxy = defaultresponseproxy.getresponseproxy(); var fetchlistener = responseproxy.getfetcheventlistener(); registration.addeventlistener('fetch', fetchlistener); }); }); }); });

44 ORACLE S JET DEMO APP: FIXITFAST

45 DEMO 4

46 PROGRAM AGENDA Introducing the Technologies Setting up your Local Environment Developing the initial app Getting into the Cloud Offline Persistence Toolkit Summary

47 SUMMARY Oracle JET Hybrid Mobile Apps Easy to create (ojet create ) Cordova enables easy integration with Device Easy integration with Oracle Mobile Cloud Service Oracle Mobile Cloud Service Backend for APIs and other resources for your (set of) app(s). Access to platform API s such as Security / Storage / Users / Push Oracle Offline Persistence Toolkit Provides Data caching and Offline support

48 RESOURCES FixItFast sample application and documentation Persistence Toolkit on GitHub Recording of my Oracle Code Online session

49 lucbors.blogspot.com?

50

51