Um guia para iniciantes para a API UNSPLASH em JavaScript

Resumo:

Neste guia, vou orientá -lo no processo de usar a API UNSPLASH em JavaScript. Abordaremos tópicos como obter uma chave da API, instalar os pacotes NPM necessários e fazer chamadas de API para pesquisar fotos. Além disso, aprenderemos como salvar as imagens retornadas na sua unidade local.

Pontos chave:

1. A API UNSPLASH é uma ferramenta poderosa para os desenvolvedores JavaScript para encontrar e usar imagens de alta qualidade em seus projetos.

2. Este guia se concentra na instalação e no uso da biblioteca UNSPLASH em um nó.Projeto JS.

3. Recomenda -se ter conhecimento básico do JavaScript antes de começar com a API UNSPLASH.

4. Você precisará de uma conta de desenvolvedor UNSPLASH para acessar a API.

5. A série de tutoriais sobre o uso do JavaScript para automatizar os blogs inclui um tutorial anterior sobre a API OpenAI, que vale a pena conferir.

6. O código completo para este guia pode ser encontrado no GitHub.

7. Para usar a API UNSPLASH, instale os pacotes NPM relevantes, como UNSPLASH-JS e NODE-FETCH.

8. A estrutura da pasta para o seu projeto deve incluir as imagens e pastas de unsplash.

9. Você pode obter uma chave da API UNSPLASH, inscrevendo -se para uma conta e registrando um novo aplicativo no site da UNSPLASH.

10. Depois de obter a chave da API, crie uma instância da API UNSPLASH em seu código JavaScript.

11. Faça chamadas de API para pesquisar fotos usando a API UNSPLASH e buscar as fotos retornadas em JavaScript.

12. Você pode personalizar os parâmetros da chamada da API, como página, per_page e orientação.

13. Selecione uma foto aleatória da resposta e recupere seu URL.

14. Use o pacote de fusão de nó para baixar a foto e salvá-la na sua unidade local.

15. Lembre -se de incluir a atribuição adequada para a foto conforme as diretrizes do UNSPLASH.

Questões:

1. Qual é a API UNSPLASH?
A API UNSPLASH é uma ferramenta que permite aos desenvolvedores JavaScript encontrar e usar imagens de alta qualidade em seus projetos.

2. Que conhecimento é necessário para começar a usar a API UNSPLASH?
O conhecimento básico do JavaScript é recomendado antes de usar a API UNSPLASH.

3. Como posso obter uma chave de API UNSPLASH?
Para obter uma chave de API UNSPLASH, você precisa se inscrever para uma conta no site da UNSPLASH e registrar um novo aplicativo.

4. Quais pacotes NPM são necessários para integrar a API UNSPLASH?
Você precisa instalar os pacotes UNSPLASH-JS e FONTE DE NODE para integrar a API UNSPLASH no seu projeto JavaScript.

5. Você pode fornecer a estrutura da pasta para um projeto usando a API UNSPLASH?
O projeto deve incluir pastas como imagens e unsplash, juntamente com outros arquivos necessários.

6. Como posso fazer uma chamada de API para pesquisar fotos usando a API UNSPLASH?
Você pode fazer chamadas de API usando os métodos fornecidos pela API UNSPLASH, especificando parâmetros como consulta e página.

7. É possível salvar as fotos devolvidas da API UNSPLASH para minha unidade local?
Sim, você pode usar o pacote de fusão de nó para baixar as fotos e salvá-las na sua unidade local.

8. O que devo incluir na legenda para a foto baixada?
A legenda deve incluir a atribuição ao fotógrafo, de acordo com as diretrizes de UNSPLASH.

9. Como posso acessar o código completo para este guia?
O código completo para este guia pode ser encontrado no github usando o link fornecido.

10. Você pode explicar o objetivo do tutorial anterior sobre a API Openai?
O tutorial anterior desta série cobre a configuração do projeto e dá uma idéia do que estamos tentando realizar com a automação JavaScript.

