Proqramlaşdırma

JavaScript ilə API-yə qoşulma

müəllif Emil Hüseynov

Biz bu məqalədə JavaScript ilə API-dən məlumatları əldə edərək onları veb səhifədə göstərən sadə tətbiq hazırlayacağıq.

Tələb olunan biliklər

  • HTML və CSS-in əsaslarını bilmək
  • JavaScript-in sintaksisini bilmək
  • JavaScript-də obyekt və JSON formatı ilə işləyə bilmək
  • Document Object Model (DOM) ilə işləyə bilmək

Məqsəd

Biz Yaponiyanın "Studio Ghibli" animasiya studiyasının API-nə qoşulan, JavaScript-in köməyilə məlumatları əldə edən və onları veb səhifədə göstərən sadə veb tətbiq hazırlamağa çalışacağıq. Bu, API və ya REST üzrə üzrə ətraflı dərslik deyil, məqalə sizə aşağıdakı mövzuları öyrənməkdə yardımçı olacaq:

  • WEB API nədir
  • JavaScript-in köməyilə GET sorğusu göndərmək
  • JavaScript ilə HTML elementlərinin yaradılması və səhifədə göstərilməsi

Yekun nəticə aşağıdakı kimi olacaq:

Ghipli App

API haqqında qısa məlumat

API (ingilis. Application Programming Interface — tətbiqi proqramlar interfeysi) — müxtəlif proqramlar arasında məlumat mübadiləsinə imkan verən qaydalar toplusudur. 

Müxtəlif proqramlar müxtəlif proqramlaşdırma dillərində hazırlana bilər. Buna görə müxtəlif modullar, sistemlər, proqramlaşdırma dilləri arasında əlaqə yaratmaq üçün API-dən istifadə olunur.

Biz veb serverin üçüncü tərəf proqram təminatı ilə qarşılıqlı əlaqə yaratmağına imkan verən Veb API-lərə fokuslanacağıq. Bu halda veb server URL ünvanla əlaqə yaratmaq üçün HTTP sorğulardan istifadə edir. Həmin URL ünvanda məlumatlar JSON formatında saxlanılır.

Məlumatları yaratmaq (create, C), oxumaq (read, D), yeniləmək (update, U), silmək (delete, D) əməliyyatları üçün istifadə edilən CRUD konsepsiyası bəlkə də sizə tanışdır. Veb API, həmçinin CRUD konsepsiyasına uyğun olan HTTP sorğularından istifadə edir.

Əməliyyat HTTP metod Təsvir
Create POST Yeni resurs yaradır
Read GET Resursu əldə edir
Update PUT/PATCH Mövcud resursu yeniləyir
Delete DELETE Resursu silir

PUT və PATCH arasında fərq ondadır ki, PUT obyekti bütünlüklə, PATCH isə yalnız göstərilmiş xananı yeniləyir.

Tənzimləmələr

Məqsədimiz "Studio Ghibli"-nin bütün filmləri haqqında məlumatları (filmin adı və qısa təsviri) əldə edərək onları veb səhifədə yerləşdirməkdir. Layihə index.html, style.css, app.js və logo.png fayllarından ibarət olacaq. ghipli qovluğunda index.html faylı yaradırıq və aşağıdakı kodu ona əlavə edirik:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ghibli App</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
</head>

<body>
    <div id="app" class="container-fluid col-lg-9 my-3">
        <div class="row row-cols-1 row-cols-lg-3 row-cols-md-2"></div>
    </div>

    <script src="app.js"></script>

</body>
</html>

index.html faylında veb səhifənin dizaynı üçün Bootstrap freymvörkü qoşulub, şrift isə "Google Font" xidmətindən yüklənilir. 

style.css faylı isə HTML elementlərinə Bootstrap freymvörkü tərəfindən təyin edilmiş stillərə dəyişlik etmək üçün lazımdır. style.css faylını yaradırıq və aşağıdakı kodu ona əlavə edirik:

body {
    background-color: #f6f6f6;
    font-family: 'Open Sans', sans-serif;
}

.bg-primary {
    background-image: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);
}

Beləliklə, HTML və CSS faylları artıq hazırdır. Bu fayllara heç bir dəyişiklik edilməyəcək. İndi isə ghipli qovluğunda app.js faylını yaradırıq.

API-yə qoşulma

"Studio Ghibli"nin API dokumentasiyasına nəzər salırıq. Bu API proqramçılara HTTP sorğuları vasitəsilə resurslarla qarşılıqlı əlaqə qurmağı öyrənməyə kömək edir. API-yə müxtəlif proqramlaşdırma dilləri ilə (JavaScript, PHP, Ruby, Python və digərləri) qoşulmaq mümkün olduğundan, əksər API-lərin dokumentasiyasında qoşulmaq üçün xüsusi təlimat olmur.

Sözügedən dokumentasiyada yazılıb ki, sorğular curl və ya digər köməkçi kitabxanalar ilə göndərilə bilər.

API-nin son nöqtəsinin əldə edilməsi

Gəlin dokumentasiyada filmlər bölməsinə keçid edək. Sağ tərəfdə GET /films görəcəksiniz:

API-nin son nöqtəsinin əldə edilməsi

GET /films-in üzərinə klik etdikdə, API-nin son nöqtəsinin URL ünvanı göstərilir: https://ghibliapi.herokuapp.com/films. Bu linkə keçid etdikdə biz JSON formatında olan obyektlərdən ibarət massiv görəcəyik:

