Differences
This shows you the differences between two versions of the page.
|
iot:courses:03 [2016/06/23 10:17] alexandru.radovici |
iot:courses:03 [2019/09/16 07:47] (current) alexandru.radovici |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Lecture 3: PhoneGap plugins ====== | + | ====== Lecture 3 - Software for the Internet of Things ===== |
| <html> | <html> | ||
| - | <iframe src="//www.slideshare.net/slideshow/embed_code/key/2btnvM0HoJf66I" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/AvnerSolomon/plugins-50070936" title="Plugins" target="_blank">Plugins</a> </strong> from <strong><a href="//www.slideshare.net/AvnerSolomon" target="_blank">Avner Solomon</a></strong> </div> | + | <center> |
| + | <iframe width="560" height="315" src="https://www.youtube.com/embed/rtUBobu223E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| + | </center> | ||
| + | </html> | ||
| + | <html> | ||
| + | <iframe src="//www.slideshare.net/slideshow/embed_code/key/bfsnBHNDiIU2st" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/alexandruradovici/lecture-3-software-for-the-internet-of-things" title="Lecture 3 - Software for the Internet of Things" target="_blank">Lecture 3 - Software for the Internet of Things</a> </strong> from <strong><a href="https://www.slideshare.net/alexandruradovici" target="_blank">Alexandru Radovici</a></strong> </div> | ||
| </html> | </html> | ||
| - | |||
| - | By default a PhoneGap app consists only of a WebView showing the HTML code written by you. The native functionalities offered by the phone (Batter, Camera, Contacts etc.) is available through special JavaScript calls, but only if you install the proper plugins into your project. | ||
| - | |||
| - | Plugins can be separated in 3 categories: | ||
| - | - [[https://build.phonegap.com/plugins/core|Core plugins]] (the plugins officially developed by the cordova team) | ||
| - | - Public Repository plugins (any public plugin on npm, github or phonegap repositories) | ||
| - | - Custom plugins which you manually develop and include in your project | ||
| - | |||
| - | In order to check which plugins are installed in your project you need to run a shell/cmd and go to the root folder of the project than type in the command: | ||
| - | phonegap plugins ls | ||
| - | This command will list all the installed plugins. | ||
| - | |||
| - | For installing plugins the command is | ||
| - | phonegap plugins add package-name | ||
| - | for plugins in the npm registry or phonegap | ||
| - | example : | ||
| - | phonegap plugins add org.apache.cordova.camera" | ||
| - | to install the official camera plugin | ||
| - | or | ||
| - | phonegap plugins add url-to-github-projects | ||
| - | example: | ||
| - | phonegap plugins add https://github.com/apache/cordova-plugin-console.git | ||
| - | There is also the possibility to search for plugins directly from console with | ||
| - | phonegap plugins search multiple-search-words | ||
| - | example: | ||
| - | phonegap plugins search bar code | ||
| - | |||
| - | For more tutorials on the PhoneGap check this [[https://cordova.apache.org/docs/en/3.3.0/guide_cli_index.md.html| page]] but use "phonegap" instead of "cordova". | ||
| - | |||
| - | If you are going to build only using the PhoneGap Build cloud service there is no need to install the plugins locally since you are not going to upload them on the server. All you need to do is edit the config.xml to tell the builder which plugins to include. | ||
| - | The most simple way to do this is by adding the line | ||
| - | <gap:plugin name="package name" /> | ||
| - | example: | ||
| - | <gap:plugin name="com.phonegap.plugins.example" /> | ||
| - | you can also add version to it to be sure that in future build you won't get another version than the one you tested: | ||
| - | <gap:plugin name="com.phonegap.plugins.example" version="2.2.1" /> | ||
| - | For more information check [[http://docs.build.phonegap.com/en_US/configuring_plugins.md.html|here]] | ||
| - | |||
| - | ===== Core Plugins ===== | ||
| - | |||
| - | - [[https://github.com/apache/cordova-plugin-battery-status/blob/c80ffae72fd1c3ad1b2dada96be79abb7dad8d49/doc/index.md|Battery]] Offers battery information and events to check battery status | ||
| - | - [[https://github.com/apache/cordova-plugin-camera/blob/af18483d6970b32a22f016292d3d2cb921eedb00/doc/index.md|Camera]] Allows capture of video/photo with either front or back camera by using the native capture app. Also allows use pictures/videos from the gallery | ||
| - | - [[https://github.com/apache/cordova-plugin-media-capture/blob/5888a627f7c12f17573b2fa9907dc2ce76e44a7a/doc/index.md|Capture]] Captures images/audio/video | ||
| - | - [[https://github.com/apache/cordova-plugin-console/blob/9d1c255ac78f6c81bfec00a08c4918171937ff3f/doc/index.md|Console]] used for debugging | ||
| - | - [[https://github.com/apache/cordova-plugin-contacts/blob/e42219a7d5b9492eb5b4a31c84e392d3379f6a08/doc/index.md|Contacts]] Allows to Create/Edit/Find contacts | ||
| - | - [[https://github.com/apache/cordova-plugin-device/blob/c6e23d8a61793c263443794d66d40723b4d04377/doc/index.md|Device]] Device information | ||
| - | - [[https://github.com/apache/cordova-plugin-device-motion/blob/213aea947f46b24067d5aeda4c04ba3d8524289f/doc/index.md|Device Motion]] gives access to the accelerometer | ||
| - | - [[https://github.com/apache/cordova-plugin-device-orientation/blob/a09ef3c4ff052359f7a0ae366f7d18f667c3d9e2/doc/index.md|Device Orientation]] fives access to the magnetic compas | ||
| - | - [[https://github.com/apache/cordova-plugin-file/blob/198ca6198e7e5f4dc64024304560dc8deb69732d/doc/index.md|File]] File storage API | ||
| - | - [[https://github.com/apache/cordova-plugin-file-transfer/blob/16249c2f7ac53cb593e11eeae180066a88a28271/doc/index.md|File Transfer]] Makes File transfers over HTTP POST via mutli-part encoding | ||
| - | - [[https://github.com/apache/cordova-plugin-geolocation/blob/543afdf88a201131eb8f3109f4c135d6a671f513/doc/index.md|Geolocation]] Get and track position | ||
| - | - [[https://github.com/apache/cordova-plugin-globalization/blob/6c4798d263b3abc20bc07bbe24a3b907241555fe/doc/index.md|Globalization]] Get globalization/language information from the device | ||
| - | - [[https://github.com/apache/cordova-plugin-inappbrowser/blob/8ce6b497fa803936784629187e9c66ebaddfbe1b/doc/index.md|InAppBrowser]] open a webpage inside your app | ||
| - | - [[https://github.com/apache/cordova-plugin-media/blob/b2e92f93964f76bbec667dfdfe15caec435932b6/doc/index.md|Media]] Play/Record Audio | ||
| - | - [[https://github.com/apache/cordova-plugin-network-information/blob/df7aac845dc7deddbdb76e89216776a802ee8b67/doc/index.md|Network Information]] Gives information about the network connection (Ex: 2G/3G/4G/Wi-Fi) + offline/online events | ||
| - | - [[https://github.com/apache/cordova-plugin-dialogs/blob/64017132b429314cc74acdab4c8c1d87a9ffcf1b/doc/index.md|Notification]] Alert boxes native to the phone (to not be confused with Push Notifications) | ||
| - | - [[https://github.com/apache/cordova-plugin-splashscreen/blob/b46cdca795173d67337c97731b343922d24fc770/doc/index.md|Splashscreen]] | ||
| - | - [[https://github.com/apache/cordova-plugin-vibration/blob/5adf530d3663226ad6913de6cfc8493672334023/doc/index.md|Vibration]] | ||
| - | |||
| - | For a list of 3rd party plugins in the repository check [[https://build.phonegap.com/plugins|here]] | ||
| - | |||
| - | ===== Storage ===== | ||
| - | |||
| - | While some features need plugins to become available to our code, others are just mapped over the native HTML5 javascript methods and events. | ||
| - | Example: window.DeviceOrientationEvent returns information from the gyroscope | ||
| - | |||
| - | Such is also the case of the 3 HTML5 storage APIs which do not need installing plugins. | ||
| - | |||
| - | ==== localStorage ==== | ||
| - | |||
| - | localStorage is a simple system to store key/pair values. In order to store object is recommended to stringify them. | ||
| - | |||
| - | Supported platforms: | ||
| - | * Android | ||
| - | * BlackBerry WebWorks (OS 6.0 and higher) | ||
| - | * iOS | ||
| - | * Tizen | ||
| - | * Windows Phone 7 and 8 | ||
| - | |||
| - | Set: | ||
| - | window.localStorage.setItem("key", "value"); | ||
| - | Get: | ||
| - | var value = window.localStorage.getItem("key"); | ||
| - | Remove: | ||
| - | window.localStorage.removeItem("key"); | ||
| - | | ||
| - | ==== WebSQL ==== | ||
| - | Supported platforms: | ||
| - | * Android | ||
| - | * BlackBerry 10 | ||
| - | * iOS | ||
| - | * Tizen | ||
| - | |||
| - | WebSQL is a client side SQL-query driven database. | ||
| - | |||
| - | In order to create or open an existing database: | ||
| - | var db = window.openDatabase(database_name,version,description, allocated_memory); | ||
| - | If a database with a previous existing name and version is opened the already existing db will be accessed, otherwise a new one will be created. | ||
| - | In order to run SQL queries they must be grouped into transactions: | ||
| - | db.transaction(function (tx) { | ||
| - | tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); | ||
| - | tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); | ||
| - | tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); | ||
| - | }); | ||
| - | In order to retrieve the results we will need to give a callback to the execute sql method: | ||
| - | tx.executeSQL(sql_query,optiona_arguments,callback); | ||
| - | where the callback should be a function that takes transaction and result_set as argument: | ||
| - | tx.executeSQL(sql_query,optiona_arguments,function(tx,result){ | ||
| - | //the insert id of the last insert is in result.insertID | ||
| - | //the rows returned by the query are in result.rows | ||
| - | // result.rowsAffected contains the number of rows. | ||
| - | }); | ||
| - | | ||
| - | ==== IndexedDB ==== | ||
| - | Supported platforms: | ||
| - | * BlackBerry 10 | ||
| - | * Firefox OS | ||
| - | * Windows Phone 8 | ||
| - | * Windows 8 | ||
| - | |||
| - | Since neither WebSQL nor IndexedDB don't offer full support yet we won't focus on those to technologies in this class. For a detailed tutorial on IndexedDB check [[https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB|MDN (Mozilla Developer Network)]] | ||
