Category: cordova

Cordova – Globalization This plugin is used for getting information about users’ locale language, date and time zone, currency, etc. Step 1 – Installing Globalization Plugin Open command prompt and install the plugin by typing the following code C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-globalization Step 2 – Add Buttons We will add several buttons to index.html to be able to call different methods that we will create later. <button id = “getLanguage”>LANGUAGE</button> <button id = “getLocaleName”>LOCALE NAME</button> <button id = “getDate”>DATE</button> <button id = “getCurrency”>CURRENCY</button> Step 3 – Add Event Listeners Event listeners will be added inside getDeviceReady function in index.js file to ensure that our app and Cordova are loaded before we start using it. document.getElementById(“getLanguage”).addEventListener(“click”, getLanguage); document.getElementById(“getLocaleName”).addEventListener(“click”, getLocaleName); document.getElementById(“getDate”).addEventListener(“click”, getDate); document.getElementById(“getCurrency”).addEventListener(“click”, getCurrency); Step 4A – Language Function The first function that we are using returns BCP 47 language tag of the client”s device. We will use getPreferredLanguage method. The function has two parameters onSuccess and onError. We are adding this function in index.js. function getLanguage() { navigator.globalization.getPreferredLanguage(onSuccess, onError); function onSuccess(language) { alert(”language: ” + language.value + ”n”); } function onError(){ alert(”Error getting language”); } } Once we press the LANGUAGE button, the alert will be shown on screen. Step 4B – Locale Function This function returns BCP 47 tag for the client”s local settings. This function is similar as the one we created before. The only difference is that we are using getLocaleName method this time. function getLocaleName() { navigator.globalization.getLocaleName(onSuccess, onError); function onSuccess(locale) { alert(”locale: ” + locale.value); } function onError(){ alert(”Error getting locale”); } } When we click the LOCALE button, the alert will show our locale tag. Step 4C – Date Function This function is used for returning date according to client”s locale and timezone setting. date parameter is the current date and options parameter is optional. function getDate() { var date = new Date(); var options = { formatLength:”short”, selector:”date and time” } navigator.globalization.dateToString(date, onSuccess, onError, options); function onSuccess(date) { alert(”date: ” + date.value); } function onError(){ alert(”Error getting dateString”); } } We can now run the app and press DATE button to see the current date. The last function that we will show is returning currency values according to client”s device settings and ISO 4217 currency code. You can see that the concept is the same. function getCurrency() { var currencyCode = ”EUR navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError); function onSuccess(pattern) { alert(”pattern: ” + pattern.pattern + ”n” + ”code: ” + pattern.code + ”n” + ”fraction: ” + pattern.fraction + ”n” + ”rounding: ” + pattern.rounding + ”n” + ”decimal: ” + pattern.decimal + ”n” + ”grouping: ” + pattern.grouping); } function onError(){ alert(”Error getting pattern”); } } The CURRENCY button will trigger alert that will show users currency pattern. This plugin offers other methods. You can see all of it in the table below. method parameters details getPreferredLanguage onSuccess, onError Returns client”s current language. getLocaleName onSuccess, onError Returns client”s current locale settings. dateToString date, onSuccess, onError, options Returns date according to client”s locale and timezone. stringToDate dateString, onSuccess, onError, options Parses a date according to client”s settings. getCurrencyPattern currencyCode, onSuccess, onError Returns client”s currency pattern. getDatePattern onSuccess, onError, options Returns client”s date pattern. getDateNames onSuccess, onError, options Returns an array of names of the months, weeks or days according to client”s settings. isDayLightSavingsTime date, successCallback, errorCallback Used to determine if the daylight saving time is active according to client”s time zone and calendar. getFirstDayOfWeek onSuccess, onError Returns the first day of the week according to client settings. numberToString number, onSuccess, onError, options Returns number according to client”s settings. stringToNumber string, onSuccess, onError, options Parses a number according to client”s settings. getNumberPattern onSuccess, onError, options Returns the number pattern according to client”s settings. Learn online work project make money

