PhoneGap Build Service "Build in HTML5, CSS, JavaScript" claim - javascript

The PhoneGap build service says you can build an app in HTML5, CSS, and JavaScript. However, The phonegap.js is not available for each device (latest download PhoneGap 1.8.1 does not have one for Bada or iOS). So I think the build service is meant to save us from creating the shells for each environment, but I fail to see how the PhoneGap API is supposed to work.
I thought the idea too was that you could build one code base for each environment. I know there are quirks, but why is there a separate phonegap.js file for Android, WebOS, etc.?
The lack of documentation has me confused.

In my experience, there are separate files for each but when using phonegap build if you want to include a universal file for the build there is a way, put <script src="phonegap.js"></script> in your index.html file and don't include any js files, you actually don't even need the phonegap.js file, when I did this and ran it through phonegap build it attached the appropriate .js file to the appropriate build and I suddenly could use the phonegap API's for all the builds I was testing

The phonegap framework is made for specific Mobile Operating Systems. The reason why there are so many is because each framework is for each type of operating system. Like for games, most only work for Windows and some for mac, but very little support for Linux based systems. Phonegap creates APIs for using the camera and other functionalities of the operating system.
Phonegap has their tutorials to show you how to install for iOS and Android. I have not developed for newer systems.
Many people use jQueryMobile to develop with PhoneGap to create a nice simple mobile application.
I hope this helps.

Whilst there are different phonegap.js files for each device, they are very similar (I found this out because I accidentally copied it from an iOS project to the Android one a few times). The differences are important but they do pretty-much work as-is.
The main reason they differ is that they just expose the underlying functionality provided by the Phonegap device-native code (Java, OC etc), which IS device-dependent. The Phonegap devs just take care of hiding that from you. All of the phonegap.js files expose the same functionality, they just connect sometimes to different places 'on the inside'. Hence the differences.
Most source 'you or I' would write for a Phonegap app is device-independent as a result of the above.

Related

How does Apache Cordova and ionic framework interact native-ly?

