Using AngularJS to Pull a Searchable Facebook Event List

May 29, 2014 - Tags: , , , ,

If you fall into the 1.11 billion users (Source: Facebook Inc.) then there is a chance that you have ‘Joined’, ‘Declined’, or even said ‘Maybe’ to an event invitation. Some Facebook Pages have a lot of events and I wish there was an easier way to filter through the muck (sure there’s a search, but it could use work). Today I’m going to show you how I used the Facebook Graph API in conjunction with AngularJS to call, display, and seamlessly search for Facebook Events provided by a local venue: Brighton Music Hall.

Creating Your Facebook Application

Before you begin, you will need to create a Facebook Developers account. You can find this under Apps > Register as a Developer (Figure 1) and accept the terms (Figure 2). Next you will need to navigate to Apps > Create a New App. After that is done, you will be asked to name your application (Figure 3) and we can finally begin configuring our options.

Configuring Your Facebook Application

Once you are at the Facebook Developers Dashboard, navigate to Settings on the left side. Here you will find important information about your application such as App ID, App Domains, and your Platform, we will be using a Website (Figure 4). Once that is configured you will need to navigate to the Advanced tab and configure more settings and fill out the Valid OAuth redirect URIs (Figure 5).

Creating your AngularJS Application

If you have not yet experienced with AngularJS, it is an open-sourced web application framework. It is intended to augment web applications with model–view–controller (MVC) capability. Fortunately for us, Luis Carlos has crafted an easy to use, open-source AngularJS module to take approach of Facebook Javascript SDK, angular-facebook. Once you get the source, we are ready to create our application.

The HTML

With every web application we need to start off with some basic HTML:

The AngularJS

With every sophisticated web application that utilizes AngularJS we need to appropriately set up the module name and the controller name as shown below. You will need to go back into the Facebook Developer settings and acquire your App ID found on the Dashboard and also your Secret App Token which can be found under Tools > Access Token. It’s important to keep it secret, or people can use your App token. We will be using the App token in public, however, it is intended for the user to login to generate their own access token.

Configuring your HTML with AngularJS

In order to allow Angular to communicate with our web application we need to add Angular directives to our HTML elements. We will be attaching the ng-app directive to our HTML tag, which bootstraps the application and designates the root element. Next we will need to attach the ng-controller directive to our BODY tag which allows Angular to evaluate HTML expressions and contains the business logic of our application. Take note that the ng-app and ng-controller values correspond with the values found in the previous script file. You can see the adjustments below:

Getting our Event Data

Now that we have our Angular script set up and our HTML document prepared, we can bind the event data to the HTML document, but first we need to find it. If you take a look back at our script, the Facebook.api() function returns a response that is set to events in our MainCtrl scope. There are two ways you can see the output of our events object: either console.log($scope.events); in our script file, or use the debug directive the author has given us . Whichever you choose you will see the object is quite messy, but don’t worry we can fix that later.

Binding out Event Data

If you have been following along enough at this point, I am sure you can guess what we need to do. In our table rows we need to replace the filler ‘date’, ‘time’, ‘band name’, and ‘Link to Event’ data with our extracted event Object data. To select the object you can do the following {{events.data[0]}} which grabs the first element. I have added a few filters to format the timestamps. See below for the appropriate code:

Grabbing All Event Data

Grabbing one event isn’t useful at all is it? Not to mention the way we have to call the object. Luckily for us AngularJS comes with a ng-repeat directive which essentially loops through an object assigning it’s own variabls. I’ve also attached it to a filter that orders by the start time. Watch below how useful it is:

Bind the Search to Angular

Angular has a lot packed into it, however, two-way data binding may leave many in awe with how easy it is to set up. If you are unfamiliar with two-way data binding, it essentially causes the view to automatically update upon the users input. We will see it in action with the search. In order for this to work we need to assign the model to bind with. Angular comes in handy again with another useful directive ng-model. We attach the directive to the search input with the value band. Afterwards, we create a filter on the table row with the associated model value. See Below for the code:

Conclusion

I had a lot of fun creating this simple app, and hope you learned a few things as well. Here is the working demo of this application.

LESS and SASS Presentation

June 5, 2013 - Tags: , , , , , , ,

On Thursday, May 30th, I held a presentation for the Worcester Web Technology Meetup group regarding LESS and SASS, two style sheet pre-processors that will make a developer more efficient. Last year I wrote an article introducing LESS, which touched the surface, and I hope the presentation gives even more insight to the tool I use every day. Read more…

Fun With Numbers… and Python

October 24, 2012 - Tags: ,

My Professor

We have all had the professor like the one I’m about to introduce, and if not– I’m sorry you missed out. He starts the class most of the time with brain teasers of various skill levels. From metal ring puzzles, to sly formulas he entitles: math-a-magic. Before today’s lecture of proving the volume of a cone, he gave us this math-a-magic:

Take any number greater than 1 and less than 10
Multiply it by 2
Add 5
Multiply it by 50
If you had a birthday before today, this year, add 1762
If not, add 1761
Subtract the year of your birth (e.g. 1990)
 
The first number of the answer is the number you began with
The next two numbers designate your age.

As a self-taught computer scientist I immediately saw it in terms of conditional statements, inputs and outputs. So what would any student that is paying to go to college and is assumed to listen to lecture do? That’s right, took out my laptop and brushed up on my python skills. You can run it online, courtesy of repl.it, but here’s the code below: Read more…