Cordova – Dialogs The Cordova Dialogs plugin will call the platform native dialog UI element. Step 1 – Installing Dialog Type the following command in the command prompt window to install this plugin. C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-dialogs Step 2 – Add Buttons Let us now open index.html and add four buttons, one for every type of dialog. <button id = “dialogAlert”>ALERT</button> <button id = “dialogConfirm”>CONFIRM</button> <button id = “dialogPrompt”>PROMPT</button> <button id = “dialogBeep”>BEEP</button> Step 3 – Add Event Listeners Now we will add the event listeners inside the onDeviceReady function in index.js. The listeners will call the callback function once the corresponding button is clicked. document.getElementById(“dialogAlert”).addEventListener(“click”, dialogAlert); document.getElementById(“dialogConfirm”).addEventListener(“click”, dialogConfirm); document.getElementById(“dialogPrompt”).addEventListener(“click”, dialogPrompt); document.getElementById(“dialogBeep”).addEventListener(“click”, dialogBeep); Step 4A – Create Alert Function Since we added four event listeners, we will now create the callback functions for all of them in index.js. The first one is dialogAlert. function dialogAlert() { var message = “I am Alert Dialog!”; var title = “ALERT”; var buttonName = “Alert Button”; navigator.notification.alert(message, alertCallback, title, buttonName); function alertCallback() { console.log(“Alert is Dismissed!”); } } If we click the ALERT button, we will get see the alert dialog box. When we click the dialog button, the following output will be displayed on the console. Step 4B – Create Confirm Function The second function we need to create is the dialogConfirm function. function dialogConfirm() { var message = “Am I Confirm Dialog?”; var title = “CONFIRM”; var buttonLabels = “YES,NO”; navigator.notification.confirm(message, confirmCallback, title, buttonLabels); function confirmCallback(buttonIndex) { console.log(“You clicked ” + buttonIndex + ” button!”); } } When the CONFIRM button is pressed, the new dialog will pop up. We will click the YES button to answer the question. The following output will be displayed on the console. Step 4C – Create Prompt Function The third function is the dialogPrompt function. This allows the users to type text into the dialog input element. function dialogPrompt() { var message = “Am I Prompt Dialog?”; var title = “PROMPT”; var buttonLabels = [“YES”,”NO”]; var defaultText = “Default” navigator.notification.prompt(message, promptCallback, title, buttonLabels, defaultText); function promptCallback(result) { console.log(“You clicked ” + result.buttonIndex + ” button! n” + “You entered ” + result.input1); } } The PROMPT button will trigger a dialog box as in the following screenshot. In this dialog box, we have an option to type the text. We will log this text in the console, together with a button that is clicked. Step 4D – Create Beep Function The last one is the dialogBeep function. This is used for calling the audio beep notification. The times parameter will set the number of repeats for the beep signal. function dialogBeep() { var times = 2; navigator.notification.beep(times); } When we click the BEEP button, we will hear the notification sound twice, since the times value is set to 2. Learn online work project make money