Filmləri JSON formatında əldə edirik

"Google Chrome" brauzerində JSON Viewer genişlənməsi JSON formatını brauzerdə daha oxunaqlı göstərir.

HTTP sorğunun köməyilə məlumatları əldə edirik

İndi isə API-yə qoşuluruq və məlumatları serverdən əldə edirik. Bunun üçün FETCH API-dən (fetch() metodu) və async/await sintaksisindən istifadə edirik:

async function fetchMovies() {
    try {
        let response = await fetch('https://ghibliapi.herokuapp.com/films');
        if (!response.ok) {
            throw new Error(`HTTP error: ${response.status}`);
        }
        return response.json();
    } catch (error) {
        const message = `Filmlər haqqında məlumat əldə etmək mümkün olmadı: ${error.message}`;
    }
}

Funksiyanın əvvəlinə async açar sözünün əlavə edilməsi funksiyanın işini asinxron edir.

Asinxron funksiyalar asinxron əməliyyatları icra etmək üçün lazımdır. Asinxron əməliyyatlar dərhal icra edilmir: kod API-yə sorğu göndərir və serverin cavab göndərməsini gözləyir. await açar sözü asinxron əməliyyatın tamamlanmasını gözləmək üçün istifadə olunur.

Asinxron funksiyalar Promise obyektini geri qaytarır. Promise obyektinin içərisində onun vəziyyətini idarə edən asinxron əməliyyat mövcuddur.

Promis aşağıdakı 3 vəziyyətdən birində ola bilər:

  • pending - başlanğıc vəziyyət, əməliyyat başladı
  • fulfilled - uğurlu nəticə
  • rejected - səhv

fetchMovies() asinxron funksiyasının nəticəsini konsolda göstəririk:

fetchMovies() asinxron funksiyasının nəticəsi

Göründüyü kimi fetchMovies() asinxron funksiyası Promise obyektini geri qaytarıb və o, fulfilled vəziyyətindədir, yəni nəticə uğurludur. Asinxron əməliyyatın uğurlu icrasından sonra kodu icra etmək üçün then() metodundan istifadə olunur:

fetchMovies().then(movies => console.log(movies));

Bundan başqa, try...catch blokunun köməyilə səhvlər işlənilib.

Məlumatları brauzerdə göstəririk

Filmlər haqqında məlumatları saytda göstərmək üçün biz Document Object Model (DOM) ilə işləməliyik. Bu, əslində API-dır və JavaScript-ə HTML və CSS ilə birbaşa işləməyə imkan verir (HTML elementlərini yaradır, dəyişdirir, silir, səhifənin görünüşünü dinamik dəyişdirir və sairə).

index.html səhifəsində identifikatoru (id) app olan aşağıdakı kod var:

<div id="app" class="container-fluid col-lg-9 my-3">
    <div class="row row-cols-1 row-cols-lg-3 row-cols-md-2"></div>
</div>

Hər bir saytın loqotipi olur. DOM-un köməyilə loqotipi identifikatoru app olan <div> elementinin içərisinə yerləşdiririk:

const app = document.querySelector('#app');
const logo = document.createElement('img');
logo.setAttribute('class', 'img-fluid mb-4');
logo.src = 'logo.png';
app.prepend(logo);
  • İlk növbədə app identifikatorunun köməyilə index.html səhifəsində <div id="app" class="container-fluid col-lg-9 my-3"> elementini əldə edirik
  • createElement() metodunun köməyilə <img> elementini yaradırıq
  • setAttribute() metodunun köməyilə <img> elementinə class atributu və onun qiymətini əlavə edirik
  • Hazırda <img> elementi boşdur, şəkil əlavə etmək üçün src atributundan istifadə edirik. Şəkli burdan yükləyə bilərsiniz
  • Nəhayət, prepend() metodunun köməyilə dinamik yaradılmış loqotipi identifikatoru app olan <div> elementinin içərisinə yerləşdiririk

app.js faylının tərkibi hazırda aşağıdakı kimidir:

const app = document.querySelector('#app');
console.log(app);
const logo = document.createElement('img');
logo.setAttribute('class', 'img-fluid mb-4');
logo.src = 'logo.png';
app.prepend(logo);

async function fetchMovies() {
    try {
        let response = await fetch('https://ghibliapi.herokuapp.com/films');
        if (!response.ok) {
            throw new Error(`HTTP error: ${response.status}`);
        }
        return response.json();
    } catch (error) {
        const message = `Filmlər haqqında məlumat əldə etmək mümkün olmadı: ${error.message}`;
    }
}

index.html faylını brauzerdə açırıq:

Səhifəyə dinamik yaradılan şəkil əlavə edirik

Əgər index.html faylının HTML koduna, həmçinin səhifənin mənbə koduna (CTRL + U) baxsanız, orada heç bir <img> elementi yoxdur. Şəkil DOM API vasitəsilə yaradılıb və səhifəyə əlavə edilib.

Dinamik olaraq index.html səhifəsinə əlavə edilmiş loqotipin koduna baxmaq üçün

  • brauzerdə həmin səhifəni açırıq
  • F12 düyməsinə sıxırıq
  • "Элементы" (Elements) vərəqinə keçirik

Dinamik olaraq index.html səhifəsinə əlavə edilmiş loqotipin koduna baxırıq

0

Şərh yazmaq üçün hesabınıza daxil olun.