Harjutus: GitHub kasutajaprofiili andmete pärimine

Selles harjutuses õpid, kuidas kasutada GitHubi avalikku REST API-t, et pärida kasutajaprofiili andmeid.

API dokumentatsioon on saadaval siin.

Juhised

• Loo uus Vanilla JavaScript projekt CodeSandboxis või Visual Studio Code.
• Kopeeri järgmine kood oma index.mjs faili:

            let givenProfile = "";
let profileName = "";
let profileId = "";
let profileLink = "";
let profileRepos = "";
let profileFollowers = "";
let profileFollowing = "";

// Функция отрисовки страницы
function renderPage() {
  document.getElementById("app").innerHTML = `
    

      
Github profile viewer
      
Please enter profile name: 
      
      

        
Name: ${profileName ? profileName : "-"}
        
Id: ${profileId ? profileId : "-"}
        
Public repos: ${profileRepos ? profileRepos : "-"}
        
Followers: ${
          profileFollowers ? profileFollowers : "-"
        }
        
Following: ${
          profileFollowing ? profileFollowing : "-"
        }
        
Link: ${
          profileLink && profileName
            ? `${profileLink}`
            : "-"
        }
      
    
  `;
  // После перерисовки обязательно снова добавляем обработчик на input!
  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

// Функция обработки ввода
function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

// Функция запроса профиля с GitHub
async function fetchProfile() {
  if (!givenProfile) {
    profileName = "";
    profileId = "";
    profileLink = "";
    profileRepos = "";
    profileFollowers = "";
    profileFollowing = "";
    renderPage();
    return;
  }
  try {
    const response = await fetch(
      `https://api.github.com/users/${givenProfile}`
    );
    if (!response.ok) {
      profileName = "User not found";
      profileId = "-";
      profileLink = "";
      profileRepos = "-";
      profileFollowers = "-";
      profileFollowing = "-";
    } else {
      const data = await response.json();
      profileName = data.login || "-";
      profileId = data.id || "-";
      profileLink = data.html_url || "";
      profileRepos = data.public_repos || "-";
      profileFollowers = data.followers || "-";
      profileFollowing = data.following || "-";
    }
    renderPage();
  } catch (e) {
    profileName = "Error";
    profileId = "-";
    profileLink = "";
    profileRepos = "-";
    profileFollowers = "-";
    profileFollowing = "-";
    renderPage();
  }
}

// Первичная отрисовка
renderPage();

        

• Tee fetch päring GitHubi kasutaja API-le. Võid vaadata MDN fetch näidet.
• Proovi pärida konkreetse GitHub kasutaja profiili (nt bytkie või oma kasutajanimi).

Kui profiil leitakse, kuvatakse selle kasutajanimi, ID, avalike repode arv, jälgijate arv, jälgitavate arv ja link profiilile.

Kokkuvõte

Selles harjutuses said tutvuda GitHubi avaliku API kasutamisega ning õppisid, kuidas pärida ja kuvada kasutajaprofiili andmeid JavaScripti abil.