Cordova – File System This plugin is used for manipulating the native file system on the user”s device. Step 1 – Installing File Plugin We need to run the following code in the command prompt to install this plugin. C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-file Step 2 – Add Buttons In this example, we will show you how to create file, write to file, read it and delete it. For this reason, we will create four buttons in index.html. We will also add textarea wherein, the content of our file will be shown. <button id = “createFile”>CREATE FILE</button> <button id = “writeFile”>WRITE FILE</button> <button id = “readFile”>READ FILE</button> <button id = “removeFile”>DELETE FILE</button> <textarea id = “textarea”></textarea> Step 3 – Add Event Listeners We will add event listeners in index.js inside the onDeviceReady function to ensure that everything has started before the plugin is used. document.getElementById(“createFile”).addEventListener(“click”, createFile); document.getElementById(“writeFile”).addEventListener(“click”, writeFile); document.getElementById(“readFile”).addEventListener(“click”, readFile); document.getElementById(“removeFile”).addEventListener(“click”, removeFile); Step 4A – Create File function The file will be created in the apps root folder on the device. To be able to access the root folder you need to provide superuser access to your folders. In our case, the path to root folder is datadatacom.example.hellocache. At the moment this folder is empty. Let us now add a function that will create the log.txt file. We will write this code in index.js and send a request to the file system. This method uses WINDOW.TEMPORARY or WINDOW.PERSISTENT. The size that will be required for storage is valued in bytes (5MB in our case). function createFile() { var type = window.TEMPORARY; var size = 5*1024*1024; window.requestFileSystem(type, size, successCallback, errorCallback) function successCallback(fs) { fs.root.getFile(”log.txt”, {create: true, exclusive: true}, function(fileEntry) { alert(”File creation successfull!”) }, errorCallback); } function errorCallback(error) { alert(“ERROR: ” + error.code) } } Now we can press the CREATE FILE button and the alert will confirm that we successfully created the file. Now, we can check our apps root folder again and we can find our new file there. Step 4B – Write File Function In this step, we will write some text to our file. We will again send a request to the file system, and then create the file writer to be able to write Lorem Ipsum text that we assigned to the blob variable. function writeFile() { var type = window.TEMPORARY; var size = 5*1024*1024; window.requestFileSystem(type, size, successCallback, errorCallback) function successCallback(fs) { fs.root.getFile(”log.txt”, {create: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { alert(”Write completed.”); }; fileWriter.onerror = function(e) { alert(”Write failed: ” + e.toString()); }; var blob = new Blob([”Lorem Ipsum”], {type: ”text/plain”}); fileWriter.write(blob); }, errorCallback); }, errorCallback); } function errorCallback(error) { alert(“ERROR: ” + error.code) } } After pressing the WRITE FILE button, the alert will inform us that the writing is successful as in the following screenshot. Now we can open log.txt and see that Lorem Ipsum is written inside. Step 4C – Read File Function In this step, we will read the log.txt file and display it in the textarea element. We will send a request to the file system and get the file object, then we are creating reader. When the reader is loaded, we will assign the returned value to textarea. function readFile() { var type = window.TEMPORARY; var size = 5*1024*1024; window.requestFileSystem(type, size, successCallback, errorCallback) function successCallback(fs) { fs.root.getFile(”log.txt”, {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.getElementById(”textarea”); txtArea.value = this.result; }; reader.readAsText(file); }, errorCallback); }, errorCallback); } function errorCallback(error) { alert(“ERROR: ” + error.code) } } When we click the READ FILE button, the text from the file will be written inside textarea. Step 4D – Delete File Function And finally we will create function for deleting log.txt file. function removeFile() { var type = window.TEMPORARY; var size = 5*1024*1024; window.requestFileSystem(type, size, successCallback, errorCallback) function successCallback(fs) { fs.root.getFile(”log.txt”, {create: false}, function(fileEntry) { fileEntry.remove(function() { alert(”File removed.”); }, errorCallback); }, errorCallback); } function errorCallback(error) { alert(“ERROR: ” + error.code) } } We can now press the DELETE FILE button to remove the file from the apps root folder. The alert will notify us that the delete operation is successful. If we check the apps root folder, we will see that it is empty. Learn online work project make money

