Theatre Junkie: Using API’s in Rails
It’s now my fourth week working on Rails at flatIron and it’s time to embark on an independent project and have fun with Rails! The creative process is one of the most satisfying aspects of Rails, and in coding in general. This is where I came up with the idea of ‘Theatre Junkie’, a website that allows you to browse theatre productions currently on show in London and book tickets to watch. The basis of the project is to have a functional MVC (model, view, controller), with RESTful conventions, and so at this point, it is not a live website, tickets are fake seeded data and there are no payment features. Although the tickets may be fake, the shows are real. Which brings me to APIs.
Why use an API?
Starting the project knowing that the tickets would be fake, what I could’ve done is create fake shows and put them up on the website. But I haven’t created any productions that are being shown at the west end have I. It doesn’t sound like a great user experience to navigate through a website to see shows that don’t exist and potentially buy tickets. So that’s where the API comes in. In this example, I want the users to see real live time data about shows that are indeed being shown around London. Using an API allows me to send a request from my local server to talk directly to a server that contains the information I need, I would then receive a response, and then I can process it and show the relevant information I want the user to see. You can see what API I am using here:
Sending an API request:
Some APIs have keys that need to be given to you and some don’t, In this case, this specific API needs a key for me to send a request. Thankfully London Theatre Direct asks for you to apply for one and they will send it via email. Let’s say I want information about the shows that are on (events). I’d navigate the website to ‘Get Events’ and see here that they have given me the URL for where I will send my request with the adjacent headers to attach.
Here’s a tip, using the app ‘Postman’, where it is very easy to use, I can create a request. Here’s what my request would look like using the Postman app:
And would you look at that, you have been given what is needed to send your request and all you need to do is assign the headers to the path and press send! Now, this is where it gets fun. This is what it is returned after your request:
It returns every show London Direct Theatre contains on its database (4008 lines of code to be exact). This is giving back information on a specific show titled ‘The King and I’, as you can see which is the value of the key ‘Name:’ I now have information of all the shows in London and can now work on fetching specific information that’s contained in the array of hashes “Events”. But how do I now implement this into my website?
API in Rails:
Now how do we work with the API response in our rails project? Now when you create a new rails project with ‘rails new’, it comes with some helper files. I created a new one titled ‘ApiHelper’ that would hold a class titled ‘Api’ holding various API requests that I’ve sent. Read about helpers here.
*The ‘require’ is for two gems that allow this specific code to work.
Most of this code is given to you from ‘Postman’ but pay attention to the last two lines within the class method ‘events_api’. I’m using JSON.parse method that takes in the argument of (response.read_body) which is the information that has been returned to us. Then that last line ‘events[‘Events’] is returning me the key ‘Events’ that as you have previously seen in ‘Postman’ is holding all the shows. This effectively allows our local server to talk to the API server whenever it is needed to be called upon and will give us a response straight away. Now it’s time for ‘Theatre Junkie’ to have some real shows!
MVC’s with API:
As anyone who works with Rails knows the framework in which it works. The models allow us to interact with our database and handling data. Our controllers are for handling the user interface and application, and our views handle what the user sees and its presentation. Now that we have the information we need, how do we extract it and show the user? Firstly, our ‘events#index’ will be our homepage that presents the first 10 shows from the API. Let’s look at our EventsController:
In here, we can see we have defined our index with an instance variable ‘@shows’. Now we fetch our API that contains all the shows and assign it to the ‘@shows’ variable. By doing this, we can now use ‘@shows’ in our view whenever we want to get something from the API as it now contains all the information. Let’s look at our index view page for EventsController:
The first line is just a header that creates a header with a message of my choosing on the page. What precedes is a method that counters through all the events from the API that I’ve stored in the ‘@shows’ instance and returns information for each one. For example, the name of the show: I write ‘show’. But this doesn’t return the name, it returns all information that each show contains, I just want the value to the key of ‘Name’ for the user to see. By adding ‘show[‘Name’]’ it is now going through all shows, it looks for the key ‘Name:’, it finds it and returns the value back to me. Now that I can get any information I choose from the API, I can be creative in how the user interacts with it on my page. So I decided to make the image for each show a link, that takes you to the page of that specific show, which will present information for that specific show. But for now, let’s just look at the homepage:
(FYI the design of the page is basic CCS and is not related to the API)
And there you have it! A homepage where you can scroll through and you can click on a show’s image to know more about it. I did not write any code where I am manually writing out information for each show which I would be doing if I decided to create fake shows. You can see the wonders of using APIs and how it can help fetch data for you and you can manipulate it to show the user what you want them to see. The possibilities are endless.
gif of the week:
Here are some other resources for you if you’d like to find out more:
