This document discusses Cordova, a framework for building hybrid mobile apps using HTML, CSS and JavaScript. It covers Cordova basics like plugins, the command line interface (CLI), and APIs for device features like the camera and push notifications. It provides steps to set up the Cordova development environment, build an Android app, and add plugins to access device functions and integrate Firebase push notifications. References for further reading on Cordova, plugins and related tools are also included.
7. 應⽤用程式架構
Cordova Application
Web App
HTML
CSSJS
config.xml
Resources
HTML Rendering
Engine (WebView)
Cordova
APIs
HTML
APIs
Cordova Plugins
Accelerometer Geolocation
Camera
Device
Contacts Storage
Network
Media
Custom PluginsCordova
Native APIs
Mobile OS
Service Input Sensors Graphics
OS APIs OS APIs
14. 創建 Cordova 專案
$ cordova create <PATH> <ID> <NAME>
• PATH the folder that will contain your project
• ID package identifier in reverse-domain style (optional)
• NAME display name of the app (optional)
15. 資料夾結構
• platforms platform specific projects (ex. an Eclipse project for Android, XCode for iOS
• plugins installed plugins (both JS files and native resources)
• www contains your HTML, JS, CSS files
• config.xml contains core Cordova API features, plugins, and platform-specific settings
16. Config.xml
The name of the app that we specified when creating the app
The app's starting page. It is placed inside the www directory
The plugins that are currently installed
Control access to external domains
Allows specific URLs to ask the app to open
The platforms for building the app
17. 創建 platforms
$ cordova platform add <PLATFORM_NAME>
If you do something like this:
cordova platform remove ios
you are removing a specific platform
• PLATFORM_NAME android, ios, wp8 …
18. Build the app
• PLATFORM_NAME android, ios, wp8 …
$ cordova build <PLATFORM_NAME>
If you do not specify the PLATFORM_NAME,
Cordova will build for all installed platforms
Build include command:
cordova prepare android
cordova compile android
19. Emulate/Run the app
The emulate command will run the app on a platform-specific emulator
The run command will run the app on a previously setup device (e.g.,
connected via USB and configured for being used as device for testing
purposes)
$ cordova emulate <PLATFORM_NAME>
If you do not specify the PLATFORM_NAME,
Cordova will build for all installed platforms
$ cordova run <PLATFORM_NAME>
• PLATFORM_NAME android, ios, wp8 …
需在指定的 cordova 的⽬目錄底下執⾏行行
20. Add plugins
This generates platform-specific code within the project's platforms subdirectory
$ cordova plugin add <PLUGIN_NAME> | <PLUGIN_URL>
• PLUGIN_NAME the id of the repository containing the
source code of the plugin to be added to the project
If you do something like this:
cordova plugin remove PLUGIN_NAME
you are removing a specific platform
37. Push Notification
• Step9. Add functions
Add push input and button
• Index.html
• Index.js
Add button event listener
Init to get your device token and put in input text
38. Push Notification
• Step9. Add functions
• Index.js
Get your input token, title and message text
Fill in the of your firebase API key