11. Como posso personalizar os parâmetros da chamada da API, como página e orientação?
Você pode passar valores diferentes para os parâmetros como página e orientação ao fazer a chamada da API.

12. Existe um limite para o número de solicitações de API que eu possa fazer com a API UNSPLASH?
Sim, existem limites para o número de solicitações de API por hora para aplicativos de demonstração. Verifique a documentação para obter detalhes.

Respostas:

1. A API UNSPLASH é uma ferramenta poderosa que permite que os desenvolvedores de JavaScript encontrem facilmente e usem imagens de alta qualidade em seus projetos. Se você é um iniciante ou um desenvolvedor experiente, a API UNSPLASH pode aprimorar muito seus projetos, fornecendo uma vasta biblioteca de imagens gratuitas para uso. Ele elimina a necessidade de procurar imagens manualmente e fornece uma maneira fácil de integrar imagens diretamente ao seu código.

2. Antes de mergulhar no uso da API UNSPLASH, recomenda -se ter conhecimento básico de javascript. Isso ajudará você a entender e trabalhar com os trechos de código JavaScript usados ​​neste guia. Se você é novo no JavaScript, existem inúmeros recursos e tutoriais on -line disponíveis que podem ajudá -lo a começar. Vale a pena investir algum tempo para aprender o básico do JavaScript antes de prosseguir.

3. Para acessar a API UNSPLASH, você precisará de uma chave da API. Obter uma chave de API é um processo direto. Primeiro, vá para o site da UNSPLASH e inscreva -se em uma conta. Depois de ter uma conta, navegue até a seção de desenvolvedores do site. Aqui, você encontrará a opção de registrar um novo aplicativo. Clique no botão “Registrar um novo aplicativo” e preencha os detalhes necessários. Depois de enviar o formulário, você receberá uma chave de API que você pode usar para acessar a API UNSPLASH.

4. Para integrar a API UNSPLASH no seu projeto JavaScript, existem alguns pacotes de NPM que você precisará instalar. Esses pacotes são unstraplash-js e fã de nó. O pacote Unsplash-JS fornece um invólucro para a API UNSPLASH, facilitando a interação da API do seu código JavaScript. O pacote de fusão de nó é usado para fazer solicitações HTTP para a API UNSPLASH e recuperar os dados desejados. Para instalar esses pacotes, navegue até o diretório do projeto no terminal e execute o comando “NPM Install Unsplash-JS Node-Fetch”. Isso instalará os pacotes necessários e os adicionará às dependências do seu projeto.

5. Ao trabalhar com a API UNSPLASH em um nó.Projeto JS, é importante organizar seus arquivos e pastas corretamente. Juntamente com seus arquivos de projeto existentes, você precisará criar duas novas pastas – “Imagens” e “Unsplash”. A pasta “imagens” será usada para armazenar as fotos baixadas da API UNSPLASH, enquanto a pasta “Unsplash” conterá o código JavaScript para interagir com a API. Certifique -se de que essas pastas sejam colocadas no local apropriado na estrutura de diretório do seu projeto.

6. Fazer chamadas de API para pesquisar fotos usando a API UNSPLASH é relativamente direta. Usando o pacote UNSPLASH-JS, você pode criar uma instância da API UNSPLASH passando sua chave da API como um parâmetro. Depois de ter uma instância da API, você pode usar seus métodos para fazer vários tipos de chamadas de API. Por exemplo, você pode usar a “pesquisa.Getphotos “Método para pesquisar fotos com base em uma consulta. Você pode fornecer parâmetros adicionais, como página, per_page e orientação para refinar seus resultados de pesquisa. Cada chamada da API retorna uma resposta, que contém os dados com os quais você precisa trabalhar, como os URLs das fotos.

