Cordova

 

Cordova is an open source mobile app development framework which helps build cross-platform mobile applications that are highly scalable and agile. The use of common scripting languages such as CSS, HTML and JavaScript assists in developing a simple and organized Cordova framework, which makes it a popular framework among app developers.

 

Cordova Archtecture

 

Advantages

 

Let’s have a look at some of the advantages of creating apps on Cordova :

 

  • It is a hybrid script framework which uses standard web API’s for all well known operating platforms.
  • The Cordova application developers only need to know web development using HTML5, CSS3 and JavaScript.Cordova takes over the rest of the work to be done.
  • Using Cordova, a developer can create applications for operating systems like iOS, Android, BlackBerry and Windows Phone. The Cordova developer need not be an expert of either of the above mentioned operating system.
  • Cordova has edge over the others simply due to the coverage of the framework.

 

The Cordova project consists of three main things—a command line tool, access to hardware features, and the ability to support future features.

 

Need for Cordova plugin in pCloudy

 

pCloudy being a unified mobile app testing platform is used both by developers and testers. pCloudy offers DeviceTunnel feature for developers to connect to a real device on cloud and use the device as if it’s connected to their local USB. Currently the DeviceTunnel is possible through Android Studio/Eclipse and XCode plugins. Although developers could create builds perfectly using any of the IDEs on the platform, Cordova developers looked for a seamless way of creating apps on a command line tool.

 

As mentioned earlier, Cordova is a popular open source app development framework among developers and there was a need of command line DeviceTunnel Interface to pCloudy so that developers could build their Android or iOS apps and put it to test on a real device on pCloudy. Now, pCloudy real devices on cloud can be accessed by running few commands on the command line interface.

 

Let’s see how this works with Cordova.

 

Note: pCloudy command Line DeviceTunnel Interface is only available for Android devices on Public cloud. It is available for both Android and iOS on private and on-premise cloud.

 

Pre-requisites

 

  • JDK 8 and above.
  • android-sdk latest version.

 

Jar download path

 

http://pcloudy-content-distribution.s3.amazonaws.com/index.html?prefix=Android%20Device%20Tunnel/

 

This will be a one-time activity and need not be repeated again.

 

Steps to Run the Jar

 

Step 1: Run the DeviceTunnel jar by passing the cloud url, user name and api key

 

Example: java –jar pCloudy_DeviceTunnel.jar https://device.pcloudy.com test@pcloudy.com skdflj4tlko46lsa

 

Note: Mention the device tunnel jar path where you store the downloaded pCloudyDeviceTunnel.jar

 

Example: Here, the jar is saved in desktop so the path would be like

 

java –jar /Desktop/pCloudy_DeviceTunnel.jar https://device.pcloudy.com test@pcloudy.com skdflj4tlko46lsa

 

Cordova Plugins

 

Step 2: It will display a list of available devices in that cloud. Select any one device by mentioning the device number and press enter.

 

selct-any-device-press-enter

 

samsung grand quattro

 

Step 3: Enter the duration (in minutes) for which you want to book the device, then press enter.

 

enter id

 

Step 4: Selected device gets connected to your system.

 

get connected to your system

 

Step 5: Open another terminal and check if the device is connected or not

 

open another terminal

 

If the device list shows as unauthorized then copy the url displayed by the jar and paste it in the browser.

 

Device List

 

connect to a device

 

Step 6: Click on ok option on the device and check device list again in terminal.

 

Ok Option

 

Ok Option

 

Now device is connected to your system. You can use this device like a local device.

 

Now use the connected device in Cordova app Debugging. Build the cordova app for android.

 

run cordova android

 

Step 7: Cordova build process

 

cordova build process

 

Deploying to device

 

Step 8: After the successful build, check if the app gets installed on pcloudy device which you had connected to your system.

 

After Successful Build

 

Cordova app is installed on pcloudy device.

 

Step 9: You can debug this through chrome debugger.

 

Chrome Debugger

 

