Cross-platform web development combining HTML5 and native capabilities - html

I am absolutely new to the mobile development and I am puzzled by the following question:
How can I write a cross-platform mobile application with UI on HTML5 (same for all platforms), most of logic in JavaScript and ajax, but keeping some of native capabilities like marketplace and a good offline storage?
Do "hybrid" applications provide what I need? Is it possible to get access from javascript code inside "web page" to the phone native resources?
Could someone suggest an entry point for such kind of work (framework/toolkit)?

There is some frameworks like Corona SDK or PhoneGap, which can help you to achieve this. Also take a look to this similar post. Another good comparison between such frameworks is available at Mashable

Related

Confusion regarding PhoneGap/Cordova

I have a webapp developed (game), based on HTML5 + CreateJS, but since Android lacks of standards, I've run into unsolvable issues for my webapp. That's why im recurring to PhoneGap.
Yet my confusion lies in the fact that I need to make this game into a phonegap app that runs on Android/iOS, using for each platform native specific stuff.
So, should I build 2 apps (one for each platform), all over again, or use the one I have and try to deploy it into different devices using phonegap?
The truth is I don't know how to approach this problem... can anyone help?
Best Regards.
Yes, you can use Cordova (PhoneGap) to create a cross platform mobile app. Basically, Cordova (PhoneGap is Adobe's version of Cordova) is an open source project that provides JavaScript API's for accessing native device functionality (like the Accelerometer or Camera.) Cordova also lets you package your app in the native application shell, so you put your app on the app store. Please see my other answer here about Cordova and hybrid apps: Beginning with Apache Cordova
If the game runs completely in HTML5, I think it would be easiest to just use that one codebase and integrate it with Cordova and then deploy to the various platforms - why rewrite the app twice if you don't need to?
However, if you are using native device functionality, you may need to develop your own Cordova/Phonegap plugins for use. This way, you can call regular Android/iOS code (Java or Objective-C code) that you write from your web app code with JavaScript. This might be more work, especially if you have never written in these languages.
Personally, since you already have a working HTML5 app, I'd just try to get it working with Cordova and see how it performs. If you really need some native specific stuff, then I'd try creating that "stuff" as a plugin. Rebuilding the app twice, once for Android and once for iOS seems like a pretty big waste of time to me.
The answer here is either yes or no.
Yes if you want to use some specific feature of the native code. For instance, iOS's default objects is beautiful itself, you can easily drag and drop it to build your application. However, it takes lots of time to rebuild for another platform. Specially, if you intend to create app/game for multiple platforms, it would be a nightmare.
HTML5 is much faster for you to approach several platforms. However, you can't get the best result on all platforms and all devices. I mean, it is really difficult to bring the max performance of the app on all devices. For this solution, I suggest HTML5 with some libraries such as LimeJS, Crafty, Impact, etc. or some tools such as Construct 2, etc. I used to use HTML5 with all those libraries but found out that Construct 2 is much better.
Instead of using phonegap, I recommend cocoonjs. Specially if your targets are iOS and Android platforms.
Hope that help.
Yeah, even the simplest game such as bubble buster would be difficult to make cross platform with different version of android webview and you need cross platform? I would suggest looking into something like Unity3D.

MVC4 mobile Web app into app store

I have developed an web app using MVC4- mobile and HTML5. Every things is working fine when we enter URL from any phone. But i am wondering how to convert my web app into hybrid app so that i could upload in istore or GooglePlay.
Please help me with the procedure or steps i need to follow and is there any tool other than phoneGap that i could use.
Thanks in advance.
There are few options but I will mention only two of them.
Most commonly used is a Phonegap/Cordova app wrapper framework (Also my main choice). Cordova is a new name for a Phonegap framework. It will give you an access to common mobile phone functionalities (Android, iPhone, Blackberry and WP7+). It is rather easy to use and there are a lot of vorking tutorials available, you can even find them in youtube.
Here's an phonegap link: http://cordova.apache.org/. There you will find tutorials how to install/configure it on all available platforms. This is a older link: enter link description here, it still has usable informations.
If in doubt always search for phonegap examples instead of cordova. For some reason Phonegap is still a mostly used name.
Here's an Phonegap + jQuery Mobile example: http://therockncoder.blogspot.com/2012/07/jquery-mobile-phonegap-and-camera.html, there you will find a github link for Android and iOS implementation.
Through the PhoneGap javascript APIs, the "web app" has access to the mobile phone functions such as Geolocation, Accelerometer Camera, Contacts, Database, File system, etc. Basically any function that the mobile phone SDK provides can be "bridged" to the javascript world. On the other hand, a normal web app that runs on the mobile web browser does not have access to most of these functions (security being the primary reason). Therefore, a PhoneGap app is more of a mobile app than a web app. You can certainly use PhoneGap to wrap a web app that does not use any PhoneGap APIs at all, but that is not what PhoneGap was created for.
Now some disadvantages. With PhoneGap for each platform you have to maintain a different project. The burden for that increases when there is a need to use multiple PhoneGap plugins because you need to search and update different files on each platform.
Mosync is also an excellent solution. This framework has a few things better handled then Phonegap. Like:
With MoSync you’ll have only one project to maintain for all the platforms. For iOS you will still need to use Xcode because MoSync outputs a project for it but, other than just building it, there is no need to dig deeper in Apple’s IDE.
The entire provided functionality for JavaScript is placed in the same file for all of the operating systems. There are no files for plugins because it has none (at least that I know of), but the same extensibility is achieved in ways described in the next section.
If there is some functionality that MoSync doesn’t provide on the JavaScript side, there are no plugins that you can use, but there is another way. MoSync provides a lot of features from the C++ side and if they aren’t accessible from JavaScript by default they can be easily made available. I’m sure that in the future the MoSync team will add more features to the JavaScript library.
With MoSync you are not restricted to only JavaScript frameworks to replicate native UI, you can truly create native UI elements that are more responsive using only JavaScript.
Rhomobile on the other hand is much less used thus a lot less supported.
I heard few good things about this framework but never had time to learn/use it.
RhoMobile applications are OS-agnostic, able to support enterprise-
and consumer-class operating systems including Windows® Embedded
Handheld, Windows® CE, Windows® Phone 7 Series, Apple® iOS, Android®
and BlackBerry®. You have complete control over how applications
behave on different devices. With RhoMobile Suite, you are finally
free from OS design constraints, able to create business applications
that are every bit as elegant looking and intuitive as their consumer
counterparts (This was copied from their main site).

Develop Native Application on Ubuntu with HTML/CSS GUI?

Redmond has a good idea occasionally:
The next-gen Windows will come with a new programming foundation, letting developers build native apps with the same techniques they use for Web applications. Microsoft calls this new variety "tailored apps."
There is always a steep learning curve for developing GUIs; each new toolkit you learn is different enough that it takes a lot of time and effort and frustration. Thus developing in HTML with CSS begins to look very appealing: it's much easier and much more portable; and with HTML 5 and CSS 3, it is very powerful.
Is there any support yet on Ubuntu (or even better, a cross-platform toolkit) for developing native applications that use HTML/CSS for the GUI? To minimize overhead, I do not want to start a full browser session. (That's not very good desktop integration.) I am particularly interested in answers for native JavaScript or Python 3, but any language would be alright (easier to learn a new language than a new GUI toolkit, in my book).
Edit: I have found this page, but have not had time to read it all or test it. It linked to Python XULRunner, but again I have no previous knowledge of it.
This was asked on Ask Ubuntu back in August of 2011.
In summary, the options are:
SeedKit
The JavaScript bindings for GNOME.
There are more options, but those are the two "big ones".
You can write native apps in HTML/CSS and Javascript using node-webkit, is an app runtime based on Chromium and node.js, you can use node.js modules into your apps. it's available on Linux, Mac OSX and Windows
I would like to add QtWebKit to the list. It's like SeedKit with better support.
I'm using it personally on a project where we have native (C++) code for the data layer, business logic and the presentation layer is done via HTML5 and heavy use of JavaScript. As far as I know Qt can be used with python as well so perhaps you could use it for all the business logic.

Cross-platform mobile application framework with mySQL?

I've been looking into some mobile development frameworks lately. The app I want to develop looks more like a business app. I should be able to retrieve data from my MySQL database. As well just fetch normal data, but as well a log-in system.
I would set up a webservice in PHP that the mobile app could use to retrieve the data, but what's the most robust framework to make these kind of apps?
It's important that these frameworks are free.
I've taken a look at
JMango
At first sight, it doesn't look like it's able to do something like that really. It seems to have it's own scripting language, seems unlikely that it can meet such business needs.
Rhomobile
Seems like you need a license to even get it running, so doesn't seem an option either.
phonegap
Looks nice, but what frightens me is that all business logic is pumped into javascript.
I'd vote for PhoneGap (disclaimer—I have contributed to this (a bit)).
PhoneGap puts the business logic in JavaScript as this is the only cross platform programming language. Other solutions conver/recompile code for each app.
Alternatively you could look at the Mono family of tools (MonoTouch & MonoDroid) which when combined with C#/VS2010 can be used to create apps for Windows Phone 7, iPhone & Android.

What about sencha or Extjs?

i'm here to ask a general question about Extjs or any other web related technologies....
i found out that it is impossible to parse xml without the help of any webservice.....
so i would like to know about the pro's and cons about these kind of technologies specifically sencha.
whats the best feature you find intresting about this technology and also the worst thing...
ExtJS, SmartClient, YUI, MooTools, etc are all rich Internet application (RIA) frameworks that allow you to integrate at the JavaScript and/or Google Web Toolkit levels. I have generally seen ExtJS and SmartClient compared most frequently. I have used SmartClient myself and one reason I did was because of the licensing differences between the two.
The biggest advantage of something like ExtJS or SmartClient is that they allow you to focus on building a data-driven service that easily integrates with their rich set of widgets. This allows you to focus on your data and simply leverage their flexible, cross browser-ish, slick looking web GUI controls.
In my opinion, it's a great time saver and browser robustness advantage. You can combine these with things like JQuery, etc. In fact, you can use ExtJS and SmartClient together if you like. (although most people won't)
There's a data package in ExtJS & Sencha Touch that allows you to easily bind client apps to JSON, YQL, XML datasources.
You should probably take a look at the documentation for the data.* part of the ExtJS library: http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.XmlStore and this area is further improving in the forthcoming EXT JS 4