7. Sim, é possível salvar as fotos devolvidas da API UNSPLASH para sua unidade local. Para conseguir isso, você pode usar o pacote de fusão de nó, que permite buscar e baixar arquivos de um servidor remoto. Depois de fazer a chamada da API e obter o URL de uma foto que você deseja salvar, você pode usar o pacote de fusão de nó para baixar a foto. Depois de baixado, você pode salvá -lo no local desejado na unidade local usando técnicas de manipulação de arquivos fornecidas pelo Node.JS. Lembre -se de verificar os termos e condições da API UNSPLASH para restrições de uso ou requisitos de atribuição ao salvar e usar as fotos baixadas.

8. Ao salvar a foto baixada, é importante incluir a atribuição adequada conforme as diretrizes UNSPLASH. UNSPLASH tem requisitos específicos para a atribuição para dar crédito aos fotógrafos que fornecem suas imagens para uso gratuito. A atribuição deve normalmente incluir o nome do fotógrafo e um link para o seu perfil de unsplash ou a própria foto no Unsplash. Verifique as diretrizes de atribuição específicas indicadas pela UNSLASH e verifique se você cumpre com elas ao usar as fotos em seus projetos. A atribuição adequada não apenas cumpre as obrigações legais, mas também reconhece o trabalho e a contribuição do fotógrafo.

9. O código completo para este guia, juntamente com quaisquer recursos adicionais, pode ser encontrado no GitHub. O link fornecido direcionará você ao repositório do GitHub, onde você pode acessar o código e qualquer documentação relacionada. O código inclui exemplos de como obter uma chave de API UNSPLASH, instalar os pacotes NPM necessários e fazer chamadas de API para procurar fotos. Além disso, ele abrange salvar as fotos retornadas na sua unidade local, aderindo às diretrizes de atribuição UNSPLASH e outros aspectos relevantes do uso da API UNSPLASH.

10. O tutorial anterior desta série se concentra em usar a API OpenAI em JavaScript. Ele fornece uma introdução ao uso do JavaScript para automatizar tarefas de blogs e demonstra como configurar um projeto para trabalhar com a API OpenAi. Embora não esteja diretamente relacionado à API UNSPLASH, o tutorial anterior oferece informações valiosas sobre o trabalho com APIs em geral e mostra o poder de usar o JavaScript para automatizar várias tarefas. Se você ainda não passou pelo tutorial anterior, eu recomendo conferi -lo para obter uma compreensão abrangente dos conceitos e técnicas usadas nesta série.

11. Ao fazer chamadas de API para pesquisar fotos usando a API UNSPLASH, você tem a flexibilidade de personalizar vários parâmetros. Por exemplo, você pode especificar o parâmetro da página para recuperar diferentes conjuntos de resultados de pesquisa. Isso pode ser útil ao implementar a paginação ou quando você deseja obter imagens de diferentes páginas dos resultados da pesquisa. Da mesma forma, você pode definir o parâmetro Per_Page para controlar o número de fotos retornadas por resposta da API. Isso permite gerenciar a quantidade de dados que você recebe com base em seus requisitos específicos. Além disso, o parâmetro de orientação permite filtrar fotos com base em sua orientação, como paisagem ou retrato. Ao especificar esses parâmetros em suas chamadas de API, você pode adaptar os resultados para atender às necessidades do seu projeto.

12. Sim, existem limites para o número de solicitações de API que você pode fazer com a API UNSPLASH, principalmente para aplicativos de demonstração. Esses limites são projetados para evitar abusos e garantir o uso justo da API. Ao registrar sua inscrição e obter uma chave da API, geralmente você terá um limite predefinido para o número de solicitações permitidas por hora ou por dia. É essencial revisar a documentação ou os termos de serviço da API UNSPLASH para entender os limites específicos que se aplicam ao seu aplicativo. Se você antecipar exceder os limites padrão, pode ser necessário atualizar sua conta ou explorar opções alternativas fornecidas pela UNSPLASH para uso de volume mais alto.

Um iniciante’s Guide to Unsplash API em JavaScript

Você pode ver UNSPLASH’s estatísticas em tempo real, mas aqui estão alguns pontos de bala:

Unsplash tem uma API

О эээ сйранibus

