I have to target Windows, MacOS, iOS and Android. My plan was to create separate applications for each platform.
However, I am now considering making an HTML5 website (that has different presentations based upon the device being used).
I can create a wrapper for each platform. Windows can include a Webkit control, iOS will have Safari, etc...
The wrapper will load the HTML5 pages into the browser and negotiate input/output for persistance. I can use WebSockets for communication with the outside world (ie. my server).
What am I missing here? What else would be required and what would be the obstacles I would have to overcome?
Best option for making cross platform applications is PhoneGap.
In PhoneGap you write HTML5 and JS code, it provides access of native APIs using JS code and allows you to compile your application and submit to different App stores.
http://www.phonegap.com
Related
Context:
I'm starting to implement a cross-platform app for Windows and Mac with electron Js.
The bundle that will use or use this electron Js app is developed in Angular.
My questions are:
Are there differences when developing the app for windows and mac?
Differences in, for example, how it is handled at the code level:
Native menus.
Notifications.
System app events: Minimize, maximize, close.
Running the app in background.
If there are differences, should I indicate them at the code level or Electron Js take care of translating this to each system and I just develop generically without worrying about it?
If I have to indicate at the code level, should I have two projects or can I indicate in the same project that and when something is used for Windows and for Mac?
Electron is designed to be cross OS compatible.
There should be no difference between building an Electron application for Windows, MacOS or Linux.
Implementing the use of native menus, notifications, system app events (minimize, maximize, close), etc with Electron's API's will ensure your application is cross OS compatible.
Some features of Electron modules may be particular to only a certain OS but these are clearly defined and explained within Electron's Docs and API. EG: The movable option when creating a new window new BrowserWindow({movable: true}) can only be implemented on MacOS and Window, not Linux.
As Node.js is bundled with Electron, you will need to be mindful on how you implement some Node functions. EG: Directory separators will be different between Operating Systems so using methods such as path.join([...paths]) would be prudent to make you code cross OS compatible.
As Chromium is also bundled with Electron, keep in mind your use of any particularly new HTML features. Ensure you are not trying to use cutting edge HTML features which have not made it to the version of Chromium you are using within your version of Electron.
Lastly, Angular is a front end framework, this will not be affected by the type of OS used.
In summary, one code base, designed and coded well, will work without issue on Windows, MacOS or Linux.
Xamarin is designed to create native iOS, Android, and Windows apps by coding it in C#. But can it also produce a web app?
If not, is there some solution that would enable us to do that?
You can write your backend code (services, data, domain, business logic, etc) in PCL libraries that can be shared between your Mobile apps and your website. But the web frontend would need to be written separately than the mobile front-ends.
I have just started using Titanium and was wondering if the apps I develop would be sent to Titanium server for compiling? Can anybody clarify? Thanks in advance.
You don't need to compile the apps on any of the Titanium servers. You can compile the apps from within Titanium Studio. When testing the app on the device, Titanium Studio automatically generates the ipa file and apk file for respective platforms
Edit:
Using Titanium, developers can create an application writing Javascript and calling Titanium's APIs. The Javascript is then interpreted at runtime. The application's UI then becomes completely native. There is no web UI in your app since the native Titanium APIs take over control of all UI needs. Titanium runs application's JavaScript using one of two JavaScript interpreters' JavaScriptCore on iOS (the interpreter used by Webkit) and Mozilla Rhino on Android.
The Javascript calls to the Titanium API are mapped to native code in the Titanium framework and generate native components. Events in those components are sent back to the code in Javascript where we can handle them
I'm developing a mobile app using ASP.Net MVC to generate HTML 5 pages. The HTML 5 pages will use jQueryMobile's loadPage to make calls to ASP.Net MVC to load pages into the DOM. Then it will use jQueryMobiles's changePage to make the page active in the DOM based on the user's interactions with the app. Calls to the MVC app will invoke different webservices to retrieve the source data to construct the HTML.
We plan on using PhoneGap with the app so we can submit the finished app to Apple and Android stores. My app does not need to interact with a device's native functionality (contacts, geolocation, etc.) Since we do not need to interact with the actual device's OS (except to make jQuery ajax calls to MVC app), then is PhoneGap really needed? Is the approach I've described above an appropriate way to make a web app viable on mobile devices?
Since my application is asp.net mvc and will be hosted on my servers, what gets sent to the Android and Apple stores? Is this where PhoneGap comes into play? Does PhoneGap create an executable of some sort that is submitted to Android and Apple stores? Then this executable is downloaded onto client devices? I'm assuming the executable will then make calls out to the MVC site via URL to retrieve the application HTML?
Am I looking at this correctly? Thanks for your help.
Phonegap (or some substitute) is not quite required but very helpful to create an app package from your HTML/JS/CSS source. Phonegap doesn't create the executable (your IDE does that) but is a framework of Java to JavaScript functionality (making it possible to run Java code from your JavaScript).
Phonegap basically wraps your HTML/JS/CSS site in a webview so that your code can be interpreted by the device's browser (sometimes in a more sand-boxed manner than running the browser normally, for instance pre-iOS-5 webview instances do not get the Nitro JS engine so they run slower than websites in the Mobile Safari browser).
You can create your own webview if your site is so simple it doesn't use any of the other Phonegap functionality but since it's already baked into Phonegap and the device won't have to download Phonegap. You might as well use Phonegap.
Phonegap Build (https://build.phonegap.com/) is a program you can purchase to have your app packages built and submitted to Apple/Google/RIM/Windows app stores. Generally you just use your own IDE to do this however. For instance to create an iOS app you have to use a new Apple computer (you have to have the latest OS version to build the latest versions of iOS packages). iOS app packages are created in XCode, and Eclipse IDE is a very common environment to create your Android app packages: http://developer.android.com/sdk/eclipse-adt.html
I noticed you said you are using $.mobile.loadPage() to load pages into the DOM and $.mobile.changePage() to navigate the user to those pages. If you just use $.mobile.changePage() then it will automatically grab the page with loadPage(). If you are using loadPage() to pre-load content then check-out jQuery Mobile's prefetching abilities: http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-cache.html
UPDATE for 2014
I have recently built some applications using Cordova 3.5 and the build process was very much so simplified. The package building process is now managed via your system's console and everything from installing plugins to rebuilding an application package is much easier.
I'd like to develop a stand-alone desktop application targeting Windows (XP through 7) and Mac (Tiger through Snow Leopard), and if possible iPhone and Android. In order to make it all work with as much common code as possible (and because it's the only thing I'm good at), I'd like to handle the main logic with HTML and JS. Using Adobe AIR is a possibility. And I think I can do this with various application wrappers, using .NET for Windows XP, Objective C for iPhone, Java for Android and native "widget" platform support for Mac and Windows Vista & 7 (though I'd like to keep the widget in the foreground, so the Mac dashboard isn't ideal). Does anyone have any suggestions on where to start? The two sticking points are:
I'll certainly need some form of persistent storage (cookies perhaps) to keep state between sessions
I'll also probably need access to remote data files, so if I use AJAX and the hosting HTML file resides on the device, it will need to be able to do cross-domain requests. I've done this on the iPhone without any problems, but I'd be surprised if this were possible on other platforms.
For me, Android and iPhone will be the easiest to handle, and it looks like I can use Adobe AIR to handle the rest. But I wanted to know if there are any other alternatives. Does anyone have any suggesions?
You might be interested in Appcelerator's Titanium. It's an alternative to Adobe AIR that lets you build native mobile and desktop apps using HTML and JS (with the WebKit rendering engine, so you can take full advantage of HTML5 and CSS3). It also satisfies your two sticking points:
SQLite is available for persistence storage.
There are no restrictions on cross-domain requests.
I used Titanium Desktop for a recent project and it was a relatively smooth development process. It's also open source so you have access to the full application at all times.
Check it out and let me know if it works for you.
You can create a desktop application with HTML, CSS & Javascript using either of the following two frameworks
TideSDK
AppJS
For mobile you can use the similar HTML and Javascript using PhoneGap