Native iPhone app in HTML/Javascript? - google-maps

I would like to build an app that heavily relies on Google Maps. Is it possible to write a native iPhone application in HTML/Javascript ? If so, will it be accessible from the app store ? Otherwise, how could I include Google Maps in a native app ?

You will need to build a framework application in Objective-C that contains a UIWebView. You can populate the UIWebView with your HTML/Javascript.
In my opinion the better alternative is to use the MapKit framework from a native app. MapKit lets you do almost everything you can do using the full Google Maps API and I think a native app will always work better on the device than a UIWebView container app.
I have used MapKit in a few of my apps and found it easy to use with nice performance. In the linked example I embed a MkMapView in a UIScrollView in page mode. I doubt you would have an easy time implementing this with a UIWebView and I am sure it wouldn't perform as well.

Yes, it is possible to do this. There is a great opensource project called PhoneGap http://phonegap.com/ that allows you to do exactly that. Not only but alos deploy on other mobile OSs like Android, blackberry etc.
To get on the app store, you need to register as an apple developer which is about US$100. Development can only be done on a mac) Apple gives you lots of software tools including code editors and iphone simulator.

Addressing the two parts of your question:
Is it possible to write a native
iPhone application in HTML/Javascript
? If so, will it be accessible from
the app store ?
There's a framework called NimbleKit that allows you to write your app in HTML/JavaScript and then converts it to Objective-C/Cocoa for you. There are several problems with NimbleKit, though:
It costs $99.
It adds a level of indirection that increases the chance of errors.
Because you're not using the 'real thing', you're much more limited in what you can do (i.e. you can only use what they have made available to you).
Another solution is to embed a UIWebView in a native iPhone app (you'll have to use a bit of Objective-C/Cocoa to do this) and then write the rest of your app as an iPhone web app that is loaded into the UIWebView. However, I would strongly advise you not to write an iPhone web app, whether standalone or embedded in a native app. As of writing, iPhone web apps have many disadvantages, including:
They're very slow.
They have limited functionality (e.g. no device APIs).
They can't take advantage of the Cocoa-Touch framework (a serious downside).
iPhone web apps may become viable in the future, but at this point in time, I'd steer away from them and write a native iPhone app using native technologies (i.e. Objective-C/Cocoa).
Otherwise, how could I include Google
Maps in a native app ?
Use Apple's framework "MapKit". See Displaying Maps and Annotations in the iPhone Application Programming Guide, this tutorial, and this tutorial for information on how to use MapKit.

In iPhone OS 3.0 and greater apple has created a custom Cocoa Touch control that allows developers to embed Google Maps into a native app. The maps support multi-touch and you can annotate the maps with custom views, find the user's current location and do other cool stuff.

The way to do this is to build your app as a regular web app (javascript/css/html). The embed that in a native WebView. The WebView is a container for iphone apps that are meant to be web apps. These apps are sold the same way as other apps on the app store.

It's not possible to write a native iPhone app in HTML/JS, http://code.google.com/p/iphone-google-maps-component/ may be of some use, or you can use:
UIApplication *app = [UIApplication sharedApplication];
[app openURL:[[NSURL alloc] initWithString: #"http://maps.google.com/maps?g=London"]];
Please see How can I launch the Google Maps iPhone application from within my own native application? for more info.

There is also Appcelerator Titanium, which looks to be a good framework for developing iPhone and Android applications using web technologies. They gave an interesting presentation on this at C4.
However, trying to "write once, run everywhere" on mobile devices will cause you to create something that is inferior on all platforms to native applications, because you will need to design for the lowest common denominator between them.

Related

Xamarin: how to create views / UI of an app dynamically from a Json

Have you already developed a Xamarin app whose views are generated from a Json recovered when launching the application?
I met a client with this kind of need:
they are developing a web app to prototype the screens by adding and positioning some controls (TextBox, Label, ...)
this generates a Json that must be interpreted by the Xamarin app: this will build the different views dynamically
in a first version, the user's data would be stored locally (through a file or SQLite) and synchronized "manually" when the device is connected to a computer
the app will work on Android only in a first time, and then on WPF
The client has not yet decided between Xamarin.Forms or Xamarin native, but it's probably more interesting to do it through Xamarin.Forms, even if iOS is not required: this should make porting on WPF easier.
Have worked on similar cases? Have you some recommendations? Are there plugins or patterns that could be used to simplify this development?
I've found this one, but it doesn't seem to be the same use.
There is also this article on iOS, but there is not the same thing on Android.
This would in theory be possible using a massive code behind builder for a page but should NOT be done for a production app. Mobile apps have very specific requirements that need to be thought of before attempting.
Xamarin is great for simplifying code reuse, and if you use Xamarin Forms you can reuse the UI components for Enterprise apps.(the less fancy and pixel perfect the layouts need to be the better. )
Your client would be better served by making it a mobile compatible web page instead from the details you have shared.

Difference between HTML5 API and Phonegap API

I'm working with hybrid mobile application, where I wanted to save the contact to the device contact list.
I followed the Phonegap Api documentation. I was suprised to see Phonegap and HTML5 both uses the navigator object,
As per my understanding, both the api uses the same navigator object. So, how Phonegap Api is different from the HTML5 Api?
It is hard to say exactly how they are different b/c it depends on which part of the API you're talking about and for which platform/browser. The point of Phonegap is to use the HTML5 api in a way that you can build a single web app and then compile it to a native ios, android, ... app. Mostly, the use of the phonegap api allows you to interact with the phone's api at a lower level than the HTML 5 api will allow. Like getting access to the contacts or the device's sensors. However, as browser support for HTML 5 evolves there is less and less functional ability you gain using phonegap.

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.

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