Ы з ззарегиgléria. С помощью этой страницы мы сможем определить, что запросы отправляете именно вы, а не робот. Почpels эээ моогitu произойth?

Эта страница отображается в тех случаях, когда автоматическими системами Google регистрируются исходящие из вашей сети запросы, которые нарушают Условия использования. Ponto. Ээth момо номттаая и оозз илэз и ээ и эз и эз и з и ззз и зз и ээз и ээз иth ээ эth ээзз эth эзз иthлз ио и зз и иth эз иээ эээо иth эз эээ ээо ээоо иth иэзз эth эзт эth эз ио эээ иth эз иэз иthлзз иоз ил иээ иээо иэээ иээо иth ио иээ эth иэ иээ эth иэ иээ эth ио иэ ээог seguir.

Ит и и и и и и и и и чззжfia м ирржжжfia м иржжжжfia м мжжжжжж<ь м м иржжжfia. não. Если вы используете общий доступ в Интернет, проблема может быть с компьютером с таким же IP-адресом, как у вас. Орратитеitivamente к с о и и с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с с а с с а с а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а а &rdquo;. ПодробнÉ.

Проверка по слову может также появляться, если вы вводите сложные запросы, обычно распространяемые автоматизированными системами, или же вводите запросы очень часто.

Um iniciante&rsquo;s Guide to Unsplash API em JavaScript

A API UNSPLASH é uma ótima ferramenta para qualquer desenvolvedor de JavaScript, independentemente do nível de experiência deles. Facilita encontrar e usar imagens de alta qualidade em seus projetos. Este guia mostrará, passo a passo, como instalar a biblioteca UNSPLASH em seu nó.Projeto JS, faça chamadas de API para pesquisar fotos e salvar as imagens retornadas na sua unidade local. Com este guia, você rapidamente se tornará um especialista no uso da API UNSPLASH.

Atenção, este tutorial é a segunda parte da minha série sobre o uso do JavaScript para automatizar o blog. Eu recomendo conferir o primeiro tutorial, &ldquo;Introdução ao OpenAI API em JavaScript&rdquo; Antes de continuar, pois abrange a configuração do projeto e dá uma idéia do que nós&rsquo;estou tentando realizar aqui.

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

Pré -requisitos

  • Conhecimento básico de JavaScript
  • Um nó pronto para uso.Projeto JS
  • Uma conta de desenvolvedor UNSPLASH

O que você&rsquo;aprenderá

  • Como obter uma chave API UNSPLASH: Anduque você pelo processo de criação de uma conta de desenvolvedor UNSPLASH, para que você possa gerar uma chave da API e acessar a biblioteca de fotos UNSPLASH.
  • Como instalar os pacotes NPM relevantes: Você&rsquo;aprenderei sobre os diferentes pacotes que podem ajudá -lo a integrar a API UNSPLASH no seu projeto JavaScript.
  • JavaScript Code Snippets ao fazer chamadas de API UNSPLASH: Através deste guia, você&rsquo;Eu vou entender melhor a API UNSPLASH e como fazer chamadas para pesquisar e devolver fotos em javascript. Além disso, o jCódigo AVascript para salvar as fotos devolvidas na sua unidade local.

Obtenha uma chave de API UNSPLASH

  1. Vá para o site UNSPLASH e inscreva -se em uma conta.
  2. Depois de ter uma conta, vá para a seção do desenvolvedor do site e clique em &ldquo;Registre um novo aplicativo&rdquo; botão. (Nota: os aplicativos de demonstração são limitados a 50 Reqests por hora.)
  3. Depois de enviar o formulário, você receberá uma chave de API que você pode usar para acessar a API UNSPLASH.

Instale os pacotes NPM

Tudo bem, como acompanhamento do último tutorial desta série, você&rsquo;Eu precisará executar o NPM Install Unsplash-JS-Fetch no seu terminal para instalar mais dois pacotes de NPM antes de continuar. Este é um passo rápido que&rsquo;Eu tenho certeza de que você&rsquo;está pronto para avançar com este tutorial e desenvolver o que você&rsquo;Eu aprendi antes.

