Cordova

#cordova

1

1: 2

2

Examples 2

2

2

2

3

3

3

3

3

Windows Cordova 3

7

2: Android iOS 8

Examples 8

phonegap-plugin-push 8

3: Apache Cordova Visual Studio 11

Examples 11

Visual Studio Apache Cordova 11

Visual Studio Apache Cordova 11

4: Cordova 5 Android 12

Examples 12

.apk . 12

5: Cordova CLI . 13

Examples 13

13

iOS 14

6: Firebase 15

Examples 15

Cordova Firebase Push Notification 15

Cordova Firebase 15

7: Google Analytics in Cordova 18

Examples 18

Google . 18

8: 19

Examples 19

cordova-plugin-network-information 19

9: / 20

Examples 20

plugman cordova / 20

10: 21

21

Examples 21

USB Android 21

GapDebug Cordova 21

USB iOS 21

11: www 23

Examples 23

(android / ios) CSS / 23

12: 24

24

Examples 24

Android (.apk) 24

13: 27

27

27

Examples 27

HelloWorld Project 27

14: 29

Examples 29

. 29

15: : , , 31

Examples 31

? 31

Cordova ? 31

31

31

16: 33

33

Examples 33

33

34

You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: cordova

It is an unofficial and free Cordova ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official Cordova.

The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to info@zzzprojects.com

https://riptutorial.com/ko/home 1

1: Apache Cordova HTML, CSS JS .

Apache Cordova .

Apache Cordova .

Cordova HTML / JavaScript . API .

Apache Cordova ?

.1.

.2.

API WebView ( ) WebView .3.

Cordova : https://cordova.apache.org/docs/en/latest/

Examples

cordova .

Node.js . node npm .

Node CLI ( ). Windows Windows , MAC . :

$ node -v

v0.10.35 . Node OS : https://nodejs.org/en/download/package-manager/

•

1.

( ) git . git . CLI git repo URL .2.

Node.js npm cordova . cordova npm .3.

OS X Linux :

$ sudo npm install -g cordova

Windows :

C:\>npm install -g cordova

-g npm cordova . node_modules .

cordova .

https://riptutorial.com/ko/home 2

Cordova cli . $ npm install -g cordova

. $ cd /path/to/coding/folder

$ cordova create <appProjectName> <appNameSpace> <appName>

'HelloWorld' . $ cordova create helloWorld com.example.helloworld HelloWorld

. $ cd <appName>

. . $ cordova platform add <platformList>

Android, iOS . . browser . --save Cordova config.xml .

$ cordova platform add android ios browser --save

platform cordova .

Cordova , OS . plugin .

$ cordova plugin add <plugins.value>

( ) .

$ cordova plugin add cordova-plugin-file cordova-plugin-camera --save

: --save config.xml . .

Cordova . .

. . $ cordova run <platform name>

, . $ cordova run browser

.

Windows Cordova

, Java SE Development Kit

https://riptutorial.com/ko/home 3

, . Java SE Development Kit . Java SE .

JDK JDK JAVA_HOME .

PATH JDK bin

.

javac -version

!

Android Studio Android SDK

Android Android Studio . :

Android (Android SDK, Android SDK , Android SDK , Android SDK )••

IDE (Java Android )••

Java Java Android .•

developer.android.com Android Studio .

Android Studio . Android SDK .

Android Studio Android SDK ANDROID_HOME .

https://riptutorial.com/ko/home 4

PATH Android SDK Android SDK . PATH . .

C:\Users\User\AppData\Local\Android\sdk;C:\Users\User\AppData\Local\Android\sdk\tools;C:\Users\User\AppData\Local\Android\sdk\platform-tools;

https://riptutorial.com/ko/home 5

.

adb version

Android Debug Bridge . !

.

android

Android SDK

https://riptutorial.com/ko/home 6

Android SDK .

Android SDK •Android SDK •Android SDK •Android SDK •Android 6.0 (API 23)•Android 5.1.1 (API 22)•Android 5.0.1 (API 21)•Android 4.2.2 (API 17)•GPU •Android •Android •Google Play •Google •Google USB •Intel x86 (HAXM )•

.

:

Android API

Android API

Android / API

Cordova

npm install -g cordova

:

6.1.0 - https://cordova.apache.org/news/2016/03/23/tools-release.html 6.0.0 - https://cordova.apache.org/news/2016/01/28 /tools-release.html

