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!
@@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.
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 !
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
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
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
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
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.
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.
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 ?
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/
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.
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.
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 :)
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
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.
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.
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. :)
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
If you want to learn how to monetize your API:
ruclips.net/video/ZvX99V0Xfho/видео.html
@@Whatsappvideo95R nope, they're correct
do a lesson with getting an object from an array. in your lesson you can get only object
This was exactly what I needed to see when connecting an API to Javascript. Thanks so much.
I'm glad I could help!
@@DoubleDRUclips You literally made this so easy for me to understand. I've been trying to get an API connected all week.
@@YolandaTheGardener That's great! I wish you good luck on your web dev journey.
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!
That's awesome to hear, I'm glad I could help!
X 2
@@DoubleDRUclips Sir what about POST method endpoints like a google translate can you explain
@@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.
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.
Thanks a lot, I'm glad I could help!
Finally, a video that is clean and clear. Thank you!
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 !
You are a great source thanks for the tutorial, Keep up the great videos...SUBSCRIBED!
Thanks for saying that, means a lot!
Very simple and nice way to get to use an API. Thank you !
Definitely , this video answered all question about API and help me to build my website using API. Thanks a lot for that
Hey, I'm glad to hear that!
This is how you break down the elephant in the room.
simple but wonderful. Thanks Mr Double D
This was a quick and informative video. Thank you for the content.
Thanks for the video, I learnt too much!
Awesome tutorial for Api Beginners using RapidApi . . .
I dont get it. You cut the most important part which is to show how to get the response on the actual webpage
I showed exactly how to get the response, step by step. I don't know what you mean by this comment.
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
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
Extremely useful. thank you!
Thanks for the feedback!
wowiie nice video, now I need to know about json
Thank you very much for the tutorial
API with din currency? Buraz, pa svaka cast!
Hvala! :D
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
No, the api key is not exclusive to your ip. If you setup everything correctly, it will for all users (with your api key).
Thanku so much
Great tutorial!!!
So informative
I would like to know about that bootstrap extension that you have used.
What do you mean?
Great Vid Tks DD
It's good 👍
great videos...SUBSCRIBED!
hello about the use of APIs I had some ideas, could you tell me what you think of them and if they are feasible
@@chrisder1814 Sure, send me an email
Nice Sir Thanks
Hvala ti brate puno
Nema na cemu!
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);
console.log(err)
damn bruhh, this some cool shit!
Yessir
Great explanation!! Could you share a link that public api for covid-19 real time data? thanks
Thanks! I updated the description and put all the links there.
how to connect desktop application to website with database
Why is my java script fetch code way different when I copy from the api website. I am trying to use the quote api
Every RapidApi user has different credentials in their request headers. This is to identify who made the request to that API.
Great tutorial Sir!. Can you please do a tutorial on how to use crypto API?
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.
can you explain about twitter api in this website it has many endpoints ?
Each endpoint should have a description and tell you what it does. You most likely only need GET endpoints.
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
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.
Maybe You can increase Your Font a little bit... it's hard to watch in mobile phone💁
how to use cricket api on blogger kindly tell me?
Hi. Can you make tutorial how to use the API using PHP? I have diffculties in hiding the uneeded elements.
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.
@@DoubleDRUclips Thanks for your reply. Any recommendations what programming language should I use in WordPress if I want to get API from RapidApi?
@@MrGedanggoreng I think PHP is your only choice for WordPress.
How do you put it into html. The content.
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.
I've never used Ruby, so I can't help you there, sorry.
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 ?
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/
@@DoubleDRUclips okay thank you a lot for the quick answer.
Wt about POST endpoints ?
Would you be kind enough to teach us how to hide an API key in javascript?
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.
Oplodi me Dodiću!!! ❤️❤️❤️
Hahaha si dobro, Djordjevicu
@@DoubleDRUclips jel mi blokiras attackove na peru dodicu
@@DoubleDRUclips nisam nikako nisam help me
@@miljandjordjevic5354 Ne znam o cemu pricas xD
@@DoubleDRUclips izvini na jeziku al nisam popio lekove
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.
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 :)
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
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.
@@DoubleDRUclips i resolved by changing some attributes from the script tag, thanks anyway✌🏻
@@albertosambrotta776 I got the same error, what exactly did you change?
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.
It is working now. Thanks
@@elearningbyali3474 how did you fix it?
@@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.
How to connect android api?? I have searched everywhere but very few tutorials on this
What do you mean by android api?
@@DoubleDRUclips to use this api in java
@@MayankCodes If you actually watched the video, you would know. The rapidAPI website gives you an option to choose a programming language.
Yaa.. i have watched.. what i am saying is i am not getting the url in which data is given in json format
@@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.
Bootstrap is not necessary! Sure it makes it easier in the beginning, but you may pay for it later!
That's true... Did I say it was necessary?
nice
How can I upload this project to github as a repository, but hidding the config file? Is it possible?
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. :)
@@DoubleDRUclips thank you, I’ll try this.
Keep posting these stuffs, we want real world tuts, not hello worlds
Good to know, thanks for the feedback
yo !!
👍🏾
CSS is an important part of the tutorial for beginners. Skipping the CSS portion takes away value from this tutorial.
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
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.
@@DoubleDRUclips 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
}
}
There's no jquery in the code
How do you put it into html. The content.