H7: Github andmete kasutamine API kaudu

See juhend selgitab, kuidas luua lihtne veebirakendus, mis kasutab JavaScripti Fetch API-d GitHubi avaliku API kaudu kasutajaprofiili andmete hankimiseks ja kuvamiseks. Rakendus võimaldab kasutajal sisestada GitHubi kasutajanime ning pärib seejärel selle kasutaja avalikke andmeid, nagu nimi, ID, avalike repode arv ja profiililink. Andmete hankimine on asünkroonne ja sisaldab minu poolt lisatud veatöötlust, mis kuvab vastavad teated, kui kasutaja ei ole identifitseeritud või API päring ebaõnnestub.

1. samm: HTML-i seadistamine

1)Valmista endale uus JavaScript keskkond Code Sandbox’is või Visual Studio Code’is

2)Loo lihtne HTML-fail (index.html) koos konteineri, kus rakendus kuvab sisu.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <script src="./index.js" type="module"></script>
  </body>
</html>

2.samm: JavaScripti põhistruktuur

Loo index.js fail, et käsitleda rakenduse loogikat.

Alusta muutujate deklareerimisest, mis hoiavad profiiliandmeid:

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

3.samm: Lehekülje renderdamine

Määratle funktsioon renderPage, mis kuvab sisestusvälja ja profiili teabe:

// Funktsioon, mis renderdab HTML-sisu elemendi sees, mille id on „app“
function renderPage() {
  // Mallide kasutamine profiiliandmete dünaamiliseks lisamiseks HTML-i
  document.getElementById("app").innerHTML = `
    <div>
      <h1>Github profile viewer</h1>
      <p>Please enter profile name:</p>
      <input />
      <div class="content">
        <h1 id="name">Name: ${profileName}</h1>
        <p id="id">Id: ${profileId}</p>
        <p id="repos">Public repos: ${profileRepos}</p>
        <p id="profileurl">Link: <a href="${profileLink}" target="_blank">${profileLink}</a></p>

      </div>
    </div>
  `;
  // Valige sisestuselement DOM-ist
  const input = document.querySelector("input");
  // Lisa sisendile sündmuse kuulaja, et tuvastada selle väärtuse muutumist.
  // Kui kasutaja sisestab uue profiili nime ja vajutab Enter-klahvi või muudab fookust,
  // kutsutakse välja funktsioon updateValue.
  input.addEventListener("change", updateValue);
}

See funktsioon uuendab lehe sisu dünaamiliselt ja lisab sisestusväljale sündmuse kuulaja.

5.samm: Profiili nime uuendamine sisestuse muutmisel

Määrake funktsioon, mis uuendab muutuja givenProfile, kui kasutaja sisestab GitHubi kasutajanime:

function updateValue(e) {
  // Salvesta kasutaja sisestatud väärtus muutujasse givenProfile
  givenProfile = e.target.value;
  // Kutsu fetchProfile, et saada GitHubi andmed antud kasutajanime jaoks
  fetchProfile();
}

6.samm: GitHubi profiiliandmete hankimine

Loo asünkroonne funktsioon, et hankida andmeid GitHub API-st kasutajanime abil:

GItHubil on päringute jaoks piirang, siis me peame lisada kontroll, kas oleme jõudnud oma päringute piirini “const rateLimitRemaining = response.headers.get(“X-RateLimit-Remaining”);” https://docs.github.com/en/rest/using-the-rest-api/rate-limits-for-the-rest-api?apiVersion=2022-11-28

async function fetchProfile() {
  try {
    const response = await fetch(
      `https://api.github.com/users/${givenProfile}`
    );
    const rateLimitRemaining = response.headers.get("X-RateLimit-Remaining");

    if (!response.ok) {
      profileName = "User not found";
      profileId = "";
      profileLink = "";
      profileRepos = "";
    } else {
      const data = await response.json();
      profileName = data.login;
      profileId = data.id;
      profileLink = data.html_url;
      profileRepos = data.public_repos;
    }

    if (rateLimitRemaining === "0") {
      profileName = "API rate limit reached. Try again later.";
      profileId = "";
      profileLink = "";
      profileRepos = "";
    }
  } catch (error) {
    profileName = "Error fetching data";
    profileId = "";
    profileLink = "";
    profileRepos = "";
  }
  renderPage();
}

Full code

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>

    <script src="./index.js" type="module"></script>
  </body>
</html>

JavaScript

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

function renderPage() {
  document.getElementById("app").innerHTML = `
    <div>
      <h1>Github profile viewer</h1>
      <p>Please enter profile name:</p>
      <input />
      <div class="content">
        <h1 id="name">Name: ${profileName}</h1>
        <p id="id">Id: ${profileId}</p>
        <p id="repos">Public repos: ${profileRepos}</p>
        <p id="profileurl">Link: <a href="${profileLink}" target="_blank">${profileLink}</a></p>

      </div>
    </div>
  `;

  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

renderPage();

function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

async function fetchProfile() {
  try {
    const response = await fetch(
      `https://api.github.com/users/${givenProfile}`
    );
    const rateLimitRemaining = response.headers.get("X-RateLimit-Remaining");

    if (!response.ok) {
      profileName = "User not found";
      profileId = "";
      profileLink = "";
      profileRepos = "";
    } else {
      const data = await response.json();
      profileName = data.login;
      profileId = data.id;
      profileLink = data.html_url;
      profileRepos = data.public_repos;
    }

    if (rateLimitRemaining === "0") {
      profileName = "API rate limit reached. Try again later.";
      profileId = "";
      profileLink = "";
      profileRepos = "";
    }
  } catch (error) {
    profileName = "Error fetching data";
    profileId = "";
    profileLink = "";
    profileRepos = "";
  }
  renderPage();
}

css

body {
  font-family: Arial, Helvetica, sans-serif, sans-serif;
  background: #f0f2f5;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
}

#app > div {
  background: white;
  padding: 25px 30px;
  border-radius: 10px;
  width: 350px;
}

h1 {
  margin-top: 0;
  color: #24292e;
}

p {
  font-size: 14px;
  color: #555;
}

input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid gray;
  margin-bottom: 20px;
  box-sizing: border-box;
  outline-color: #4f81bb;
}

input:focus {
  border-color: #0366d6;
}

.content p,
.content h1 {
  margin: 8px 0;
}

a {
  color: #0366d6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Kokkuvõte

  • renderPage() – loob ja uuendab veebilehe sisu
  • updateValue() – jälgib sisestusvälja muutusi
  • fetchProfile() – teostab API päringud ja töödeldab vastused

On loodud leht mis teeb päringu GitHubi ja näitab valiku infot (ID, repos number, viit repos)