JavaScript'te Unsplash API'si için Yeni Başlayanlar Kılavuzu

Feb 15 2023

Unsplash'ta Yahdi Romelo'nun fotoğrafı

Unsplash API, deneyim düzeyleri ne olursa olsun tüm JavaScript geliştiricileri için harika bir araçtır. Projelerinizde yüksek kaliteli görseller bulmanızı ve kullanmanızı kolaylaştırır. Bu kılavuz, Node.js projenize Unsplash kitaplığını nasıl kuracağınızı, fotoğrafları aramak için API çağrıları yapacağınızı ve döndürülen görüntüleri yerel sürücünüze nasıl kaydedeceğinizi adım adım gösterecek. Bu kılavuzla, Unsplash API'yi kullanma konusunda hızla uzman olacaksınız.

Dikkat, bu eğitim, Blog Yazmayı Otomatikleştirmek için JavaScript'i kullanma serimin ikinci bölümüdür. Proje kurulumunu kapsadığı ve burada neyi başarmaya çalıştığımız hakkında size bir fikir verdiği için devam etmeden önce ilk öğretici olan “ JavaScript'te OpenAI API'ye Giriş ”e göz atmanızı şiddetle tavsiye ederim.

Kodun tamamını GitHub'da bu bağlantıda bulabilirsiniz .

Önkoşullar

Temel JavaScript bilgisi
Kullanıma hazır bir Node.js projesi
Bir Unsplash geliştirici hesabı

Unsplash API anahtarı nasıl elde edilir: Unsplash geliştirici hesabı oluşturma sürecinde size yol gösterir, böylece bir API anahtarı oluşturabilir ve Unsplash fotoğraf kitaplığına erişebilirsiniz.
İlgili NPM paketleri nasıl kurulur: Unsplash API'yi JavaScript projenize entegre etmenize yardımcı olabilecek farklı paketler hakkında bilgi edineceksiniz.
Unsplash API çağrıları yapmaya ilişkin JavaScript kod parçacıkları: Bu kılavuz sayesinde, Unsplash API'yi ve JavaScript'te fotoğraf aramak ve döndürmek için nasıl arama yapacağınızı daha iyi anlayacaksınız. Ayrıca, döndürülen fotoğrafları yerel sürücünüze kaydetmek için JavaScript kodu.

Unsplash web sitesine gidin ve bir hesap için kaydolun .
Bir hesabınız olduğunda, web sitesinin geliştirici bölümüne gidin ve “Yeni bir uygulama kaydet” düğmesine tıklayın. (Not: Demo uygulamaları saatte 50 istekle sınırlıdır .)
Formu gönderdikten sonra, size Unsplash API'sine erişmek için kullanabileceğiniz bir API anahtarı sağlanacaktır.

Bir Unsplash API Anahtarı örneği

Pekala, bu dizideki son öğreticinin devamı olarak, npm install unsplash-js node-fetchdevam etmeden önce terminalinizde iki npm paketi daha kurmak için çalıştırmanız gerekecek. Bu, bu öğretici ile ilerlemeye ve daha önce öğrendiklerinizi geliştirmeye hazır olduğunuzdan emin olmanızı sağlayacak hızlı bir adımdır.

npm install unsplash-js node-fetch

wordpress-automation
 ┣ node_modules
 ┣ src
 ┃ ┣ images
 ┃ ┃ ┗ coding on laptop.jpg
 ┃ ┣ openai
 ┃ ┃ ┗ OpenAI.js
 ┃ ┣ unsplash
 ┃ ┃ ┗ Unsplash.js
 ┣ .env
 ┣ .gitignore
 ┣ .prettierrc
 ┣ index.js
 ┣ package-lock.json
 ┗ package.json

// Unsplash.js

import { createApi } from 'unsplash-js';
import fetch from 'node-fetch';
import fs from 'fs';


export class Unsplash {
  constructor(accessKey) {
    // Create an instance of the Unsplash API using the provided access key
    this.unsplash = createApi({ accessKey, fetch });
  }

