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

Rich Media Web Application Development I


Master Web Apps: Media-Rich Design with JavaScript & a taste of React!

This course provides students the opportunity to explore the design and development of media-rich web applications that utilize both static and procedurally manipulated media such as text, images and audio.

This course examines client and server-side web development and features common to such applications. Issues explored include framework characteristics, information management, presentation, interactivity, persistence, and data binding. Programming projects are required.

Syllabus: Download

Times Taught: 1

Class Reviews

  • JP Was really good greatest professor Ever!

Photo Gallery

Tagged Skills

JavaScript

Web and Mobile I ISTE-140


An introduction to internet and web technologies, and to development on Macintosh/UNIX computer platforms

Syllabus: Download

Class Reviews

  • I really appreciate how well-kept mycourses is. This is the only class where I actually trusted the "Work to do" tab in mycourses. This prof was also very forgiving with deadlines which I definitely appreciate. Perhaps a little too forgiving.
  • Takats is a very calm and understanding professor who you can tell genuinely wants to see his students succeed.
  • Personally Professor Takats, helped enhance my understanding of web and mobile completely. The way that he ran his class was perfect for my learning style and helped me with my time management skills this semester as well. Along with being available outside of his normal office hours (due to our conflicting schedules) he was able to make time to help me when I needed it. He's very organized on my courses and used the textbook as a huge asset, I thought it was very useful and I dislike paying for textbooks. He's overall a very chill professor and it was a pleasure to work with him.

Official Course Description

This course provides students with an introduction to internet and web technologies, and to development on Macintosh/UNIX computer platforms. Topics include HTML and CSS, CSS3 features, digital images, web page design and website publishing. Emphasis is placed on fundamentals, concepts and standards. Additional topics include the user experience, mobile design issues, and copyright/intellectual property considerations.

Curriculum Development

  • 2022 – Major revamp and new interactive textbook integration (ZyBook). Began as a pilot over the summer, to be ready to launch in Fall 2022 to over 10 sections with 6 instructors all teaching ISTE-140 on the Rochester campus of RIT simultaneously. Added custom material not found in ZyBook and adapted 10 ZyLabs.
  • 2021 Creation of a new sequence of projects. Here is an example of one
  • 2020 – Conversion of in person class to an online asynchronous course. Recorded dozens of videos (listed in section above) to create an online asynchronous version of web and mobile 1 that has since been offered in subsequent summers.

Course Coordination & More on Zybook Implementation: This class will often have at least 8 sections in a single fall semester, and is offered in multiple countries (RIT Dubai, RIT Croatia) so significant coordination efforts need to be spent here. As described in the section above, another area I helped coordinate this course being offered around the world was when I implemented the virtual textbook (zybook). This video goes over how the zylabs work and I give a few demos (for summer 2024): https://www.youtube.com/watch?v=1VNT5z3p8Yg

Tagged Skills

HTML / CSS JavaScript

Web & Mobile II ISTE-240


 More advanced web design topics including database. Extends concepts from 140 including usability, accessibility, information architecture, and graphic design in the context of the web.

Syllabus: Download

Class Reviews

  • Jokes. Transitioned from whiteboard use to vscode. Most majors prefer live code rather than words on the wall. Provided RIT's style guide as an example, and showed us sites for better UI and color palette. Cyberduck demo and integration were a plus as well.
  • The assignments and projects are well communicated, with clear objectives and a fair rubric. I really liked his style of teaching as well, and he was always available and ready to help for his office hours. Great teacher.
  • Prof. John seemed to have a down-to-earth personality about him that made reaching out to him for support on class materials easy. There was a natural comfort and as a professor, he taught the course content so understandably for me to grasp the concepts and enjoy the class. All teachers aren't perfect and that can be seen through him, he lets us know he is also human to the extent that he is not knowledgeable about everything but with practice one can become good.
  • He was clearly very knowledgeable in the course material, and it reflected in his demonstrations. Being able to go over topics with practice helped facilitate my understanding of HTML, CSS, JavaScript, and other topics. I feel more confident in my programming abilities, which is not something I would've expected to say earlier in the semester.

Official Course Description

This course builds on the basics of web page development that are presented in Web and Mobile I and extends that knowledge to focus on theories, issues, and technologies related to the design and development of web sites. An overview of web design concepts, including usability, accessibility, information architecture, and graphic design in the context of the web will be covered. Introduction to web site technologies, including HTTP, web client and server programming, and dynamic page generation from a database.

Curriculum Development

  1. Final Exam / Practical Creation – Created new examinations for multiple semesters

Tagged Skills

JavaScript Joomla MySQL PHP

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

Foundations of Web Technologies I


A class for Graduate HCI students to learn about the Building Blocks of the Web

Syllabus: Download

Times Taught: 2

Class Reviews

  • For me this course became very helpful as professor was always available via office hours and during lecture as well. I can't thank enough for clearing my all doubts and guiding me. Thank you so much professor.
  • Cared about our learning journey
  • Professor Takats had enthusiasm and patience teaching the course materials. I really appreciated the speed of the course as an HCI student with no experience in web development; I would imagine the course is fairly slow for Software Engineering students or others with a coding-heavy background, however. I also appreciated that he's honest when he's not sure about a particular question, and welcomes learning opportunities from students as well, many of whom have experience working in Web careers.
  • I absolutely loved how Professor Takats taught the class. Maybe it is because I needed a refresher on web development, but I appreciated the pace of the class.
  • He was supportive in and out of class. He provided resources when needed and was willing to assist the student at all times. Overall, he was a mentor figure for me.

Official Course Description

This class provides an introduction to internet and web technologies. Topics include an introduction to the internet and basic internet technologies (including, but not limited to: SSH, SFTP, UNIX, XHTML, CSS, Client-Side programming, and website publishing)

Curriculum Development

  • 2021 – Implemented progressive enhancement principles into the course and wireframing.
  • 2021 – Designed and added a team project to create a multi-disciplinary design document. View the instructions I developed here: View Document
  • 2020 – Implemented an interactive textbook into the course (Zybook, a similar setup as described in ISTE-140 but with some differences for graduate level students).

Tagged Skills

HTML / CSS PHP