Android iOS

Cordova Android 5.2.2 - https://cordova.apache.org/announcements/2016/07/02/android-5.2.0.html Cordova iOS 4.2.1 - https://cordova.apache.org/announcements/2016 /07/11/cordova-android-5.2.1.html

: https://riptutorial.com/ko/cordova/topic/884/-

https://riptutorial.com/ko/home 7

2: Android iOS

Examples

phonegap-plugin-push

. . " " .

:

Google 1.

Google . .

Google Cloud Messaging API ( )2.

-> Google Cloud Messaging -> . API .

:

cordova plugin add https://github.com/phonegap/phonegap-plugin-push --variable SENDER_ID="XXXXXXX"

SENDER_ID ID .

index.js receivedEvent .

https://riptutorial.com/ko/home 8

var push = PushNotification.init({ android: { senderID: "XXXXXX" }, ios: { alert: "true", badge: "true", sound: "true" }, windows: {} }); push.on('registration', function(data) { console.log("device token: " + data.registrationId); }); push.on('notification', function(data) { console.log(data.message); console.log(data.title); console.log(data.count); console.log(data.sound); console.log(data.image); console.log(data.additionalData); }); push.on('error', function(e) { console.log(e.message) });

Android iOS .

: .

.

Android : , API .

https://riptutorial.com/ko/home 9

Android iOS : https://riptutorial.com/ko/cordova/topic/6181/android--ios--

https://riptutorial.com/ko/home 10

3: Apache Cordova Visual Studio

Examples

Visual Studio Apache Cordova

-> Visual Studio 2015 .1.

Visual Studio .2.

HTML / JavaScript (Apache Cordova) .3.

Visual Studio Apache Cordova

Visual Studio -> .1. . Visual Studio Tools for Apache .2.

Apache Cordova Visual Studio : https://riptutorial.com/ko/cordova/topic/2393/apache-cordova--visual-studio-

https://riptutorial.com/ko/home 11

4: Cordova 5 Android

Examples

.apk .

.

keytool -genkey -v -keystore example.keystore -alias example -keyalg RSA -keysize 2048 -validity 10000

1.

: . .

keystore release / dev build.json .

{ "android": { "debug": { "keystore": "..\android.keystore", "storePassword": "android", "alias": "mykey1", "password" : "password", "keystoreType": "" }, "release": { "keystore": "..\android.keystore", "storePassword": "", "alias": "mykey2", "password" : "password", "keystoreType": "" } } }

2.

Cordova / Ionic --buildConfig .

cordova build android --release --buildConfig=build.json

3.

ionic build android --release --buildConfig=build.json

.

/platforms/android/build/outputs/apk/android-release.apk

Cordova 5 Android : https://riptutorial.com/ko/cordova/topic/3061/cordova-5-android--

https://riptutorial.com/ko/home 12

5: Cordova CLI .

Examples

1 :

cordova build --release android

\ platform \ android \ build \ outputs \ apk apk .

android-release-unsigned.apk

2 : APK

:

keytool -genkey -v -keystore <keystoreName>.keystore -alias <Keystore AliasName> -keyalg <Key algorithm> -keysize <Key size> -validity <Key Validity in Days>

:

keytool -genkey -v -keystore ExampleApp.keystore -alias TestExampleApp -keyalg RSA -keysize 2048 -validity 10000 keystore password? : xxxxxxx What is your first and last name? : xxxxxx What is the name of your organizational unit? : xxxxxxxx What is the name of your organization? : xxxxxxxxx What is the name of your City or Locality? : xxxxxxx What is the name of your State or Province? : xxxxx What is the two-letter country code for this unit? : xxx

ExampleApp.keystore .

3 : \ platforms \ android \ build \ outputs \ apk .

\ platforms \ android \ build \ outputs \ apk jarsigner .

:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore <keystorename <Unsigned APK file> <Keystore Alias name>

:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore ExampleApp.keystore android-release-unsigned.apk TestExampleApp

https://riptutorial.com/ko/home 13

apk .

4 : APK .

zipalign -v 4 android-release-unsigned.apk android.apk

zipalign \ Android \ sdk \ build-tools \ 23.0.3 \ zipalign .

android.apk apk .

iOS

1 : build.json .

build.json

