Discover more from João Melo
How To Interact With APIs from a Web App
We are going to build a URL shortening web app using the fetch function to interact with an external service
Imagine you are building a web app that needs to save and query business data from the server-side. Or maybe it must process users’ payments through a third-party provider. In these and many other cases, web apps benefit from a way to request computation from external software. The Fetch API is an answer to that challenge.
The Fetch API has broad support among browsers and is also present in Deno and Node.js server runtimes.
We will cover an introductory use case in this post by building a web app that shorts URLs. While using the app, the user types a long URL and clicks a button. The app requests the SHRTCODE service to respond with a shortened version for that long URL. Then we present this new version to the user.
This project is beginner’s friendly. It aims at those starting web development or unfamiliar with the Fetch API.
The first step is to create a project folder to hold the source code. Inside the new folder, run the following command to initialize an npm package.
npm init -y
We need a webserver to run our app. If you want to use Vite as I did, now is an excellent time to install it.
npm i -D vite
To ensure the plumbing is all set, create an
index.html file with the following markup. Then run Vite with the
npx vite command.
Finally, check if the app is online at the address provided by Vite in the terminal.
Let’s code 🤓.
The user needs an
input element to type the URL they want to be shortened and a
Unfortunately, nothing will happen if someone clicks the button now. Please create a
main.js file beside
index.html so we can change that.
We start by attaching a function to the button click event. Inside the function, we store the long URL typed in the
input and (just for now) print it on the browser console. Take a look.
The fetch function makes a dynamic request to another program through the network. Its minimum requirement is the external program URL but is flexible for configuration by various options. When the request completes, the function resolves to a Response object with valuable data about the operation.
The SHRTCODE docs state that to shorten a link like
https://api.shrtco.de/v2/shorten?url=www.google.com. The SHRTCODE server then responds with the shortened link if the process is successful.
Let’s try calling
fetch on those terms and logging the response to the console.
You may have noticed that the response signals a successful request, but we can’t find over there the short URL we were expecting. You see, services can respond with various data types to requests. The response object stores this information in an unopinionated bucket of bytes inside its body property.
result property of the parsed object.
Now that we have the short URL, we need a better UI than the browser console to show it to our users.
Hi, a small break to say that you can subscribe for free and never miss new posts from the blog.
Short Link UI
We’ll add an anchor tag to
index.html to show the short URL as a clickable link to the user. We need to update its text and reference values after every API response parse. See below.
We could declare things good as done by now, but there are some minimal improvements I would like to cover with you.
The page will update itself to the short link address If the user clicks it right now. Users tend to expect this kind of link to open in a new tab. We solved that by the setting the anchor
target property to
The layout would be more friendly to small screens if we stack the elements vertically. We achieve this by grouping our tags inside a
grid container set to center its children elements on both axes.
The last changes are handled below in the
Playing with third-party APIs is an excellent way to learn how to build feature-rich web apps faster since the backend is already cooked. You can find loads of them by searching for “public API” in your favorite search engine.
I came across the API we used here in this article. Maybe you can use other APIs listed there for your fun projects, but be careful when integrating with APIs requiring access keys. Any user can capture the keys when you leave them in the web app source code.
Finally, the project source code is completely available in this Github repository.
Have a nice one.
If you think this post can help someone, please share it with them. Better yet, subscribe for free and receive fresh content in your inbox every time it is published on the blog. I will never send more than one email a week.