Cordova – Camera This plugin is used for taking photos or using files from the image gallery. Step 1 – Install Camera Plugin Run the following code in the command prompt window to install this plugin. C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugincamera Step 2 – Adding Button and Image Now, we will create the button for calling the camera and img where the image will be displayed once taken. This will be added to index.html inside the div class = “app” element. <button id = “cameraTakePicture”>TAKE PICTURE</button> <img id = “myImage”></img> Step 3 – Adding Event Listener The event listener is added inside the onDeviceReady function to ensure that Cordova is loaded before we start using it. document.getElementById(“cameraTakePicture”).addEventListener (“click”, cameraTakePicture); Step 4 – Adding Functions (taking photo) We will create the cameraTakePicture function that is passed as a callback to our event listener. It will be fired when the button is tapped. Inside this function, we will call the navigator.camera global object provided by the plugin API. If taking picture is successful, the data will be sent to the onSuccess callback function, if not, the alert with error message will be shown. We will place this code at the bottom of index.js. function cameraTakePicture() { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); function onSuccess(imageData) { var image = document.getElementById(”myImage”); image.src = “data:image/jpeg;base64,” + imageData; } function onFail(message) { alert(”Failed because: ” + message); } } When we run the app and press the button, native camera will be triggered. When we take and save picture, it will be displayed on screen. The same procedure can be used for getting image from the local file system. The only difference is the function created in the last step. You can see that the sourceType optional parameter has been added. Step 1 B C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugincamera Step 2 B <button id = “cameraGetPicture”>GET PICTURE</button> Step 3 B document.getElementById(“cameraGetPicture”).addEventListener(“click”, cameraGetPicture); Step 4 B function cameraGetPicture() { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.PHOTOLIBRARY }); function onSuccess(imageURL) { var image = document.getElementById(”myImage”); image.src = imageURL; } function onFail(message) { alert(”Failed because: ” + message); } } When we press the second button, the file system will open instead of the camera so we can choose the image that is to be displayed. This plugin offers lots of optional parameters for customization. S.No Parameter & Details 1 quality Quality of the image in the range of 0-100. Default is 50. 2 destinationType DATA_URL or 0 Returns base64 encoded string. FILE_URI or 1 Returns image file URI. NATIVE_URI or 2 Returns image native URI. 3 sourceType PHOTOLIBRARY or 0 Opens photo library. CAMERA or 1 Opens native camera. SAVEDPHOTOALBUM or 2 Opens saved photo album. 4 allowEdit Allows image editing. 5 encodingType JPEG or 0 Returns JPEG encoded image. PNG or 1 Returns PNG encoded image. 6 targetWidth Image scaling width in pixels. 7 targetHeight Image scaling height in pixels. 8 mediaType PICTURE or 0 Allows only picture selection. VIDEO or 1 Allows only video selection. ALLMEDIA or 2 Allows all media type selection. 9 correctOrientation Used for correcting orientation of the image. 10 saveToPhotoAlbum Used to save the image to the photo album. 11 popoverOptions Used for setting popover location on IOS. 12 cameraDirection FRONT or 0 Front camera. BACK or 1 Back camera. ALLMEDIA Learn online work project make money

Cordova – Plugman Cordova Plugman is a useful command line tool for installing and managing plugins. You should use plugman if your app needs to run on one specific platform. If you want to create a cross-platform app you should use cordova-cli which will modify plugins for different platforms. Step 1 – Installing Plugman Open the command prompt window and run the following code snippet to install plugman. C:UsersusernameDesktopCordovaProject>npm install -g plugman Step 2 – Installing Plugins To understand how to install the Cordova plugin using plugman, we will use the Camera plugin as an example. C:UsersusernameDesktopCordovaProject>plugman install –platform android –project platformsandroid –plugin cordova-plugin-camera plugman uninstall –platform android –project platformsandroid –plugin cordova-plugin-camera We need to consider three parameters as shown above. –platform − platform that we are using (android, ios, amazon-fireos, wp8, blackberry10). –project − path where the project is built. In our case, it is platformsandroid directory. –plugin − the plugin that we want to install. If you set valid parameters, the command prompt window should display the following output. Additional Methods You can use the uninstall method in similar way. C:UsersusernameDesktopCordovaProject>plugman uninstall –platform android –project platformsandroid –plugin cordova-plugin-camera The command prompt console will display the following output. Plugman offers some additional methods that can be used. The methods are listed in the following table. S.No Method & Details 1 install Used for installing Cordova plugins. 2 uninstall Used for uninstalling Cordova plugins. 3 fetch Used for copying Cordova plugin to specific location. 4 prepare Used for updating configuration file to help JS module support. 5 adduser Used for adding user account to the registry. 6 publish Used for publishing plugin to the registry. 7 unpublish Used for unpublishing plugin from the registry. 8 search Used for searching the plugins in the registry. 9 config Used for registry settings configuration. 10 create Used for creating custom plugin. 11 platform Used for adding or removing platform from the custom created plugin. Additional Commands If you are stuck, you can always use the plugman -help command. The version can be checked by using plugman -v. To search for the plugin, you can use plugman search and finally you can change the plugin registry by using the plugman config set registry command. NOTE Since Cordova is used for cross platform development, in our subsequent chapters we will use Cordova CLI instead of Plugman for installing plugins. Learn online work project make money

