I am writing a very simple Phonegap application on android. The problem is how to automatically test the GUI part of it. QUnit looks like a good choice to test only Javascript but it needs jquery library to support testing user actions, according to the Cookbook. Is it appropriate to include JQuery library in Phonegap application for testing purpose?
Here is an simple scenario. I have an input field in the application. And I want to test it to see if it could accept value. How should I do with it in Phonegap? Or is there other choice to test the GUI part of Phonegap application?
I also found this question about Selenium but I am trying to find other possible ways to do it.
Cordova (formerly Phonegap), by itself (basically), nothing have to do with javascript, it just a tool to wrap your html/js/css code in android WebView element. Cordova has methods to access device internals via cordova provided JS calls.
Well, you can unit-test your application even in chrome desktop browser. Also, if you want, you can include any JS libraries to be used in App. If you have any questions- just write comment
Related
I have some questions.
Question 1) I know that Cordova is written in plain js. Ionic team stood up and decided to wrap the Cordova plugin and usage of that by writing typescript code and also in Angular. so ionic sits on top of Cordova. both are frameworks, but Cordova is much deeper. Am I right?
Question 2) which one really can convert my code to mobile code? I know mobiles can't understand js/html/css without browsers. So something converts my Ionic code to something. a) what does my code get converted into? b) what really converts my code?
I'm starting ionic development and really wanted to know this first.
Ionic its just a mobile development framework so that you can use design components as well as other plugins for developing an application.
When we refer term Cordova its a main core It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc.
Architecture
There are several components to a cordova application. The following diagram shows a high-level view of the cordova application architecture
Web view
The Cordova-enabled WebView may provide the application with its entire user interface. On some platforms, it can also be a component within a larger, hybrid application that mixes the WebView with native application component
Web App
This is the part where your application code resides. The application itself is implemented as a web page, by default a local file named index.html, that references CSS, JavaScript, images, media files, or other resources are necessary for it to run. The app executes in a WebView within the native application wrapper, which you distribute to app stores.
For more understanding please visit this article
https://cordova.apache.org/docs/en/latest/guide/overview/
Pretty much as the title says.
I developed a cordova app as a proof of concept, and the person I developed it for liked it and wants the look and feel of some parts of it in their existing app while I continue to work on the cordova app.
Is there any reason to use cordova in an existing native app vs just using a webview? Does Cordova give you anything inside an existing native app that a webview does not?
Cordova provides plugins, which are a bridge to execute native code using javascript.
Also, now you can use plugable webviews, which allow you to switch the default webview with another one (like crosswalk) but keeping the plugin compatibility.
But those webviews are also available without Cordova.
So, if you need the plugins, use Cordova, if you don't need them, use a regular webview.
But as you want to put it inside an existing app, the documentation to do it is out of date, so it's going to be a bit hard to do it.
I have tried some App Builder to build the mobile application such as Seattle Cloud, now I want try to build an android application without using the App Builder, but I figured out the page's extension is .HTML in the App Builder, but when I using Android Studio to build the app, the layout is using XML. I have experience to develop web application using PHP and now I want try to build an Android Application to view information from my web application, I feel confused, How should I start?
You can use Phonegap for hybrid app development using web technologies such as CSS, HTML, JavaScript and jQuery.
Other similar options available are Titanium SDK and Sencha Touch, but you will take time to get well with them. They are better than Phonegap in some areas, also device api support is available.
Whatever framework you use to build hybrid apps, you will have their respective js files and css to achieve functions. Some combine with PhoneGap in the end to use device api's, so it is better to go with PhoneGap or something like Titanium or Sencha. You may also have a look at Ionic framework, it uses AngularJS, HTML and CSS.
Use WebView. It's a view that displays web pages. You can use local html files as well as a URL. For more information:
http://developer.android.com/guide/webapps/webview.html
Android works in a very different compared to web apps. the design of the application is done in XML which will create native UI components and will be much faster the HTML counterparts.
There are different frameworks for developing an android app based on HTML/JavaScript
Sencha touch
Phonegap
Appcelerator Titanium (Although this may not be a pure HTML framework)
see: How to create an android app using HTML 5
But compared to apps based on HTML frameworks, native apps will be faster, consumes lower memory.
Visit http://developer.android.com/training/index.html to get started.
Can Nativescript build apps for web as well?
As Ionicframework and similar uses Cordova to build Android and iOS the same code there can be served by an HTTP server to the mobile or desktop browsers.
Will that be possible with the apps built with Nativescript, using same code base for web version of the app?
Nowadays Angular integration is on the way, and using Angular for the mvc kind of things (like data bindings, events etc.) and using Native for the device apis, platform apis and native gui would help in an unequaled way.
Angular parts can be used in the browser as well when built for it. What to do with the xml written for the gui templates in Nativescript, they could be converted to proper html for web built of the app, as Nativescript itself already uses a unified gui api for different platforms, that could be possible. And lastly, native calls made in NativeScript would be ignored in the web build.
It would be great to build for Android, iOS, and Web with the same exact code base.
tl;dr: No
Longer: The big difference between the Cordova/Phonegap based technologies (such as Ionic and Supersonic) and the Dynamic Runtime based technologies (such as NativeScript, React Native and Titanium) is that the first uses a HTML approach where the application is run by WebKit/Blink in a WebView. Looking on the Dynamic Runtime technologies there's no HTML Engine running your app, but rather native views and widgets. The framework (in this case NativeScript) is "just" a bridge between Javascript and the native language of the device.
However, depending of how you architecture your code, you can create Javascript which will be usable in both a NativeScript environment as well as in a browser environment.
Edit: The above means that you could reuse some of your code. There'll still be NativeScript specific code.
Edit2: There's an ongoing project to enable usage of Angular 2 in NativeScript. Please see current status in the issue: https://github.com/NativeScript/NativeScript/issues/103 Also note that the Telerik NativeScript core developer Valentin Stoychev is saying
The idea [is] to enable as much code reuse as possible between your web and mobile apps.
So: Yes on code reuse - no on exact same codebase.
Adding to the (correct) response of Emil - I do not think it is possible to have any significant portion of the app shared (even for the logic part) since {N} apps mostly utilize the Nativscript observable implementation which would probably 'leak' into your models / view models.
Having said that, I suggest you to monitor the work happening on integrating Angular2, which would probably mean a larger code sharing potential (with Angular2 web apps)
I am aware of Appcelerator and Phonegap's differences with regards to their approach in creating cross device/platform applications for Android and iOS. I believe one of Appcelerators advantage is that it has access over the device's API, correct me if I am wrong but isn't Phonegap also capable of accessing the device's API? My question is if both of them has access to the device's API, then what advantage does Appcelerator have over Phonegap in terms of API coverage? Which native APIs from Apple and Android devices can Appcelerator access which Phonegap cannot?
With the typical PhoneGap application, you're trying to mimic the native GUI elements in JavaScript, most likely with something like the Sencha Touch framework. However, with Titanium (Appcelerator is the company, Titanium is the product), you're using Native GUI elements.
To answer your question, when you're developing a simple application in PhoneGap, you're not using the native Table View, Tab View, Image View, etc. Instead, you're using JavaScript that tries to mimic those controls. So, in even the simplest of cases, you're not using native APIs with PhoneGap.
Considering you're able to write your own native code for either Android or iOS using PhoneGap, I don't think there are actual limitations in terms of API coverage beyond what comes with it out of the box. I just finished writing a plugin for PhoneGap that allows me to access the orientation gyros (ie yaw, pitch, roll) on Android because it didn't have one. Since PhoneGap fires up your class on initialization, you're able to inject whatever code you need before/after executing the super.loadUri statement.
PhoneGap is simply a wrapper that makes it easier to separate your presentation layer from the native device code by automatically loading up an html file in a chromeless browser and then listening for specific requests made from the browser back to the native code (ie, the plugins PhoneGap ships with). You're free to add additional native code around the PhoneGap wrapper.