MyShuttle.biz and multi device development of hybrid apps for iOS, Android and Windows with Visual Studio Tools for Apache Cordova
[**NEW!! – Updated on March 2015 – Compatible with VS 2015 CTP 6 **]
1. Blog Post: Global Intro of the MyShuttle.biz demo apps from Connect(); Visual Studio and Azure event
2. Blog post: MyShuttle.biz ASP.NET 5 Web Apps and Services
3. Blog Post: MyShuttle.biz and Cross-platform Mobile Development of native apps for iOS, Android and Windows with .NET and Xamarin
4. (Current post) MyShuttle.biz and multi device development of hybrid apps for iOS, Android and Windows with Visual Studio Tools for Apache Cordova
5. Blog post: MyShuttle.biz Azure backend integration with LOB services (Invoicing, O365 API and SalesForce API)
Sometimes you actually want to create an app that has basically the same look and feel across different mobile devices. You might want this to decrease training cost or to scale up to the breadth of devices you want to support. You might want to build a web app but you need device capabilities like offline support and GPS, and you want to use the store for deployment and discovery.
Cordova Apps are known as hybrid apps, since you develop in the same way tan you’d do for web applications, but you get some of the features you can get in native apps, like Access to some hardware’s capabilities of the devices. On the other hand, it is important to know that usually these kind of hybrid apps cannot reach the same level of performance tan a native app, so depending of what kind of app you are targeting, hybrid Cordova apps could be “good enough” for your goals (many simple LOB and data-driven apps could be addressed by Cordova apps. for instance), or not enough, if you are looking for stunning performance and flashy UX.
Cordova TypeScript template
The MyShuttle.biz app for vehicle drivers is based on Apache Cordova using TypeScript. Within the Myshuttle scenario, it is situated where you can see the light blue star, below.
And below you can see exactly that same Cordova app deployed into different devices and mobile OS (Windows Phone, Android and iOS).
Setting up the MyShuttle.biz Cordova app in Visual Studio
The requirements in order to set these client apps up in Visual Studio are the following:
– 1. Visual Studio 2015 Preview (or Visual Studio 2013 with Update 4 plus Visual Studio Tools for Apache Cordova CTP3.0 for VS 2013)
– 2. (OPTIONAL) Devices/Hardware (Android, iOS or Windows Phone) if you want to try the app in a real device. Usually, Android devices work pretty well with Cordova apps and have less requirements tan iOS devices that Will require a Mac.
– 3. Emulators: For Android and Windows Phone or Store apps, Visual Studio 2015 Preview already supports an emulator. For iOS emulator, you´ll need a Mac with XCode installed, so you´d use the iOS emulator in the Mac.
Configuring the MyShuttle.biz Cordova app to consume the Azure Mobile Service and Bing Maps key
Open the solution called MyShuttle.Client.Cordova (Multi-Device Hybrid App). You´ll see a solution similar to the following.
NuGet Packages Configuration
Make sure that Visual Studio is using the right NuGet feed, from VS –> Tools –> Options –> NuGet package Manager –> Package Sources
nuget.org –> https://www.nuget.org/api/v2/
Cordova App Custom Settings Configuration
This is custom Configuration needed to consume your own Azure Mobile Services and SignalR Services. You´d need to have the services already deployed in Azure if you want the final Process of tha app to work (submitting the invoice data into the Mobile Service, then, a .PDF invoice Will be created and submitted into O365 SharePoint Lib, etc.). But all that server Configuration need to be performed in advanced. Other tan that, you´d be able just to start the Cordova app and run the first simple screens simulating that the cab-shuttle Service started, but you won´t be able to submit the invoice data to the backend.
Open the file: app>modules>core>services>settingsService.ts
Change the following URLs and keys to your own data, urls and IDs.
Of course, you first need to have the Azure Mobile Service already deployed in Azure and the Azure Notifications configured, if you want to have the app working with the integration with the other client MyShuttle.biz apps (push notifications and SignalR real-time communications) plus the LOB integration with O365 SharePoint Library to store the .PDF invoices and customer´s data uploaded into SalesForce.
this.bingMapsKey = ‘YOUR_BING_MAPS_TOKEN_KEY’;
–> (See Bing Maps key explanation below)
this.realTimeNotificationsServerUrl = ‘http://YOUR_SITE.azurewebsites.net/’;
–> (This is the ASP.NET 5 web site URL in Azure that is also hosting the SignalR Hub Service)
this.mobileServiceKey = ‘YOUR_MOBILE_SERVICE_KEY’;
–> (This is the KEY of your deployed Azure Mobile Service used by the Cordova App and the LOB integration with O365 and SalesForce)
this.gcmSenderId = ‘YOUR_GCM_Sender_ID’;
–> Check this info about this ID: http://developer.android.com/google/gcm/gs.html
–> (This is the URL to your deployed Azure Mobile Service used by the Cordova App and the LOB integration with O365 and SalesForce)
About the Bing Maps key
The same Bing Maps key is also used by the MyShuttle’s Xamarin, Windows apps and Web application, so you might already have it if you used it for them.
If you don’t have any Bing Maps key, you need to obtain that from Microsoft, since in order to use the Bing Maps APIs, you must have a Bing Maps Key.
The Bing Maps APIs include map controls and services that you can use to incorporate Bing Maps in applications and websites. In addition to interactive and static maps, the APIs provide access to other geospatial features such as geocoding, route and traffic data and spatial data sources that you can use to store and query data that has a spatial component, such as store locations.
This would be the procedure if you need to: Getting a Bing Maps Key.
Familiar Web Development frameworks
So, this just shows that in addition to the same frameworks, you can also use the tools you’re familiar with for web programming.
The difference from web apps with Apache Cordova apps is that the app runs like an app – without a browser container and your app has access to the native capabilities of the device.
1. Double click on the “config.xml” file.
2. Select the “Plugins” tab.
So you can see, I can access the Camera, Batery info, file-system, Geolocalization, etc. This is why these kind of apps are often referred to as Hybrid Mobile apps (for example PhoneGap which is also based on Apache Cordova, etc.).
Visual Studio provides great tooling to build Apache Cordova apps but we’re also contributing back. In the last few months, we already did the following:
– Added Cordova support for Windows 8.1 Universal Apps
– Added Cordova support for platform specific project resources like icons and config settings.
– Fixed some security bugs that benefitted all platforms, etc.
We’re working with the community to ensure that Cordova is Enterprise worthy.
Cordova apps and Microsoft VS Android emulator
Debugging Cordova apps in iOS devices
Since the first launch for the VS tools for Cordova in May 2014 (it was CTP1), Visual Studio was able to debug Cordova apps in Android devices and emulators. It was also able to deploy app to an iOS device. But since VS 2015 Preview, you can also launch and debug the app on an iOS device or simulator thru the iOS build host deployed in a Mac, where you need to have connected the iOS device (iPhone or iPad).
To enable iOS build and debug, you need to have the vs-mda-remote build agent installed on a Mac machine. Basically, you just need to have Node.js installed in the Mac, then run the following command with admind priviledges:
“sudo npm install -g vs-mda-remote –user=$USER”
This latest release makes the first time setup much easier and we provide more verbose instructions while the agent is running regarding build status. Additionally, the communication between Visual Studio and the build agent that runs on a Mac machine can now be made securely:
To learn more about how to configure Visual Studio to support iOS build, debugging, and deploy, check out this MSDN article.
If you want to check out how the debugging experience of Cordova apps in Visual Studio is, see Amanda´s recorded demo at the Connect(); as she was using these demos that we created especially for this event:
KEYNOTE DEMO – Visual Studio in a world of multiple devices (MINUTE 59:35 of that keynote)
Wrap up about MyShuttle.biz hybrid app built with Visual Studio Tools for Apache Cordova
This app is primarily built with web technologies (HTML/JS/TypeScript) but can access native device features like GPS and native telephony through Cordova plugins.
With the tools for Apache Cordova, Visual Studio developers get the same experience building for iOS, Android, and Windows across emulators, simulators, and devices.
Download the code!
Download page from MSDN Samples