  async getPhoto(type, query, page = 1, per_page = 8, orientation = 'landscape' ) {
    try {
      // Send a request to the Unsplash API to search for photos
      const response  = await this.unsplash.search.getPhotos({
        query,
        page,
        per_page,
        orientation,
      });

      // Select a random photo from the response
      const aRandomPhoto = response.response.results[Math.floor(Math.random() * 8)];
      // Get the regular size photo url
      const photoUrl = aRandomPhoto.urls.regular;
      // Fetch the photo
      const photo = await fetch(photoUrl);
      // Get the photo buffer
      const photoBuffer = await photo.arrayBuffer();
      // Create caption for the photo - in Unsplash attribution style
      const caption = `
        <a style="text-decoration: none; cursor: default; pointer-events: none; color: inherit;">
          Photo by
        </a>
        <a href="${aRandomPhoto.user.links.html}" rel="noopener ugc nofollow" target="_blank">
          ${aRandomPhoto.user.name}
        </a>
        on
        <a href="https://unsplash.com" rel="noopener ugc nofollow" target="_blank">
          Unsplash
        </a>
      `;

      // Check the value of the "type" parameter and execute the corresponding code block
      switch (type) {
        case 'buffer':
          // Convert the photo buffer to Uint8Array
          const data = new Uint8Array(photoBuffer);
          console.log(`${query}.jpg buffer ready`);
          // Return an object containing the photo's buffer and attributes
          return {
            attributes: {
              caption: caption,
              title: query.toLowerCase(),
              alt_text: `an image of ${query.toLowerCase()}`,
            },
            buffer: data
          };
        case 'file':
          // Convert the photo buffer to a Buffer
          const image = Buffer.from(photoBuffer);
           // Create a file path for the photo
          const filePath = `src/images/${query}.jpg`
          // Write the photo to the file system
          await fs.promises.writeFile(filePath, image);
          console.log(`${query}.jpg saved`);
          break;
        default:
          console.log(`Invalid type: ${type}`);
          return null;
      }
    } catch (error) {
      console.log(error);
      return null;
    }
  }

}

createApiunsplash-js paketindeki yöntem, Unsplash API'sinin bir örneğini oluşturmak için kullanılır.
fetchpaketi, fotoğrafı indirmek için bir GET isteği yapmak için kullanılır.
yerleşik fs(Dosya Sistemi) modülü, fotoğrafı kaydetmek için bir yazma akışı oluşturmak için kullanılır.

search.getPhotos(params)Try bloğunun içinde, Unsplash API'sinin yöntemini, parametrelere sahip fotoğrafları aramak için kullanıyorum query, page, per_page and orientation.

per_pageİstediğiniz belirli fotoğrafları elde etmek için , ve öğelerini de özelleştirebilirsiniz ve ayrıca sonuç için json yanıtını kontrol edebilir ve urls.raw, urls.full page, urls.regular, vb. öğelerini değiştirerek farklı görüntü boyutlarını kullanabilirsiniz. .orientationquery

Daha sonra paketi kullanarak fetchfotoğrafın indirme linkine rastgele boyut vererek GET isteğinde bulunuyorum aRandomPhoto.urls.regularve yanıt bekliyorum.

Yöntem arrayBuffer(), fotoğraf arabelleğini almaktır.

Fotoğrafı yerel sürücüye kaydetmek için yöntemi kullanıyorum fs.promises.writeFile(filePath, image), arabelleği dosyaya yazacak.

Herhangi bir arıza durumunda, hatayı konsola kaydetmek için catch bloğunu kullanıyorum.

İpuçları: API tarafından döndürülen fotoğraflardan birini rastgele seçmek isterseniz, yöntemi kullanabilirsiniz Math.floor(Math.random() * 8). Bu, seçmek istediğiniz sonucun dizini olarak kullanılabilecek 0 ile 9 arasında rastgele bir sayı üretecektir.

// index.js

import { Unsplash } from "./src/unsplash/Unsplash.js";
import dotenv from 'dotenv';
dotenv.config();

const unsplash = new Unsplash(process.env.UNSPLASH_KEY);
await unsplash.getPhoto('file', 'coding on laptop');

laptop.jpg üzerinde kodlama

Çözüm

Unsplash API, projelerinizde güzel görseller bulmanızı ve kullanmayı kolaylaştıran güçlü bir araçtır. unsplash-js paketi, Javascript'te API çağrıları yapma sürecini basitleştirir.

Bu kılavuzda, gerekli paketleri nasıl kuracağınızı, fotoğrafları aramak için API çağrıları yapmayı ve döndürülen görüntüleri yerel sürücünüze kaydetmeyi öğrendiniz. Ayrıca hataları nasıl ele alacağınızı ve API tarafından döndürülen sonuçlardan rastgele bir fotoğrafa nasıl erişeceğinizi öğrendiniz.

Bir sonraki adım olarak, bunun üzerine inşa edebilir ve sayfalandırma gibi Unsplash API'sinde bulunan daha fazla seçeneği keşfedebilir, farklı boyutlardaki fotoğrafları indirebilir, farklı yönlerdeki fotoğrafları indirebilir ve ayrıca fotoğrafları ticari ve ticari olmayan amaçlarla kullanabilirsiniz. unsplash tarafından sağlanan yönergeleri izleyerek kullanın. API'yi Axios gibi farklı kitaplıklarla da kullanmayı deneyebilir ve Unsplash API tarafından sağlanan diğer özellikleri keşfedebilirsiniz.

JavaScript'te Unsplash API'si için Yeni Başlayanlar Kılavuzu

Önkoşullar

Çözüm

Ek Okumalar