Building Cross Platform Apps with Visual Studio – Part 3

cordova

In part one we did the setup. Part two we did the coding. Now we will continue some of the coding but also start looking at some configuration options.

Step 1: More Services

Lets finish up the rest of the services. We are basically mimicking what we just did for the Occasions API call for the Results and Details. If we look at the API we find the endpoint to get all drinks by occasion is /drinks/for/occasion_id. We have a route that mimics that /drinks/:filter/:id We can use this route, controller and service over and over again by changing the filter based on what we want returned.

Open up services.js and add the following to the Drinks factory method

Similar to our first method for Occasions where we have the endpoint, but we are passing in some parameters into the URL as well as creating a method called List.

Step 2: Controller

Lets bounce into the controller and add the following for the DrinkResultsController.

We are getting the parameters from $routeParams. $routeParams allows us to access the location, path and search when there is a match to the route.

Step 3: View

We are going to add a ng-repeater and some data binding so we can show off our results. Open up drink-results.html and replace most of the HTML with the following:

 Step 4: Internal Links

The Windows Store apps are going to think all of the links should open up new windows when we click on them. In order to fix that we need to add a little compile provider module in our app.js file.

 Step 5: Run it!

We should see the results of all of the drinks per occasion!

Step 6: Lets get the Drink Detail Done!

Services.js – all we need to do is add one little line to our Drinks service

Now we can call list or byid.

In Controller.js we will add the following for the DrinksDetailController

Same as before, except we are only passing in one parameter and calling byid.

Now our drink-detail.html

 

That is it. You can run it and you now have a Cross Platform AngualrJS app consuming an API!

Next, we will look at publishing and other configuration options.

Code is on GitHub as well.

 

Building Cross Platform Apps with Visual Studio – Part 2

cordova

In part one we setup our development environment by downloading Visual Studio 2013 Community Edition. Installing Visual Studio Tools for Apache Cordova. And stubbing out our app. If you did not do any of those steps, no worries, head on over to part one and then make your way back here.

Lets reset a bit on our project. We are starting to look at building an app that will be able to run on iOS, Android and Windows. There are a couple of ways to doing this, natively or cross platform approach. If we were to build a native app for 3 platforms we would have to code in 3 different languages and use 3 different IDE’s. (Not counting a tool like Xamarin). We are also looking at the multiple stack developer who has a lot of “web” knowledge. They know how to build web apps and their skills can translate well to this cross platform development. We will be using HTML and JavaScript to build this app. Most importantly, we will be using Visual Studio to create our cross platform app.

The app can be anything, but in this example it is a drink recipe app. Categories -> Results -> Details. That is the flow of our app. We will be using a theme from Bootstrap to make it look pretty and responsive for multiple screen sizes. AngularJS will be our JavaScript MVC Framework for the back-end. We left off with a basic “barebones” app structure that we will build upon.

Lets Begin

Continue reading

Building Cross Platform Apps with Visual Studio

cordova If you don’t know it already, mobile apps are all the rage. From social networking to pictures and videos to gaming, the app ecosystem is where you want to be. But what if you are a “one-stack” developer? What if you only know HTML/JavaScript? What if your expertise lies in Web Development? Well, they all have their challenges but over the next few articles I will try to demystify the mobile development process especially when it comes to cross platform development. The “one-stack” developer has is a bit easier. They know what the hardware will be. They know the screen size and capabilities of the device. They can reuse code over and over again and create some high quality apps. The “multiple-stack” developer has an advantage as well. They know how to code for multiple platforms. They know what may or may not be possible for each of the platforms. Lets look at the “stacks” and define them a bit.

One-Stack

This is your traditional developer. They know A LOT about their platform. They are comfortable with building and designing for it and most likely have many apps in one of the stores. They are also probably using a tool geared for their stack. Android Studio or Eclipse for Android Development. Xcode for iOS development. Visual Studio for Windows development. However, these developers might have a hard time porting their code over to another stack. C# does not translate well to Objective C or Swift and vice versa. In terms of enterprise, these one -tack developers are only working on one project and will have to get another team for a different stack.

One-Stack with Help

The one stack with help is more of your game developer. They know how to build games with their tool. Take Unity as an example. This developer uses Unity to build an awesome game. They test it on one of the platforms the developer is comfortable with and maybe even adds a bit more features to the game for that platform. However, the tool gives the developer a bit of help to not only re-use their code but helps the publishing process to a few different platforms. The “one-stack” developer might only know iOS but this cross platform tool, in our example Unity, gives the developer help to publish the game to Windows, Android and more.

