Phonegap introduction

1. Mobile Hybrid Application Development
using Phonegap
v. 1.0.0
Atilla Özgür
ati.ozgur@gmail.com
August 1, 2017

2. 1
Content
Presenter Introduction
Introduction
What is it?
Mobile Application Strategies
Advantages - Disadvantages
Advantages
Disadvantages
Installation
Install target platform SDK Tools
Command Line Interface (CLI)
Sample Application
Start
Phonegap Platform
Phonegap Build - Run
Development
Atilla Özgür | Hybrid App Dev usig Phonegap

3. 2
Resume
Summary
I consider myself, polyglot programmer, database developer, build
engineer and researcher. Although I graduated in 2003 from
Electrical Engineering, I started programming in 1991. I have 14
years of professional experience, with 6 years of Project Management
and Team Leading experience and 6 years of Database
Administration. I worked with different web application development
platforms and Database Systems. I have numerous Microsoft
certifications (MCPD,MCSD,MCT). I am certified in Oracle (OCA 11g)
and SQL Server (2000-2008) Databases. I hold a PHD degree in
Electrical Engineering. My thesis is about Machine Learning,
Optimization and Intrusion Detection Systems.
Atilla Özgür | Hybrid App Dev usig Phonegap

4. 3
Resume
Education
Middle East Technical University, BS Completed, Electrical
Engineering - Computer Option, 10-1995-06 2003
Atılım University, Master Completed, Computer Engineering, 10
2004-06 2007
Middle East Technical University, Master Incomplete, Medical
Informatics, 10 2005-06 2008
Ba¸skent University, PHD Completed, Electrical Engineering, 08
2007-06-2017
Atilla Özgür | Hybrid App Dev usig Phonegap

5. 4
Resume
Employment History
Database Administrator and Software Team Lead, Turkish Labor
Agency 07 2011-NOW
Software Developer and Build Engineer, Milsoft 05 2010-
07-2011
Senior Software Developer Tilda Telekom 10 2009-05 2010
Software Trainer Freelance 06 2009-10 2009
Software Team Lead Turksat 07 2008-06 2009
Software Team Lead Simetri 09 2006-04 2008
Software Trainer Netsoft 10 2005-12 2006
Senior Software Developer Kale Yazılım 10 2004-10-2005
Software Developer Veripark 06 2003-10 2004
Atilla Özgür | Hybrid App Dev usig Phonegap

6. 5
Resume
Professional Certifications
OCA - Oracle Database 11g Administrator Certified Associate ,
2010
Microsoft Certified Professional Developer , Asp.Net Developer
3.5
Microsoft Certified IT Professional Database Developer , 2008,
(Early Achiever, Beta Exam)
Microsoft Certified Trainer (MCT) , Microsoft, 2005
Microsoft Certified Solution Developer (MCSD) for Microsoft
.NET , Microsoft, 2005
MCAD (Microsoft Certified (Web) Application Developer),
Microsoft, 2004
Atilla Özgür | Hybrid App Dev usig Phonegap

7. 6
TODO
TODO?
Mobile ISKUR app vs Mobile Site resim ekle
Atilla Özgür | Hybrid App Dev usig Phonegap

8. 7
Introduction
What is it?
Phonegap/Apache Cordova is a popular framework for hybrid
mobile application
Apache cordova is open source version. Adobe phonegap is
build upon cordova and add some additional services. For
purposes of this tutorial they are almost same.
use web application skills (javascript/css/html) to create mobile
hybrid applications
Atilla Özgür | Hybrid App Dev usig Phonegap

9. 8
Introduction
Introduction
Mobile Application Strategies?
Native
Android (Java or Koplin)
IOS (Objective-C or Swift)
Atilla Özgür | Hybrid App Dev usig Phonegap