I'm trying to find out how does Apache Cordova & Ionic Framework work?
I searched all over the internet and all I get is,
it is a wrapper around html/css/js and it uses the native web view to interact with native feature. But, you still deploy the native-ly. (That means .apk for Android, e.g.)
But, what I'm interested in is
Is Apache Cordova and Ionic Framework entirely written in javascript?
How do they interact with native mobile platform?
Does cordova/ionic get bundled with .apk file to mediate between the native web view and source code?
I believe what I'm interested in bit of low level detail.
If anybody could shed some light or point me to the resource (which I couldn't find) , it'd be great.
Thanks.
Apache Cordova provides a basic native app responsible for:
Displaying a Webview (UIWebkit by default for iOS, but you can switch to WKWebkit using a plugin. For Android, the "android browser" webview is used up to Android 4.4. From Android 5 (API 21), the webview is basically Chrome for Android).
Allowing the JavaScript running into this webview to "call" (execute) native code thanks to Cordova plugins. This is possible because system Webviews can interact with native code.
Ionic Framework (v1) is made of HTML, JavaScript and CSS (v2 is developed in TypeScript, which is a typed superset of JavaScript). The version 1 relies on AngularJS as a frontend JavaScript framework and helps developers writing "native-like" webapps by providing features like Gestures management, Infinite scrolling, Layouts (Menu, Tabs, Lists...), etc. The version 2 relies on Angular 2 and provides additional components (Date picker, Split panel...) and features (Ionic Native, a JavaScript API which tends to "standardize" the way you use Cordova plugins).
Ionic can be used without Cordova, if you simply want to create a web app (this is still HTML, JavaScript, and CSS). Cordova allows you to put this web app into a native shell. When an hybrid app (Cordova, the plugins you installed, and your web app) is bundled into an .ipa or an .apk, the html/javascript/css codes are moved into a specific folder, where Cordova expects to find an index.html (by default) to load in the Webview.
PS: My english is not perfect but I'd be glad to give more details if a point is not clear.
EDIT:
Please can you answer my specific questions in my post?
Sure!
Apache Cordova is made of JavaScript and Native code. See projects like cordova-android (JavaScript + Java), cordova-ios (JavaScript + Objective-C). Each mobile operating system has a dedicated "platform". When you start a new Cordova project, most of the time, the first operation you do is cordova platform add <platform> (iOS, Android...). These are the codes being loaded. Ionic Framework is a "pure-web" framework, made of HTML, JavaScript and CSS.
Apache Cordova interacts with native mobile platform as any native app: using the system APIs. The webview can interact with both your web app (of course) and the native code, thanks to platform-specific "bridges" (the native code embedded in cordova-android, cordova-ios, cordova-windows, allows that). You have to write a plugin in order to call native code from your JavaScript. For Android, it consists in extending the CordovaPlugin class and overriding the method execute (for instance: cordova-plugin-splashscreen).
The .apk (android) or .ipa (iOS) generated by cordova build (if you're using the cordova-cli) gathers together both the native shell (cordova-android for Android, cordova-ios for iOS) and your webapp. At startup, the main activity/view of Cordova is instantiated, loads the webview, which itself loads your webapp.

A Productive Javascript/Phonegap Development Environment

I've been building Android apps for a few years now, and I've arrived to this working setup:
Intellij Idea IDE write/debug
Genymotion "Emulator"
Physical Device (only when needed)
Git
Ant (probably should move to Gradle) Release/Debug builds
And now I'm looking to form an equally productive environment for Javascript (Phonegap, etc), for Android/iOS/Win8Phone.
I want to avoid the "nice-text-editor-only" solution (I believe a full IDE is superior in productivity terms).
Any suggestions?
Try Brackets editor http://brackets.io/. It's a nice editor to code the web. Phonegap plugins also available for this editor. Just take a look at this editor. Make sure to download the version of Brackets with Phonegap Plugin compatibility.
For the Cordova/Phonegap app I developed, I used cloud9. In my workflow, I would first get things working in my browser, then occasionally do builds with Adobe's Phonegap Build service to work out the kinks on my mobile devices.
The nice thing about c9 is you'll have a public URL for the website you're developing so you can preview it in your device's browser, which is typically closer to the environment you'll get with Phonegap.
The weinre debugging tool, although slow if you're running it through http://debug.phonegap.com/, can really help track down problems when debugging on mobile devices.

With Phonegap apps, is the javascriptcode visible on Android and IOS?

I am creating an app and will use Phonegap to make it for both Android and iPhone.
Will the javascriptcode be unavailable since it is now installed as and app on those devices?
I have seen you may obscure it but that's just to make it harder to read, not unavailable.
Yes, the JavaScript is easily extractable. For example, in an iOS app, an .ipa package is just a zip file. If you unzip the IPA, then look in your app bundle, the www folder (for example) containing all of your HTML, JavaScript, etc. will be available.
You can do your best to obfuscate your JavaScript, but at the end of the day, it needs to be available for execution.

Combine browser and web app for deployment

What's the best way to turn an HTML/Javascript web app into a self-contained app that can be run from Windows (and maybe Mac/Linux) PC's? Preferably without any installation, ie a network share.
I have looked into Chrome and Firefox Portable, but these require write access to the folder, so are unsuitable for running off a read-only network share.
(some background, I have a big javascript app but many of my clients are using IE6 or 7. Their IT teams won't allow Chrome Frame, or other modern browsers).
node-webkit sounds most promising.
From the README on the github repository:
node-webkit is an app runtime based on Chromium and node.js. You can
write native apps in HTML and Javascript with node-webkit. It also
lets you to call Node.js modules directly from DOM and enables a new
way of writing native applications with all Web technologies.
If LightTable can be built with it, certainly a web application can be ported and run natively using it.
I know this is a bit late, but what about Sencha Desktop Packager?
http://www.sencha.com/products/desktop-packager
It was primarily developed for ExtJS apps, but it should work on any JavaScript app.
We had a similar requirement and ended up building a dedicated web browser using QT. However if we'd known about the Sencha Desktop Packager before we may have gone for that.

Does it make sense to use Cordova or PhoneGap for the development of a pure browser-based web application?

At first glimpse Cordova and PhoneGap exist primarily for the use to develop apps to be used on a mobile device. Well, I am not interessted in the developement of native mobile apps.
There exists a webapplication (a cms) of our own and the question is now if a mobile toolkit like Cordova or PhoneGap is able to be of any help to develop parts of our cms functionalities with it in order to be able to support more plattforms.
Does it make sense to use Cordova or PhoneGap for the developement of a pure browser-based web application?
Phonegap (or Cordova as its now called) works by wrapping your webpages in a Webview and giving you access (in JavaScript) to some of the native device functions, such as the Camera, Accelerometer, Contacts etc.
As for whether it will help you depends on if want to make use of any of the native device functions, for example if you think incorporating the Camera (current HTML support for camera is quite spotty) into your web app is of use then you probably should consider it.
Another consideration is how your users will access the applications, with Phonegap it gets packages into a native app and they can just launch it from their home-screen (or however they launch apps on their mobile device), while with a Web App it depends on the device, on iOS you can pin it to your home screen and add some meta tags to make it appear more native like (for example hide the address bar) while on Android as far as I know you can't do that.
Finally consider that with Phonegap it might be more of a pain to debug your application since your HTML/Js is wrapped in a Webview, but as far as I've seen there is no easy way to debug it there.
One other thing I seem to recall reading somewhere that on iOS Apple doesn't give your native applications' Webviews access to the same amount of memory as if it were in safari so the exact sane web application when packaged into a Phonegap application might actually be slower.
To sum up, the benefits of wrapping your application in a Phonegap wrapper are access to native device functions and how your users access your app, if those aren't important (or the cons outweigh the benefits) than it probably isn't worth your while to go that route.
Cordova/Phonegap extend javascript with functionality provided by mobile operating systems. Therefore apps developed with these frameworks must be compiled to the target platform and only embed the HTML etc. in an embedded browser. The extensions need java, objective-c etc. code to run so I don't think that you are able to benefit from this code.
You are forced to write your own mobile device compliant HTML code when using Cordova/Phonegap. There are no neat mobile device ready user interface controls provided by the framework but only access to device specific hardware or software apis like notification etc. is given.
Cordova is just the latest name of PhoneGap. I would not go for that if you just want to build a mobile website. First of all publishing such an app on several online stores (iTunes, Play) is a pain.

Categories

Resources