Consuming the Jamendo API with AngularJS: HTTP Get

After doing a small AngularJS introduction, I figured it's time to start diving into some specifics of an Single Page Application with it.

One of the awesome things developers can do is to play with other third party services. A common way to do that is with an API that is provided by the creators of the service to give developers the option to create all sorts of software to use or interact with their services.

Honestly, I had a class library created and ready to create a C# wrapper to make the API calls, but I thought that I should use more client side code instead of server side code as that tends to be more of how things are being done these days. I thought I'd use AngularJS, which I chose so I can learn more on how to use the framework and well as to get used to developing more with JavaScript.

NOTE: For the API calls to Jamendo I'm using a clientId that they provide for testing and demoing only. This is required to use the API and if you want to take full advantage of their API you will need to register in their Development Center.

For this first part I'll construct a simple artist search via $http from Angular's API to return a few items back from the Jamendo API for display.

The HTML

The HTML is a fairly similar setup as the previously mentioned introduction. And please remember, I'm by all means no designer (though, I have been reading up on the subject) so I apologize in advance if it causes you to cringe. 

What we'll concentrate on is what all is in the body tag as the items in the head tag are just pulling in different resources. We tell the body tag to use our Album controller (we'll get further into that below). I then created a div tag that uses a class from one of our CSS files to move everything in there to the near center of our page. 

Now to the fun stuff. Inside our container we have a text input and a button. Our text box will be what artist we're searching for on Jamendo and our button will be used to conduct the call to get our results.

On our text box we have the ng-model directive named "artist". We'll see how this gets used later in our controller.

Our button has the ng-click directive which tells Angular to execute this method on our controller once the button is clicked.

The Album Controller

Once again, this is fairly similar to our Employees controller from our introduction. The differences are fairly small, however. One thing you may notice is when defining the controller function I bring in an extra parameter that AngularJS provides. Along with the $scope I bring in $http to be able to call another site. In the function I create another function called getAlbums. In here is where I actually make the call via the get command. You'll also notice that I'm using promises that is also provided by AngularJS.

Here's another part of where AngularJS's data binding comes into play. Remember the ng-model of "artist" we had in our text box? That was bound to the $scope and was used in the call to Jamendo. That's all we had to do.

Enabling CORS

You may have noticed that you haven't seen where I create the "jamendoApp" module in the controller. This is because, after some reading and viewing others code, I created a base app.js file that handles that as well as some config and routing settings that will be used throughout the whole application.

Also another thing to make note of is that, since I'm using AngularJS to make a third party call to get data most browsers may not allow the call to take place due to having to enable cross-origin resource sharing. If you tried to make the same call without enabling CORS you would get a same-origin policy error. This basically allows the browser to only access resources that are in the same domain as the page you're calling from. To get around this I got help from this StackOverflow question and implemented the configuration below. 

Demo

To demo how it all works GitHub makes it super easy to view HTML pages from our repositories using an HTML Preview. Simply go to this page to interact with it and feel free to come back and let me know what you think about it.

Full code to play with can be found on the GitHub repository. 

Next time we'll refactor the controller and have our API call from a AngularJS service.

Top People I Follow on Twitter

I love Twitter. I like how it's one of the best ways to share content and thoughts with everyone else. However, following too many people can put too much of a strain on you when checking for updates. I, like I'm sure many others do, have a few people I make sure to read each update I come across. Here's a list of those few I do my best to keep up with.

Note that when I say "people" on Twitter I also mean organizations as well as individuals.

Alexis Ohanian

Alexis is probably most famous as being cofounder of reddit, but he's definitely doing some amazing work these days. From writing his own book (you bet I got this the day it came out) to hosting an entrepreneurial show on The Verge - Small Empires, he's definitely one to follow and I'm always excited to see what he's up to next.

Twitter - @alexisohanian

Inc Magazine

If you're interested in business or leadership at all, this magazine and site has a lot of great articles that I've found useful. Their site practicing minimalism and very easy to navigate also helps.

Twitter - @Inc

Kevin Rose

If you're into technology at all, then this name should at least be familiar to you. Coming from the old (and awesome) days of TechTV via the show The Screen Savers, he's also the founder of Digg and now currently works with Google Ventures helping to find other awesome web start ups. 

Twitter -  @kevinrose

Darya Rose

Yep, the wife of Kevin Rose. She's fairly well known herself for starting a food blog - Summer Tomato (whom I happen to have found from the person below) and from there her own book - Foodist. Darya is definitely one of the best I've come across in terms of breaking down the science of healthy food into a way that is easily understandable. If anyone I meet has questions on food I always point them to her.

Twitter - @summertomato

Tim Ferriss

Famous for his books - Four Hour Workweek, Four Hour Body, and Four Hour Chef, I definitely consider Tim to be a modern day Renaissance Man. From starting his own nutritional company to becoming a tango and kickboxing champion, Tim has tons of experiences and he freely gives his advice away on his blog.

Twitter - @tferriss

John Robbins

This can't be a post on a development blog without a developer, could it? I consider John, cofounder of Wintellect, to be one of the best when it comes to doing anything with .NET. This is the guy who got me interested in performance and debugging. When Microsoft has them come in to teach their developers, I make sure to listen on what they have to say.

Twitter - @JohnWintellect

The Medium Experience

This is a bit different than most posts here, but I've come to just love what Medium does. If you haven't heard of it, it's basically a medium (pun intended, of course) in which anybody can come in and write articles about whatever they're passionate about or what inspires them. I've definitely found many great reads there. Since it seems like a great place to just get feedback I thought I'd give it a shot myself.