NPM Instale a folha de nó de unsplash-js

Nossa estrutura de pastas agora inclui o novo imagens e Unsplash pastas no projeto. Deve parecer algo assim:

&#55357;&#56550;WordPress-Automation 
┣ &#55357;&#56514;Node_modules
┣ &#55357;&#56514;src
Imagens
┃ ┃ ┗ &#55357;&#56540; codificação no laptop.jpg
┃ &#55357;&#56514;Openai
┃ ┃ ┗ OpenAi.JS
┃ &#55357;&#56514; &#55357;&#56514;Unsplash
┃ ┃ &#55357;&#56540; &#55357;&#56540;unsplash.JS
┣ .Env
┣ .Gitignore
┣ .Prettierrc
┣ ÍNDICE.JS
┣ Lock de embalagem.JSON
┗ Pacote.JSON

Faça chamada API UNSPLASH e salve a foto devolvida

// Unsplash.JS

importar < createApi >de 'Unsplash-js';
importar busca de 'nó-fetch';
importar fs de 'fs';


Classe de exportação Unsplash Constructor (AccessKey) // Crie uma instância da API UNSPLASH usando a chave de acesso fornecida
esse.Unsplash = Createapi (< accessKey, fetch >);
>

Async getphoto (tipo, consulta, página = 1, per_page = 8, orientação = 'paisagem') tente // Envie uma solicitação à API UNSPLASH para pesquisar fotos
const Response = aguarde isso.Unsplash.procurar.getphotos (consulta,
página,
por página,
orientação,
>);

// Selecione uma foto aleatória da resposta
const arandomphoto = resposta.resposta.Resultados [Matemática.piso (matemática.aleatoriamente () * 8)];
// Obtenha o URL da foto de tamanho normal
const fotourl = Arandomphoto.URLs.regular;
// busca a foto
const foto = aguarda buscar (fotourl);
// pegue o buffer de fotografia
Const Photobuffer = Wait Photo.ArrayBuffer ();
// Crie legenda para a foto - no estilo de atribuição Unsplash
Const Legend = `

foto por

"Rel =" Noopener UGC nofollow "Target =" _ Blank ">
$

sobre

Unsplash

`;

// Verifique o valor do parâmetro "Type" e execute o bloco de código correspondente
Switch (Type) case 'Buffer':
// converte o buffer de foto para uint8Array
const data = novo uint8array (fotobuffer);
console.log (`$.buffer jpg pronto`);
// retorna um objeto que contém o buffer e atributos da foto
Atributos de retorno: Legenda: Legenda,
Título: Consulta.tolowerCase (),
ALT_TEXT: `Uma imagem de $`,
>,
Buffer: dados
>;
ficheiro':
// converte o buffer de foto em um buffer
const imagem = buffer.de (Photobuffer);
// Crie um caminho de arquivo para a foto
const filepath = `src/imagens/$.jpg`
// Escreva a foto para o sistema de arquivos
aguarde fs.promessas.writefile (filepath, imagem);
console.log (`$.jpg salvo`);
quebrar;
padrão:
console.log (`Tipo inválido: $`);
retornar nulo;
>
> console de captura (erro).log (erro);
retornar nulo;
>
>

>

Nesta classe instantável Unsplash.JS, O código começa importando os módulos e pacotes necessários:

  • O método createapi do pacote Unsplash-JS é usado para criar uma instância da API UNSPLASH.
  • Pacote Fetch é usado para fazer uma solicitação para baixar a foto.
  • O módulo FS (sistema de arquivo) embutido é usado para criar um fluxo de gravação para salvar a foto.

Em seguida, defino uma função assíncrona getphoto que envolve todo o código. Dentro da função, eu uso o bloco de try-capatch para lidar com qualquer erro que possa ocorrer ao fazer as solicitações ou salvar a foto.

Dentro do bloco de tentativa, eu uso a pesquisa.Método getphotos (params) da API UNSPLASH para pesquisar fotos com a consulta de parâmetros, página, per_page e orientação .

