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
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 :)
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. :)
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.
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.
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.
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/
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.
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:
ua-cam.com/video/ZvX99V0Xfho/v-deo.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!
@@DoubleDUA-cam 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
@@DoubleDUA-cam 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 !
Very simple and nice way to get to use an API. Thank you !
You are a great source thanks for the tutorial, Keep up the great videos...SUBSCRIBED!
Thanks for saying that, means a lot!
This is how you break down the elephant in the room.
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!
simple but wonderful. Thanks Mr Double D
Awesome tutorial for Api Beginners using RapidApi . . .
This was a quick and informative video. Thank you for the content.
Thanks for the video, I learnt too much!
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
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).
Extremely useful. thank you!
Thanks for the feedback!
Thank you very much for the tutorial
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)
wowiie nice video, now I need to know about json
I would like to know about that bootstrap extension that you have used.
What do you mean?
Great tutorial!!!
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
API with din currency? Buraz, pa svaka cast!
Hvala! :D
great videos...SUBSCRIBED!
How do you put it into html. The content.
So informative
Thanku so much
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.
how to connect desktop application to website with database
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 use cricket api on blogger kindly tell me?
Hvala ti brate puno
Nema na cemu!
Great Vid Tks DD
It's good 👍
Wt about POST endpoints ?
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.
Nice Sir Thanks
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 :)
Thank you man
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.
Maybe You can increase Your Font a little bit... it's hard to watch in mobile phone💁
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. :)
@@DoubleDUA-cam thank you, I’ll try this.
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.
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.
@@DoubleDUA-cam 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.
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.
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.
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/
@@DoubleDUA-cam okay thank you a lot for the quick answer.
Oplodi me Dodiću!!! ❤️❤️❤️
Hahaha si dobro, Djordjevicu
@@DoubleDUA-cam jel mi blokiras attackove na peru dodicu
@@DoubleDUA-cam nisam nikako nisam help me
@@miljandjordjevic5354 Ne znam o cemu pricas xD
@@DoubleDUA-cam izvini na jeziku al nisam popio lekove
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.
@@DoubleDUA-cam 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.
damn bruhh, this some cool shit!
Yessir
How to connect android api?? I have searched everywhere but very few tutorials on this
What do you mean by android api?
@@DoubleDUA-cam 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
yo !!
Keep posting these stuffs, we want real world tuts, not hello worlds
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.
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.
@@DoubleDUA-cam 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.