HTML5, jquery mobile app deployed as stand alone app - html

I have read a few forums and articles on this but can't get a clear answer.
I need to build a mobile app that can run on any platform/device. It looks like HTML5 + jquery is the best option but I need the application to do the following:
The app must run on any platform (Windows Phone, iOS, Android, etc).
It must work as a stand alone application. Meaning it must work without internet connection.
Because it is stand alone, I need a local database on the device. The database can be embedded in the app. I'm thinking SQL CE.
The local database on the device must be able to sync to a SQL Server database.
The app needs to interact with features of the device like the camera, or GPS device.
Is it possible to build such a mobile application?
I am using ASP.net MVC 4 to do the development.

If you want to use HTML5 and JQuery then the PhoneGap/Cordova framework would suit you best.
Phonegap is a cross platform framework that gives you access to the device features like GPS and Camera using a standard javascript API.
The app must run on any platform (Windows Phone, iOS, Android, etc).
Phonegap is compatible with all these and many more including blackberry. See here for full list: http://phonegap.com/about/feature/
It must work as a stand alone application. Meaning it must work without internet connection.
PhoneGap runs as a native application inside each devices webview. It does not need access to a data connection to run
Because it is stand alone, I need a local database on the device. The database can be embedded in the app. I'm thinking SQL CE.
PhoneGap cannot run its own SQL Database like a standard native application but it can use the web standards Web Storage and Web SQL. Though this approach does have limitations. Read more about this here: http://docs.phonegap.com/en/1.2.0/phonegap_storage_storage.md.html#Storage
The local database on the device must be able to sync to a SQL Server database.
This would be upto you to design and implement but can definitely be done
The app needs to interact with features of the device like the camera, or GPS device.
Most device features supported with PhoneGap. See above link for full support list.
If the lack of a full SQL Database support is a problem for you there are frameworks like Titanium Appcelerator that build a fully native cross platform app for you that may be more suited to your situation.
http://www.appcelerator.com/platform/titanium-platform/
But if you're using HTML and JQuery to go cross platform then PhoneGap is your best bet.
Edit: Also there are plugins for PhoneGap to run a standard SQLite DB but this requires extra work on each platform. Every platform you develop for would require a compatible plugin.
http://brodyspark.blogspot.com.au/2012/12/cordovaphonegap-sqlite-plugins-offer.html

Use PhoneGap: http://phonegap.com/
or Apache Cordova: http://cordova.apache.org/
or Intel XDK: http://xdk-software.intel.com/

Related

Mobile Apps latest technologies research

I am currently on a research understanding the whole buzz around some technologies that claim that they deploy themselves as cross-platform apps once you write your code in HTML5/CSS3/AngularJS/Whatever client side techonology.
I understand those technologies provide you with a bridge to the native-side of the OS you are running on, but I still lack some real important information regarding them.
Do all those PhoneGap/Ionic/Cordova just wrap your client-side code into an application? Is it the same as using the web-browser to get to a URL but with only some native-like additions(Camera/File etc..).
Do those technologies just connect to your website that is online using DNS? Or is the "Website" you are building does not sit on a server but only on the local OS? Can they run that application offline?
Besides the native additions you get with those kind of technologies, why bother developing with them when you can on the other hand develop a responsive website that can also work on desktop?
Can you connect to a server-side using Ionic/Phonegap? Let's say I have an MS-SQL Table I want to communicate with- is that possible?
I really have a hard time understanding what all those technologies are any good. Still, it is growing in popularity. Thanks for any light on that matter.
Do all those PhoneGap/Ionic/Cordova just wrap your client-side code
into an application? Is it the same as using the web-browser to get to
a URL but with only some native-like additions(Camera/File etc..).
They wrap your html, css and javascript code and provide a javascript API to use native features
Do those technologies just connect to your website that is online
using DNS? Or is the "Website" you are building does not sit on a
server but only on the local OS? Can they run that application
offline?
You should have all the html, css and javascript inside of your app, if you do it this way the app will work offline.
You can have it online too, but it won't work offline and have some problems.
Besides the native additions you get with those kind of technologies,
why bother developing with them when you can on the other hand develop
a responsive website that can also work on desktop?
If you don't need any of the native features phonegap provides, then do a responsive website, the idea of phonegap is fill the gap between the browser and the native apps, some day the browser will have access to all the native features and phonegap will die.
BTW, now phonegap have a desktop platform, so you can make it work as native app for phone and still work in the browser
Can you connect to a server-side using Ionic/Phonegap? Let's say I
have an MS-SQL Table I want to communicate with- is that possible?
Sure, you can make XHR calls to the server to get a XML, JSON, etc with the onlyne SQL database, you can do a POST too, and upload files.

Best way to distribute Cloud HTML5 App

