How to use a real API in your web app (rapidAPI tutorial)
Consider supporting my work by donating to my PayPal:
www.paypal.com/paypalme/DDodic
Learn how to use an API in your web app and see some real examples of using APIs for fetching random quotes, Chuck Norris jokes, currency exchange rates, COVID19 statistics and more.
Source code (example #1):
github.com/DoubleDebug/Using-...
Source code (example #2):
github.com/DoubleDebug/Using-...
RapidAPI website:
rapidapi.com
APIs used in the video:
1. Quotes - rapidapi.com/martin.svoboda/a...
2. Chuck Norris - rapidapi.com/matchilling/api/...
3. Currency exchange - rapidapi.com/fyhao/api/Curren...
4. COVID-19 - rapidapi.com/api-sports/api/C...
Timestamps:
0:00 Intro
1:02 The basic VS Code setup
2:09 Choosing an API
5:30 Implementing the API in your app
8:04 Using your API key correctly
10:27 Some API examples
12:29 Outro
_________________________________________________________
Social media:
● Facebook: / youtubedoubled
● Twitter: / youtubedoubled
● Twitch: / notdoubled
Пікірлер: 133
If you want to learn how to monetize your API: kzread.info/dash/bejne/jKqMm5uPYLvMmNI.html
@DoubleDYouTube
Жыл бұрын
@@Whatsappvideo95R nope, they're correct
@Whatsappvideo95R
Жыл бұрын
do a lesson with getting an object from an array. in your lesson you can get only object
Proper practices for hiding API keys perhaps in a backend environment and how that's set up in vs code would definitely be an interesting video. I found this one very helpful, been scratching my head over APIs for awhile, thanks for posting !
This was exactly what I needed to see when connecting an API to Javascript. Thanks so much.
@DoubleDYouTube
3 жыл бұрын
I'm glad I could help!
@YolandaTheGardener
3 жыл бұрын
@@DoubleDKZread You literally made this so easy for me to understand. I've been trying to get an API connected all week.
@DoubleDYouTube
3 жыл бұрын
@@YolandaTheGardener That's great! I wish you good luck on your web dev journey.
Finally, a video that is clean and clear. Thank you!
Very simple and nice way to get to use an API. Thank you !
You are a legend sir... I've watched tons of 2-3 hours API tutorials and other info and neither was as helpful as yours. I can finally understand APIs and how to connect them to my project. Kuddos to you!
@DoubleDYouTube
Жыл бұрын
That's awesome to hear, I'm glad I could help!
@thesecretnvolia
10 ай бұрын
X 2
@dharsanv3366
8 ай бұрын
@@DoubleDKZread Sir what about POST method endpoints like a google translate can you explain
@DoubleDYouTube
8 ай бұрын
@@dharsanv3366 POST endpoints require sending some data to the server and each one works differently. Use google to see an example of a POST endpoint, or if you need help implementing custom code, message me on Fiverr.
simple but wonderful. Thanks Mr Double D
I can't help but to say it again clear and concise. If you don't understand apis after this I don't know what to tell you.
@DoubleDYouTube
3 жыл бұрын
Thanks a lot, I'm glad I could help!
This was a quick and informative video. Thank you for the content.
Awesome tutorial for Api Beginners using RapidApi . . .
You are a great source thanks for the tutorial, Keep up the great videos...SUBSCRIBED!
@DoubleDYouTube
3 жыл бұрын
Thanks for saying that, means a lot!
Definitely , this video answered all question about API and help me to build my website using API. Thanks a lot for that
@DoubleDYouTube
Жыл бұрын
Hey, I'm glad to hear that!
Thanks for the video, I learnt too much!
Thank you very much for the tutorial
Great tutorial!!!
Extremely useful. thank you!
@DoubleDYouTube
Жыл бұрын
Thanks for the feedback!
great videos...SUBSCRIBED!
This is how you break down the elephant in the room.
how to use cricket api on blogger kindly tell me?
How do you put it into html. The content.
how to connect desktop application to website with database
Wt about POST endpoints ?
So informative
Great Vid Tks DD
wowiie nice video, now I need to know about json
Thanku so much
I would like to know about that bootstrap extension that you have used.
@DoubleDYouTube
3 ай бұрын
What do you mean?
when a user uses your app do they have to use their own API key? Because in my app that uses an external API it doesn't load data for the users on their devices and only on mine and i believe its because the API key is exclusive to my ip
@DoubleDYouTube
3 ай бұрын
No, the api key is not exclusive to your ip. If you setup everything correctly, it will for all users (with your api key).
Thank you man
please help me out.. when i typed in .then(response => response.json()) and run the program. there's a SyntaxError on the console.error(err);
@DoubleDYouTube
3 жыл бұрын
console.log(err)
hey i have asked to fetch the data from the 3rd party server and asked to use that on my student edit profile web application for that which API I should use in the rapid api.
@DoubleDYouTube
3 жыл бұрын
I don' know, it depends on what you want to do. Maybe you can fetch some interesting and educational data about your college/branch of studying... or you can fetch how many people in the world are named same as you, if you want it to be entertaining. Just explore the rapidapi website until you find something suitable :)
Why is my java script fetch code way different when I copy from the api website. I am trying to use the quote api
@DoubleDYouTube
Жыл бұрын
Every RapidApi user has different credentials in their request headers. This is to identify who made the request to that API.
Hi. Can you make tutorial how to use the API using Ruby on Rails? I have difficulties in displaying the weather icon from a weather API. Thank you.
@DoubleDYouTube
2 жыл бұрын
I've never used Ruby, so I can't help you there, sorry.
can you explain about twitter api in this website it has many endpoints ?
@DoubleDYouTube
8 ай бұрын
Each endpoint should have a description and tell you what it does. You most likely only need GET endpoints.
API with din currency? Buraz, pa svaka cast!
@DoubleDYouTube
Жыл бұрын
Hvala! :D
Hvala ti brate puno
@DoubleDYouTube
Жыл бұрын
Nema na cemu!
Thanks this was useful, say i want want to get a value i from user... and when the request is sent it should be like api url/ "i" What should I do , thanks
@DoubleDYouTube
2 жыл бұрын
How you formulate a URL depends on the specific API you choose. For example, let's say you're using a COVID api and you want to get data for a specific country. Your URL might look something like this: MyCovidApi.com/data?country=Italy&month=September This way, you're passing the arguments directly through the URL. You're saying you want to get COVID data for Italy and for the month of September. This is how you will form your URL depending on the user input that you get.
hello about the use of APIs I had some ideas, could you tell me what you think of them and if they are feasible
@DoubleDYouTube
10 күн бұрын
@@chrisder1814 Sure, send me an email
Nice Sir Thanks
It's good 👍
Great explanation!! Could you share a link that public api for covid-19 real time data? thanks
@DoubleDYouTube
3 жыл бұрын
Thanks! I updated the description and put all the links there.
Very nice tutorial. I have one question, do you know how to dockerize this web app? Lets say i only use the covid api in my app and i want to dockerize it. How can i do that ?
@DoubleDYouTube
2 жыл бұрын
If you want to dockerize your app, then you probably shouldn't build a web app (browser), you need a NodeJS app (it runs using node, not the browser). I don't know much about docker, but I assume you would have to create a docker file in your base folder. And then you set your entrypoint in the dockerfile, deploy it using whatever hosting service you prefer and that's it. Perhaps this article can help you: nodejs.org/en/docs/guides/nodejs-docker-webapp/
@lolloler4555
2 жыл бұрын
@@DoubleDKZread okay thank you a lot for the quick answer.
How can I upload this project to github as a repository, but hidding the config file? Is it possible?
@DoubleDYouTube
3 жыл бұрын
That's a good question. Every github repository has a gitignore file, make sure to include your config filename in the gitignore file to ensure that it's not tracked/committed/pushed. For more info, google 'github and api keys', a bunch of helpful articles show up. :)
@robertudrea
3 жыл бұрын
@@DoubleDKZread thank you, I’ll try this.
Really great tutorial, but i'm having some trouble. I'm trying to use an IMDb API, i follwed your tutorial but in the console i keep getting the error "Failed to load resource: net::ERR_FILE_NOT_FOUND" and i don't know how to solve it
@DoubleDYouTube
3 жыл бұрын
That specific API might not be working. Have you tried another one? Can't tell you much with just that error message, all it tells you is that a resource was probably deleted or something.
@albertosambrotta776
3 жыл бұрын
@@DoubleDKZread i resolved by changing some attributes from the script tag, thanks anyway✌🏻
@realfire9614
3 жыл бұрын
@@albertosambrotta776 I got the same error, what exactly did you change?
Would you be kind enough to teach us how to hide an API key in javascript?
@DoubleDYouTube
3 жыл бұрын
The basic thing you can do is what I showed in the video. Make a separate CONFIG file where you define your sensitive data (passwords, API keys, etc.) and in your main code, use those constants (variables). Later on, when publishing the code on GitHub (or anywhere else), just don't include the config file. For GitHub, you can include your config filename in the .gitignore file, which will make sure to ignore it when pushing code onto your repository. Another common practice is to use so-called environment variables in JavaScript. Store your constants and their values in .ENV files, then use them with "process.env.variable_name" in your code. Same thing about .gitignore applies to ENV files.
Hi. Can you make tutorial how to use the API using PHP? I have diffculties in hiding the uneeded elements.
@DoubleDYouTube
2 жыл бұрын
I don't have experience with PHP, so I can't help you with that. However, PHP is a server side technology. This means that it isn't publicly available and cannot be seen on the client for example. This means that you don't have to hide things like API keys and passwords. But if you're using any kind of version control system (e.g. Github), you should still separate your sensitive info in a separate config PHP class.
@MrGedanggoreng
2 жыл бұрын
@@DoubleDKZread Thanks for your reply. Any recommendations what programming language should I use in WordPress if I want to get API from RapidApi?
@DoubleDYouTube
2 жыл бұрын
@@MrGedanggoreng I think PHP is your only choice for WordPress.
It is a great tutorial of API. However, everything is working fine on the console but it is not showing anything on the browser. I have just downloaded your source file and there is also this problem.
@elearningbyali3474
3 жыл бұрын
It is working now. Thanks
@mikewellick557
Жыл бұрын
@@elearningbyali3474 how did you fix it?
@oluwatimilehinatobatele3873
Жыл бұрын
@@mikewellick557 you just have to put the response into your html. Save a variable for the part of the json object you want to display on the page.
I dont get it. You cut the most important part which is to show how to get the response on the actual webpage
@DoubleDYouTube
Жыл бұрын
I showed exactly how to get the response, step by step. I don't know what you mean by this comment.
@llicit1833
Жыл бұрын
Good video but I had the same thought. Everything was very clear but then went from showing the data in the console log to showing it in the browser without explaining how that actually happened. I guess it will be in index.html but would have been better to show how this file was modified to show the retrieved content. Otherwise excellent though
@llicit1833
Жыл бұрын
So I looked at the source files, and now can see the index.html modification required. Admittedly pretty simple but still would be good to include in the video given it is aimed at beginnners etc
nice
How to connect android api?? I have searched everywhere but very few tutorials on this
@DoubleDYouTube
3 жыл бұрын
What do you mean by android api?
@MayankCodes
3 жыл бұрын
@@DoubleDKZread to use this api in java
@DoubleDYouTube
3 жыл бұрын
@@MayankCodes If you actually watched the video, you would know. The rapidAPI website gives you an option to choose a programming language.
@MayankCodes
3 жыл бұрын
Yaa.. i have watched.. what i am saying is i am not getting the url in which data is given in json format
@DoubleDYouTube
3 жыл бұрын
@@MayankCodes Then you need to find a way to parse JSON data from the response (JSON() function from js, but in java). A google search should help.
Great tutorial Sir!. Can you please do a tutorial on how to use crypto API?
@DoubleDYouTube
2 жыл бұрын
Thanks! I never used any crypto APIs, but the gist of it is explained in the video. No matter what the API is about, the idea is the same.
damn bruhh, this some cool shit!
@DoubleDYouTube
3 жыл бұрын
Yessir
Maybe You can increase Your Font a little bit... it's hard to watch in mobile phone💁
👍🏾
Oplodi me Dodiću!!! ❤️❤️❤️
@DoubleDYouTube
3 жыл бұрын
Hahaha si dobro, Djordjevicu
@miljandjordjevic5354
3 жыл бұрын
@@DoubleDKZread jel mi blokiras attackove na peru dodicu
@miljandjordjevic5354
3 жыл бұрын
@@DoubleDKZread nisam nikako nisam help me
@DoubleDYouTube
3 жыл бұрын
@@miljandjordjevic5354 Ne znam o cemu pricas xD
@miljandjordjevic5354
3 жыл бұрын
@@DoubleDKZread izvini na jeziku al nisam popio lekove
Bootstrap is not necessary! Sure it makes it easier in the beginning, but you may pay for it later!
@DoubleDYouTube
Жыл бұрын
That's true... Did I say it was necessary?
Keep posting these stuffs, we want real world tuts, not hello worlds
@DoubleDYouTube
3 жыл бұрын
Good to know, thanks for the feedback
CSS is an important part of the tutorial for beginners. Skipping the CSS portion takes away value from this tutorial.
@DoubleDYouTube
2 жыл бұрын
It is important, but it wasn't the focus of this video and I wanted to keep it as short as possible.
Thanks for the tutorial. I'm doing the exact code as yours for covid19 api but i'm getting this error: Uncaught TypeError: document.querySelector(...) is not a function at HTMLSelectElement.document.querySelector.onchange
@DoubleDYouTube
2 жыл бұрын
As far as I can see, there's no "document.querySelector" in the example I showed. I can't really help you without seeing your code.
@abdullahhagos9833
2 жыл бұрын
@@DoubleDKZread I used document.querySelector instead of document.getElementById. Here is a snippet of my code: select a country New confirmed cases: Total confirmed cases: New deaths: Total deaths : Last updated: let covid19data (function onLoad(){ getLatestCvoid19Data(); setButtonFunction(); })(); function setButtonFunction(){ document.querySelector('.countries').onchange = function() { const selectedValue = document.querySelector('.countries').value; const countryData = covid19data.filter(c => c.country == selectedValue)[0]; const newConfirmed = document.querySelector('.covidNewConfirmed'); const totalConfirmed = document.querySelector('.covidTotalConfirmed'); const covidNewDeaths = document.querySelector('.covidNewDeaths') const covidTotalDeaths = document.querySelector('.covidTotalDeaths'); const lastUpdated = document.querySelector('.covidLastUpdate'); countryData.cases.new ? newConfirmed.innerHTML = 'New confirmed cases:' + countryData.cases.new : newConfirmed.innerHTML = 'New confirmed cases: 0' countryData.cases.total ? totalConfirmed.innerHTML = 'Total confirmed cases:' + countryData.cases.total : totalConfirmed.innerHTML = 'Total confirmed cases: 0' countryData.deaths.new ? covidNewDeaths.innerHTML = 'New deaths:' + countryData.deaths.new : covidNewDeaths.innerHTML = 'New deaths: 0' countryData.deaths.total ? covidTotalDeaths.innerHTML = 'Total deaths:' + countryData.deaths.total : covidTotalDeaths = 'Last updated: 0' lastUpdated.innerHTML = 'Last updated:' + countryData.day } }
@oluwatimilehinatobatele3873
Жыл бұрын
There's no jquery in the code
How do you put it into html. The content.