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

  • @DoubleDYouTube
    @DoubleDYouTube2 жыл бұрын

    If you want to learn how to monetize your API: kzread.info/dash/bejne/jKqMm5uPYLvMmNI.html

  • @DoubleDYouTube

    @DoubleDYouTube

    Жыл бұрын

    @@Whatsappvideo95R nope, they're correct

  • @Whatsappvideo95R

    @Whatsappvideo95R

    Жыл бұрын

    do a lesson with getting an object from an array. in your lesson you can get only object

  • @jameselms5735
    @jameselms5735 Жыл бұрын

    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 !

  • @YolandaTheGardener
    @YolandaTheGardener3 жыл бұрын

    This was exactly what I needed to see when connecting an API to Javascript. Thanks so much.

  • @DoubleDYouTube

    @DoubleDYouTube

    3 жыл бұрын

    I'm glad I could help!

  • @YolandaTheGardener

    @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

    @DoubleDYouTube

    3 жыл бұрын

    @@YolandaTheGardener That's great! I wish you good luck on your web dev journey.

  • @kidmyn
    @kidmyn Жыл бұрын

    Finally, a video that is clean and clear. Thank you!

  • @babycheeks.4335
    @babycheeks.43356 ай бұрын

    Very simple and nice way to get to use an API. Thank you !

  • @stoyansarov2647
    @stoyansarov2647 Жыл бұрын

    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

    @DoubleDYouTube

    Жыл бұрын

    That's awesome to hear, I'm glad I could help!

  • @thesecretnvolia

    @thesecretnvolia

    10 ай бұрын

    X 2

  • @dharsanv3366

    @dharsanv3366

    8 ай бұрын

    @@DoubleDKZread Sir what about POST method endpoints like a google translate can you explain

  • @DoubleDYouTube

    @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.

  • @bechemgaston6039
    @bechemgaston60392 жыл бұрын

    simple but wonderful. Thanks Mr Double D

  • @codingprograms2078
    @codingprograms20783 жыл бұрын

    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

    @DoubleDYouTube

    3 жыл бұрын

    Thanks a lot, I'm glad I could help!

  • @yozora0ryuu239
    @yozora0ryuu239 Жыл бұрын

    This was a quick and informative video. Thank you for the content.

  • @diwakarr5425
    @diwakarr54252 жыл бұрын

    Awesome tutorial for Api Beginners using RapidApi . . .

  • @jondisla
    @jondisla3 жыл бұрын

    You are a great source thanks for the tutorial, Keep up the great videos...SUBSCRIBED!

  • @DoubleDYouTube

    @DoubleDYouTube

    3 жыл бұрын

    Thanks for saying that, means a lot!

  • @serkandiner2784
    @serkandiner2784 Жыл бұрын

    Definitely , this video answered all question about API and help me to build my website using API. Thanks a lot for that

  • @DoubleDYouTube

    @DoubleDYouTube

    Жыл бұрын

    Hey, I'm glad to hear that!

  • @Harvyss
    @Harvyss2 ай бұрын

    Thanks for the video, I learnt too much!

  • @madsonmendes8842
    @madsonmendes8842 Жыл бұрын

    Thank you very much for the tutorial

  • @robertudrea
    @robertudrea3 жыл бұрын

    Great tutorial!!!

  • @ramirorenteria7333
    @ramirorenteria7333 Жыл бұрын

    Extremely useful. thank you!

  • @DoubleDYouTube

    @DoubleDYouTube

    Жыл бұрын

    Thanks for the feedback!

  • @sergeysokurenko845
    @sergeysokurenko8452 жыл бұрын

    great videos...SUBSCRIBED!

  • @codingprograms2078
    @codingprograms20783 жыл бұрын

    This is how you break down the elephant in the room.

  • @frking3
    @frking3 Жыл бұрын

    how to use cricket api on blogger kindly tell me?

  • @simonhaesaert8175
    @simonhaesaert81757 ай бұрын

    How do you put it into html. The content.

  • @stockmarketinusa1251
    @stockmarketinusa12512 жыл бұрын

    how to connect desktop application to website with database

  • @dharsanv3366
    @dharsanv33668 ай бұрын

    Wt about POST endpoints ?

  • @Julukevin
    @Julukevin Жыл бұрын

    So informative

  • @chriscalver8595
    @chriscalver8595 Жыл бұрын

    Great Vid Tks DD

  • @jeri9260
    @jeri92603 ай бұрын

    wowiie nice video, now I need to know about json

  • @jaiharekrishna2132
    @jaiharekrishna21323 ай бұрын

    Thanku so much

  • @artsworld9016
    @artsworld90163 ай бұрын

    I would like to know about that bootstrap extension that you have used.

  • @DoubleDYouTube

    @DoubleDYouTube

    3 ай бұрын

    What do you mean?

  • @cuzzo9146
    @cuzzo91463 ай бұрын

    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

    @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).

  • @nismaelagder4951
    @nismaelagder49512 жыл бұрын

    Thank you man

  • @selenayeo4205
    @selenayeo42053 жыл бұрын

    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

    @DoubleDYouTube

    3 жыл бұрын

    console.log(err)

  • @raswithanarla5889
    @raswithanarla58893 жыл бұрын

    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

    @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 :)

  • @maxdamiecki1935
    @maxdamiecki1935 Жыл бұрын

    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

    @DoubleDYouTube

    Жыл бұрын

    Every RapidApi user has different credentials in their request headers. This is to identify who made the request to that API.

  • @grigordanut844
    @grigordanut8442 жыл бұрын

    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

    @DoubleDYouTube

    2 жыл бұрын

    I've never used Ruby, so I can't help you there, sorry.

  • @dharsanv3366
    @dharsanv33668 ай бұрын

    can you explain about twitter api in this website it has many endpoints ?

  • @DoubleDYouTube

    @DoubleDYouTube

    8 ай бұрын

    Each endpoint should have a description and tell you what it does. You most likely only need GET endpoints.

  • @Lupo150
    @Lupo150 Жыл бұрын

    API with din currency? Buraz, pa svaka cast!

  • @DoubleDYouTube

    @DoubleDYouTube

    Жыл бұрын

    Hvala! :D

  • @matijastojnic8191
    @matijastojnic8191 Жыл бұрын

    Hvala ti brate puno

  • @DoubleDYouTube

    @DoubleDYouTube

    Жыл бұрын

    Nema na cemu!

  • @weebthatlikesshitposts5527
    @weebthatlikesshitposts55272 жыл бұрын

    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

    @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.

  • @chrisder1814
    @chrisder181410 күн бұрын

    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

    @DoubleDYouTube

    10 күн бұрын

    @@chrisder1814 Sure, send me an email

  • @user-rq9zl6nk6e
    @user-rq9zl6nk6e9 ай бұрын

    Nice Sir Thanks

  • @sachinkadam5570
    @sachinkadam5570Ай бұрын

    It's good 👍

  • @akptr2821
    @akptr28213 жыл бұрын

    Great explanation!! Could you share a link that public api for covid-19 real time data? thanks

  • @DoubleDYouTube

    @DoubleDYouTube

    3 жыл бұрын

    Thanks! I updated the description and put all the links there.

  • @lolloler4555
    @lolloler45552 жыл бұрын

    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

    @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

    @lolloler4555

    2 жыл бұрын

    @@DoubleDKZread okay thank you a lot for the quick answer.

  • @robertudrea
    @robertudrea3 жыл бұрын

    How can I upload this project to github as a repository, but hidding the config file? Is it possible?

  • @DoubleDYouTube

    @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

    @robertudrea

    3 жыл бұрын

    @@DoubleDKZread thank you, I’ll try this.

  • @albertosambrotta776
    @albertosambrotta7763 жыл бұрын

    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

    @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

    @albertosambrotta776

    3 жыл бұрын

    @@DoubleDKZread i resolved by changing some attributes from the script tag, thanks anyway✌🏻

  • @realfire9614

    @realfire9614

    3 жыл бұрын

    @@albertosambrotta776 I got the same error, what exactly did you change?

  • @retagif
    @retagif3 жыл бұрын

    Would you be kind enough to teach us how to hide an API key in javascript?

  • @DoubleDYouTube

    @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.

  • @MrGedanggoreng
    @MrGedanggoreng2 жыл бұрын

    Hi. Can you make tutorial how to use the API using PHP? I have diffculties in hiding the uneeded elements.

  • @DoubleDYouTube

    @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

    @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

    @DoubleDYouTube

    2 жыл бұрын

    @@MrGedanggoreng I think PHP is your only choice for WordPress.

  • @elearningbyali3474
    @elearningbyali34743 жыл бұрын

    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

    @elearningbyali3474

    3 жыл бұрын

    It is working now. Thanks

  • @mikewellick557

    @mikewellick557

    Жыл бұрын

    @@elearningbyali3474 how did you fix it?

  • @oluwatimilehinatobatele3873

    @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.

  • @Exendes
    @Exendes Жыл бұрын

    I dont get it. You cut the most important part which is to show how to get the response on the actual webpage

  • @DoubleDYouTube

    @DoubleDYouTube

    Жыл бұрын

    I showed exactly how to get the response, step by step. I don't know what you mean by this comment.

  • @llicit1833

    @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

    @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

  • @hungphung6738
    @hungphung67383 жыл бұрын

    nice

  • @MayankCodes
    @MayankCodes3 жыл бұрын

    How to connect android api?? I have searched everywhere but very few tutorials on this

  • @DoubleDYouTube

    @DoubleDYouTube

    3 жыл бұрын

    What do you mean by android api?

  • @MayankCodes

    @MayankCodes

    3 жыл бұрын

    @@DoubleDKZread to use this api in java

  • @DoubleDYouTube

    @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

    @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

    @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.

  • @vallydon1788
    @vallydon17882 жыл бұрын

    Great tutorial Sir!. Can you please do a tutorial on how to use crypto API?

  • @DoubleDYouTube

    @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.

  • @shubhamh7451
    @shubhamh74513 жыл бұрын

    damn bruhh, this some cool shit!

  • @DoubleDYouTube

    @DoubleDYouTube

    3 жыл бұрын

    Yessir

  • @CrazyAshu34
    @CrazyAshu3410 ай бұрын

    Maybe You can increase Your Font a little bit... it's hard to watch in mobile phone💁

  • @mubarakakinsola8498
    @mubarakakinsola84983 жыл бұрын

    👍🏾

  • @miljandjordjevic5354
    @miljandjordjevic53543 жыл бұрын

    Oplodi me Dodiću!!! ❤️❤️❤️

  • @DoubleDYouTube

    @DoubleDYouTube

    3 жыл бұрын

    Hahaha si dobro, Djordjevicu

  • @miljandjordjevic5354

    @miljandjordjevic5354

    3 жыл бұрын

    @@DoubleDKZread jel mi blokiras attackove na peru dodicu

  • @miljandjordjevic5354

    @miljandjordjevic5354

    3 жыл бұрын

    @@DoubleDKZread nisam nikako nisam help me

  • @DoubleDYouTube

    @DoubleDYouTube

    3 жыл бұрын

    @@miljandjordjevic5354 Ne znam o cemu pricas xD

  • @miljandjordjevic5354

    @miljandjordjevic5354

    3 жыл бұрын

    @@DoubleDKZread izvini na jeziku al nisam popio lekove

  • @boymatin5845
    @boymatin5845 Жыл бұрын

    Bootstrap is not necessary! Sure it makes it easier in the beginning, but you may pay for it later!

  • @DoubleDYouTube

    @DoubleDYouTube

    Жыл бұрын

    That's true... Did I say it was necessary?

  • @sumodsivadas6959
    @sumodsivadas69593 жыл бұрын

    Keep posting these stuffs, we want real world tuts, not hello worlds

  • @DoubleDYouTube

    @DoubleDYouTube

    3 жыл бұрын

    Good to know, thanks for the feedback

  • @Bri-mf3tm
    @Bri-mf3tm2 жыл бұрын

    CSS is an important part of the tutorial for beginners. Skipping the CSS portion takes away value from this tutorial.

  • @DoubleDYouTube

    @DoubleDYouTube

    2 жыл бұрын

    It is important, but it wasn't the focus of this video and I wanted to keep it as short as possible.

  • @abdullahhagos9833
    @abdullahhagos98332 жыл бұрын

    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

    @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

    @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

    @oluwatimilehinatobatele3873

    Жыл бұрын

    There's no jquery in the code

  • @simonhaesaert8175
    @simonhaesaert81757 ай бұрын

    How do you put it into html. The content.