Multiple-Stack

This is what most developer’s claim they are. And most are. However, they most likely know surface level for each of the stacks. They can probably go deep in the stack they use the most but they have a good grasp of what you can or can not do with each of the platforms. This is the modern developer. They no longer have the luxury to focus on one stack. They need to support all of them. However, this comes at a price. They need to know each of the IDE’s for the platforms. Keep up on the SDK changes. Possibly support multiple code bases.

Web Stack

Then there is the web stack developer. They don’t work on mobile apps. They might support a responsive or mobile website but as far as publishing to the store, that is the mobile team. These guys are the web team. PHP, Flask, .NET, HTML, Rails..these guys know front end and back end. They know how to setup a server and create a graph database. They have been working with connection strings and relational models. They test on Chrome and Firefox and curse the IE8 support for some of their clients. But when it comes to mobile app development, they have little involvement with it. You probably can relate to one or more of these stacks. Maybe there are some I have not even covered but the point is each of the stacks has their own set of challenges for building and maintaining mobile apps. These set of articles will walk you through on how Visual Studio can help with these challenges. From cross platform development to publishing app, from source control to remote deployments. My goal is to cover most of these in detail and expose how powerful of a platform Visual Studio is for any developer. Lets dive in! Continue reading

Hartford Area Microsoft Events

sign-me-up-2

I wanted to share these upcoming events in the Hartford and Danbury area.

Building Websites in the Cloud

Learn how to use Microsoft Azure, our global cloud solution, to power your websites

This workshop will show you how to quickly create web applications using popular frameworks such as WordPress, Joomla, NodeJS, PHP and more. You will learn how to create and deploy a website using Visual Studio Online. Other features such as cloud services will be discussed how to take your website to the next level.

Time: Monday, March 2, 2015 from 6:00pm to 8:00pm
Location: Microsoft Store, 211 Westfarms Mall, Farmington CT (located on the upper level between Center Court and Macy’s)

Time: Wednesday, April 1, 2015 from 6:00pm to 8:00pm
Location: Microsoft Store, Danbury Fair Mall, Danbury CT

btn-register

These workshops  are “hands-on” optional. You can attend and learn without participating in the labs. The labs will be provided at the end of the workshop. If you are particpating in the labs you will need the following:

 

Microsoft Cloud Dev Camp

Master the new Microsoft Azure features and services to build, deploy and move apps to the cloud

Roll up your sleeves and get ready to master the latest Microsoft Azure development tools and technologies. Join us at an expert-led Microsoft Cloud DevCamp and leave with code running in the cloud! DevCamps are fun, FREE events for developers, by developers. That means no fluff or filler – just valuable coding skills you can immediately put into action.
More information here.

Time: Thursday, March 26, 2015 from 9:00am to 5:00pm
Location: Microsoft’s Office, Hartford at 280 Trumbull Street, Hartford CT

btn-register

The Cloud Dev camp is intended to be “hands-on”. The following is required for attendance:

Note – you MUST bring a laptop to participate in this event. In addition:

 

Mix Master 2000: Intel Edison, NodeJS, Apache Cordova App

I got an Intel Edison with a breakout kit along with a SeeedStudio IoT kit. Getting the Edison up and running was straightfoward but once that was complete the next step was “what to build?”. How abut a temperature app? Or a sound sensor? Or a blinking light. None of those thrilled me. Plus I wanted to do something totally different. I am more of an “app” guy so I started thinking about ‘apps’ that can communicate with the Edison. What can I send over to the Edison? Hmmm.

So I started where I always start for brainstorming app ideas, Programmable Web and Mashery. I scoured their listing of API’s to find one that jumped out at me. I did find one. The Absolut Vodka Drink Recipe DB. I can get drink recipes and send them to the LCD screen. This could come in handy instead of fumbling through a recipe book, or even an app. Have the LCD attached to either the shaker or the base and scroll through the steps needed to make the drink.

Continue reading

Cloud DevCamps

sign-me-up-2

Join us for a FREE hands-on day of Microsoft Azure demos and labs in a city near you!
Roll up your sleeves and get ready to learn the latest Microsoft Azure dev tools and technologies. Join Microsoft experts at your local Microsoft Cloud DevCamp and leave with code running in the cloud!

From your first cup of coffee until we call it a day, you’ll learn how to use new Microsoft Azure features and services to build and move a variety of applications to the cloud – including websites, mobile apps, and enterprise-class applications.