I thought PhoneGap was a simple wrapper for HTML5, but it looks like it does in fact compile into native in some way.
I have a Cloud based, HTML5 Single Page Web application that I just want to run full screen, and distribute via an app store.
Should I just create a PhoneGap App with an InAppBrowser?
If you intend to publish an HTML5-based app in a "native" app store sucha s Google Play or Apple Store, you have 2 options:
1- Implement your own native application using a webview to show your web-based app.
2- Use some existing framework like Phonegap/Cordova even you do not use the native API. The framework will already setup everything for you to just deploy your HTML5 code.
However, if your web app is meant to be hosted remotely (i.e. not run from local files), you may encounter problems when trying to publish in the Apple Store. They have some strict rules about remote content, and about publishing apps that may not provide much more value and/or functionality than a simple web-app can.
Best.

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).

Installing an offline html app and data onto an iPad

I am contemplating buying an iPad and am wondering what options I will have for developing an app for personal use ... specifically whether I will be able to do it as an offline browser app. The app currently exists as an Android Java app; it interacts with a large local database (about 3MB) and displays images and text drawn from a very large pool of resources stored locally (about 2GB).
My immediate questions are:
How would I get the files (html/javascript, database, images and text) transferred into the iPad's storage from a Windows PC? With Android this is a simple matter of hooking up via USB and using Windows Explorer. Googling suggests that for an iPad I might have to use an app on Windows called DiskAid, but this costs $25 which seems a bit steep for my simple purpose. Are there free alternatives?
Once the files are installed on the iPad how would I run the html app? On Android this appears to be a matter of keying "file:///sdcard/MyBrowserAppFolder/mybrowserapp.htm" into the browser's address box. Does th iPad browser work in a similar way.
There are two basic kinds of applications that run on iOS.
Mobile designed web applications that are hosted on a server and accessed through Safari or another browser.
Native applications built using Xcode and usually objective-c.
For the latter, you could use the phonegap framework to build an app using existing html and javascript.
My personal advice is to invest the time to learning how to code this up using objective-c. Depending on what format your db is in, importing the structure and data might be trivial. It will take an investment of time, but doing things using the native tools is the best choice for iOS development in my opinion. I was in the same situation (PHP, VB.NET and Javascript developer) and just decided to take the time and learn to do it right. This was a great decision and the development time of a simple to moderate application takes very little time now.
Safari on iOS does not support the URL's of type file:// natively. So you either write your own app, purchase an app or use something like a local web server after jailbreaking.
Alternatively, and if you can verify that the app you have mentioned does what you want to do, then maybe $25 is not so much of a price. Depends on what your time is worth :)
However there are cheaper apps around that allow to transfer and read html via wifi and usb. (Not sure I can name them here)
The USB transfer aka iTunes Filesharing is a standard function that a developer can enable in the info.plist of their app. Many apps use this to transfer data between Computer and iDevice.

complete client side application using HTML 5

Is it possible to create a complete client side application using HTML 5 (it will embed chat clients, stock ticker) + JavaScript, and then bundle is with underlining Firefox 3.5 engine, so that user can install it as a desktop app on Linux, and then it runs in its own window using firefox 3.5 engine. The app will store everything in local storage - like url, usernames etc, and will not interact with any local server.
It would pure HTML5 + JavaScript based client web app which would be packaged, and can be installed or launched from startup scripts.
Or instead of using firefox 3.5 engine, we can use Mozilla Prism to convert it to web app, and then bundle it.
Well, you should take a look at xulrunner (https://developer.mozilla.org/En/XULRunner). This is an engine to build portable applications... like firefox. You are getting full Gecko engine + full access to the environment, like a plain application. (XUL is something similar to HTML -- it is still XML-based UI description -- but it is better suited to develop desktop applications -- using native/almost native UI).
It sounds like what you're trying to do can be done with Adobe AIR (though there is no HTML5 support yet). Adobe AIR apps can be written with just HTML and JavaScript, though AIR uses the WebKit engine, not FireFox's.
The app part is surely doable (and will work just about everywhere, not just Linux), the bundling appears to be the more problematic part -- not every distro of Linux will like the specific way you built the bundled Firefox, not to mention that you're cutting yourself off from just about any non-Linux box on the planet (and every linux box with a non-x86 compatible processor, etc, etc)... all for the sake of that bundling. Can't you stop at the prism aka webrunner part, without bundling?
I'm almost sure I've seen something like this done with Qt Webkit. It was only a few lines of C++ to create the window with the web browser control and load a local page. The page created the UI of the application. I can't find the link though.
I second what liori said about using XULRunner. You can deploy your HTML application easily, and, more importantly, when you run into limitations of HTML 5 or its level of support in Gecko, you can work around it by using XUL APIs.
(AFAIK, Firefox 3.5 doesn't support any socket APIs in HTML content, and it doesn't support offline storage in web apps, only the localStorage part).