Cordova – Quick Guide Cordova – Overview Cordova is a platform for building hybrid mobile applications using HTML, CSS and JavaScript. The official documentation gives us the definition of the Cordova − “Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for crossplatform development, avoiding each mobile platform native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device”s sensors, data, and network status.” Cordova Features Let us now understand the features of Cordova in brief. Command Line Interface (Cordova CLI) This tool can be used for starting projects, building processes for different platforms, installing plugins and lot of other useful things that make the development process easier. You will learn how to use the Command Line Interface in the subsequent chapters. Cordova Core Components Cordova offers a set of core components that every mobile application needs. These components will be used for creating base of the app so we can spend more time to implement our own logic. Cordova Plugins Cordova offers API that will be used for implementing native mobile functions to our JavaScript app. License Cordova is licensed under the Apache License, Version 2.0. Apache and the Apache feather logos are trademarks of The Apache Software Foundation. Cordova Advantages We will now discuss the advantages of Cordova. Cordova offers one platform for building hybrid mobile apps so we can develop one app that will be used on different mobile platforms – IOS, Android, Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu and tizien. It is faster to develop hybrid app then native app so Cordova can save on the development time. Since we are using JavaScript when working with Cordova, we don”t need to learn platform specific programming languages. There are many community add-ons that can be used with Cordova, these have several libraries and frameworks, which are optimized for working with it. Cordova Limitations Following are the limitations of Cordova. Hybrid apps are slower than native ones so it is not optimal to use Cordova for large apps that require lots of data and functionality. Cross browser compatibility can create lots of issues. Most of the time we are building apps for different platforms so the testing and optimizing can be time consuming since we need to cover large number of devices and operating systems. Some plugins have compatibility issues with different devices and platforms. There are also some native APIs that are not yet supported by Cordova. Cordova – Environment Setup In this chapter, we will understand the Environment Setup of Cordova. To begin with the setup, we need to first install a few components. The components are listed in the following table. S.No Software & Description 1 NodeJS and NPM NodeJS is the platform needed for Cordova development. Check out our for more details. 2 Android SDK For Android platform, you need to have Android SDK installed on your machine. Check out for more details. 3 XCode For iOS platform, you need to have xCode installed on your machine. Check out for more details Installing Cordova Before we start, you need to know that we will use Windows command prompt in our tutorial. Step 1 – Installing git Even if you don”t use git, it should be installed since Cordova is using it for some background processes. You can download git . After you install git, open your environment variable. Right-Click on Computer Properties Advanced System settings Environment Variables System Variables Edit Copy the following at the end of the variable value field. This is default path of the git installation. If you installed it on a different path you should use that instead of our example code below. ;C:Program Files (x86)Gitbin;C:Program Files (x86)Gitcmd Now you can type git in your command prompt to test if the installation is successful. Step 2 – Installing Cordova This step will download and install Cordova module globally. Open the command prompt and run the following − C:Usersusername>npm install -g cordova You can check the installed version by running − C:Usersusername>cordova -v This is everything you need to start developing the Cordova apps on Windows operating system. In our next tutorial, we will show you how to create first application. Cordova – First Application We have understood how to install Cordova and set up the environment for it. Once everything is ready, we can create our first hybrid Cordova application. Step 1 – Creating App Open the directory where you want the app to be installed in command prompt. We will create it on desktop. C:UsersusernameDesktop>cordova create CordovaProject io.cordova.hellocordova CordovaApp CordovaProject is the directory name where the app is created. io.cordova.hellocordova is the default reverse domain value. You should use your own domain value if possible. CordovaApp is the title of your app. Step 2 – Adding Platforms You need to open your project directory in the command prompt. In our example, it is the CordovaProject. You should only choose platforms that you need. To be able to use the specified platform, you need to have installed the specific platform SDK. Since we are developing on windows, we can use the following platforms. We have already installed Android SDK, so we will only install android platform for this tutorial. C:UsersusernameDesktopCordovaProject>cordova platform add android There are other platforms that can be used on Windows OS. C:UsersusernameDesktopCordovaProject>cordova platform add wp8 C:UsersusernameDesktopCordovaProject>cordova platform add amazon-fireos C:UsersusernameDesktopCordovaProject>cordova platform add windows C:UsersusernameDesktopCordovaProject>cordova platform add blackberry10 C:UsersusernameDesktopCordovaProject>cordova platform add firefoxos If you are developing on Mac, you can use − $ cordova platform add IOS $ cordova platform add amazon-fireos $ cordova platform add android $ cordova platform add blackberry10 $ cordova platform add firefoxos You can also remove platform from your project by using − C:UsersusernameDesktopCordovaProject>cordova platform rm android Step 3 – Building and Running In this step we will build the app for a specified platform so we can run it on mobile device or emulator. C:UsersusernameDesktopCordovaProject>cordova build android

