I'm doing a YouTube API tutorial and everything was going just fine even with me using a different IDE and Server from the class (the teacher is using XAMPP and Brackets while I'm using Atom and XWAMP) but something was weird to me. The class just began with the teacher using this code to call a response from YouTube:
var nomeCanal = 'achannelname'; (will not reveal)$(document).ready(function() { $.get("https://www.googleapis.com/youtube/v3/channels", { part: 'contentDetails', forUsername: nomeCanal, key: 'thatlongkeythatwetakeonyoutubeapidevsite'}, (will note reveal either) function(data) { console.log(data); } )});ps: the "(will not reveal)" isn't part of the code.
ok, easy stuff, made the code but then, when I opened my "localhost/youtube"... things looked like it was all going ok I mean, the title was auto "YouTube API v3" which means it recognized and all but when I opened the console to get YouTube response, it showed:
"Falha no carregamento do <script> com a fonte “http://localhost/youtube/js/jquery.js”. youtube:25Falha no carregamento do <script> com a fonte “http://localhost/youtube/js/meuscript.js”."which basically means:
"Fail to load <script> with "http://localhost...".youtube:25".
And now I'm feeling pretty lost. Then I thought: "where the heck I'm declaring the scripts? In fact, I got jquery.js and meuscript.js (myscript.js) on the local files and the browser may be able to find it... but is that all?
All the base files I've downloaded directly from the tutorial class... Maybe some version issue? I don't know for sure. The fact is that the teacher did exactly what I did and he's nailing it different than me.
I've wandered through the Internet trying to find what should I do, thought it was a Firefox issue but the fact is I'm lost here.
Here's my working tree (I guess it's how you guys call it):
- youtube
- .git
- fancy
- unidade01
- jquery.js
- meuscript.js
- quickstart.html (tried to take a sample from YouTube docs but didn't work)
- unidade02 (the rest from here is for the next classes which I didn't mess with yet due this issue)
It looks like a stupid question, the answer may be right in front of my nose but please be nice to me, I swear that I tried my best pursuing an answer to this and it all look very weird... hate to be a newbie. I'm crying.
@user3210641 asked me for my .html file which I said it didn't came in the download of the base files, in fact the teacher got his response without a html file on the local... And as I am someone who goes after things I've copied a html start sample from YouTube API docs but it didn't make any difference on my local host. When I open the "quickstart.html" individually it shows only the
"<p>YouTube Data API Quickstart</p>". Here is it:
<!DOCTYPE html><html><head><title>YouTube Data API Quickstart</title><meta charset='utf-8' /></head><body><p>YouTube Data API Quickstart</p><!--Add buttons to initiate auth sequence and sign out--><button id="authorize-button" style="display: none;">Authorize</button><button id="signout-button" style="display: none;">Sign Out</button><pre id="content"></pre><script type="text/javascript"> // Client ID and API key from the Developer Console var CLIENT_ID = '135774447822-lb0tapejunq50ohi8t1gkc9n8eq9m3nt.apps.googleusercontent.com'; // Array of API discovery doc URLs for APIs used by the quickstart var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"]; // Authorization scopes required by the API. If using multiple scopes, // separated them with spaces. var SCOPES = 'https://www.googleapis.com/auth/youtube.readonly'; var authorizeButton = document.getElementById('authorize-button'); var signoutButton = document.getElementById('signout-button'); /** * On load, called to load the auth2 library and API client library. */ function handleClientLoad() { gapi.load('client:auth2', initClient); } /** * Initializes the API client library and sets up sign-in state * listeners. */ function initClient() { gapi.client.init({ discoveryDocs: DISCOVERY_DOCS, clientId: CLIENT_ID, scope: SCOPES }).then(function () { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus); // Handle the initial sign-in state. updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); authorizeButton.onclick = handleAuthClick; signoutButton.onclick = handleSignoutClick; }); } /** * Called when the signed in status changes, to update the UI * appropriately. After a sign-in, the API is called. */ function updateSigninStatus(isSignedIn) { if (isSignedIn) { authorizeButton.style.display = 'none'; signoutButton.style.display = 'block'; getChannel(); } else { authorizeButton.style.display = 'block'; signoutButton.style.display = 'none'; } } /** * Sign in the user upon button click. */ function handleAuthClick(event) { gapi.auth2.getAuthInstance().signIn(); } /** * Sign out the user upon button click. */ function handleSignoutClick(event) { gapi.auth2.getAuthInstance().signOut(); } /** * Append text to a pre element in the body, adding the given message * to a text node in that element. Used to display info from API response. * * @param {string} message Text to be placed in pre element. */ function appendPre(message) { var pre = document.getElementById('content'); var textContent = document.createTextNode(message +'\n'); pre.appendChild(textContent); } /** * Print files. */ function getChannel() { gapi.client.youtube.channels.list({'part': 'snippet,contentDetails,statistics','forUsername': 'LucasCyrneFerreira' }).then(function(response) { var channel = response.result.items[0]; appendPre('This channel\'s ID is '+ channel.id +'. '+'Its title is \''+ channel.snippet.title +', '+'and it has '+ channel.statistics.viewCount +' views.'); }); }</script><script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()"></script></body></html>it has some ident issues in the start and end but the code is right idented, it was just me here messing with the idents to change it to code.