Você também pode personalizar o Per_Page, Page, Orientation and Query para obter as fotos específicas desejadas e também pode verificar a resposta JSON para o resultado e capaz de usar tamanhos diferentes da imagem alterando URLs.Raw, URLs.Full, URLs.regular, etc.

Em seguida, eu uso o pacote de busca para fazer uma solicitação para o link de download da foto, fornecendo o tamanho regular randomizado da foto usando arandomphoto.URLs.regular e eu espero pela resposta.

O método ArrayBuffer () é obter o buffer de fotografia.

Eu uso fs.promessas.Writefile (filepath, imagem) Método para salvar a foto na unidade local, ele escreverá o buffer no arquivo.

Em caso de falha, uso o bloco de captura para registrar o erro para consolar.

Pontas: Se você deseja selecionar aleatoriamente uma das fotos retornadas pela API, você pode usar a matemática.piso (matemática.Random () * 8) Método. Isso gerará um número aleatório entre 0 e 9, que pode ser usado como o índice do resultado que você deseja selecionar.

// ÍNDICE.JS

importar < Unsplash >de "./src/unsplash/unsplash.js ";
importar dotenv de 'dotenv';
dotenv.config ();

const unsplash = novo unsplash (processo.Env.Unsplash_key);
Aguarde unsplash.getphoto ('arquivo', 'codificação no laptop');

Assim como no primeiro tutorial, no índice.JS arquivo, nós importamos o Unsplash.JS classe e criou uma nova instância passando no UNSPLASH_KEY . Nós armazenamos a chave da API em um .Env Arquivo para maior segurança. Em seguida, executamos o método getphoto, passando o tipo de resposta que queríamos e a frase de pesquisa para a foto. E pronto! Salvamos uma imagem chamada codificação no laptop.jpg na pasta SRC/ Images/.

Conclusão

A API UNSPLASH é uma ferramenta poderosa que facilita a localização e o uso de belas imagens em seus projetos. O pacote UNSPLASH-JS simplifica o processo de fazer chamadas de API em JavaScript.

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

Como uma próxima etapa, você pode desenvolver isso e explorar mais opções disponíveis na API UNSPLASH, como a paginação, baixar as fotos de tamanhos diferentes, baixar as fotos de orientação diferente e também pode usar as fotos para uso comercial e não comercial, seguindo as diretrizes fornecidas pela UNSPLASH. Você também pode tentar usar a API com diferentes bibliotecas como Axios e explorar os outros recursos fornecidos pela UNSPLASH API.

Outras leituras

Automação de blog com JavaScript Tutorial Series

  • API Openai (Parte I&parte II): Geração de conteúdo automatizado
  • API UNSPLASH: Seleção de imagem automatizada para postagens de blog
  • WordPress API: Upload de conteúdo do blog sem esforço
  • Automação de blogs: Reúna tudo

Documentos oficiais

&#55357;&#56568; Unsplash&rsquo;s api

UNSPLASH é a biblioteca que mais cresce com mais de 900k+ fotos gratuitas, de qualidade, de alta definição e sem licenças no mundo. Cada foto no UNSLASH é gratuita, para uso pessoal e comercial. Sem pagamentos e sem assinaturas de licença necessárias.

O UNSPLASH torna a experiência de encontrar qualidade, fotografia utilizável mais fácil, mais rápida e melhor do que nunca, e é por isso&rsquo;é confiável pelo mundo&rsquo;S Melhores equipes de produtos e produtos para criadores.

Estatísticas

Você pode ver UNSPLASH&rsquo;s estatísticas em tempo real, mas aqui estão alguns pontos de bala:

&#55357;&#56399; As fotos no unsplash são contribuídas por mais 127k+ fotógrafos e usado por Mais de 70 milhões de criativos
11 bilhões de fotos são servidos todos os meses
⬇️ 55 milhões+ fotos são baixados todos os meses
&#55357;&#56613; 20 fotos são baixados a cada segundo (para contexto, que&rsquo;é o tamanho do estoque da Adobe, Shutterstock e Getty combinado)

