• Home

  • Documents

  • Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap...
41
Mobile Development June’2015, TEIATH, Greece

Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Embed Size (px)

Citation preview

Page 1: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Mobile DevelopmentJune’2015, TEIATH, Greece

Page 2: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Presentation Overview

1. Introduction

2. Mobile Application Development

3. Cordova / Phonegap

4. Development Framework

5. Examples

Page 3: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

1. INTRODUCTION

Page 4: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Introduction

• The world is going mobile

• Desktop sales are minimal

• Laptop sales are stable

• Smartphone sales are growing

• New types of hardware for mobility is appearing

Page 5: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

A new connected mobile era

Number of Connected Devices App Downloads

Page 6: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Motivations

• Most companies want a presence in the mobile world

• Market demands

– Product must have a mobile app

– App sales are increasing all over the world

– Internet of things

Page 7: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

2. MOBILE APPLICATION DEVELOPMENT

Page 8: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Mobile Application Development Landscape

• Many operating systems– Android, iOS, Windows Phone,

Bada, Firefox ,etc.

• Many devices– Phone, tablet, etc.

Page 9: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Mobile Application Development Landscape

• Many programming languages

– Java

– Objective-C, Swift

– C#, JavaME, etc.

• Fast changing landscape

– New OS versions

– New operating systems

– New features (NFC), etc.

Page 10: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Mobile Application Development Landscape

• Many development environments

– Android Studio

– XCode

– Visual Studio

Page 11: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Native Mobile Application Development

Advantages

• Performance

• Native look and feel

• Small footprint

• Access to hardware

Disadvantages

• Knowledge intensive– Front-end and back-end

• Expensive– To develop, to maintain

• Time consuming– To develop, to maintain

Page 12: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Hybrid Application Development

• Native libraries

• Common Interface

• Same code

OS 1 OS 2 OS 3

Interface 1 Interface 2 Interface 3

Common Interface

Code

Page 13: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Hybrid Application Development

• Combine native code with standard web technologies

• Offer a similar toolset

• Multiple platforms

• Code sharing

Page 14: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

3. CORDOVA / PHONEGAP

Page 15: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

What is Apache Cordova?

• Device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript

Page 16: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

What is Adobe Phonegap?

• Open-source mobile development framework

– Developed by Nitobi Software

– Bought by Adobe

• Enables building of mobile device applications using JavaScript, HTML and CSS

• Underlying PhoneGap there is Apache Cordova

• Others: Intel XDK, Appery.IO, appGyver Steroids, Iconic, etc.

Page 17: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Apache Cordova / Phonegap

• Can access hardware features– Accelerometer,

Camera,

– Compass, Geolocation,

– Storage, Media, Notification, Files

– Contacts, Barcodes,

– Etc…

– Many third-party extensions

Page 18: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

How does it work?

Page 19: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Phonegap

Advantages

• Cross-platform

• Single code base for all platforms: iOS, Android, WP 7 Mango, mobile web

• Possible to take advantage of distribution and integrated payment via App Store or Android Market

Disadvantages

• Poor performance if app is graphically intense, i.e. a game.

• Lack of pre-built UI widgets, transitions, standard controls, etc.

• For the most part a native app is much faster/smoother than mobile web app

Page 20: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Phonegap: Supported features by OS (May’2015)

FeatureiPhone

/iPhone 3GiPhone 3GS and newer

Android 1.0 – 4.4

Windows Phone

BlackBerry 10 and

PlayBook OS

BlackBerry OS 4.6–4.7

BlackBerry OS 5.0-6.0+

Bada Symbian webOS TizenUbuntu Touch

Firefox OS

Accelerometer

Yes Yes Yes Yes Yes N/A Yes Yes Yes Yes Yes Yes Yes

Camera Yes Yes Yes Yes Yes N/A Yes Yes Yes Yes Yes Yes Yes

Compass N/A Yes Yes Yes Yes N/A N/A Yes N/A Yes Yes Yes Yes

Contacts Yes Yes Yes Yes Yes N/A Yes Yes Yes N/A Yes N/A Yes

File Yes Yes Yes Yes Yes N/A Yes N/A N/A N/A Yes Yes N/A

Geolocation Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Media Yes Yes Yes Yes Yes N/A N/A N/A N/A N/A Yes Yes N/A

