Um guia para iniciantes sobre Unsplash API em JavaScript

Feb 15 2023

Foto de Yahdi Romelo no Unsplash

A Unsplash API é uma ótima ferramenta para qualquer desenvolvedor JavaScript, independentemente de seu nível de experiência. Facilita a localização e o uso de imagens de alta qualidade em seus projetos. Este guia mostrará, passo a passo, como instalar a biblioteca Unsplash em seu projeto Node.js, fazer chamadas de API para procurar fotos e salvar as imagens retornadas em sua unidade local. Com este guia, você rapidamente se tornará um especialista no uso da Unsplash API.

Atenção, este tutorial é a segunda parte da minha série sobre como usar JavaScript para automatizar blogs. Eu recomendo verificar o primeiro tutorial, “ Introdução à API OpenAI em JavaScript ” antes de continuar, pois ele cobre a configuração do projeto e dá uma ideia do que estamos tentando realizar aqui.

Você pode encontrar o código completo no GitHub neste link .

Pré-requisitos

Conhecimento básico de JavaScript
Um projeto Node.js pronto para usar
Uma conta de desenvolvedor do Unsplash

Como obter uma chave de API do Unsplash: oriente você pelo processo de criação de uma conta de desenvolvedor do Unsplash, para que você possa gerar uma chave de API e acessar a biblioteca de fotos do Unsplash.
Como instalar os pacotes NPM relevantes: Você aprenderá sobre os diferentes pacotes que podem ajudá-lo a integrar a Unsplash API em seu projeto JavaScript.
Trechos de código JavaScript sobre como fazer chamadas Unsplash API: Através deste guia, você entenderá melhor a Unsplash API e como fazer chamadas para pesquisar e retornar fotos em JavaScript. Além disso, o código J avaScript para salvar as fotos retornadas em sua unidade local.

Acesse o site do Unsplash e crie uma conta.
Depois de criar uma conta, vá para a seção de desenvolvedores do site e clique no botão “Registrar um novo aplicativo”. (Observação: os aplicativos de demonstração são limitados a 50 solicitações por hora.)
Depois de enviar o formulário, você receberá uma chave de API que poderá usar para acessar a API do Unsplash.

Um exemplo de Unsplash API Key

Tudo bem, como uma continuação do último tutorial desta série, você precisará executar npm install unsplash-js node-fetchem seu terminal para instalar mais dois pacotes npm antes de continuar. Esta é uma etapa rápida que garantirá que você esteja pronto para avançar com este tutorial e aproveitar o que aprendeu antes.

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;
    }
  }

}

createApiO método do pacote unsplash-js é usado para criar uma instância da API Unsplash.
fetchpacote é usado para fazer uma solicitação GET para baixar a foto.
O módulo integrado fs(sistema de arquivos) é usado para criar um fluxo de gravação para salvar a foto.

Dentro do bloco try, utilizo o search.getPhotos(params)método da API Unsplash para buscar fotos com os parâmetros query, page, per_page and orientation.

Você também pode personalizar o per_page, pagee para obter as fotos específicas que deseja e também pode verificar a resposta json para obter o resultado e usar tamanhos diferentes da imagem alterando urls.raw, urls.full, urls.regular, orientationetc query.

Então, eu uso o fetchpacote para fazer uma solicitação GET para o link de download da foto, fornecendo o tamanho normal aleatório da foto usando aRandomPhoto.urls.regulare aguardo a resposta.

O arrayBuffer()método é obter o buffer de fotos.

Eu uso fs.promises.writeFile(filePath, image)o método para salvar a foto na unidade local, ele gravará o buffer no arquivo.

Em caso de falha, eu uso o bloco catch para registrar o erro no console.

Dicas: Se você quiser selecionar aleatoriamente uma das fotos retornadas pela API, pode usar o Math.floor(Math.random() * 8)método. Isso gerará um número aleatório entre 0 e 9, que pode ser usado como índice do resultado que você deseja selecionar.

// 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');

codificando em laptop.jpg

Conclusão

A Unsplash API é uma ferramenta poderosa que facilita encontrar e usar belas imagens em seus projetos. O pacote unsplash-js simplifica o processo de fazer chamadas de API em Javascript.

Neste guia, você aprendeu como instalar os pacotes necessários, fazer chamadas de API para procurar fotos e salvar as imagens retornadas em sua unidade local. Você também aprendeu como lidar com erros e como acessar uma foto aleatória dos resultados retornados pela API.

Como próximo passo, você pode aproveitar isso e explorar mais opções disponíveis na API do Unsplash, como paginação, baixar as fotos de diferentes tamanhos, baixar as fotos de orientação diferente e também usar as fotos para fins comerciais e não comerciais. use seguindo as diretrizes fornecidas pelo unsplash. Você também pode tentar usar a API com diferentes bibliotecas como Axios e explorar os outros recursos fornecidos pela Unsplash API.

Um guia para iniciantes sobre Unsplash API em JavaScript

Pré-requisitos

Conclusão

Leituras Adicionais