Cordova – Vibration This plugin is used for connecting to device”s vibration functionality. Step 1 – Installing Vibration Plugin We can install this plugin in command prompt window by running the following code − C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-vibration Step 2 – Add Buttons Once the plugin is installed we can add buttons in index.html that will be used later to trigger the vibration. <button id = “vibration”>VIBRATION</button> <button id = “vibrationPattern”>PATTERN</button> Step 3 – Add Event Listeners Now we are going to add event listeners inside onDeviceReady in index.js. document.getElementById(“vibration”).addEventListener(“click”, vibration); document.getElementById(“vibrationPattern”).addEventListener(“click”, vibrationPattern); Step 4 – Create Functions This plugin is very easy to use. We will create two functions. function vibration() { var time = 3000; navigator.vibrate(time); } function vibrationPattern() { var pattern = [1000, 1000, 1000, 1000]; navigator.vibrate(pattern); } The first function is taking time parameter. This parameter is used for setting the duration of the vibration. Device will vibrate for three seconds once we press VIBRATION button. The second function is using pattern parameter. This array will ask device to vibrate for one second, then wait for one second, then repeat the process again. Learn online work project make money

Cordova – Overview Cordova is a platform for building hybrid mobile applications using HTML, CSS and JavaScript. The official documentation gives us the definition of the Cordova − “Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for crossplatform development, avoiding each mobile platform native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device”s sensors, data, and network status.” Cordova Features Let us now understand the features of Cordova in brief. Command Line Interface (Cordova CLI) This tool can be used for starting projects, building processes for different platforms, installing plugins and lot of other useful things that make the development process easier. You will learn how to use the Command Line Interface in the subsequent chapters. Cordova Core Components Cordova offers a set of core components that every mobile application needs. These components will be used for creating base of the app so we can spend more time to implement our own logic. Cordova Plugins Cordova offers API that will be used for implementing native mobile functions to our JavaScript app. License Cordova is licensed under the Apache License, Version 2.0. Apache and the Apache feather logos are trademarks of The Apache Software Foundation. Cordova Advantages We will now discuss the advantages of Cordova. Cordova offers one platform for building hybrid mobile apps so we can develop one app that will be used on different mobile platforms – IOS, Android, Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu and tizien. It is faster to develop hybrid app then native app so Cordova can save on the development time. Since we are using JavaScript when working with Cordova, we don”t need to learn platform specific programming languages. There are many community add-ons that can be used with Cordova, these have several libraries and frameworks, which are optimized for working with it. Cordova Limitations Following are the limitations of Cordova. Hybrid apps are slower than native ones so it is not optimal to use Cordova for large apps that require lots of data and functionality. Cross browser compatibility can create lots of issues. Most of the time we are building apps for different platforms so the testing and optimizing can be time consuming since we need to cover large number of devices and operating systems. Some plugins have compatibility issues with different devices and platforms. There are also some native APIs that are not yet supported by Cordova. Learn online work project make money

