Cross-platform Mobile App with HTML5 - javascript

I was asked to provide a tablet application with HTML5/JS/CSS which does not have dependency on any platform. Requirements:
Cross-platform mobile/tablet application
Offline capability and Storage (it should work in lack of internet connectivity and be able to synch after get connected)
Real-time data (it should be able to show any small changes from sensor values)
I should be able to connect to a CAN interface and get sensor values and ECU data. Because I have not come up with any solution for this part, I am thinking about Bluetooth. However, HTML5 doesn't support Bluetooth.
I'd appreciate to give me some vision if HTML5/JS/CSS can deal with this requirements (especially with Bluetooth)
Another question is that is it possible not to use any frameworks such as PhoneGap, RHoMobile, .... and just develop cross-platform app with raw HTML5/CSS/JS and have all requirements?

Have you looked in to PhoneGap / Cordova yet?
You can easily create cross-platform mobile applications using HTML5, JS and CSS.
http://phonegap.com
The built-in API provides access to most of the device's native features and functions. You can manage offline storage using localStorage or SQLite databases, and can detect network connectivity statuses to determine if you are offline / online and what level of connection you have (Edge, 3G, 4G, WiFi). With a combination of those, you could manage your data synchronisation.
As for bluetooth, the PhoneGap API doesn't support it out of the box, but it is highly extensible so developers can create their own plugins for missing or required functionality.
The community is awesome and many of the plugins have been compiled into a central repository on GitHub: https://github.com/phonegap/phonegap-plugins
I know that there is a Bluetooth plugin for Android available on that repository.
You can also write your own plugins quite easily to add any extra features that you need:
http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-android.html
http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-ios.html
** EDIT **
You posted an amendment to the question afterI'd written this answer mentioning PhoneGap. The honest answer is no, without a framework that interacts with the native device functionality, raw HTML5, CSS and JS would not be able to deal with bluetooth etc.

No, you cannot. A pure web application is not able, and will likely never be able, to use bluetooth.
HTML5 Bluetooth and Audio
Having developed a Web App before, I can tell you that anything involving offline has to be simple, and using device hardware is out.
Check out the frameworks, you may be able to get something to work. But it may just be a better/more realistic bet to develop a Native Application from the get go.

After a lot of searching I came up with MoSync which is a cross-platform SDK and is intended for developing different mobile applications. I believe MoSync can be the best answer for this question since it is really a rich SDK (C, C++, HTML, JavaScript) and has great tools and community that try their best to help you.
For further information I encourage developers to check here or visit their websites.

Most of the future mobile apps will be developed using HTML5. HTML5 standards are getting adopted very rapidly and those standards are supporting phone features like GPS, Accelerometer, Camera, Storage etc.
I will recommend you to use PhoneGap if you want to use any device features.

Related

LOB Desktop applications using HTML5, CSS, Node.js, Chromium Embedded Browser

With the tremendous progress going on with web technologies, does it make sense to bring these to desktop and client-server applications.
We typically build our applications using winforms and wpf and the code base is like 100k+ lines of code.
Is it worth exploring the option of HTML5 UI and Node.js backend and use a framework like the chromium embedded framework or node-webkit.
The reason I am asking this is that the support from Microsoft for the desktop technologies is questionable (wpf, metro apps ...).
At least with the technologies I listed, it is easy to port to make the application work across all platforms and companies like microsoft and google are pushing for html5 and javascript.
A number of companies are using CEF and similar web-based technologies for desktop applications.
Steam from Valve is CEF based (https://developer.valvesoftware.com/wiki/Chromium_Embedded_Framework), as is
Spotify https://community.spotify.com/t5/Help-Desktop-Linux-Mac-Windows/Chromium-Embedded-Framework/td-p/912377 and
Adobe Creative Cloud (I believe using Adobe Brackets Shell over CEF and incorporating Node.js) https://github.com/adobe/brackets-shell
Advantages for them are that server side content can be delivered to the application, as can UI updates, and the client machine is fully accessible.
We are using it for product authorization and delivery, the advantages of CEF for us are dynamic update from the server of both UI and business logic in Javascript, and because CEF allows calls from Javascript to C++, we can access files on disk and Registry entries that pure Web code cannot.
So I would recommend looking into this.
For ordinary Line Of Business applications, I would suggest no, don't go half-way.
I used to do advanced UI development in WPF, and it was amazing for its time (a decade ago), but nowadays it is really amazing what can be done all within a modern web browser. And yes, Microsoft's support of full-powered desktop technologies is like a ghost town (I suspect they just want to get their 30% commission on apps in their store, so they've shifted focus to UWP).
Why do you need to create a hybrid desktop/web application? Unless you have a specific (and important) need to break out of the browser's sandbox, why not go all the way and create a web application? Modern browsers have a lot more capabilities now, and they keep getting better.
There are also many technologies and frameworks that really help to make large-scale web application development a lot easier than it used to be.