A biblioteca UNSPLASH

Qualidade da biblioteca e acessibilidade é o que diferencia o Unsplash para os sites de fotos tradicionais que existem hoje.

  • Curadoria manual
    Nossa equipe editorial é selecionada todas as fotos distribuídas no Unsplash para garantir que nossa biblioteca seja atualizada com fotografia autêntica, de classe mundial, de alta resolução,. Chega de brega, fotos de estoque. Nós nos concentramos na qualidade, não na quantidade.
  • Acessibilidade
    Todas as fotos são licenciadas sob a licença UNSPLASH, tornando -as gratuitas para usos pessoais e comerciais. Não há necessidade de pagamentos ou licenças confusas com datas de validade.
  • Conteúdo garantido seguro para o trabalho
    As fotos unsplash são PG-13 e revisadas manualmente antes de serem expostas no Unsplash ou distribuídas por Unsplash&rsquo;s api. Nossa API também pode buscar coleções personalizadas de fotos para garantir ainda mais a qualidade e a segurança.
  • Exclusividade da foto
    Unsplash&rsquo;A Biblioteca S é exclusiva do UNSPLASH – ou seja, nenhum outro site de fotos pode hospedar ou distribuir essas fotos em seus sites. Faça uma parceria com o UNSPLASH significa que você tem acesso a conteúdo único e exclusivo.

Estudos de caso da API

Unsplash&rsquo;S API é o motor fotográfico mais poderoso No mundo com mais de 1000 parceiros, mais de 1 bilhão de mais ligações por mês e 99.998% de tempo de atividade nos últimos 30 dias.

Usando a API UNSPLASH para procurar fotos em um aplicativo React

Recentemente, recebi a tarefa de adicionar um recurso a um aplicativo que daria aos usuários a capacidade de escolher uma imagem para salvar com um objeto. Felizmente, a escolha da API dependia de mim! Infelizmente, eu não tinha&rsquo;T realmente trabalhei com qualquer APIs de imagem antes! Então, como você deve ter adivinhado, comecei a brincar com a API UNSPLASH – e eu&rsquo;estou aqui para compartilhar minha experiência usando esta interface muito fácil de usar, especificamente no contexto de incorporá-lo em um projeto de reação.

Começando

Para obter acesso à API, primeiro pule para a página de desenvolvedores Unsplash e crie uma conta. Depois que sua conta for configurada, você&rsquo;Eu precisará registrar seu aplicativo – observe que, embora inicialmente no modo de demonstração, você será limitado a 50 solicitações por hora (que eu achei que era mais do que suficiente para testes, etc.). Então, na página do aplicativo que você acabou de registrar, anote as duas chaves únicas que você&rsquo;Foi dado para acessar a API, o &lsquo;Chave de acesso&rsquo; e a &lsquo;Chave secreta,&rsquo; que você&rsquo;precisarei quando você fizer certos pedidos, dependendo das permissões necessárias.

Porque nós&rsquo;está olhando especificamente para incorporar isso em um aplicativo React, deixe&rsquo;s Faça uso do invólucro JavaScript para a API. Para adicioná -lo ao seu projeto/pacote.Arquivo JSON:

$ npm install unsplash-js

Esta biblioteca facilita muito a interação com a API, criando uma instância de um objeto UNSPLASH que contém suas teclas de aplicativo/auth, nas quais você pode chamar vários métodos para atingir pontos de extremidade específicos e executar determinadas tarefas.

Pesquisando por palavra -chave

A API tem uma incrível profundidade de funcionalidade, mas nós&rsquo;vou me concentrar em apenas uma tarefa – pesquisando fotos por uma determinada palavra -chave. O terminal que nós&rsquo;Reparar neste caso é:

Obtenha https: // API.Unsplash.com/pesquisa/fotos

