{"id":73,"date":"2014-11-30T19:04:00","date_gmt":"2014-11-30T19:04:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/cesardelatorre\/2014\/11\/30\/myshuttle-biz-demo-apps-from-connect-visual-studio-and-azure-event\/"},"modified":"2014-11-30T19:04:00","modified_gmt":"2014-11-30T19:04:00","slug":"myshuttle-biz-demo-apps-from-connect-visual-studio-and-azure-event","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/myshuttle-biz-demo-apps-from-connect-visual-studio-and-azure-event\/","title":{"rendered":"MyShuttle.biz demo apps from Connect(); Visual Studio and Azure event"},"content":{"rendered":"

\"clip_image001\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

[**NEW!! – Updated on March 2015 – Compatible with VS 2015 CTP 6 **]<\/p>\n

This is the first blog post of a series of posts regarding the MYSHUTTLE.biz<\/strong> sample applications implemented with the new Visual Studio 2015<\/strong> Preview<\/strong> and .NET 2015 Preview<\/strong>.<\/p>\n

Here’s the list of blog posts:<\/p>\n

1. (Current blog post) Global Intro of the MyShuttle.biz demo apps from Connect(); Visual Studio and Azure event<\/strong><\/a><\/em><\/p>\n

2. Blog Post: MyShuttle.biz ASP.NET 5 Web Apps and Services<\/strong><\/a><\/em><\/p>\n

3. Blog Post: MyShuttle.biz and Cross-platform Mobile Development of native apps for iOS, Android and Windows with .NET and Xamarin<\/strong><\/a><\/em><\/p>\n

4. Blog Post: MyShuttle.biz and multi device development of hybrid apps for iOS, Android and Windows with Visual Studio Tools for Apache Cordova<\/strong><\/a><\/em><\/p>\n

5. Blog post: MyShuttle.biz Azure backend integration with LOB services (Invoicing, O365 API and SalesForce API)<\/strong><\/a><\/em><\/strong><\/em><\/p>\n

As part of the Connect(); Visual Studio and Azure event<\/a><\/strong> delivered at NYC and online on Nov 12th 2014 (check the keynotes and sessions thru Channel9<\/strong> here<\/a>), we were working since late summer on a end-to-end scenario based on a set of comprehensive demo apps to showcase at this event.<\/p>\n

We called that fictitious business application MyShuttle.biz<\/strong>. We even created a logo for this solution! \ud83d\ude42<\/p>\n

I’ll explain the Business Domain later on, so you know what the apps are about. But the main idea is about a highly scalable multitenant B2B solution for carriers and enterprise customers. Kind of an “Uber like” but enterprise-only app\/system.<\/p>\n

\"image\"<\/a><\/p>\n

In this case, the business domain is just a channel we need in order to explain the different Microsoft development technologies provided under Visual Studio 2015<\/strong> and .NET 2015<\/strong>. The theme or business domain could have been any other business domain. We just wanted a familiar and easy to follow domain.<\/p>\n

You can see a live intro to the domain and the apps working together (push notifications between the apps, etc.) in ScottGu’s kenote with Nicole’s demos at Connect(); event<\/a> (MINUTE 12:00 of that keynote<\/strong>).<\/p>\n

The technologies<\/h2>\n

These demos span across all the different new technologies being presented at this event under the .NET 2015<\/strong> Preview and Visual Studio 2015<\/strong> Preview umbrellas.<\/p>\n

Because these demos use all the different development technologies for different contexts, I’ll write different blog posts focusing on each context. This is just the ALL UP intro to the MyShuttle.biz demo apps.<\/p>\n

\"image\"<\/a><\/p>\n

Basically, it covers the following technologies all within a single business solution with many different apps and services connected between them:<\/p>\n

Web applications<\/h2>\n
\n

– ASP.NET 5 MVC<\/strong> site (part of the new .NET 2015<\/strong> wave)<\/p>\n

– SPA<\/strong> (Single Page Application) using Angular.js<\/strong>, jQuery<\/strong>, bootstrap<\/strong> and consuming our ASP.NET 5 Web API<\/strong> Services (part of the new .NET 2015 <\/strong>wave)<\/p>\n

– Support for Bower<\/strong>, NPM<\/strong> and Grunt <\/strong>in VS 2015 Preview Tooling<\/p>\n<\/blockquote>\n

Services, Azure, middleware and LOB integration<\/h2>\n
\n

– ASP.NET 5 Web API<\/strong> services (part of the new .NET 2015<\/strong> wave)<\/p>\n

– ASP.NET 5 SignalR (<\/strong>part of the new .NET 2015 <\/strong>wave)<\/strong><\/p>\n

– Azure Web Sites<\/strong><\/p>\n

– Azure Mobile Service<\/strong> (Web API)<\/p>\n

– Azure Web Job<\/strong><\/p>\n

– Azure Push Notifications Hub<\/strong><\/p>\n

– Entity Framework 7<\/strong><\/p>\n

– Connected Services: O365 API <\/strong>and SalesForce API<\/strong><\/p>\n<\/blockquote>\n

Cross-platform Mobile apps<\/h2>\n
\n

– Universal Windows apps<\/strong> in C#<\/strong> (Windows Phone<\/strong> app and Windows Store<\/strong> app)<\/p>\n

– Xamarin<\/strong> C# apps (iOS<\/strong> app and Android<\/strong> app)<\/p>\n

– Cordova<\/strong> HTML\/JS Hybrid<\/strong> app (for Android<\/strong>, iOS<\/strong> and Windows Phone<\/strong>)<\/p>\n<\/blockquote>\n

IoT devices and Cloud Services for IoT<\/h2>\n
\n

– .NET Micro Framework<\/strong> client programs running on GHI FEZ Raptor board<\/strong> with many different IoT sensors<\/strong> (accelerometer, GPS, Compas, etc.)<\/p>\n

– Azure services (like Azure Events Hub<\/strong>) gathering massive amounts of IoT events<\/p>\n<\/blockquote>\n

Big Data and Cloud processes<\/h2>\n
\n

– HDInsight<\/strong> (Hadoop<\/strong> in Azure)<\/p>\n

– Azure Machine Learning<\/strong><\/p>\n

– Power Map<\/strong> and Power Query<\/strong><\/p>\n<\/blockquote>\n

If you want to have an introduction to “What is ASP.NET 5 and .NET Core 5 within .NET 2015<\/a><\/strong><\/em>”, check this blog post<\/a> that I published a few days ago. With that info, you should be able to position the different .NET technologies that we’re using wthin this set of demo applications.<\/p>\n

The Business Domain<\/h2>\n

MyShuttle is a B2B highly scalable multitenant SaaS solution that targets corporate scenarios in which carrier companies offer transport services to enterprise customers.<\/em><\/p>\n

\"image\"<\/a><\/p>\n

So this multi-tenant SaaS system would allow any number of carrier companies who must be syndicated with the system, to provide their services (cabs\/shuttles) directly to any number of customers enterprises\/companies who would also be registered in the MyShuttle.biz system. The final outcome? any employee in those customer companies would be able to request a cab\/shuttle at any time in any place\/city without worrying about how to pay. Everything would take place underneath between their company and the carrier company for that ride. That’s kind of the idea for the business domain.<\/p>\n

The scenarios<\/h2>\n

Mobile First and Cloud First<\/h2>\n

The global scenario is described in the following image (although we’re not taking into account the IoT and Big Data scenarios in there. IoT and Big data scenarios are described in the next section).<\/p>\n

\"image\"<\/a><\/p>\n

In this diagram we have quite a few scenarios, but all are inter-connected between them thru Services in the cloud. We have web apps implemented using the brand new ASP.NET 5 (“Project K”), either MVC, Web API Services and even SignalR. Then we also have native mobile apps for the customers (based on C#, either .NET as Universal Windows apps or Xamarin native apps for iOS and Android). We also have a simpler mobile hybrid app implemented with Cordova (HTML\/JS) and using the VS 2015 tooling for Cordova, a WPF desktop app and finally we’re integrating our processes (invoices) with LOB systems, thru VS Connected Services, like using O365 API and using SharePoint libraries as repository of .PDF invoices or using Salesforce API to upload customer’s data into the CRM.<\/p>\n

IoT and Big Data<\/h2>\n

The second big scenario is about IoT devices connected to the cloud (Azure services) in order to gather massive amounts of IoT events coming from sensors. For instance, we could have a small board placed in the vehicles\/cabs, with sensors attached to it like accelerometer, compass, GPS, or alarms coming from the engine regarding fuel level, breakouts or even accidents! Once we have that data in the cloud, we can analyze and learn about it with Azure Machine Learning and going further with Big Data analysis based on HDInsight (Hadoop in Azure). This is how this second scenario looks like from a high level point of view:<\/p>\n

\"image\"<\/a><\/p>\n

IMPORTANT NOTE<\/strong>: The demo apps and code for this second scenario (IoT and Big Data) will be available a few weeks later than the “Mobile First, Cloud First apps”. In this case (IoT and Big Data) we’re planning to publish it in late January or early February 2015 since we need to make major adjustments in the Azure backend.<\/p>\n

So let’s start with the first part of, the web applications based on the brand new ASP.NET 5<\/strong>.<\/p>\n

Public Web Site – ASP.NET 5 MVC<\/h2>\n

As my next blog post within this blog series, I will publish a specific blog post about ASP.NET 5 and MyShuttle.biz, so drilling down into technical details of this web site and the SPA web application. (Blog Post on Deep dive about the MyShuttle.biz ASP.NET 5 web Apps and Services<\/a><\/strong>).<\/p>\n

This is a typical public web site. It’s main purpose is to show information about the business but in a pretty modern and clean way.<\/p>\n

\"image\"<\/a>If you scroll down, you can see how it provides a responsive design and even if you resize the browser, you can see how it would also be perfectly valid for mobile devices, like a smart phone:<\/p>\n

\"image\"<\/a><\/p>\n

I’m not going to get into details now, but in the deeper blog post about the MyShuttle.biz ASP.NET web apps<\/a>, I’ll show how you can now take advantage of VS 2015 and make use of front-end web development frameworks and tools for JavaScript, HTML and CSS, like Bower<\/strong>, NPM<\/strong>, Grunt<\/strong> and Gulp<\/strong>, all of them integrated within Visual Studio 2015. At the same time, I will drill-down into the new features we now have in ASP.NET 5<\/strong> and .NET Core 5<\/strong>. A lot of stuff, this is a new world, I tell you!<\/p>\n

Private Web App – SPA (Single Page Application) Angular.js, jQuery, ASP.NET 5 Web API<\/h2>\n

The second application is a Web SPA which you can access by login in from the public web site. But it is in reality like a different web application, simulating a private web application especially made for the Carriers’ administrators. In this case, this application is a data-driven and CRUD app so you can create and update info about your drivers, vehicles, etc.<\/p>\n

\"image\"<\/a><\/p>\n

  \"image\"<\/a><\/p>\n

\"image\"<\/a><\/p>\n

Underneath, it is making heavy use of JavaScript<\/strong>, Angular.js<\/strong>, jQuery, LESS <\/strong>and Bootstrap<\/strong> and consuming the ASP.NET 5 Web API<\/strong> Services that you can have published as Azure Web Sites<\/strong> or, of course, in any ISS<\/strong> or even testing it in your local dev web server in Visual Studio. The Web API Services are also using the new Entity Framework 7<\/strong>.<\/p>\n

Thanks to ASP.NET 5, .NET Core 5 and .NET Compiler Platform (“Roslyn”) you can develop and run ASP.NET applications in a Mac or Linux. Microsoft is also helping the community to build plugins for Sublime Text editor and Emacs, so you can have extended features like C# and ASP.NET Intellisense and refactoring tasks right within those editors. That will allow Mac, Linux and Windows web developers to work together on the same ASP.NET web projects.<\/p>\n

The MyShuttle.biz<\/strong> web applications (public Web Site and SPA web app) have been tested in a Mac<\/strong> running on top of Mono<\/strong> and Kestrel<\/strong> (web server).<\/p>\n

\"image\"<\/a>   \"image\"<\/a><\/p>\n

Again, for deeper technical details about this app and the ASP.NET 5 Web API Services<\/strong> it is consuming, and all the new thing you have about it in Visual Studio 2015<\/strong> (new way of working with References<\/strong>, NuGet<\/strong> packages, .NET Core 5<\/strong> framework running side by side<\/strong>, etc.), check my blog post about it<\/a>.<\/p>\n

You can also check the recorded keynote from Scott Hanselman<\/strong> at the Connect(); event in order to get a high level overview of this content, as he was using these demos that we created especially for this event: Cloud development with Azure and Visual Studio keynote<\/a> (First demos in this keynote)<\/p>\n

 <\/p>\n

LOB integration with VS Connected Services, Azure, O365 API and SalesForce API<\/h2>\n

The MyShuttle.biz<\/strong> applications provide a LOB<\/strong> integration<\/strong> scenario<\/strong> which is triggered from the driver’s app (Cordova app<\/strong> running on any Smartphone). This app will generate the data related to a single ride that is required to create an invoice (ride’s cost, customer data, customer’s signature, etc.). That data is submitted to the cloud (Azure Mobile Service<\/strong>) and from there it triggers several actions. On one hand, by using Salesforce REST API<\/strong><\/a> it will upload the customer’s data to a Salesforce CRM, and on the other hand, an asynchronous process based on Azure Queues<\/strong> and an Azure WebJob<\/strong> that will generate a .PDF<\/strong> with the invoice data and finally that .PDF will be uploaded to a SharePoint library in an Office 365 site thru the O365 API<\/strong>.<\/p>\n

\"image\"<\/a><\/p>\n

Either the O365 API and Salesforce REST API<\/a> code\/references are provided in an easy to get started way by the new “Add Connected Services<\/strong>” in Visual Studio.<\/p>\n

The Connected Services is, at the end of the day, like a API catalog that provides references and code, that you have right into VS, so you don’t need to research in the Internet for “HOW TOs”.<\/p>\n

\"image\"<\/a><\/p>\n

For deeper details about this demo (Azure WebJobs, Connected Services and the whole scenario you can see above) Check this blog post:<\/p>\n

Blog post: MyShuttle.biz ASP.NET 5 Web Apps and Services<\/strong><\/a><\/p>\n

You can also check the recorded keynote from Scott Hanselman<\/strong> at the Connect(); event in order to get a high level overview of the LOB integration demo highlighted above, as he was using these demos that we created especially for this event:<\/p>\n

Cloud development with Azure and Visual Studio keynote<\/a> (MINUTE 27:41 until MINUTE 33:30<\/strong>)<\/p>\n

Cross-platform mobile development for native apps: C#, .NET, Xamarin and C++<\/h2>\n

Next scenario is about the customer apps, so the enterprise employees using their mobile phones to request a shuttle\/cab or the customer-admin using a Windows tablet (either Windows 8.1, Windows RT or Windows 10) in order to analyze his employees’ rides, expenses and even .PDF invoices by querying the SharePoint library thru the new O365 API.<\/p>\n

In this case (scenario for end customers) you want to have the best user experience for the mobile app users, so you’d probably will want to create native mobile apps that can fully access all the device’s capabilities and provide the best performance. One choice is to invest a lot for each OS, like iOS-ObjectiveC\/Swift, Android-Java, Windows-.NET or the best way to achieve a great ROI is to bet on a good cross-platform but native approach, like using C# (.NET + Xamarin) and target the three different OS platforms (iOS, Android, Windows) at once.<\/p>\n

\"image\"<\/a><\/p>\n

Using C#<\/strong> thru .NET<\/strong> and Xamarin<\/strong> you can reuse around 80% of your client code (like we did, reusing ViewModels<\/strong> based on MVVMCross<\/strong> framework or re-using Service Agents and other client app logic based on Portable Class Libraries<\/strong>) but having the possibility to customize the end user experience according to the different styles and design guides from each OS platform. Usually you’d want a clearly different design for Windows Phone<\/strong> apps, iOS<\/strong> apps or Android<\/strong> apps, since the look and feel of each environment is different, as you can tell when looking the above snapshot with our apps.<\/p>\n

Because we are making use of PCL<\/strong> (Portable Class Libraries) a large percentage of the C# client code is also reused by the “Tablet<\/strong>” Windows Store App<\/strong> (shown above) and even our WPF<\/strong> desktop app, not just between the phone apps. At the end of the day, you can share C#<\/strong> code and PCL libraries between any device\/machine that can run .NET<\/strong> or Xamarin<\/strong> (or ASP.NET 5 and Mono if talking about the server side).<\/p>\n

Something new Microsoft is releasing about native apps and cross-platform, as well, is the new Visual C++ for Cross Platform Mobile Development<\/strong>. In this case, we created a cross-platform C++ library<\/strong> implementing an OpenGL<\/strong> transition that runs within the Android Xamarin app<\/strong>. Check the following link for more details about Visual C++ for Cross Platform Mobile Development.<\/a><\/strong><\/p>\n

Again, you can see deeper technical details in this blog post focusing just about the C# Native apps and Cross-Platform Mobile, here:<\/p>\n

Deep dive on MyShuttle native mobile Apps powered by C# Cross-Platform-mobile development<\/strong><\/a>.<\/strong><\/p>\n

You can also check the recorded keynote from Amanda Silver<\/strong> at the Connect(); event in order to get a high level overview of this content, as she was using these demos that we created especially for this event: Visual Studio in a world of multiple devices<\/a> (MINUTE 35:20<\/strong> of that keynote)<\/p>\n

 <\/p>\n

Hybrid mobile apps: VS 2015 Tooling for Apache Cordova, HTML and JavaScript<\/h2>\n

Next scenario is about the driver app, so the drivers from each carrier can accept the ride requests from the customers. In this case, and since this application is simpler and you might not care so much about a personalized user experience per device, you might want to create the mobile app as a Hybrid app<\/strong> by using HTML\/JS<\/strong> under a container like Apache Cordova<\/strong>, so it can access native capabilities of the device, like GPS, photo-camera or any other feature thru the Cordova plugins. This is what we developed for the driver’s app, by using Visual Studio 2015 Tools for Apache Cordova<\/strong>.<\/p>\n

Cordova<\/strong> allows you to leverage your existing web developer skills (HTML\/JS), assets and processes as a web developer to build mobile apps for iOS, Android and Windows. Your apps will not only have access to native device capabilities  (e.g. camera) through a common JS API, but also a rich array of custom plugins to add better-than-native functionality (e.g. turn the camera into a barcode scanner).<\/p>\n

VS helps you build and maintain a healthy, well-configured dev environment by installing all the 3rd party dependencies you need for multi-device development locally. Even better, when a new version of any dependency in the tool chain is released, our team tests it for compatibility and notifies you when it’s safe to update.<\/p>\n

\"image\"<\/a><\/p>\n

In this case you can notice how the app is exactly the same running on the different OS, as it is 100% the same. The Pros are that you might get a fastest way to target the different platforms if you have a skilled team in JavaScript<\/strong> or TypeScript<\/strong>. The Cons are that you won’t get the same level of performance than when developing native apps (like when using C#, .NET, Xamarin and C++). But the point is that you gotta think about what is good enough for your specific scenario or application.<\/p>\n

Again, you can see deeper technical details in this blog post focusing just about the MyShuttle.ord driver app created with Visual Studio 2015 Tools for Apache Cordova<\/strong>, here:<\/p>\n

(TBD – Link to Deep dive on MyShuttle hybrid mobile App powered by Visual Studio Tools for Apache Cordova<\/strong>).<\/p>\n

 <\/p>\n

IoT and Big Data<\/h2>\n

Since the code for IoT<\/strong> and Big Data<\/strong> demos of MyShuttle.biz will be available in a few weeks (January\/February 2015), I won’t provide details about it until then.<\/p>\n

For now, you can take a look to Scott Hanselman’s keynote, at the section where we show our vision about IoT and Big Data for the MyShuttle.biz scenario:<\/p>\n

Cloud development with Azure and Visual Studio<\/a> – (MINUTE 33:35<\/strong>)<\/p>\n

IoT devices with .NET MF<\/strong><\/p>\n

  \"image\"<\/a> \"image\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n\n\n\n\n
HDInsight Tooling in VS<\/strong><\/td>\n <\/td>\nPower Map<\/strong><\/td>\n<\/tr>\n
\"image\"<\/a><\/td>\n <\/td>\n\"image\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

  Azure Machine Learning<\/strong><\/p>\n

\"image\"<\/a><\/p>\n

These are just a few screenshots of what will publish in a few weeks (the IoT and Big Data demos), as mentioned above.<\/p>\n

In the meantime, we’re providing a bunch of demos related to the rest of the scenarios (Web, Cloud, Native Mobile apps, Hybrid Mobile apps and LOB integration) and you can get deeper details in the links provided at the beginning of this blog post.<\/p>\n

Download the code!<\/h2>\n

You can grab the code from here<\/strong><\/a>, at MSDN Samples.<\/p>\n

Enjoy! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

          [**NEW!! – Updated on March 2015 – Compatible with VS 2015 CTP 6 **] This is the first blog post of a series of posts regarding the MYSHUTTLE.biz sample applications implemented with the new Visual Studio 2015 Preview and .NET 2015 Preview. Here’s the list of blog posts: 1. (Current […]<\/p>\n","protected":false},"author":362,"featured_media":12806,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-73","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cesardelatorre"],"acf":[],"blog_post_summary":"

          [**NEW!! – Updated on March 2015 – Compatible with VS 2015 CTP 6 **] This is the first blog post of a series of posts regarding the MYSHUTTLE.biz sample applications implemented with the new Visual Studio 2015 Preview and .NET 2015 Preview. Here’s the list of blog posts: 1. (Current […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/users\/362"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/media\/12806"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/cesardelatorre\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}