What is the Difference between Xamarin and Telerik Platform

This is going to be quite a hectic question and im hoping that you can all Bear with me.
Im having difficulty fully understanding some things about mobile App development.
So my Main question is : What is the difference between Telerik Platform and Xamarin ? Dose it just depending on what you are more comestible with, Like if you are a c# developer and know the .Net framwork, Then use Xamarin or is it alot more complex than that ? As i know that Telerik uses Javascript, so is it more of an open dev based mobile app ?
Which is better for the future of mobile development as i want to move in the right direction.
As an Extra: Has anyone heard of Dart ? i found out about it last week and haven't had much time to Read up on it, but it looks like a web based solution from google.
Dartlang
In Xamarin you can build native applications for Android and iOS system.
It is also possible to write them for Windows Phone.
Xamarin uses C# language.
Apps are created natively using Xamarin wrappers.
There are two options for creating apps in Xamarin:
1) Xamarin.Forms is best for:
Data entry apps
Prototypes and proofs-of-concept
Apps that require little platform-specific functionality
Apps where code sharing is more important than custom UI
2) Xamarin.iOS & Xamarin.Android are best for:
Apps that require specialized interactions
Apps with highly polished design
Apps that use many platform-specific APIs
Apps where custom UI is more important than code sharing
Telerik Platform is good for web developers who want to create mobile apps:
Here you can write html and javascript.
Remember also that your apps on iOS and Android will be displayed in WebView (browser). Only Windows Phone apps can be written in html and javascript natively.
Hope this will help.
Please also see this (I asked about Xamarin and Apache Cordova):
http://www.codeproject.com/Forums/13695/Mobile.aspx
All of the mentioned framework do the same thing in different ways, its totally depends upon your skillset and interest which framework you find easy to understand or find interesting.
Each of those have their market in which you can grow. below are some links may help you.
http://www.telerik.com/campaigns/build-mobile-apps-with-dotnet
https://forums.xamarin.com/discussion/13686/the-future-benefits-of-xamarin-over-other-options-and-mobile-apps-replacing-websites
Dart is a modern open source programming language that allows to write concise code
built-in support for async/await, Future (Promise), Stream (Observable), ...
Supports lots of platforms
Server with the Dart-VM (Windows, OSX, Linux)
in the browser after to-JS transpilation
Android and iOS by Flutter https://flutter.io/
embedded systems by Dartino https://dartino.org/
Dart can be transpiled to JavaScript (to-TypeScript is work in progress)
extensive high-quality standard libraries
dart:html library that for browser abstraction that makes most polyfills redundant
shipped with lots of tools
package manager
analyzer/linter
debugger and profiling tools
test runner
Dartium development browser
...
IDE support
easy integration using the IDE services the analyzer provides
Atom plugin
WebStorm/IntelliJ plugin
...

Protecting Apps with Apache Cordova MS VS Extension on App Stores

Just have a question about apps that are uploaded on the Windows Store, Andriod Store, and Apple Store. I have never built an App before for any of the three stores, but the Multi Hybrid Extension for Visual Studio seems to be a great start to cover all three Platforms.
How do I protect my code for apps that are uploaded to the three stores? The core development for the Apache Cordova extension is done in HTML5 and Javascript. On a regular HTML / Javascript website, the end user can simply right click and View Source of the page and see all the code I've written.
My question is, how is this protected for apps that are uploaded to the app store? Will someone be able to reverse engineer my application and get the code and simply re-sell it?
Thank you all for your time
You want to, develop once, deploy many. Then, you’ll want to use HTML5 to do it.
You can use Apache Cordova directly, but you’ll want to use a service like Telerik AppBuilder, Adobe Phonegap or Intel XDK.
Regarding your question, your best bet is to use a good JavaScript source code obfuscation service to protect your sources before publishing. There is no such thing as a 100% full proof solution when it comes to JavaScript obfuscation, but professional tools such as JScrambler can take you a long way. At least JScrambler I know that it supports Mobile and HTML5, which is good because they make sure the resulting code is compliant.
There are other tools, even free ones. But be careful though, there are tons of other tools that do obfuscation, encoding/packing or minfication that seem to provide protection, but are reversed in a few minutes. So, unless you really know how to tell the difference, I recommend that you rely on a professional service.