Network Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Notification (alert, sound, vibration)

Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Storage Yes Yes Yes Yes Yes N/A Yes N/A Yes Yes Yes Yes Yes

http://en.wikipedia.org/wiki/Apple_iOS
http://en.wikipedia.org/wiki/Apple_iOS
http://en.wikipedia.org/wiki/Android_(operating_system)
http://en.wikipedia.org/wiki/Windows_Phone
http://en.wikipedia.org/wiki/BlackBerry_10
http://en.wikipedia.org/wiki/BlackBerry_OS
http://en.wikipedia.org/wiki/BlackBerry_OS
http://en.wikipedia.org/wiki/Bada
http://en.wikipedia.org/wiki/Symbian
http://en.wikipedia.org/wiki/WebOS
http://en.wikipedia.org/wiki/Tizen
http://en.wikipedia.org/wiki/Ubuntu_Touch
http://en.wikipedia.org/wiki/Firefox_OS
http://en.wikipedia.org/wiki/Accelerometer
http://en.wikipedia.org/wiki/Camera
http://en.wikipedia.org/wiki/Compass
http://en.wikipedia.org/wiki/Contact_list
http://en.wikipedia.org/wiki/Geolocation
Page 21: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Alternatives to Phonegap

• Appcelerator Titanium

• Xamarin

• Rho

• Corona

• MoSync

Page 22: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

4. DEVELOPMENT FRAMEWORK

Page 23: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Phonegap Library

• PhoneGap is just a library that you must include in your app

– Couple of JavaScript and xml files

• What is PhoneGap doing?

– PhoneGap generates a out-of-the-browser window that executes the HTML and JavaScript

– Due to a couple of xml and jar/dllfiles it enables the usage of native APIs

Page 24: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Web Framework

• Based on standard technologies

• HTML5, CSS3 and JavaScript

• DOM manipulation?

– Jquery

• User Interface?

– Jquery Mobile, supported by W3C

Page 25: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Jquery Mobile: Page structure

<!DOCTYPE html>

<html>

<head> <title>Page Title</title> . . .

</head>

<body>

<section data-role="page">

<header data-role="header">

<h1>Some Title</h1>

</header>

<article data-role="content">

<h1>The Content</h1>

</article>

<footer data-role="footer">

<h1>Some Footer</h1>

</footer>

</section>

</body></html>

Page 26: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Jquery Mobile: Touch Events

• tap– After a quick, complete touch event

• taphold– After a held complete touch event

• swipe– Horizontal drag of 30px or more, within 1 second

• swipeleft– When a swipe event occurred moving in the left

• swiperight– When a swipe event occurred moving in the right

Page 27: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

JQM: ThemeRoller

Page 28: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Jquery Mobile: Demos

Page 29: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Some alternative Web Frameworks

• Ionic

• Mobile Angular UI

• Intel XDK

• Appcelerator Titanium

• Sencha Touch

• Kendo UI

Page 30: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

5. HANDS-ON

Page 31: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Frameworks setup: Instalation