Cordova – Device ”; Previous Next This plugin is used for getting information about the user’s device. Step 1 – Installing Device Plugin To install this plugin, we need to run the following snippet in the command prompt. C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-device Step 2 – Adding Button We will be using this plugin the same way we used the other Cordova plugins. Let us add a button in the index.html file. This button will be used for getting information about the device. <button id = “cordovaDevice”>CORDOVA DEVICE</button> Step 3 – Adding Event Listener Cordova plugins are available after the deviceready event so we will place the event listener inside the onDeviceReady function in index.js. document.getElementById(“cordovaDevice”).addEventListener(“click”, cordovaDevice); Step 4 – Creating Function The following function will show how to use all possibilities the plugin provides. We will place it in index.js. function cordovaDevice() { alert(“Cordova version: ” + device.cordova + “n” + “Device model: ” + device.model + “n” + “Device platform: ” + device.platform + “n” + “Device UUID: ” + device.uuid + “n” + “Device version: ” + device.version); } When we click the CORDOVA DEVICE button, the alert will display the Cordova version, device model, platform, UUID and device version. Print Page Previous Next Advertisements ”;

Cordova – Best Practices ”; Previous Next Cordova is used for creating hybrid mobile apps, so you need to consider this before you choose it for your project. Below are the best practices for Cordova apps development. Single Page Apps This is the recommended design for all Cordova apps. SPA is using client-side router and navigation loaded on the single page (usually index.html). The routing is handled via AJAX. If you have followed our tutorials, you probably noticed that almost every Cordova plugin needs to wait until the device is ready before it can be used. SPA design will improve loading speed and overall performance. Touch Events Since Cordova is used for mobile world it is natural to use touchstart and touchend events instead of click events. The click events have 300ms delay, so the clicks don’t feel native. On the other hand, touch events aren”t supported on every platform. You should take this into consideration before you decide what to use. Animations You should always use hardware accelerated CSS Transitions instead of JavaScript animations since they will perform better on mobile devices. Storage Use storage caching as much as possible. Mobile network connections are usually bad, so you should minimize network calls inside your app. You should also handle offline status of the app, since there will be times when user”s devices are offline. Scrolling Most of the time the first slow part inside your app will be scrolling lists. There are couple of ways to improve scrolling performance of the app. Our recommendation is to use native scrolling. When there are lots of items in the list, you should load them partially. Use loaders when necessary. Images Images can also slow the mobile app. You should use CSS image sprites whenever possible. Try to fit the images perfectly instead of scaling it. CSS styles You should avoid shadows and gradients, since they slow the rendering time of the page. Simplification Browser”s DOM is slow, so you should try to minimize DOM manipulation and number of DOM elements. Testing Ensure that you test your app on as many devices and operating system versions as possible. If app works flawlessly on one device, it doesn”t necessary mean that it will work on some other device or platform. Print Page Previous Next Advertisements ”;