{ "ios": { "debug": { "codeSignIdentity": "iPhone Developer", "provisioningProfile": "your-developer-provisioning-profile-UUID-here" }, "release": { "codeSignIdentity": "iPhone Distribution", "provisioningProfile": "your-distribution-provisioning-profile-UUID-here" } } }

: UUID .mobileprovision 'UUID' .

2 : .

cordova build ios --device --release

Cordova CLI . : https://riptutorial.com/ko/cordova/topic/7092/cordova-cli----

https://riptutorial.com/ko/home 14

6: Firebase

Examples

Cordova Firebase Push Notification

Android Firebase

Firebase

Firebase Firebase Firebase .

Firebase Firebase . Google Google . .1. Android Firebase . Google .2. . . .Firebase .

3.

google-services.json . . ( app /) .4.

Cordova Firebase

https://www.npmjs.com/package/cordova-plugin-fcm

.

FCMPlugin.getToken( function(token){ alert(token); }, function(err){ console.log('error retrieving token: ' + err); } );

:

FCMPlugin.onNotification( function(data){ if(data.wasTapped){ //Notification was received on device tray and tapped by the user. alert( JSON.stringify(data) ); }else{ //Notification was received in foreground. Maybe the user needs to be notified. alert( JSON.stringify(data) ); } }, function(msg){ console.log('onNotification callback successfully registered: ' + msg); }, function(err){ console.log('Error registering onNotification callback: ' + err);

https://riptutorial.com/ko/home 15

} );

receivedEvent get.js get .

REST API

//POST: https://fcm.googleapis.com/fcm/send //HEADER: Content-Type: application/json //HEADER: Authorization: key=AIzaSyAMMh0mdVIRXPcBejyatAtdZgmklepwoNs //key is server-key { "notification":{ "title":"Notification title", //Any value "body":"Notification body", //Any value "sound":"default", //If you want notification sound "click_action":"FCM_PLUGIN_ACTIVITY", //Must be present for Android "icon":"fcm_push_icon" //White icon Android resource }, "data":{ "param1":"value1", /Any data to be retrieved in the notification callback "param2":"value2" }, "to":"eRImo7algBM:APA91bHSxSOdmgsOi9su_XytEtCbei0Zi0ODgm76VHvbqeb-WPoZcLyNVpnaLWPLw7U1u93hO0ZhtBxn_hVGxPAwxXXfc-yNy6_kkfzUdTpcI2QPB0vzJBmOFzX3RRZ15wmFkCUFtyhc", //Topic or single device "priority":"high", //If not set, notification won't be delivered on completely closed iOS app "restricted_package_name":"com.zensar.fcm" //Optional. Set for application filtering }

Postman rest client REST API .

https://riptutorial.com/ko/home 16

.

1. : . . JavaScript . '

1.b : . . JavaScript . '

Firebase : https://riptutorial.com/ko/cordova/topic/6892/firebase---

https://riptutorial.com/ko/home 17

7: Google Analytics in Cordova

Examples

Google .

index.js analytics .

function analytics(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','lib/analytics.js','ga'); if(window.localStorage) { ga('create', 'UA-XXXXXXX-1', { 'storage': 'none' , 'clientId': window.localStorage.getItem('ga_clientId') /*The tracker id obtained from local storage*/ }); ga(function(tracker) { window.localStorage.setItem('ga_clientId', tracker.get('clientId')); /*The tracker id for each device is different and stored in local storage*/ }); } else { ga('create', 'UA-XXXXXXX-1', 'auto'); } }

HTML .

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','lib/analytics.js','ga'); ga('set','checkProtocolTask',null); /*checkProtocal Task is set to null so that GA allows tracking other than http/https */ ga('set', 'page', "Page Name"); /*Page Name is name of each html page*/ ga('send', 'pageview'); </script>

Google Analytics in Cordova : https://riptutorial.com/ko/cordova/topic/6909/google-analytics-in-cordova

https://riptutorial.com/ko/home 18

8:

Examples

cordova-plugin-network-information

. cordova-plugin-network-information plugin .

.

cordova plugin add cordova-plugin-network-information

navigator.connection . type .

document.addEventListener("deviceready", function() { var networkState = navigator.connection.type; }, false);

networkState .

Connection.UNKNOWN // Unknown connection Connection.ETHERNET // Ethernet connection Connection.WIFI // WiFi connection Connection.CELL_2G // Cell 2G connection Connection.CELL_3G // Cell 3G connection Connection.CELL_4G // Cell 4G connection Connection.CELL // Cell generic connection Connection.NONE // No network connection

online offline .

document.addEventListener("online", function() { // device went online var networkState = navigator.connection.type; // Get new network state ... }, false); document.addEventListener("offline", function() { // device went offline var networkState = navigator.connection.type; // Get new network state ... }, false);

: https://riptutorial.com/ko/cordova/topic/3615/----

https://riptutorial.com/ko/home 19

9: /

Examples

plugman cordova /

plugman cordova / .

npm install -g plugman

:

plugman <install|uninstall> --platform <ios|android|blackberry10|wp8> --project <directory> --plugin <name|url|path>

:

plugman install --platform ios --project platforms/ios/ --plugin plugins/cordova-plugin-test/

.

/ : https://riptutorial.com/ko/cordova/topic/7506/-------

https://riptutorial.com/ko/home 20

10: OnDeviceReady ( Visual Studio C # ). ).

, .

DeviceReady setTimeout .

Examples

USB Android

Cordova WebView . . Chrome .

USB ( )1. Android Debug Bridge adb ( Chrome ) ( OSX )2. adb devices ( ), ok Allow USB debugging? .3. Chrome 4. chrome://inspect More tools => Inspect Devices ... .5. Chrome .6.

USB .

' ' .

GapDebug Cordova

https://www.genuitec.com/products/gapdebug/

GapDebug . Windows Mac GapDebug iOS Android PhoneGap Cordova . , GapDebug .

.

https://www.genuitec.com/products/gapdebug/learning-center/configuration/

USB iOS

1.

Safari . .

2.

Safari .

Safari 3.

https://riptutorial.com/ko/home 21

Safari . .

Web Inspector 4.

iOS . USB . Safari .

.

: https://riptutorial.com/ko/cordova/topic/4004/--

https://riptutorial.com/ko/home 22

11: www

Examples

(android / ios) CSS /

css / js . . (android / ios ..) . css / js css / js . js / css .

: www / index.html CSS / j . .

//let say you are in CordovaMergesExample folder cd CordovaMergesExample //create test folder with com.test id and TestApp as name cordova create test com.test TestApp //add platform android and ios cordova platform add android ios ---------- //create merges/android/css/override.css and merges/ios/css/override.css ---------- //In root www/index.html add this stylesheet <link rel="stylesheet" type="text/css" href="css/override.css" /> ---------- cordova build ---> cordova build engine automatically identify the platform in merges folder and add files in respective folders. Check platforms/android/assets/www/css and platforms/ios/www/css

www : https://riptutorial.com/ko/cordova/topic/7498/----www----

https://riptutorial.com/ko/home 23

12: Apache Cordova . HTML5, CSS3 JavaScript .

Examples

Android (.apk)

npm install -g cordova cordova .

cordova -version cordova .

ANDROID_HOME JAVA_HOME .

:

ANDROID_HOME = / home / geethu / android-sdk-linux .

export PATH = $ PATH : $ ANDROID_HOME / tools : $ ANDROID_HOME / platform-tools

export JAVA_HOME = / usr / lib / jvm / java-7-openjdk-amd64

export PATH = $ PATH : $ JAVA_HOME / bin

Cordova . .

cordova workshop com.yourname.workshop .

Cordova CLI workshop Workshop Cordova .

cd workshop .

cordova Android Android .

[

https://riptutorial.com/ko/home 24

] 1

index.html .

<script type = "text/javascript" src = "cordova.js"></script>

www config.xml .

workshop / platforms / android

cordova

https://riptutorial.com/ko/home 25

USB Android .

> Cordova .apk 1.

.apk .

cordova plugin add cordova-plugin-mfp

.

mfpdev server add

CLI . .

mfpdev app config server <profile Name of server> cordova build

.apk

/ platforms / android

apk .

: https://riptutorial.com/ko/cordova/topic/9287/-

https://riptutorial.com/ko/home 26

13: cordova . . . Mac . No ios , Mac Mac .

.

ios . .

Examples

HelloWorld Project

ios . .

cordova create hello com.example.hello "HelloWorld"

cd hello .

.

cordova platform ls

ios , ios .

cordova platform add ios@version => put the desired version you want to add. cordova platform add ios@latest. => add the latest version available.

ios Mac Xcode .

Xcode . xcode .

Xcode Xcode cli .

xcode-select --install

cli . ios . .

npm install -g ios-deploy

sudo .

sudo npm install -g ios-deploy

ios .

cordova platform add ios

https://riptutorial.com/ko/home 27

.

cordova prepare => it will move the all required files to platform folder and create a .xcworkspace file in the platform.ios folder. cordova build ios => to build the ios application.

, .

.

CLI 1.

Xcode 2.

CLI .

corodva run ios => it will run the application on the default simulator available.

cordova emulator cordova emulator

Xcode

/platform/ios folder . .xcworkspce open <ProjectName>.xcworkspcae : open MyApp.xcworkspcace.

Xcode . , , .

.

: https://riptutorial.com/ko/cordova/topic/10666/--

https://riptutorial.com/ko/home 28

14:

Examples

.

.

.

Cordova Camera Plugin - https://github.com/apache/cordova-plugin-camera1.

Cordova Crop Image Plugin - https://github.com/jeduan/cordova-plugin-crop2.

Camera Plugin Camera Plugin Code Cop Image Plugin Code Crop Image Plugin .

/*Camera Plugin Code*/ navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI }); function onSuccess(imageData) { console.log(imageData); /*Crop Image Plugin Code*/ plugins.crop(function success (data) { console.log(data); var image = document.getElementById('myImage'); image.src = data; }, function fail () { }, imageData, {quality:100}); } function onFail(message) { alert('Failed because: ' + message); }

https://riptutorial.com/ko/home 29

: https://riptutorial.com/ko/cordova/topic/7078/---

https://riptutorial.com/ko/home 30

15: : , ,

Examples

?

.

.

Cordova ?

Cordova .

JavaScript .

cordova plugin add <plugin-name>

: cordova plugin add cordova-plugin-camera

.

:

www www . www www .

:

. Cordova .

cordova-plugin-battery-status - .1.

cordova-plugin-camera - API .2.

cordova-plugin-contacts - .3.

cordova-plugin-device - .4.

cordova-plugin-device-motion - .5.

cordova-plugin-file - / File API .6.

cordova-plugin-geolocation - .7.

cordova-plugin-globalization - , .8.

cordova-plugin-inappbrowser - , . .9.

https://riptutorial.com/ko/home 31

cordova-plugin-network-information - Wi-Fi .10.

cordova-plugin-vibration - .11.

cordova-plugin-statusbar - iOS Android StatusBar .12.

cordova-plugin-whitelist - Cordova 4.0 webview . !13.

cordova https://cordova.apache.org/plugins/ .

: , , : https://riptutorial.com/ko/cordova/topic/7077/----------

https://riptutorial.com/ko/home 32

16: cordova run android cordova run android cordova run android . Android adb devices Android (ADT) .

Examples

.

cordova create HelloWorld my.application.identifier AppName

.

HelloWorld •my.application.identifier ( )•AppName .•

.

cordova platform add android // and/or cordova platform add browser // and/or cordova platform add ios // On macOS only // etc…

.

cordova build // Build project for all platforms cordova build ios // Build project only for iOS platform cordova build android // Build project only for Android platform

.

cordova run android --emulator // Run Android app in emulator cordova run android --device // Run Android app on physical connected device cordova run browser // Will run the app in the browser

Eclipse, Xcode, Visual Strudio :

cordova prepare [platform_name] // Prepare copies of www folder and any plugins into the appropriate platform folder

: https://riptutorial.com/ko/cordova/topic/2396/----

https://riptutorial.com/ko/home 33

S. No

Contributors

1Akash Pal, Community, Hitesh Riziya, Michiel, Mikhail, ModusPwnens

2 Android iOS Akash Pal

3Apache Cordova Visual Studio

Charitha Goonewardena

4 Cordova 5 Android Aditya Singh

5 Cordova CLI . Akash Pal

6 Firebase Akash Pal

7Google Analytics in Cordova

Akash Pal

8 Philip Bijker

9 / Rahul Raghuvanshi

10Akash Pal, Alex Filatov, Alexus, Devid Farinelli, mike nelson, Philip Bijker

11 www Rahul Raghuvanshi

12 sparrowTrajon

13 Akash Pal

14 : , , Akash Pal, Hristo Eftimov

15Devid Farinelli, grgarside, Hristo Eftimov, James Wong, Philip Bijker, ProllyGeek

https://riptutorial.com/ko/home 34