10. 8
Introduction
Introduction
Mobile Application Strategies?
Native
Android (Java or Koplin)
IOS (Objective-C or Swift)
Compile/Transpile Code to Native
Xamarin (C#)
Delphi (Pascal)
Atilla Özgür | Hybrid App Dev usig Phonegap

11. 8
Introduction
Introduction
Mobile Application Strategies?
Native
Android (Java or Koplin)
IOS (Objective-C or Swift)
Compile/Transpile Code to Native
Xamarin (C#)
Delphi (Pascal)
Hybrid
Mobile Website packaged using native tools
Uses web technologies
javascript/HTML/CSS
Atilla Özgür | Hybrid App Dev usig Phonegap

12. 9
Advantages - Disadvantages
Advantages?
Mobile site and mobile application used almost 90-95% same
code base
Your developer pool is larger
You do not need to train for different platforms
Testing is reduced for different platforms
Faster to market
Atilla Özgür | Hybrid App Dev usig Phonegap

13. 10
Advantages - Disadvantages
Disadvantages?
Mobile site packaged for native.
Even less savvy users understand difference in GUI
Slower than native generally
Atilla Özgür | Hybrid App Dev usig Phonegap

14. 11
Installation
Install target platform SDK Tools
Target Platform Hello World Application
Phonegap or cordova needs SDK tools to work properly.
Before starting with phonegap create a hello world application
using GUI tools in your target platform.
Atilla Özgür | Hybrid App Dev usig Phonegap

15. 11
Installation
Install target platform SDK Tools
Target Platform Hello World Application
Phonegap or cordova needs SDK tools to work properly.
Before starting with phonegap create a hello world application
using GUI tools in your target platform.
Android
Install Android Studio and SDK Tools.
should be able to use sdkmanager.bat from command line
IOS (IPhone/IPad)
Install XCode
XCode Command Line Tools.
Atilla Özgür | Hybrid App Dev usig Phonegap

16. 12
Installation
Command Line Interface (CLI)
Javascript and nodejs
install nodejs and node package manager (npm).
Atilla Özgür | Hybrid App Dev usig Phonegap

17. 12
Installation
Command Line Interface (CLI)
Javascript and nodejs
install nodejs and node package manager (npm).
CLI
npm install -g phonegap.
Atilla Özgür | Hybrid App Dev usig Phonegap

18. 13
Sample Application
Start
phonegap create my-example
Atilla Özgür | Hybrid App Dev usig Phonegap

19. 14
Sample Application
Start
config.xml
hooks
README.md
platforms
plugins
www
css
index.css
icon.png
img
logo.png
index.html
js
index.js
res
icon
screen
Atilla Özgür | Hybrid App Dev usig Phonegap

20. 15
Sample Application
Phonegap Serve
phonegap serve
Atilla Özgür | Hybrid App Dev usig Phonegap

21. 15
Sample Application
Phonegap Serve
phonegap serve
Atilla Özgür | Hybrid App Dev usig Phonegap

22. 16
phonegap platform
phonegap platform
Atilla Özgür | Hybrid App Dev usig Phonegap

23. 16
phonegap platform
phonegap platform
Installed platforms:
Available platforms: amazon-fireos, android, blackberry10, brows
Atilla Özgür | Hybrid App Dev usig Phonegap

24. 17
phonegap platform
add android
phonegap platform add android
Atilla Özgür | Hybrid App Dev usig Phonegap

25. 17
phonegap platform
add android
phonegap platform add android
Creating android project...
Creating Cordova project for the Android platform:
Path: platforms/android
Package: com.phonegap.helloworld
Name: Hello World
Android target: android-19
Copying template files...
Project successfully created.
Atilla Özgür | Hybrid App Dev usig Phonegap

26. 18
phonegap platform
add android
tree platforms/android/ -L 1
Atilla Özgür | Hybrid App Dev usig Phonegap

27. 18
phonegap platform
add android
tree platforms/android/ -L 1
AndroidManifest.xml
assets
build.gradle
cordova
CordovaLib
custom_rules.xml
libs
platform_www
project.properties
res
settings.gradle
src
Atilla Özgür | Hybrid App Dev usig Phonegap

28. 19
phonegap build
android
phonegap build android
Atilla Özgür | Hybrid App Dev usig Phonegap

29. 19
phonegap build
android
phonegap build android
[phonegap] executing ’cordova build android’...
[phonegap] completed ’cordova build android’
Atilla Özgür | Hybrid App Dev usig Phonegap

30. 20
phonegap run
android
phonegap run android
Atilla Özgür | Hybrid App Dev usig Phonegap

31. 20
phonegap run
android
phonegap run android
Atilla Özgür | Hybrid App Dev usig Phonegap

32. 21
Development
HTML5
phonegap development is almost same as any web application
development.
almost all HTML5 technologies are supported in mobile
browsers.
Atilla Özgür | Hybrid App Dev usig Phonegap

33. 22
Development
javascript/css/html
HTML5 audio/video
Web Workers (Background threads)
Drag and Drop
Web Sockets (Real Time communications)
offline storage
Camera API
Canvas
WebGL (3D graphics)
Geolocation
touch events
Atilla Özgür | Hybrid App Dev usig Phonegap

34. 23
Development
phonegap plugins
if HTML5 is not enough or slow, use phonegap plugins.
2519 plugins as of 2017-08-01
Atilla Özgür | Hybrid App Dev usig Phonegap

35. 23
Development
phonegap plugins
if HTML5 is not enough or slow, use phonegap plugins.
2519 plugins as of 2017-08-01
maps
geolocation
Push notification
device
inappbrowser
...
Atilla Özgür | Hybrid App Dev usig Phonegap

36. Thank you for Listening!
Any Questions?