Whether you use Linux, Java, Node.js, Python, Ruby or just about anything else, we speak your language. With Microsoft Azure, you can use practically any language, framework or tool to build or move existing applications to the cloud.

Don’t miss the live Cloud DevCamp in your local area. Save your seat today!

reg-today

We’ll also give away a $100 Microsoft Store gift card* to one lucky attendee at each event!

See All Events
Sessions run from 9:00am – 5:00pm.

Attendance is limited, so save your seat today.

Microsoft WebCamp – coming to a city near you!

sign-me-up

The new release of ASP.NET and Web Tools for Visual Studio 2013 puts the power to build cutting-edge websites right at your fingertips. Even better? Once you build a beautiful, interactive site, you can easily deploy and scale it with Microsoft Azure!

Join us for a free WebCamp and learn how to elevate your coding – in just one day. WebCamps are live, no-fluff events created for developers, by developers. You’ll learn from lively, informative experts who start with the basics and ramp up to advanced topics as the day goes on. Here are some of the topics we’ll cover in these hands-on sessions:

  • Introduction to ASP.NET and Visual Studio 2013 Web Tooling
  • Building web applications using the latest ASP.NET technologies
  • Building web front ends for both desktop and mobile using the latest web standards
  • API Services for both web and devices
  • Running, improving and maintaining a site in the real world
  • Real-time communications with SignalR

Don’t miss this free opportunity to sharpen your coding skills – regardless of which languages or platforms you use. We speak them all. We’ll also give away a $100 Microsoft Store gift card to one lucky attendee at each event! You must be present to win.*

reg-today

Select a date below to register online.

Attendance is limited, so save your seat today.

Win a trip to the 2015 Game Developers Conference!

Banner-08

Ready. Set. //GameOn.

Win an all access pass and free trip to the 2015 Game Developer’s Conference!

Submit a game that runs on a Windows Platform by February 9th. We will select three teams as winners and provide them all-access passes and a travel stipend to attend GDC 2015.*

Learn more and sign up at http://aka.ms/GameOnInfo

Why should I participate?

The Game Developer Conference is the world’s largest and longest-running professionals-only games conference, where 24,000 interactive games amateurs, professionals and luminaries exchange ideas and shape the future of the industry each year. It’s your opportunity to get immersed in the world of the professional gaming industry, network, learn about the latest technologies, and create job opportunities for when you graduate. And of course, have a lot of fun.

Get started

  1. Build a game using at least one Microsoft platform (yes, desktop games count!). You can also port an existing one to the Microsoft platforms. We have tools and resources to help you do that!
  2. Fill out the submission form to enter the contest
  3. Get users to like your entry on Facebook toincrease your chances of winning. How? Once you have submitted your game to the contest, you will receive an email providing instructions on how to find a Facebook post about your submission posted by the //GameOn Contest Facebook page.

Learn more and sign up at http://aka.ms/GameOnInfo

*Offer good only in the 50 United States & D.C.” to Students enrolled in higher educational institutions..

Add SoundCloud to your App Studio Project

ken-soundcloud

I’m excited to announce my next tutorial series of adding SoundCloud API to an App Studio project. We look at creating the app out on App Studio as well as different options to integrate SoundCloud into the app. Over the next few weeks I am going to explore adding the SoundCloud services into an app generated by Windows Phone App Studio. If you do not know what Windows Phone App Studio is, you can view the site or follow my tutorials to get you up to speed. In short, it is an online tool to quickly generate Windows Phone and Windows 8.1 apps. You are provided with the source code and have the ability to extend your generated app.

Why SoundCloud? The api is pretty straightforward and the benefits are vast. If you are a local DJ and want to get your music in an app or if you are an independent artist you can do the same pretty easy. Drag and drop to create your app out on App Studio and add a few lines of code to enable SoundCloud. The example I am going to start with is a simple track listing. We will grab a few tracks (we will need to get the URL’s from SoundCloud) and add them into App Studio and then generate our project. From there we will make some modifcations and enable accessing those music tracks.

Here is a video of the finished product

Windows Phone App Studio + SoundCloud API – Part 2

ken-soundcloud
In the first part of the tutorial we just did the basics. Enter a collection in our App Studio project and add a service provider to communicate to SoundCloud API to “launch” the media to play. While it works, it is not as elegant as we would like.

In this part, we will build upon what we did with the first steps but add background audio so that our media plays when we navigate away from the app. Let’s jump in!

Continue reading