• Install node.js (https://nodejs.org/)

• On command line:

– npm install –g phonegap

– Npm install –g plugman

https://nodejs.org/
Page 32: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Create App & Add platform

• Go the folder where you want your app:

– Phonegap create myapp com.home.myapp MyApp

• Enter the just created folder (myapp):

– Phonegap platform add android

– Phonegap platform add ios

Page 33: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Add plugins

• In the project folder:

– Phonegap plugin add org.apache.cordova.device

– Phonegap plugin add org.apache.cordova.console

Page 34: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Inside the project’s folder

• The www folder contains the HTML / JavaScript application.

• Inside the www folder there are other folders for specific app files.

• The platforms folder is where Cordova will build your application for different platforms (iOS, Android, etc). The contents of these folders are automatically generated by the Cordova CLI.

• Plugins are installed in the plugins directory.

• Application parameters (name, author, etc) are stored in config.xml.

Page 35: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Build & Run Application

• For Android, on the project folder– Phonegap build

– Phonegap run android

• For iOs, on the project folder– Phonegap build ios

– Npm install –g ios-sim (or sudo npm install –g ios-sim)

– Phonegap emulate ios

Page 36: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Debug

Computer

• On the project folder– Phonegap serve

Mobile Device

Page 37: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Distribute: Phonegap Build

Page 38: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Who is using Hybrid Application Frameworks?

Page 39: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

FINAL NOTES

Page 40: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Main References

• Apache Cordova– https://cordova.apache.org/

• Adobe Phonegap– http://phonegap.com/

– http://phonegap.com/about/artwork/

• Apache Cordova Tutorial– https://ccoenraets.github.io/cordova-tutorial/index.html

• JQueryMobile– https://jquerymobile.com/

https://cordova.apache.org/
http://phonegap.com/
http://phonegap.com/about/artwork/
https://ccoenraets.github.io/cordova-tutorial/index.html
https://jquerymobile.com/
Page 41: Apresentação do PowerPoint - teiath.gr · •Go the folder where you want your app: –Phonegap create myapp com.home.myapp MyApp •Enter the just created folder (myapp): –Phonegap

Thank you!

• Any questions?

• Luis Coelho ([email protected])


Phonegap Jeter

Phonegap Jeter

Documents
PhoneGap - Baidu

PhoneGap - Baidu

Documents
Introduction of phonegap installation and configuration of Phonegap with Android

Introduction of phonegap installation and configuration of Phonegap with Android

Mobile
13. What is PhoneGap - The PhoneGap History

13. What is PhoneGap - The PhoneGap History

Education
PhoneGap mobile development

PhoneGap mobile development

Technology
PhoneGap VS Appcelerator

PhoneGap VS Appcelerator

Technology
Crosswalk Project: Empower your PhoneGap App (PhoneGap Day EU 2016)

Crosswalk Project: Empower your PhoneGap App (PhoneGap Day EU 2016)

Technology
PhoneGap i

PhoneGap i

Documents
Beginning PhoneGap

Beginning PhoneGap

Technology
Introducing PhoneGap · Using PhoneGap to build an application Exploring the history of PhoneGap Exploring what you can build with PhoneGap Understanding the basics of a PhoneGap

Introducing PhoneGap · Using PhoneGap to build an application Exploring the history of PhoneGap Exploring what you can build with PhoneGap Understanding the basics of a PhoneGap

Documents
Dictionary by phoneGap

Dictionary by phoneGap

Mobile
Phonegap App Development

Phonegap App Development

Internet
Wrapping with PhoneGap

Wrapping with PhoneGap

Software
Oracle APEX & PhoneGap

Oracle APEX & PhoneGap

Technology
Node.js What is Node.js? - Gateway/400gateway400.org/documents/Gateway400/Handouts/nodejs2015.pdf · Bobby's node.js chroot hack proofing ... $ mkdir myapp $ cd myapp $ ls my1st.js

Node.js What is Node.js? - Gateway/400gateway400.org/documents/Gateway400/Handouts/nodejs2015.pdf · Bobby's node.js chroot hack proofing ... $ mkdir myapp $ cd myapp $ ls my1st.js

Documents
PhoneGap 2.1.0 Morelia

PhoneGap 2.1.0 Morelia

Documents
Phonegap Development

Phonegap Development

Documents
PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Technology
PhoneGap · Phonegap: A History 2010 - IBM joins Nitobi in developing PhoneGap. 2011 - Adobe acquires Nitobi and PhoneGap and at the same time PhoneGap is renamed to Cordova and donated

PhoneGap · Phonegap: A History 2010 - IBM joins Nitobi in developing PhoneGap. 2011 - Adobe acquires Nitobi and PhoneGap and at the same time PhoneGap is renamed to Cordova and donated

Documents
07 PhoneGap

07 PhoneGap

Technology
The Phonegap Architecture

The Phonegap Architecture

Technology
Phonegap Tutorial

Phonegap Tutorial

Documents
Imprimir - Phonegap _ Getting Started With Android PhoneGap in Eclipse

Imprimir - Phonegap _ Getting Started With Android PhoneGap in Eclipse

Documents
Phonegap android

Phonegap android

Technology
PhoneGap Lab

PhoneGap Lab

Technology
html5 & phonegap

html5 & phonegap

Technology
introducing PhoneGap

introducing PhoneGap

Documents
PhoneGap by Dissection

PhoneGap by Dissection

Software
PhoneGap: Local Storage

PhoneGap: Local Storage

Technology
PhoneGap 2014 & Beyond - PhoneGap Day EU 2015 (2015-05-18)

PhoneGap 2014 & Beyond - PhoneGap Day EU 2015 (2015-05-18)

Software