Os parâmetros que podemos enviar junto com a solicitação incluem: consulta, que é os termos de pesquisa, página e per_page, que são o número da página para recuperar e o número de itens que você&rsquo;D gostaria de retornar por página. Ambos os parâmetros são opcionais, inadimplentes de 1 e 10, respectivamente. Você também pode passar os IDs de coleções para restringir a pesquisa a coleções específicas, bem como a orientação para recuperar apenas paisagens, retratos ou fotos orientadas para quadrado.

Então, por exemplo, uma busca por fotos com uma palavra -chave &lsquo;cães,&rsquo; incluindo os valores padrão para página e per_page, seria assim:

Obtenha https: // API.Unsplash.com/pesquisa/fotos?consulta = cães

Que então retorna um objeto como este:

 "Total": 30536, 
"Total_Pages": 3054,
"resultados": [
"Id": "do2wtawctc4",
"Created_at": "2019-03-25T12: 30: 46-04: 00",
"Update_at": "2019-05-17T19: 52: 55-04: 00",
"Largura": 4000,
"Altura": 5000,
"Color": "#261d16",
"Descrição": NULL,
"Alt_description": "Uma água potável cinza e branco de uma caixa de água em caixa",
"URLS": "RAW": "https: // imagens.Unsplash.com/foto-1553531384-411a247ccd73?ixlib = rb-1.2.1 & ixid = eyjhchbfawqiojcymdi4fq ",
"Full": "https: // imagens.Unsplash.com/foto-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 85 & fm = jpg & colhere,
"regular": "https: // imagens.Unsplash.com/foto-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 80 & fm = jpg & colaboramento = entropia & cs = tinysrgb & w = 1080 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ",
"pequeno": "https: // imagens.Unsplash.com/foto-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 80 & fm = jpg & colaboramento = entropia & cs = tinysrgb & w = 400 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ",
"Thumb": "https: // imagens.Unsplash.com/foto-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 80 & fm = jpg & colaboramento = entropia & cs = tinysrgb & w = 200 & fit = max & ixid = eyjhchbfawqiojcymdi4fq "
>,
"Links": "self": "https: // API.Unsplash.com/fotos/do2wtawctc4 ",
"html": "https: // unsplash.com/fotos/do2wtawctc4 ",
"Download": "https: // unsplash.com/fotos/do2wtawctc4/download ",
"Download_location": "https: // API.Unsplash.com/fotos/do2wtawctc4/download "
>,
// .

Então, a partir da matriz de resultados, podemos pegar links, tags, descrições, etc. de cada foto retornada com bastante facilidade.

Mas antes de chegarmos tão longe, primeiro precisamos configurar as coisas em nosso aplicativo React. Crie uma instância UNSPLASH com sua chave de acesso e chave secreta:

importar unsplash de 'unsplash-js';

const unsplash = new Unsplash (ApplicationId: "",
Segredo: ""
>);

Esta biblioteca também inclui a integração nativa do React-ao usar, basta importar de unsplash-js/nativo em vez.

Agora, podemos simplesmente chamar vários métodos de instância no Unsplash, que fornecem acesso aos pontos de extremidade da API. No nosso caso, nós&rsquo;está procurando fotos por palavra -chave, então nós&rsquo;estarei usando a pesquisa.Fotos (palavra -chave, página, per_page) . Este método leva até três argumentos – palavra -chave, uma string, necessária, enquanto os outros dois argumentos, página e per_page são opcionais.

Unsplash.procurar.Fotos ("Cats", 1) 
.Então (Tojson)
.Então (JSON => // Faça algo com o objeto JSON
>);

O código acima também utiliza o método Handy Helper Tojson, que executa a tarefa de converter a resposta da API aos dados JSON – geralmente feitos com algo parecido com as linhas de res => res.JSON () . Para usar este método auxiliar, basta importar-o de Unsplash-Js também:

importar unsplash, < toJson >De 'Unsplash-js

E essa&rsquo;s isso! Agora você&rsquo;Tenho seus objetos fotográficos, com os quais você pode fazer o que seu pequeno coração desejar!