Can I write an app in javascript/HTML/CSS and sell it on the app store, google's play,and microsoft mobile app store?

I am interested in web standards (js/HTML/CSS). I would like to create applications from them, for phones and tablets. And sell these applications on mobile stores and web stores (for appstores and google play).
Is it possible ? What would be the best way to do it ?
Yes, there is a PhoneGap platform that can be used for building mobile apps for iOS, Android, Symbian, Windows Phone.Apps developed with it are accepted in all the stores. It is quite popular, robust and has nice features.
As mentioned in one of the other answers, yes PhoneGap will do the trick if you decide to write your app in HTML/CSS/JavaScript. Now, if you want to have a pleasant user experience on both smartphone and tablet operating systems, I would also recommend looking into Twitter Bootstrap.
This CSS framework has built-in responsive web-design styles that will allow you to scale things down in a user-friendly manner from tablet to smartphone, as well as show/hide different parts of your HTML depending on whether your users are viewing the page on a tablet or smart phone.
Specifically, you can do things like the following:
<div class="visible-tablet">
This will only be visible on tablets.
</div>
<div class="visible-phone">
This will only be visible on smart-phones.
</div>
For a full listing of the responsive design support in Twitter Bootstrap, check out their section on responsive design.
You may also want to check out the Google Chrome Web Developer plugin to assist you in creating a responsive web experience. This plugin lets you (among other things) view how your page will look on multiple device resolutions and is an invaluable tool for debugging resolution-specific issues.
You can look at Zurb Foundation, which is a very active open source project for building responsive web apps for mobile devices. Some overall description of the features here.
You can create Windows 8 Apps using Javascript and HTML 5 (apart from using Native languages). Windows 8 runs on Surface tablets and PC's.
Create your first Windows Store app using JavaScript (Windows)
There is a free ebook as well: free-ebook-programming-windows-8-apps-with-html-css-and-javascript
There are lots of options around - PhoneGap seems to be the most popular and, since it's now part of Adobe, it will probably continue to be popular.
However, there is a more important issue to be considered here: iOS users expect an iOS app experience, Android users an Android one... You get the idea. Make sure it's the best choice for your customers.
See this story about HTML5 at Facebook.
Also, and I know I might open a can of worms here, the performance will always be inferior to that of a native application.
You can also try MoSync:
"Build native mobile apps for all the major platforms using our leading open-source, cross-platform development environment. Now with support for In-App Purchases, NativeUI and Windows Phone 7." ]
There's Titanium from Appcelerator where according to their site you can build native apps using Javascript.
Just a late update: Facebook has open-sourced react-native since use asked your question and unlike PhoneGap (now called cordova) React-Native does not build hybrid app but builds true Native mobile application with the same power you would get when using Java for android or ObjectiveC for IOS. You can find out more here
No point in doing Microsoft/Windows Mobile anymore since it's now dead, but the easiest way to create Android apps based on HTML is to use DroidScript which can be found on Google Play (it did not exists at the time of this question).
You can also build native (non-html) apps with pure JavaScript using the same tool and it's far easier to use for novices than PhoneGap/Cordova.

How to create javascript interface for ios application obj-c?

does anyone know how to create a javascript interface in iOS that can be called from javascript? My aim is to save data from a website in a native fashion and not using html5 local storage.
If I understand correctly, what you need is a mobile webapp packaging solution.
The most popular here is, perhaps, PhoneGap, it supports many platforms including iOS. The product is free and open source. You will still need to use Apple's iOS platform SDK and have a developer account. As for storage mechanism, I believe PhoneGap has a solution for it (allowing the storage to be persistent, not cleared out like browsers' localStorage).
If you want to simplify your deployment process, you may want to check out appMobi, they build on top of PhoneGap, providing their own development kit and cloud deployment services.
Also refer to this thread that discusses different kits:
Comparison between Corona, Phonegap, Titanium
UPD. Have you tried the PhoneGap SQLite plugin for storage?

Categories

Resources