An Introduction to REST APIs and fetching data from Yelp Part 1


Master the Basics: A Beginner’s Guide to APIs, HTTP Methods, and Data Integration!

Note: This is part of a tutorial series. I am currently working to separate tutorials out to their own section, but for now just posting in my blog. Part 2 also needed a few adjustments due to changes with the Yelp API, please stay tuned for this. However the following article still contains a great overview into getting started with Webservices and APIs for beginners.

What is an API?

Application Programming Interface: A set of definitions and protocols for building and integrating application software. (source: https://www.redhat.com/en/topics/api/what-is-a-rest-api)

Why an API?

In order for our website to get information from an external provider the two systems must talk to each other in a language they understand. An API facilitates this communication in a standardized manner.

Deeper Dive into what an API is

An API serves as the intermediary layer that allows different software applications to communicate with each other. By defining a set of rules and specifications, APIs enable developers to access and interact with external software components, services, or platforms efficiently.

They abstract the complexity of accessing these services directly, providing a simplified way for developers to integrate diverse systems and functionalities into their applications.

It’s sometimes referred to as a contract between an information provider and an information user—establishing the content required from the consumer (the call) and the content required by the producer (the response).

The Remote Control Analogy

Television RemoteAPI (Application Programming Interface)
FunctionControls devices like TV, lights, and fansManages interactions with software applications/platforms
OperationPress a button to send signals (infrared, Bluetooth, WiFi) to devices.Send a request to endpoints using HTTP methods for actions like retrieving or updating data.
AbstractionHides the complexity of devices; simple interface for complex actions.Conceals server and database complexities; straightforward interface for intricate operations.


Common Principle
: Both serve as intermediaries that abstract technical complexities, offering streamlined control and interaction without the need for deep understanding of the underlying mechanisms.

Use Cases of an API:

  • Data Sharing Between External Organizations (Our Use Case)
    • Scenario: A company requires integration with third-party services for enhanced functionality, such as payment processing (PayPal, Stripe), social media interactions (Twitter, Facebook), and cloud storage solutions (AWS S3, Google Cloud Storage).
    • Role of API: Enables the business to seamlessly incorporate these external services into its operations, allowing for efficient data exchange and access to specialized functionalities without the need for direct system-to-system integration.
  • Integration & Data Sharing Within an Organization
    • Example: DMV Online Services
    • Scenario: A public-facing website allows individuals to renew their driver’s licenses online. The site interacts with a statewide database containing driver information across New York State.
    • Role of API: Facilitates secure and selective data exchange between the public website and the driver database, ensuring that users can access or update their records without exposing sensitive information or enabling access to another individual’s records.

Additional Use Cases

  • Mobile Application Development
    • Enables features like user authentication, data synchronization, and push notifications.
  • Automation
    • Facilitates workflows between tools, e.g., integrating email submissions into a CRM to start the admissions process in educational institutions.
  • IoT (Internet of Things)
    • Connects devices like smart speakers to personal accounts for seamless daily updates, ensuring secure data exchange.
  • E-commerce
    • Syncs the internal inventory system with the website to reflect current stock levels, enabling dynamic ordering and stock management based on user activity.

How will we make our API request?

We will use javascript and make a request over HTTP.

HTTP

What is HTTP?

HTTP (HyperText Transfer Protocol) is the protocol used for transmitting web pages over the internet. It is the foundation of data communication for the World Wide Web.

How APIs and HTTP Work Together

APIs often use HTTP protocols to facilitate communication between client applications and web servers. When you interact with a web API, you typically send an HTTP request to a specific URL, and the server responds with the requested data or an appropriate status code.

HTTP Methods

These define the action to be performed on the resource

GET

Used to retrieve data from a server

Common things we will retrieve with GET

  • A webpage or HTML file.
  • An image or video.
  • A JSON document.
  • A CSS file or JavaScript file.
  • An XML file.

The GET method shouldn’t change the state of any resource on the server

POST

The POST HTTP request method sends data to the server for processing.

The data sent to the server is typically in the following form:

  • Input fields from online forms.
  • XML or JSON data.
  • Text data from query parameters.

So what does this allow us to do as developers?

  • Make a post to social media or a web forum
  • Save data from a form to a database (ex: a contact us form)
  • Calculate a result based on user input
    • Ex: a pizza ordering page. Sales tax can be calculated on the server based upon size and toppings picked and added to the total price.

HEAD

The HTTP HEAD method simply returns metadata about a resource on the server.

Why is this useful for Developers? What can we do with it?

  • Determine The size of a resource on the server.
  • Check to see If a resource exists on the server or not.
  • Check The last-modified date of a resource.
  • Validate a cached resource on the server.

Additional HTTP Methods

Version 1.1 of the Hypertext Transfer Protocol introduced five new HTTP verbs. We will not go over these today

  • PUT.
  • DELETE.
  • OPTIONS.
  • TRACE.
  • CONNECT.

HTTP Status Codes

These codes indicate the result of the HTTP request.

200 OK: The request was successful.

201 Created: The resource was successfully created.

400 Bad Request: The server could not understand the request due to invalid syntax.

401 Unauthorized: Authentication is required and has failed or has not yet been provided.

404 Not Found: The requested resource could not be found.

500 Internal Server Error: The server encountered an unexpected condition.

REST APIs vs Regular APIs

This is also an important topic to discuss but will be left out of the 15 minute presentation due to time constraints.

Connecting this to our scenario

When a visitor navigates to the Tully’s restaurant page from JP’s Restaurant Search, an interesting behind-the-scenes interaction takes place. As soon as the page loads, our site initiates a request to Yelp’s RESTful API. This isn’t just any request; it’s specifically crafted to retrieve the three latest reviews for Tully’s.

  1. ​​Initiating the Request: The moment Tully’s page is accessed, Rochester Pulse sends out a call to Yelp’s API. This call is made using HTTP
  2. Yelp’s API at Work: Yelp’s API, designed to handle such requests efficiently, recognizes our need for the latest Tully’s reviews. It immediately queries Yelp’s extensive database for the most recent feedback left by diners.
  3. Data Preparation: Once found, these reviews aren’t sent over as-is. Instead, Yelp’s API translates them into JSON (JavaScript Object Notation), a lightweight and easy-to-parse data format. This ensures compatibility with a wide range of platforms, including our website.
  4. Receiving the Data: Our website, now on the receiving end of this JSON-formatted data, is ready for the next step. It parses the JSON, extracting the relevant review information.
  5. Displaying the Reviews: Finally, with the data decoded, our site dynamically updates the Tully’s restaurant page to showcase these fresh, real-time reviews.

JSON

Note: This is a quick review from the earlier unit where we covered JSON. This won’t be discussed very much in the 15 minute presentation

As mentioned above, many REST API’s will return the data we need in JSON format. Let’s take a quick look into what JSON is

JSON stands for JavaScript Object Notation

JSON is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. (https://www.json.org/json-en.html)

Here is a very simple JSON string: ‘{“name”:”John”, “age”:30, “car”:null}’

It defines an object with 3 properties:

  1. name
  2. age
  3. Car

(example borrowed from W3schools: https://www.w3schools.com/js/js_json_intro.asp)

In the example above, name=John, age=30, and car=null.

Most programming languages should provide or have libraries you can use to interpret JSON, and use the data sent in the string in our programs. Javascript and PHP have built in ways to do this. Other languages like Python have a module you can import like: import json. In theory you could do the parsing yourself, but I would not recommend this path as this problem has likely already been solved for you.

Guide to integrating with many external APIs

We’re set to dive into some exciting work! Here’s a straightforward guide (set of 6 steps) to integrating almost any web service into your website. Though it might seem daunting at first, mastering the process with one service, like fetching Yelp’s latest reviews, simplifies future endeavors, such as retrieving the latest tweets.
  1. Find & sign up on the developer page.
  2. Obtain a key
  3. Review Documentation and Plan Requests (find endpoints needed etc..)
  4. ​​Initiate the Request
  5. Receive The Data
  6. Display The Results

Step 1 – Find & sign up on the developer page.

Generally this may be found by googling the name of source, plus the word(s) developer or API.

Examples:

We will be using the Yelp Fusion API.

Step 2 – Obtain a key!

Accessing data from various services usually requires a form of authentication. This is predominantly achieved through the use of an API key, although other methods exist.

Why do services like Yelp/Google/Instagram make us go through this step?
Some Reasons Include:

  • Request Monitoring: API keys enable service providers to monitor the number of requests made by each user. Running servers incurs costs, and to manage resources efficiently, providers often set limits on the frequency of data requests.
  • Access Control: Authentication acts as a gatekeeper, determining what data a user can access. For instance, accessing specific information on LinkedIn might require prior approval. The service provider reviews the data being requested to ensure it’s used appropriately, a practice that has gained emphasis following incidents like the Facebook/Cambridge Analytica scandal.

Another Consideration at this time may be an approval Process: Depending on the service, obtaining an API key may involve a preliminary approval process. For platforms like LinkedIn, you might need to submit an application detailing your app’s purpose, the data fields you require, and how you intend to use the data. This process ensures that applications adhere to the service’s usage policies and data protection standards.

Step 3 – Review Documentation & Plan Requests (find endpoints needed etc..)

.

We will likely need to interact with various Yelp endpoints to get the data we need. Until we review the documentation for that specific source we won’t know how to do this!

  • To get general business information like phone number, location and hours we will need to use the Businesses Endpoint
  • To then get reviews from a specific business we will then need to use the Reviews Endpoint

For today’s demonstration we will focus on just getting the existing reviews from a business, therefore we will be using the Reviews Endpoint

Step 4 – ​​Initiate the Request

Initiating a request to a RESTful web service is a crucial step in the process of integrating external data or functionalities into our website. This can be done either from client-side JavaScript or using a server-side tool. Here’s a brief overview of both methods:

Javascript:

When using client-side JavaScript, you make an HTTP request directly from the user’s browser. This is often done using the fetch API or XMLHttpRequest.

Server Side Tools (PHP):

in PHP, you might use curl or another HTTP client library to make the request.

Step 5 – Receive The Data

The next step is to receive and process the data, typically formatted as JSON. This process involves waiting for the response from the API, parsing the JSON data, and then using it within your application.

Using Javascript Fetch methods this may entail:

  • Wait for the Response: After sending the request, use the .then() method to wait for the API to respond. The fetch API returns a promise that resolves with a Response object.
  • Parse the JSON: The Response object contains a method .json() that returns another promise. This promise resolves with the result of parsing the body text as JSON.
  • Use the Data: Once the JSON data is parsed, you can use it within another .then() method. This is where you would implement logic to display the data on your webpage or further process it as needed.

Step 6 – Display The Results

Using the methods we have already learned earlier this semester such as: document.getElementById(), innerHTML, and more we can then update various parts on our website. I will demo this part.

Next Steps

Part 2 of this tutorial is currently being revamped, as I need to update the instructions to work directly with the Yelp API. Should be published by October 25, 2024 so please check back soon if interested!

Tagged Skills

API HTML / CSS JavaScript PHP

AI Portfolio Builder – Project Queen


Generate a website using AI and edit it afterwards with no knowledge of html

Portfolio Queen is a web tool that allows users to generate a functional website by simply pasting a couple of paragraphs of text, such as a biography, into a text box. After submitting, the tool renders a webpage that users can further edit through an intuitive, WYSIWYG-like interface. Though the ability to export as HTML is still in development, the tool provides a simple proof of concept that works especially well for faculty bios used in conference proceedings. Users can also give suggestions for custom formatting, such as adding lists or hobby sections.

Read More about the project on the blog post Creating an AI-Driven Portfolio Builder

Photo Gallery

Tagged Skills

API HTML / CSS

Foundations of Web Technologies II


Advanced Web Development for Graduate Students

Group Project for Local Non-Profit Organization Initiative

  • Overview: Traditionally, students in the course (ISTE-646 Foundations of Web Technologies II) are tasked with developing a design document and a small website, complete with dynamic features such as web forms and database-driven content. However, recognizing the potential for real-world impact, I initiated an initiative to engage genuine clients, primarily from the Rochester non-profit sector. This strategic shift not only offered students a tangible connection to industry practices but also aimed to enhance the web presence of small organizations with very limited resources.

News article w/ video on RIT website: https://www.rit.edu/spotlights/code-community-weaving-real-world-non-profit-projects-web-technologies-course

  • Organizations we have helped: 
    • Marketview heights (a community service organization committed to improving the quality of life in Rochester through underscoring the need for decent housing that is affordable to low and moderate income people):
    • South Lyon Cardio Drumming
    • Additional Organizations we have helped but not a finished website to show are: Britton Rd. Cemetery, UPSTAT Statistics Conference Mastermind (an academic quiz bowl for middle school and high school students).

Additional Initiatives and Development:

  • Content Management Systems Added to curriculum. Since the class is composed of graduate students, many of whom are not actually going into Full Stack Development it wasn’t a requirement to learn as many of the basics. This allowed me to implement several content management systems the students could use in their group project including: WordPress, Joomla, Get Simple CMS.

Syllabus: Download

Times Taught: 5

Class Reviews

  • Professor Takats is kind, patient, and understanding when it comes to teaching the course material. He's very experienced as a web developer and he does his best to translate that into his teaching. He always tries to be available outside of class and will respond to questions at all hours of the day. He also put in a lot of time and effort to ensure we had real clients to work with for our group projects, and that alone has given me an invaluable experience in web work and project management. He really tries to go above and beyond, and secured a bunch of extra software to try preparing us for developing in real-world settings. I took a previous class with him, and went out of my way to take another because I appreciated his attitude and effort.
  • This was by far the best class I've taken at RIT. Although the material being taught, and my desire to learn web development may have played a part in how much I enjoyed taking this course, I believe that the biggest reason however was Prof. Takats. The manner in which he taught, explained with patience, promoted discussions and a positive learning environment, and how he was always available to meet with were things I genuinely appreciated. Also, the individual project and the group project setups were great.
  • I think Professor Takats did a good job organizing the massive amount of material in this course into manageable lessons. He provided helpful feedback on assignments and was always available for questions and assistance, especially after the switch to online learning. It is clear from taking this course that Professor Takats cares about his students and strives to help them learn material that is interesting and beneficial to them. He took a difficult course and helped us understand the material in a meaningful way.

Official Course Description

This course builds on the basic aspects of web page development that are presented in the first course and extends that knowledge to focus on issues and technologies related to the design and development of web sites. Topics include advanced internet technologies (including, but not limited to: AJAX, server-side programming, database use and access, client libraries, server frameworks, and creating and consuming information services).

Curriculum Development

Group Project for Local Non-Profit Organization Initiative

  • Overview: Traditionally, students in the course (ISTE-646 Foundations of Web Technologies II) are tasked with developing a design document and a small website, complete with dynamic features such as web forms and database-driven content. However, recognizing the potential for real-world impact, I initiated an initiative to engage genuine clients, primarily from the Rochester non-profit sector. This strategic shift not only offered students a tangible connection to industry practices but also aimed to enhance the web presence of small organizations with very limited resources.

News article w/ video on RIT website: https://www.rit.edu/spotlights/code-community-weaving-real-world-non-profit-projects-web-technologies-course

  • Organizations we have helped:
    • Marketview heights (a community service organization committed to improving the quality of life in Rochester through underscoring the need for decent housing that is affordable to low and moderate income people):
    • South Lyon Cardio Drumming
    • Additional Organizations we have helped but not a finished website to show are: Britton Rd. Cemetery, UPSTAT Statistics Conference Mastermind (an academic quiz bowl for middle school and high school students).

Additional Initiatives and Development:

  • Content Management Systems Added to curriculum. Since the class is composed of graduate students, many of whom are not actually going into Full Stack Development it wasn’t a requirement to learn as many of the basics. This allowed me to implement several content management systems the students could use in their group project including: WordPress, Joomla, Get Simple CMS.

Tagged Skills

API CMS HTML / CSS JavaScript MySQL PHP

FeedMasher Project Finally Moving to Opensource


The process of moving a project that helped power the RIT homepage for several years to open source.

I am in the process of moving FeedMasher a web aggregation framework I have worked on for several years to open source. Details here: http://www.feedmasher.org/ Feedmasher is a system that is capable of gathering digital content from a wide array of sources such as traditional RSS feeds (ex: newsfeeds from cnn, bbc etc.)  Twitter tweets, Youtube Videos, Instagram and more. It was originally developed as part of my masters capstone, and continued on through work. It then powered the RIT homepage channel system; front and center for millions of users to see (well millions over the course of a few years – RIT does get a lot of traffic). However all good things come to a close and the university moved to a much more robust platform Drupal and had a major rebrand initiative.

Fortunately, RIT was understanding and allowed me to make my contributions open source. Thanks a lot to Ryne Raffaelle & Ed Lincoln at RIT for assisting with this.

“Feedmasher is a system that is capable of gathering digital content from a wide array of sources such as traditional RSS feeds (ex: newsfeeds from cnn, bbc etc.), Twitter tweets, Youtube Videos, Instagram and more. Once data is fetched from an outside source it is pulled into the Feedmasher component and standardized. It can than be displayed in various ways and arrangements. For example: a channel on Arts in Rochester NY could display stories from multiple sources such as a local artists Youtube channel, the latest news from the MAG art gallery, tweets from prominent local artists and more. As opposed to having to visit dozens of individual sites it can be fetched and curated in one single spot!”

Tagged Skills

API HTML / CSS JavaScript MySQL Open Source PHP

JFusion & Dobber Sports


Running complex business applications run with Open Source Software

This is sort of two projects mashed up into one! I bring this up on my portfolio site as even though it wasn’t a massive project in terms of my involvement, it was an interesting opportuntiy since one of the open source plugins I was contributing too that was used by a well established company; somewhere along the lines problems cropped up, and i was hired to fix a few things. First a quick background on what JFusion was:

Jfusion Work

I first began working on Jfusion an open source Joomla Plugin as I needed a single sign on solution for several other projects I was working on. Taken from the Joomla Plugin Repository:

JFusion is a revolutionary new universal integration framework for Joomla 1.5. It’s a “universal bridge” that can synchronize user accounts, user sessions and even visually integrate many different applications into Joomla. Now you can turn your Joomla installation into a powerful portal system that manages your user base across all your online applications”. JFusion is just another example on why Joomla is the future of Content Management Systems.””

I worked on creating an extension for JFusion for Elgg. Elgg is a highly customizable web framework and CMS for building social apps with PHP and MySQL. You can read a bit more about that work in my blog: (Archive) JFusion Elgg Plugin

Dobber Sports

When I was doing lots of work for Bantam Creative my consulting firm, one of the clients was Dobber Sports. I was hired to fix some of the sign on integrations. Essentially the Dobber Sports team sold Fantasy Sports guides (I believe there largest seller was hockey guides. They ran there site in Joomla, and had a membership portal, and also ecommerce integrations to allow for selling their Fantasy guide. While unfortunately what can happen when you have several pieces of software on a website that are supposed to work well together… well sometimes don’t work so well. I was brought in to repair some of the integrations. So for example when I person signed into Joomla, they would also need to be signed into. Well things broke somewhere along the way and I was able to help repair some of the bridges between the software that JFusion helped support.

Tagged Skills

API CMS Joomla Project Management

RIT Interactive Streetview Tour


Rethinking the Virtual Tour: An Immersive Experience that's More Than A Map

The traditional college virtual tour tends to be an overhead clickable map; a far different experience from a real world tour experience. After the Google Streetview Trike visited RIT, the Undergraduate Admissions office set out to create an immersive and interactive tour experience.

The panoramic imagry from Streetview will allow users to explore the campus from a unique perspective. Student tour guides provide narration, describing the area of campus a user is viewing. Social media streams, photos, videos, and foursquare information that is related to the geographical area is overlayed throughout the tour. Viewers have the option to just sit back and let the tour run through, or interact by panning and zooming the streetview window, viewing the related media, and jumping to different areas of campus to explore.


An open source Mozilla project called popcorn.js was used as a foundation; and thru HTML 5 the tour is compatible with mobile devices such as the iPad. Future iterations of the tour will incorporate more related media and include more tour nodes. A choose your own adventure type option will be included to allow people to make a customized tour such as an RIT Engineering Tour, or art on Campus tour.

Photo Gallery

Tagged Skills

API HTML / CSS JavaScript Open Source

Jabode Horoscope Component


An Free Open Source Horoscope Extension for the Joomla CMS

This was my first foray into building an open source extension for the Joomla Content Management System way back in 2008! The project was pretty successful, I believe the component was installed on 100 or more websites! I did stop maintaining it around 2010, but for the purposes of the archives here is its original description:

Want to provide visitors with their horoscope or create your very own horoscope?

Guests can Choose from over 18 different horoscope types (singles, flirt, cat and dogscope are just a few of the types) that are provided via RSS feeds and updated automatically.

For an unbranded version (Jabode links removed and access to future commercial releases) please email me the via contact page

Requirements: Joomla CMS. Joomla Resources
Get it: Downloads Page See it in action: Demo (frontend only)

Multiple Horoscopes: Choose from over 18 Different Horoscopes (not including your own custom Horoscope) from various providers. Publish or unpublish certain horoscope feeds.

Appearance: Elegantly designed button interface to choose your sign from. Colors can be modified in the administrator control panel.

Caching: Horoscopes will automatically cache for the entire day to improve performance. No Need to set up a ‘cron’ job and limit your sites bandwidth.

Language Support: Display frontend in English and German. More languages and improvements to come soon.

Version 1.0 beta has just been completed. However it will not be officially released until the time is right so the date has been set:

Visit Downloads Page to get a copy for yourself (on release date)

Official Release Date will be: 8/1/2007

Last Updated ( Tuesday, 15 July 2008 )

Tagged Skills

API CMS Joomla Open Source PHP

(Archive) JFusion Elgg Plugin


A plugin for Joomla CMS which offers universal user integration (SSO)

Recently I have been working with the JFusion team on an Elgg integration plugin, and happy to hear a new version has just been released with the Elgg plugin.

So if you are wondering what the heck this is let me explain.  Joomla a CMS is described as “the dynamic portal engine and content management system.”  It is a tool that can be used to run and administrate websites. What makes Joomla great is that it has a huge library of 3rd party extensions that allow people to build communities, manage e-commerece sites, forums, just about anything.  JFusion is an extension for Joomla that extends Joomla’s core functionality

Taken from the Joomla site: “JFusion is a revolutionary new universal integration framework for Joomla 1.5. It’s a “universal bridge” that can synchronize user accounts, user sessions and even visually integrate many different applications into Joomla. This is done by extending the Joomla 1.5 user authentication framework without any core hacks. Now you can turn your Joomla installation into a powerful portal system that manages your user base across all your online applications. JFusion is just another example on why Joomla is the future of Content Management Systems.”

Elgg is a completly seperate piece of open source software that is a bit like facebook or a social networking site that you can run on your webserver.  Simply put: this plugin integrates Joomla and Elgg via JFusion.

Tagged Skills

API CMS Joomla Open Source PHP