DevTools

 

pcloudy-devtools

 

Note: If you want to exit from the device tunnel jar, please type ‘EXIT/exit’.

 

exit

 

Conclusion

No matter if you are a developer or a tester, just sign up on pCloudy to make the most of your app testing.

pCloudy 5.0

 

pCloudy is a unified mobile app testing platform which is trusted by its users for its excellent performance. We have more than 30,000 users across the globe, and we have received an overwhelming response for our platform. From bot testing to crowd testing, pCloudy has always been a front runner in the market. And with the launch of pCloudy 5.0, we are up for the challenge once again. It is a re-imagined and re-worked upon platform created in-line with intelligence to meet the market demands and accelerate delivery.

 

Let us have a look at what’s new here:

 

 

 

Features

 

a. iOS Connect
b. Automation Studio
c. Follow Me

 

a) iOS Connect: One of the very powerful features that we added is the iOS Connect. The major challenge iOS developers had been facing was the debugging of their iOS apps because of the difficult Apple guidelines regarding building any utility . We are proud to say that we have been successful in cracking that.
With iOS Connect, you can connect to an iOS Device which is present remotely and access the device as if the device is connected to your computer. With iOS Connect we are bridging the gap for the iOS development life cycle.

 

iOS Connect

 

b) Automation Studio: It is another promising feature that can revolutionize mobile app automation. We now have an in-built automation studio in pCloudy platform where you can access the devices to record your test scripts and execute it in parallel on multiple devices without writing any code.

 

There’s something more to it! If you already have your projects on Appium you can record your new workflows and export it to Appium Java format. This new integration would not only enable every user to start creating Automation scripts but it will also help Appium users to speed up their Automation. This makes pCloudy truly a Unified app testing platform.

 

Automation Studio Launch

 

c) Follow me: It is again one of the ‘wow’ features of pCloudy 5.0. This feature can speed up your App Testing exponentially. Follow me allows you to test your apps on 3 unique device while performing your test on only 1 device, thus saving your testing time multi-folds.

 

Follow Me

 

Re-Imagined UI

 

It has been designed to give a leaner, simpler and faster user experience. The look and feel of the pCloudy platform has been transformed keeping in mind the requirements, usability and ease of our users. All the pages have been made more intuitive. To simplify, we have grouped the actions together to save your time in figuring out the next step.

 

a. True Collaboration
b. Global File Storage
c. Comprehensive reports at a single stop
d. Test Scheduler

 

a) True Collaboration: We have introduced a powerful feature on our revamped Device Interaction page. Now, you can take the screenshot of the action you are performing and see the screenshot next to the device. But, the icing on the cake is that you can edit the screenshot, save it and log a bug directly to the JIRA enabling true collaboration between the developers and testers.

 

UI Design

 

b) Global File Storage: Heeding to the demands of our users we have reduced the clicks to perform any action on the File browsing /storage page. The file uploaded once will be available across all the different locations we have. It will also allow sharing of files across teams.

 

Global File Storage

 

c) Comprehensive reports at a single stop: Now, to make the user experience simpler and faster, we have placed all your reports at single stop be it manual or automation across all locations. Not just that, you can see all reports in the same format with much detailed information. Raising bugs after analyzing reports is also possible from here.

 

comprehensive-reports-at-a-single-stop

 

d) Test Scheduler: We have re-designed this page based on a Guided interface where the interactions are more thoughtful, straightforward, and guide you to the next step. It needs zero learning to run automation scripts on multiple devices.

 

Test Scheduler

 

pCloudy 5.0 is another breakthrough for us. After launching pCloudy 5.0, it is time to get feedback on a larger scale. We’re going to continue improving the UI, the navigation, and add some futuristic features to make your app testing simpler and faster. While we do that, we’d love to continue getting feedback.

Chrome Developer Tools

Introduction

Testing a Mobile Web App can get knotty, especially when there are issues like obfuscated HTML/CSS/javascript code, improperly implemented HTTPS, browser inconsistencies, page load performance and so on. Moreover, few things like can be extremely agonizing while striving to support as wide a range of mobile devices as possible. So how do you overcome these issues? Using a Web Developer Tools or debugging extensions make debugging your web application easier. Here we’ll talk about the most popular one – the open source Google Chrome Developer Tools.

The Google Chrome Developer Tools is a consolidated environment built into Google Chrome Browser. It is used for web authoring, debugging, monitoring, optimizing, and understanding web applications or websites. (Sourced from Google Chrome DevTools)

Here are some of the key Chrome DevTools features

  • Inspect and edit the DOM and CSS of your website in real-time
  • Run code snippets from any page
  • Debug Obfuscated code
  • Set advanced breakpoints and debug JavaScript using graphical debugger
  • Troubleshoot Security issues
  • Analyze run-time and page performance to improve the speed of your app
  • Trace reflows and repaints as your app loads

The Chrome DevTools provides almost all the gears required to inspect, debug and monitor the performance of a Web App/mobile web. It also provides additional capabilities to simulate Mobile Devices to test and build mobile-first, responsive web sites. You can even debug web content on a real Android Device from a development machine. But, is it enough to test your Web App on just one or two devices?

Remote debugging using Chrome DevTools in integration with pCloudy’s Mobile Device Lab

Device fragmentation is a very real problem when testing Web apps on real devices, particularly for UI and functional tests. The number of devices with unique specifications and proprietary build variations has increased. At an advanced level, to fully test your Web App’s responsiveness and performance on real devices you will need to experiment your site on various platforms, across a number of device form factors. pCloudy’s Mobile Device Lab offers complete integration with Chrome DevTools to test your apps on real devices. This integration allows you to test Web Apps on a myriad of android devices with different sizes and configurations.

Here’s how most App developers test their Web Apps

Inspect and live edit your site’s design and content

Test and edit your site in live mode by inspecting all the HTML and CSS in your page. In the Elements Panel, you can live-edit a DOM node by simply double-clicking a selected element and making changes.

Chrome Developer Tools

You can even live-edit style property names and values in the Styles pane. Examine and edit box model parameters.

Live-Edit_Styles

It is also possible to edit the current element’s box model parameters by making changes to top, bottom, left, right values for the current element’s padding, border, and margin properties using the Computed pane.

Box_Parameters

Remote Debugging on real devices to fix errors in the code

Debugging Obfuscated Code: Make your code readable and easy to debug even after you’ve combined, minified or compiled it. You can easily change the formatting of your minimized code by clicking on { }.
Debug-Obfuscated

Test the and optimize the performance of the Web App

The Network Panel allows you to see how your page renders, and time taken to render from start to end. To do this click into the “Network” panel, click on the camera icon and refresh the page on the device.

Chrome Dev Tools

The Timeline panel helps you to record and analyze all the activities in your application as it runs. It’s the best place to start investigating perceived performance issues in your application.

To make a recording of a page load, open the Timeline panel, open the page that you want to record, and then reload the page. The Timeline panel automatically records the page reload. You can also record page interactions on the page and view the performance details through the recorded timeline.

Here are some more details you can view using the Record Timeline

  • Record the Timeline to analyze every event that occurred after a page load or a user interaction
  • View FPS, CPU, and network requests in the Overview pane
  • Click on an event within the Flame Chart to view details about it
  • Zoom in on a section of a recording to make analysis easier

Timeline

Conclusion

“Using the right tools for the right job” is an old aphorism that applies to all domains including Software Development. As we’ve seen, Chrome Developer Tools has several features that helps you develop better, debug faster, and measure efficiently the performance of your website or application. The features discussed here are some of the most common ones used by developers, designers and testers to write, debug, monitor and optimize Websites and Web Apps. Using these features in integration with Mobile Device Lab like pCloudy can transmogrify the entire process of creating, testing and launching Websites and Web Apps.

Accelerate your app development with pCloudy today!