Hybrid mobile apps are combination of online web application and native application which is usually web browser wrapper for web application. This concept is commonly used to expose native resources of mobile device to web application and to skip developing web application from scratch as native app. But what to do when Android has no access to web application server? Can you deploy also Java web application to Android device to work offline? In this presentation we will share our experience with building small Java servlet server and with deploying Java servlet application to work on Android. Does it work ok? Are there any limits? Find answers on this presentation.

1. Hibridne aplikacije -
Upogonite Java web aplikaciju
na Androidu da radi offline
Matija TomaškovićMatija Tomašković
Daniel Strmečki
POSLOVNE WEB APLIKACIJE13.05.2014.

2. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
Java web aplikacije - arhitektura
Web browser Web application server Database
SQL
Java
Servlet
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr2 | 13.05.2014.
SQL
DB
Java
web app
WAR
Servlet
server

3. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
KORAK 1 - prilagodba dizajna
Desktop Mobile
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr3 | 13.05.2014.
Ne zaboraviti: responsive design / CSS

4. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
APK
KORAK 2 – pakiranje linka
WebView
Icon Name URL
Web application server
Servlet
server
Java
web app
WAR
SQL
DB
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr4 | 13.05.2014.
WebView server
WAR
DB

5. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
KORAK 2 – pakiranje linka
Android SDK Tools
android update project
Apache Ant
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr5 | 13.05.2014.
Android Base Wrapper
Apache Ant
ant clean ant release

6. DEMO
Pakiranje linka
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr
Pakiranje linka

7. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
APK
KORAK 3 – izlaganje native funkcionalnosti
WebView
Icon Name URL
Web application
Servlet
server
Java
web app
WAR
SQL
DB
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr7 | 13.05.2014.
WebView
JavaScript proxy
Native features
server
WAR
DB

8. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
KORAK 3 – izlaganje native funkcionalnosti
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr8 | 13.05.2014.

9. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
APK
KORAK 4 – offline deployment
WebView
Icon Name URL
Web application
Servlet
server
Java
web app
WAR
SQL
DB
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr9 | 13.05.2014.
WebView
JavaScript proxy
Native features
server
WAR
DB

10. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
APK
KORAK 4 – offline deployment
WebView
Icon Name URL
Servlet
server
Java
web app
WAR
SQL
DB
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr10 | 13.05.2014.
WebView
JavaScript proxy
Native features
server
WAR
DB
SYNC sa online
sustavom

11. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
KORAK 4 – offline deployment
implements
/
extends
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr11 | 13.05.2014.

12. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
KORAK 4 – offline deployment
Instancira EF
AppServlet
Binda listening
socket
Context path
"/evolution_framework"
Webapp dir
Započinje
listening loop
Instancira
ServletConfig
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr12 | 13.05.2014.
Create ServletContext
instance
listening loop

13. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
KORAK 4 – offline deployment
Starta thread
Referenca na
input/output
Instanca
HttpServletRequest
Instanca
HttpServletResponse
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr13 | 13.05.2014.
Čita HTTP request:
GET/POST line, HTTP
header, content
input/output
socket streams
a) šalje
resource file
b) poziva servlet
doGet/doPost
Servlet piše u
ServletOutputStream
Šalje HTTP header i
content

14. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
Offline webapp wrapper – on desktop
Priprema Java web aplikacije
compile & create JAR
Java classes & EF modules
zip EF java web app
copy app package
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr14 | 13.05.2014.
EF Offline Wrapper Builder
android update project
SDK Tools & Ant
add to base wrapper
ant clean, ant release
zip EF java web app
Android Base Wrapper

15. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
JARs
APK
build
create
copy
classpath
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr15 | 13.05.2014.
APK
Assets
copy
build
deploy
zip
copy

16. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
Offline webapp wrapper – on Android device
Kopiranje APK na Android Web app funkcionira offline
Samo
Ako nije
pokrenut
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr16 | 13.05.2014.
Instalacija APK
Poketanje EF mobile wrapper app Unzip EF web app
Start servlet server
Samo
inicijalno

17. DEMO
Offline Java web aplikacija
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr
Offline Java web aplikacija

18. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
Zaključak
bazirani na istom engine, Chromium od Android 4.4., HTML 5 support
WebView je po defaultu ograničen, potrebno ga je podesiti prema potrebama
za rad sa učitavanjem stranica, formama – koristiti WebViewClient
za napredniji rad sa JS i eventima – koristiti WebChromeClient
pure Java baza: HSQLDB
WebView vs Chrome
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr18 | 13.05.2014.

19. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
Zaključak
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr19 | 13.05.2014.

20. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
Zaključak
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr20 | 13.05.2014.

21. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
Zaključak
<button type="button" value="someValue"
JS -> Java
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr21 | 13.05.2014.
<button type="button" value="someValue"
onclick="window.ok.performClick(this.value);">OK</button>
Java -> JS

22. HIBRIDNE APLIKACIJE - UPOGONITE JAVA WEB APLIKACIJU NA ANDROIDU DA RADI OFFLINE
Zaključak
bolja ergonomija pokretanja
prisutnost na marketu
izbjegava se dupli razvoj istih funkcionalnosti u web i native mobile obliku
(barem duplo) manji troškovi razvoja
manji potrebni know-how
moguće je napraviti native wrappere za više platformi, iskoristive za više web aplikacija
mogu se iskoristiti native funkcionalnosti uređaja
može se iskoristiti snagu HTMLa(5), JavaScripta, CSSa
ZA HIBRIDNE APLIKACIJE:
POSLOVNE WEB APLIKACIJE | info@evolva.hr | www.evolva.hr22 | 13.05.2014.
može se iskoristiti snagu HTMLa(5), JavaScripta, CSSa
mogući offline deployment Java web aplikacija na Androidu
PROTIV:
performanse
ergonomske prilagodbe / responsive design
drag'n'drop
doubleclick
treba napisati native wrapper
za offline aplikacije staviti u pogon (svoj/3rd party) Android servlet server

23. Hvala na pažnji
www.evolva.hr
info@evolva.hr
POSLOVNE WEB APLIKACIJE