I've recently had a bit of an...embarrassing event happen in my career and I thought it would be a good story to share through Medium. So I hope you take a few minutes (seriously, Medium indicated that it's a two minute read) and maybe have a laugh at my expense and see that even the most professional of people can make trivial mistakes.

Book Review: Steve Jobs by Walter Isaacson

I'm sure I'm a bit late reading this and I'll admit I didn't know hardly a thing about Steve Jobs before coming into this book. The only reason I decided to give it a shot was that it was so well recommended by the tech community online, especially after the Ashton Kutcher movie went out in theaters. "Why not?", I figured. "I like biographies and it'll give me some more background of the man himself as well as to how he ran Apple." So I went straight to my library to get a copy.

It was definitely a great read. It felt more like a novel than just a biography which makes it an easy read and helps it get read that much faster. It still took a couple of weeks to get through it, though I believe I'm a bit of a slower reader than many as I think it helps understand more of what I'm reading.

The main things that became instantly interesting was how much of a visionary Steve Jobs apparently was at Apple as well as how much business sense he instantly had. True Steve Wozniak basically did the engineering for the Apple I and II. However, if it wasn't for Jobs then I doubt the company exist at all. Truly, his drive to create a company definitely came to fruition.

There were many things the biography helped to learn about why certain events occurred, such as how and why he was ousted from Apple in the mid 80s, how Microsoft helped the company when he was brought back to Apple, how he was involved with Pixar, and the beginnings of what became the the iPod and iPhone. Interestingly, the way they came about is just the other products out there, as Jobs would say, sucked.

Steve Jobs' love of technology and design is a rare combination even in these days. How many developers do you know are actually good designers? I'm definitely not one of them (though, I am trying to learn) . I used to think that the closed ecosystem of Apple creating their own hardware, software, and services was a bad idea, but like Wozniak I'm beginning to understand how it helps the end user experience as a whole.

The biography even helped with a bit of understanding of the business culture as a whole since it repeatedly went to how meetings went with Jobs and the Apple board. Even as a CEO Jobs tended to be different than others by taking hours or days to make a decision on something instead of months to do research how the decision could affect the company. That tells you how passionate he was about his products and what his company could do for people.

If you haven't read it yet, I definitely recommend it. Of course, you can always just wait for the movie. I have high hopes it'll be better than the aforementioned one.

As for myself, I think I'll be test driving more Apple products in the future.

Code Katas Can Be Helpful

After reading a few posts in the development community lately about code katas, I felt I should put out my own opinion about the subject. 

At work, a few of us developers decided to take a couple of lunches each week and get together to work on a code kata that we all decide on prior to the meetings. This was mainly so we can increase our skills in development, but mainly it was a way for us to use a new or not so familiar language for a fairly small coding project.

For our first shot at a kata we decided to try Poker Hands (you're always welcome to view my progress), which we had to rank two player's poker hand and determine who won and display how they won (high card or higher set of cards). Not exactly the easiest kata to do, especially when doing it in a language you're definitely not familiar with, but we thought it was one that could give us a good challenge.

Another aspect to doing katas is to do solve very small problems. One of my favorite ways to do this lately is by playing around at Code Wars. I've been messing with the JavaScript and Ruby katas there and have been learning quite a lot about the languages as each new kata I do gets progressively harder. They have a pretty slick interface, as well.

I feel this site does a lot of things right. Most importantly, once you've successfully finished a kata it will also display how others have successfully implemented it. Looking though those can help see how other people use the language to their advantage.

Sure, you can also be doing other things in order to learn, such as messing around GitHub for a project to contribute to or volunteering. However, a big benefit to doing these small katas is because they are small compared to these other types of projects. You won't feel as overwhelmed by the size of the project or try to figure out where to start. Here you just create the appropriate class or function and make sure all the tests pass. 

Of course, you want to do code katas because you believe they help and because you find them enjoyable. I feel like I'm learning new languages little by little the more I do these. I seem to have rekindled my love of programming just by doing these katas. I hope I'm not the only one.

YUI: The Other JavaScript Framework

When you think of JavaScript frameworks, what pops into your mind? JQuery, KnockoutJS, or EmberJS? Did you know that Yahoo! has one of their own? It's YUI  and it's actually not too bad of a framework. 

It's definitely not what you'd think of when creating a new web application. For any kind of DOM manipulation, I'm sure the first thought will be to use jQuery. I wouldn't exactly count out Yahoo!, though. They have some of the top engineers of the country and they released YUI as an open project for anyone to fork and contribute to.

Below is a very small example of using YUI. How easily can you read through it? 

Fairly simple, right?  You get one instance of the element with the "btn1" ID and on the click event run the function that has the alert.

Let's look at a more complex example of YUI in action. We're going to make a JSONP call to the GitHub API. Let's take a look.

Not too much more here than in our first example. I'm still using the selector and click event handler as we've seen but in the click handler of the button I make a JSONP call to the GitHub API. The real magic happens during the function that handles the response from the JSONP call. The Y.Lang.sub  call takes in an HTML template and uses the data from the response to bind the items in the brackets. Of course, the names have to match what you get back in the response.

Conclusion

These are just very small examples of what you can do with YUI. The documentation contains a ton more examples and functionality of what the framework is capable of.

I do believe this is easier to maintain and use than using jQuery. I do have to say, though, since I've found AngularJS, I believe I'll be using that more and more. If I couldn't use that, however, YUI would be my framework of choice.