Creating a WordPress plugin

September 30, 2012 - Tags: , , ,

Up until now, I had no prior experience with creating a WordPress plugin– sure, I know a decent amount of PHP and how WordPress works, but this opened a new door for me.  I’ll show you my step-by-step process in creating a plugin that adds the open graph tag (og:image), to your header, or more commonly known as the Default Thumbnail displayed when posting your link on Facebook.

What is a plugin?

A plugin is a way to extend WordPress to almost anything imaginable. From Twitter feeds, to Google Analytics settings, WordPress allows you to extend the functionality of their product to a developer.  In this case, it allows us to select the image or URL we want to display when posting our website to Facebook. Read more…

To myself and others: RTM

September 18, 2012 - Tags: , ,

In addition to code snippets and other small projects, I have used this blog as a way to keep notes to later reflect upon. However, unlike the previous posts: experience with json, introduction to less, and others, all code will one day be legacy and no longer used as frequently. There will be a time where PHP isn’t used as heavily, and we’re starting to see that as the rise of python, ruby, and others make their way to web applications. What will be used in the next day, month, year, eon, will be the philosophy: Read The Manual.

Make The Docs Your Holy Book

Whatever machine you’re developing on, you will always have access to some form of manual pages (man on *nix, /? or /h flag on Windows), and it is this that truly will make you a better programmer, a better problem solver. While taking a programming course in High School we weren’t allowed to use many resources except the documentation, and this amazed me as some students still did not have enough resources they need to result in a passing grade. Where they fell short was the lack of understanding with the documentation; the language was foreign to them, like an old-English holy book. The documentation and man-pages are the rules of the code. Today, in Python, the documentation is bundled with us; allowing us to type help(..subject..) and we are given the docs to this function, however, if we can’t decipher what it is trying to tell us– it’s useless. Read more…

LESS code, more fun

September 2, 2012 - Tags: , , , ,

There’s always a moment when you or I are programming and we say to ourselves, “I wish X had Y functionality,” and at that moment there’s a John Resig there to make us JQuery for Javascript. Well this time we are talking about the CSS ‘framework,’ LESS by Alexis Sellier who has saved me lots of time, and lines of CSS. If you haven’t already given LESS a try, now is the time.

What’s wrong with CSS?

Nothing is considerably wrong with CSS, however, much like an over-privileged child, we will continue to want something more, and LESS is more. If you have written thousands of lines of CSS in your web development career and have wanted simple things that other languages have: variables, nested capability, and functions… LESS has these, and a lot more. Ever get tired of copy and pasting all the different browser prefixes for each radius, shadow, et al? “Mixins” will take care of that. Read more…

Austin, meet Processing

September 1, 2012 - Tags: , , , ,

For those who do not know me on a nerdy level, allow me to introduce my nasty habit. I like to dive into new languages and try them out for a bit, see how they work and occasionally move on, very much like my book collection.  Though I do have my web arsenal of PHP, MySQL, HTML, Javascript and CSS I have become familiar with other types: Java, C++, Python, Ruby as well as popular frameworks they carry. Recently, one of my friends have introduced a new language to me, “it’s cool, it’s blazing fast, it’s going to be the next biggest thing, it’s called Processing,” he explained to me, and I had so many questions. Read more…

Working with Last.FM and JSON

February 18, 2012 - Tags: , , , , ,

More and more recently, applications are opening their doors to developers that want to build off their system. API — application programming interface, is such a way for creators to give you the code you need for certain parts of their apps. Many of these API calls will result in an XML file that which supplies ‘Elements’ with corresponding ‘Attributes.’

These days we need different options to work with data on the web due to advancements in JavaScript. JSON — JavaScript Object Notation, has been that advancement for us. An application submitted to An Event Apart’s 10K, entitled Front Row, used JSON and tMDB’s API to search for a poster by movie title. Seeing this application in action fueled me to create my own JSON application, and I call it: Disco.graph. Read more…

Building a Social Network

February 13, 2012 - Tags: ,

Many argue over the quote, “it’s not what you know, but who you know.” I find both to be equally as important, with a bit more weight on the connections. In the February 6, 2012 issue of Fortune magazine, Reid Hoffman, founder of LinkedIn, explains the importance of networking in his article: The Real Way to Build a Social Network. Hoffman breaks down what a true network should be by growing your alliance, explaining how to appear authentic, determining the importance of a “weak tie”, and how offering help can work in your favor instead of resulting in failure.

If you currently look at your network of connections you may realize that it needs improvement. Hoffman suggests that, “most professionals maintain five to ten active alliances.” He also suggests that in order to obtain a greater social network, you must first strengthen your alliance. That sounds easy, get a bunch of professionals and hand them your card; If only it were so. Cold-calling and throwing around your business card at cocktail parties is a sure way for your number to be rejected and your card to be converted to a coaster. Read more…

Inspiration that helped create my own Business Card

January 24, 2012 - Tags: , ,

Business Cards go a long way. It’s goes from, “Oh, yeah, I have a website here let me write it down on this napkin,” to  BAM! A physical  item in your hand to direct you.

When creating a business card there’s so many things to take into consideration: Color or no color, one-side or two-sided, email or phone number, or both. Even some are getting into metal, and plastic business cards.

While browsing through lists of business card inspiration, I attempted my own: Read more…