Una guida per principianti all’API di Unsplash in JavaScript

Riepilogo:

In questa guida, ti guiderò attraverso il processo di utilizzo dell’API Unsplash in JavaScript. Copriremo argomenti come ottenere una chiave API, installare i pacchetti NPM necessari e effettuare chiamate API per cercare foto. Inoltre, impareremo come salvare le immagini restituite sull’unità locale.

Punti chiave:

1. L’API Unsplash è un potente strumento per gli sviluppatori JavaScript di trovare e utilizzare immagini di alta qualità nei loro progetti.

2. Questa guida si concentra sull’installazione e l’utilizzo della libreria Unsplash in un nodo.Progetto JS.

3. Si consiglia di avere una conoscenza di base di JavaScript prima di iniziare con l’API di Unsplash.

4. Avrai bisogno di un account sviluppatore Unplash per accedere all’API.

5. La serie di tutorial sull’utilizzo di JavaScript per automatizzare i blog include un precedente tutorial sull’API Openi, che vale la pena dare un’occhiata.

6. Il codice completo per questa guida è disponibile su GitHub.

7. Per utilizzare l’API Unsplash, installare i pacchetti NPM pertinenti come Unsplash-JS e Node-Fetch.

8. La struttura delle cartelle per il tuo progetto dovrebbe includere le immagini e le cartelle di unplash.

9. È possibile ottenere una chiave API Unsplash registrando un account e registrando una nuova applicazione sul sito Web di Unsplash.

10. Dopo aver ottenuto la chiave API, crea un’istanza dell’API Unsplash nel codice JavaScript.

11. Effettuare chiamate API per cercare foto usando l’API Unsplash e prendi le foto restituite in JavaScript.

12. È possibile personalizzare i parametri della chiamata API, come pagina, per_page e orientamento.

13. Seleziona una foto casuale dalla risposta e recupera il suo URL.

14. Usa il pacchetto Node-Fetch per scaricare la foto e salvarla sull’unità locale.

15. Ricorda di includere l’attribuzione adeguata per la foto secondo le linee guida di Unsplash.

Domande:

1. Qual è l’API di Unsplash?
L’API Unsplash è uno strumento che consente agli sviluppatori JavaScript di trovare e utilizzare immagini di alta qualità nei loro progetti.

2. Quale conoscenza è necessaria per iniziare a utilizzare l’API di Unsplash?
La conoscenza di base di JavaScript è consigliata prima di utilizzare l’API Unsplash.

3. Come posso ottenere una chiave API Unplash?
Per ottenere una chiave API Unsplash, è necessario iscriverti a un account sul sito Web di Unsplash e registrare una nuova applicazione.

4. Quali pacchetti NPM sono necessari per integrare l’API di Unsplash?
È necessario installare i pacchetti Unsplash-Js e Node-Fetch per integrare l’API Unsplash nel tuo progetto JavaScript.

5. Puoi fornire la struttura delle cartelle per un progetto utilizzando l’API Unsplash?
Il progetto dovrebbe includere cartelle come immagini e Unsplash, insieme ad altri file richiesti.

6. Come posso effettuare una chiamata API per cercare foto utilizzando l’API Unsplash?
È possibile effettuare chiamate API utilizzando i metodi forniti dall’API Unsplash, specificando parametri come query e pagina.

7. È possibile salvare le foto restituite dall’API Unsplash al mio disco locale?
Sì, puoi utilizzare il pacchetto Node-Fetch per scaricare le foto e salvarle sull’unità locale.

8. Cosa dovrei includere nella didascalia per la foto scaricata?
La didascalia dovrebbe includere l’attribuzione al fotografo secondo le linee guida di Unplash.

9. Come posso accedere al codice completo per questa guida?
Il codice completo per questa guida è disponibile su GitHub utilizzando il link fornito.

10. Puoi spiegare lo scopo del precedente tutorial sull’API Openi?
Il precedente tutorial di questa serie copre il progetto di progetta e dà un’idea di ciò che stiamo cercando di realizzare con JavaScript Automation.

11. Come posso personalizzare i parametri della chiamata API, come pagina e orientamento?
È possibile passare valori diversi per i parametri come la pagina e l’orientamento quando si effettua la chiamata API.

12. C’è un limite sul numero di richieste API che posso fare con l’API UnSplash?
Sì, ci sono limiti sul numero di richieste API all’ora per le app demo. Assicurati di controllare la documentazione per i dettagli.

Risposte:

1. L’API Unsplash è un potente strumento che consente agli sviluppatori Javascript di trovare e utilizzare facilmente immagini di alta qualità nei loro progetti. Che tu sia un principiante o uno sviluppatore esperto, l’API Unsplash può migliorare notevolmente i tuoi progetti fornendo una vasta libreria di immagini gratuite. Elimina la necessità di cercare le immagini manualmente e fornisce un modo semplice per integrare le immagini direttamente nel codice.

2. Prima di immergersi nell’uso dell’API Unsplash, si consiglia di avere una conoscenza di base di JavaScript. Questo ti aiuterà a capire e lavorare con i frammenti di codice JavaScript utilizzati in questa guida. Se sei nuovo in JavaScript, ci sono numerose risorse online e tutorial disponibili che possono aiutarti a iniziare. Vale la pena investire un po ‘di tempo nell’apprendimento delle basi di JavaScript prima di procedere ulteriormente.

3. Per accedere all’API UnSplash, avrai bisogno di una chiave API. Ottenere una chiave API è un processo semplice. Innanzitutto, vai sul sito Web Unsplash e iscriviti a un account. Una volta che hai un account, vai alla sezione sviluppatore del sito Web. Qui troverai l’opzione per registrare una nuova applicazione. Fare clic sul pulsante “Registra una nuova applicazione” e compila i dettagli richiesti. Dopo aver inviato il modulo, ti verrà fornita una chiave API che è possibile utilizzare per accedere all’API di Unsplash.

4. Per integrare l’API UnSplash nel tuo progetto JavaScript, ci sono un paio di pacchetti NPM che dovrai installare. Questi pacchetti sono Unsplash-Js e Node-Fetch. Il pacchetto Unsplash-JS fornisce un wrapper per l’API Unsplash, rendendo più facile l’interazione con l’API dal tuo codice JavaScript. Il pacchetto Node-Fetch viene utilizzato per effettuare richieste HTTP all’API UnSplash e recuperare i dati desiderati. Per installare questi pacchetti, vai alla directory del progetto nel terminale ed esegui il comando “NPM Installa un nodo Unseplash-JS”. Questo installerà i pacchetti richiesti e li aggiungerà alle dipendenze del tuo progetto.

5. Quando si lavora con l’API Unsplash in un nodo.Progetto JS, è importante organizzare correttamente i tuoi file e cartelle. Insieme ai file di progetto esistenti, dovrai creare due nuove cartelle: “immagini” e “Unsplash”. La cartella “Immagini” verrà utilizzata per archiviare le foto scaricate dall’API Unsplash, mentre la cartella “Unsplash” conterrà il codice JavaScript per interagire con l’API. Assicurati che queste cartelle siano posizionate nella posizione appropriata all’interno della struttura della directory del progetto.

6. Fare chiamate API per cercare foto usando l’API Unsplash è relativamente semplice. Utilizzando il pacchetto Unsplash-JS, è possibile creare un’istanza dell’API Unsplash passando la chiave API come parametro. Una volta che hai un’istanza dell’API, è possibile utilizzare i suoi metodi per effettuare vari tipi di chiamate API. Ad esempio, puoi usare “Cerca.Metodo getPhotos “per cercare foto in base a una query. È possibile fornire parametri aggiuntivi come pagina, per_page e orientamento per perfezionare i risultati della ricerca. Ogni chiamata API restituisce una risposta, che contiene i dati con cui è necessario lavorare, come gli URL delle foto.

7. Sì, è possibile salvare le foto restituite dall’API Unsplash al tuo Drive Local. Per raggiungere questo obiettivo, è possibile utilizzare il pacchetto Node-Fetch, che consente di recuperare e scaricare file da un server remoto. Dopo aver effettuato la chiamata API e aver ottenuto l’URL di una foto che si desidera salvare, è possibile utilizzare il pacchetto nodo-fetch per scaricare la foto. Una volta scaricato, puoi salvarlo nella posizione desiderata sull’unità locale utilizzando le tecniche di manipolazione dei file fornite dal nodo.js. Ricorda di controllare i termini e le condizioni dell’API di Unsplash per eventuali restrizioni di utilizzo o requisiti di attribuzione quando si salva e si utilizza le foto scaricate.

8. Quando si salva la foto scaricata, è importante includere l’attribuzione adeguata secondo le linee guida di Unplash. Unsplash ha requisiti specifici per l’attribuzione per dare credito ai fotografi che forniscono le loro immagini per un uso gratuito. L’attribuzione dovrebbe in genere includere il nome del fotografo e un link al loro profilo di non esplorazione o la foto stessa su Unsplash. Assicurati di ricontrollare le linee guida di attribuzione specifiche indicate da Unsplash e assicurati di rispettarle quando si utilizza le foto nei progetti. L’attribuzione corretta non solo adempie agli obblighi legali, ma riconosce anche il lavoro e il contributo del fotografo.

9. Il codice completo per questa guida, insieme a eventuali risorse aggiuntive, è disponibile su GitHub. Il collegamento fornito ti indirizzerà al repository GitHub in cui è possibile accedere al codice e alla documentazione correlata. Il codice include esempi su come ottenere una chiave API Unsplash, installare i pacchetti NPM necessari e effettuare chiamate API per cercare foto. Inoltre, copre il salvataggio delle foto restituite sull’unità locale, aderendo alle linee guida di attribuzione di Unplash e altri aspetti pertinenti dell’utilizzo dell’API di UnSplash.

10. Il precedente tutorial in questa serie si concentra sull’uso dell’API Openi in JavaScript. Fornisce un’introduzione all’utilizzo di JavaScript per automatizzare le attività di blog e dimostra come impostare un progetto per lavorare con l’API OpenAI. Sebbene non direttamente correlato all’API Unsplash, il tutorial precedente offre preziose informazioni sul lavoro con le API in generale e mette in mostra il potere di usare JavaScript per automatizzare varie attività. Se non hai già esaminato il tutorial precedente, ti consiglio vivamente di verificarlo per ottenere una comprensione completa dei concetti e delle tecniche utilizzate in questa serie.

11. Quando si effettuano chiamate API per cercare foto utilizzando l’API Unsplash, hai la flessibilità per personalizzare vari parametri. Ad esempio, è possibile specificare il parametro della pagina per recuperare diversi set di risultati di ricerca. Questo può essere utile quando si implementa la paginazione o quando si desidera ottenere immagini da diverse pagine dei risultati di ricerca. Allo stesso modo, è possibile impostare il parametro Per_Page per controllare il numero di foto restituite per risposta API. Ciò ti consente di gestire la quantità di dati che ricevi in ​​base ai requisiti specifici. Inoltre, il parametro di orientamento consente di filtrare le foto in base al loro orientamento, come il paesaggio o il ritratto. Specificando questi parametri nelle chiamate API, puoi adattare i risultati per soddisfare le esigenze del tuo progetto.

12. Sì, ci sono limiti sul numero di richieste API che puoi effettuare con l’API di Unsplash, in particolare per le app demo. Questi limiti sono progettati per prevenire gli abusi e garantire un equo utilizzo dell’API. Quando registri la tua domanda e ottieni una chiave API, di solito avrai un limite predefinito sul numero di richieste consentite all’ora o al giorno. È essenziale rivedere la documentazione dell’API di Unsplash o i termini di servizio per comprendere i limiti specifici che si applicano all’applicazione. Se prevedi di superare i limiti predefiniti, potrebbe essere necessario aggiornare il tuo account o esplorare opzioni alternative fornite da Unsplash per un utilizzo del volume più elevato.

Un principiante’S Guida all’API UnSplash in JavaScript

Puoi visualizzare Unsplash’S statistiche in tempo reale, ma ecco alcuni punti elenco:

Unsplash ha un’API

Об этой сттце

Ыы зарегистрировали подозритеstituire. С помощю ээй ст р ы ыы сможем о imperceде quello. Почему ээо мо л поззти?

Эта страница отображается в тех с лччч, когда автоматическиtal систе quisi которые наршают условия иполззования. Страница перестан scegliere. До этого момента для иполззования сжж google необходимо пхоходить поверку по по по по по.

” ылку запросов. Если ы и ипоеете общий доступ в интернет, проmma. Обратитесь к с ое системому администратору. Подробнеi.

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

Un principiante’S Guida all’API UnSplash in JavaScript

L’API di Unplash è un ottimo strumento per qualsiasi sviluppatore JavaScript, indipendentemente dal loro livello di esperienza. Semplifica la ricerca e l’uso di immagini di alta qualità nei tuoi progetti. Questa guida ti mostrerà, passo dopo passo, come installare la libreria di Unsplash nel tuo nodo.JS Project, effettua chiamate API per cercare foto e salva le immagini restituite sull’unità locale. Con questa guida, diventerai rapidamente un esperto nell’uso dell’API Unsplash.

Heads Up, questo tutorial è la seconda parte della mia serie sull’uso di JavaScript per automatizzare il blogging. Consiglio vivamente di dare un’occhiata al primo tutorial, “Introduzione all’API Openai in JavaScript” Prima di continuare mentre copre la configurazione del progetto e ti dà un’idea di cosa noi’sta cercando di realizzare qui.

Puoi trovare il codice completo su GitHub a questo link.

Prerequisiti

• Conoscenza di base di JavaScript
• Un nodo pronto per andare.Progetto JS
• Un account sviluppatore di un sviluppatore

Cosa tu’Imparerò

• Come ottenere una chiave API di UnSplash: Passa attraverso il processo di creazione di un account sviluppatore Unplash, in modo da poter generare una chiave API e accedere alla libreria di foto di UnSplash.
• Come installare i pacchetti NPM pertinenti: Voi’Affronta i diversi pacchetti che possono aiutarti a integrare l’API Unsplash nel tuo progetto JavaScript.
• Snippet di codice JavaScript su Chiamate API UnSplash: Attraverso questa guida, tu’Acquisisci una migliore comprensione dell’API di Unsplash e come effettuare chiamate per cercare e restituire le foto in JavaScript. Inoltre, il jCodice AvaScript per salvare le foto restituite sull’unità locale.

Ottieni una chiave API di Unplash

1. Vai al sito Web Unsplash e registrati per un account.
2. Una volta che hai un account, vai alla sezione sviluppatore del sito Web e fai clic sul “Registra una nuova applicazione” pulsante. (Nota: le app demo sono limitate a 50 reqests all’ora.)
3. Dopo aver inviato il modulo, ti verrà fornito una chiave API che puoi utilizzare per accedere all’API UnSplash.

Installare i pacchetti NPM

Va bene, come seguito all’ultimo tutorial di questa serie, tu’È necessario eseguire NPM Installare il nodo Unsplash-JS nel terminale per installare altri due pacchetti NPM prima di continuare. Questo è un rapido passo che’Assicurti che tu’è pronto per andare avanti con questo tutorial e basarsi su ciò che tu’Ve ho imparato prima.

NPM Installa un nodo Unsplash-JS Fetch

La nostra struttura delle cartelle ora include il nuovo immagini E non esplodente cartelle nel progetto. Dovrebbe assomigliare a qualcosa di simile a questo:

��WordPress-Automation 
┣ ��node_modules 
┣ ��src 
┃ ┣ ��images 
┃ ┃ ┗ �� codifica sul laptop.jpg 
┃ ┣ ��openai 
┃ ┃ ┗ Openi.js 
┃ ┣ ��unsplash 
┃ ┃ ┗ ��unsplash.js 
┣ .env 
┣ .gitignore 
┣ .Prettierrc 
┣ indice.js 
┣ PACCHEGGIO-LOCK.JSON 
┗ pacchetto.JSON 

Fai una chiamata API UnSplash e salva la foto restituita

// Unsplash.js

importare < createApi >da "Unsplash-JS";
Importazione Fetch da "Node-Fetch";
importare FS da "FS";


Classe di esportazione Unsplash Constructor (AccessKey) // Crea un'istanza dell'API Unsplash utilizzando la chiave di accesso fornita 
Questo.Unsplash = CreateAPI (< accessKey, fetch >); 
>
 
async getphoto (tipo, query, pagina = 1, per_page = 8, orientamento = 'paesaggio') try // Invia una richiesta all'API Unsplash per cercare foto 
const response = aspetta questo.non esplodente.ricerca.getphotos (query, 
pagina, 
per pagina, 
orientamento, 
>);
 
// Seleziona una foto casuale dalla risposta 
const arandomphoto = risposta.risposta.Risultati [matematica.pavimento (matematica.casuale () * 8)]; 
// Ottieni l'URL foto di dimensioni regolari 
const fotourl = arandomphoto.URL.regolare; 
// prendi la foto 
const photo = wait fetch (photourl); 
// Ottieni il buffer fotografico 
const PhotoBuffer = Aspetta la foto.ArrayBuffer (); 
// Crea didascalia per la foto - in stile di attribuzione Unsplash 
const didascaltion = ` 
 
fotografato da 
 
"rel =" noopener ugc nofollow "target =" _ blank "> 
$ 
 
SU 
 
Non esplodente 
 
`;
 
// Controlla il valore del parametro "Digita" ed esegui il blocco del codice corrispondente 
switch (type) case 'buffer': 
// converti il ​​buffer fotografico in uint8array 
const data = new uint8array (photoBuffer); 
console.registro (`$.jpg buffer ready`); 
// restituisce un oggetto contenente il buffer e gli attributi della foto 
Attributi di ritorno: didascalia: didascalia, 
Titolo: query.tolowercase (), 
alt_text: `Un'immagine di $`, 
>, 
Buffer: dati 
>; 
Caso 'file': 
// converti il ​​buffer fotografico in un buffer 
const immagine = buffer.da (PhotoBuffer); 
// Crea un percorso del file per la foto 
const filepath = `src/immagini/$.jpg` 
// Scrivi la foto al file system 
Aspetta fs.promesse.writefile (FilePath, immagine); 
console.registro (`$.jpg salvato`); 
rottura; 
predefinito: 
console.log (`tipo non valido: $`); 
restituire null; 
> 
> Catch (Errore) Console.log (errore); 
restituire null; 
> 
>

>

In questa classe istantanea Non esplodente.js, Il codice inizia importando i moduli e i pacchetti necessari:

• Il metodo CreateAPI dal pacchetto Unsplash-JS viene utilizzato per creare un’istanza dell’API UnSplash.
• Il pacchetto Fetch viene utilizzato per effettuare una richiesta GET per scaricare la foto.
• Il modulo FS (file system) integrato viene utilizzato per creare un flusso di scrittura per salvare la foto.

Quindi, definisco una funzione asincrima getphoto che avvolge l’intero codice. All’interno della funzione, utilizzo il blocco try-catch per gestire qualsiasi errore che può verificarsi durante la richiesta o il salvataggio della foto.

All’interno del blocco di prova, uso la ricerca.Metodo getPhotos (params) dell’API Unsplash per cercare foto con query, pagina per_page e orientamento dei parametri .

Puoi anche personalizzare il per_page, la pagina, l’orientamento e la query per ottenere le foto specifiche desiderate e anche puoi controllare la risposta JSON per il risultato e in grado di utilizzare diverse dimensioni dell’immagine modificando gli URL.RAW, URLS.pieno, url.regolare, ecc.

Quindi, utilizzo il pacchetto Fetch per effettuare una richiesta GET al link per il download della foto fornendo la dimensione regolare randomizzata della foto usando Arandomphoto.URL.Regulario e aspetto la risposta.

Il metodo ArrayBuffer () è quello di ottenere il buffer fotografico.

Uso FS.promesse.Metodo WriteFile (FilePath, Image) Per salvare la foto nell’unità locale, scriverà il buffer nel file.

In caso di errore, utilizzo il blocco catch per registrare l’errore su console.

Suggerimenti: Se si desidera selezionare casualmente una delle foto restituite dall’API, puoi usare la matematica.pavimento (matematica.Metodo casuale () * 8). Ciò genererà un numero casuale tra 0 e 9, che può essere usato come indice del risultato che si desidera selezionare.

// indice.js

importare < Unsplash >da "./SRC/Unsplash/Unsplash.js ";
import dotenv da 'dotenv';
Dotenv.config ();

const unrsplash = new Unsplash (processo.env.Unsplash_Key);
Attendi Unsplash.getPhoto ('file', 'codifica sul laptop');

Proprio come nel primo tutorial, nel indice.js file, abbiamo importato il Non esplodente.js classe e ne ha creato una nuova istanza passando in Unsplash_Key . Abbiamo immagazzinato la chiave API in a .env File per una maggiore sicurezza. Quindi abbiamo eseguito il metodo GetPhoto trasmettendo il tipo di risposta che volevamo e la frase di ricerca per la foto. E voilà! Abbiamo salvato un’immagine chiamata codifica sul laptop.jpg Nella cartella SRC/ Images.

Conclusione

L’API Unsplash è uno strumento potente che semplifica la ricerca e l’utilizzo di belle immagini nei tuoi progetti. Il pacchetto Unsplash-JS semplifica il processo di effettuare chiamate API in JavaScript.

In questa guida, hai imparato come installare i pacchetti necessari, effettuare chiamate API per cercare foto e salvare le immagini restituite sull’unità locale. Hai anche imparato come gestire gli errori e come accedere a una foto casuale dai risultati restituiti dall’API.

Come passo successivo, puoi basarsi su questo ed esplorare più opzioni disponibili nell’API Unsplash come la paginazione, scaricare le foto di diverse dimensioni, scaricare le foto di diverso orientamento e anche puoi utilizzare le foto per un uso commerciale e non commerciale seguendo le linee guida fornite da un nonplash. Puoi anche provare a utilizzare l’API con librerie diverse come assios ed esplorare le altre funzionalità fornite da Unsplash API.

Ulteriori letture

Blog Automation with JavaScript Tutorial Series

• API OpenAI (Parte IESeconda parte): Generazione di contenuti automatizzati
• API di UnSplash: Selezione automatizzata delle immagini per i post del blog
• API WordPress: Caricamento dei contenuti del blog senza sforzo
• Automazione del blog: Riunire tutto

Documentazioni ufficiali

�� Unsplash’s api

Unsplash è la libreria in più rapida crescita di oltre 900k+ foto gratuite, di qualità, ad alta definizione e senza licenze nel mondo. Ogni foto su Unsplash è gratuita, sia per uso personale che commerciale. Nessun pagamento e nessun abbonamento a licenza richiesto.

Unsplash rende l’esperienza di trovare qualità, fotografia utilizzabile più facile, più veloce e migliore che mai, motivo per cui è’S fidati dal mondo’i migliori team di prodotti e prodotti per i creatori.

Statistiche

Puoi visualizzare Unsplash’S statistiche in tempo reale, ma ecco alcuni punti elenco:

�� Le foto su Unsplash sono fornite da Over 127K+ fotografi e usato da 70+ milioni di creativi
⚡ 11 miliardi di foto vengono serviti ogni mese
⬇️ 55 milioni+ foto vengono scaricati ogni mese
�� 20 foto vengono scaricati ogni secondo (per il contesto, quello’S La dimensione di Adobe Stock, Shutterstock e Getty combinati)

La libreria di Unsplash

La qualità della biblioteca e dell’accessibilità è ciò che differenzia il non esphing ai tradizionali siti fotografici che esistono oggi.

• Cura manuale
  Il nostro team editoriale cura ogni foto distribuita su Unsplash per garantire che la nostra biblioteca venga aggiornata con fotografia autentica, di classe mondiale, ad alta risoluzione. Niente più di cattivo gusto, foto di stock. Ci concentriamo sulla qualità, non sulla quantità.
• Accessibilità
  Tutte le foto sono autorizzate con la licenza di Unsplash, rendendole gratuite sia per gli usi personali che commerciali. Non c’è bisogno di pagamenti o licenze confuse con date di scadenza.
• Contenuto garantito sicuro per il lavoro
  Le foto di Unplash sono PG-13 e riviste manualmente prima di essere esposte su UnSplash o distribuite tramite UnSplash’s api. La nostra API può anche recuperare collezioni personalizzate di foto per garantire ulteriormente la qualità e la sicurezza.
• Esclusività fotografica
  Non esplodente’La biblioteca è esclusiva di Unsplash – il che significa che nessun altro sito di stock può ospitare o distribuire queste foto sui loro siti. La collaborazione con Unsplash significa che hai accesso a contenuti unici e belli.

Casi studio API

Non esplodente’S API è il Motore fotografico più potente al mondo con oltre 1000 partner, oltre 1 miliardo di chiamate al mese e 99.998% di uptime negli ultimi 30 giorni.

Utilizzo dell’API Unsplash per cercare foto in un’app React

Di recente mi è stato assegnato il compito di aggiungere una funzione a un’app che avrebbe dato agli utenti la possibilità di scegliere un’immagine da salvare con un oggetto. Fortunatamente, la scelta dell’API dipendeva da me! Sfortunatamente, ho avuto’prima ha davvero funzionato con qualsiasi API di immagine prima! Quindi, come avrete indovinato, ho iniziato a giocare con l’API di Unsplash – e io’m qui per condividere la mia esperienza utilizzando questa interfaccia molto facile da usare, in particolare nel contesto di incorporarla in un progetto React.

Iniziare

Per ottenere l’accesso all’API, il primo salto alla pagina degli sviluppatori Unsplash e crea un account. Una volta che il tuo account è stato impostato, tu’Deve registrare la tua app – Nota che mentre inizialmente in modalità demo, sarai limitato a 50 richieste all’ora (che ho trovato era più che sufficiente per i test, ecc.). Quindi, sulla pagina per l’app che hai appena registrato, prendi nota delle due chiavi uniche’è stato dato per accedere all’API, il ‘Chiave di accesso’ e il ‘Chiave segreta,’ che tu’Ll necessita di quando si effettuano determinate richieste, a seconda delle autorizzazioni richieste.

Perché noi’Riversendosi specificamente incorporare questo in un’app React, lascia’s Utilizzare il wrapper JavaScript per l’API. Per aggiungerlo al tuo progetto/pacchetto.File JSON:

$ npm Installa Unsplash-JS

Questa libreria rende molto semplice l’interazione con l’API creando un’istanza di un oggetto Unsplash che contiene le chiavi dell’app/autentica.

Ricerca per parola chiave

L’API ha un’incredibile profondità di funzionalità, ma noi’si concentrerà su una sola attività: cercare foto per una determinata parola chiave. L’endpoint che noi’Riguare in questo caso è:

Ottieni https: // API.non esplodente.com/ricerca/foto

I parametri che possiamo inviare insieme alla richiesta includono: query, che è i termini di ricerca, pagina e per_page, che sono il numero di pagina da recuperare e il numero di elementi’D piace tornare per pagina. Entrambi questi parametri sono opzionali, inadempienti a 1 e 10, rispettivamente. È inoltre possibile passare gli ID collezioni per restringere la ricerca a collezioni specifiche, nonché orientamento per recuperare solo foto di paesaggio, ritratto o orizzato.

Quindi, ad esempio, una ricerca di foto con una parola chiave ‘cani,’ Compresi i valori predefiniti per Page e Per_Page, sembrerebbe così:

Ottieni https: // API.non esplodente.com/ricerca/foto?query = cani

Che poi restituisce un oggetto come questo:

 "Totale": 30536, 
"Total_Pages": 3054, 
"Risultati": [ 
 "id": "do2wtawctc4", 
"Created_at": "2019-03-25t12: 30: 46-04: 00", 
"Updated_at": "2019-05-17T19: 52: 55-04: 00", 
"Larghezza": 4000, 
"Altezza": 5000, 
"Colore": "#261d16", 
"Descrizione": NULL, 
"alt_description": "Un'acqua potabile grigia e bianca da un cartone d'acqua in scatola", 
"URLS": "RAW": "https: // immagini.non esplodente.com/foto-1553531384-411a247ccd73?Ixlib = RB-1.2.1 & ixid = eyjhchbfawqiojcymdi4fq ", 
"Full": "https: // immagini.non esplodente.com/foto-1553531384-411a247ccd73?Ixlib = RB-1.2.1 & q = 85 & fm = jpg & crop = entropy & cs = srgb & ixid = eyjhchbfawqiojcymdi4fq ", 
"regolare": "https: // immagini.non esplodente.com/foto-1553531384-411a247ccd73?Ixlib = RB-1.2.1 & q = 80 & fm = jpg & crop = entropy & cs = tinysrgb & w = 1080 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ", 
"piccolo": "https: // immagini.non esplodente.com/foto-1553531384-411a247ccd73?Ixlib = RB-1.2.1 & q = 80 & fm = jpg & crop = entropy & cs = tinysrgb & w = 400 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ", 
"Thumb": "https: // immagini.non esplodente.com/foto-1553531384-411a247ccd73?Ixlib = RB-1.2.1 & q = 80 & fm = jpg & crop = entropy & cs = tinysrgb & w = 200 & fit = max & ixid = eyjhchbfawqiojcymdi4fq " 
>, 
"Links": "Self": "https: // API.non esplodente.com/foto/do2wtawctc4 ", 
"html": "https: // unsplash.com/foto/do2wtawctc4 ", 
"Download": "https: // Unsplash.com/foto/do2wtawctc4/download ", 
"download_location": "https: // API.non esplodente.com/foto/do2wtawctc4/download " 
>,// . 

Quindi, dall’array di risultati, possiamo afferrare collegamenti, tag, descrizioni, ecc. da ogni foto è tornata abbastanza facilmente.

Ma prima di arrivare così lontano, dobbiamo prima creare le cose nella nostra app React. Crea un’istanza di non calcio con la chiave di accesso e la chiave segreta:

importare unSplash da "Unsplash-JS";

const Unsclash = new Unsplash (ApplicationId: "", 
Segreto: ""
>);

Questa libreria include anche l’integrazione nativa di React-quando si utilizza, semplicemente importa da Unsplash-JS/Native.

Ora, possiamo semplicemente chiamare vari metodi di istanza su Unsplash che fornisce l’accesso agli endpoint dell’API. Nel nostro caso, noi’REI alla ricerca di foto per parola chiave, quindi noi’Userà la ricerca.Foto (parola chiave, pagina, per_page) . Questo metodo richiede fino a tre argomenti: parola chiave, una stringa, che è richiesta, mentre gli altri due argomenti, pagina e per_page sono opzionali.

non esplodente.ricerca.Foto ("Cats", 1) 
.Quindi (Tojson) 
.Quindi (json => // fai qualcosa con l'oggetto JSON 
>);

Il codice di cui sopra utilizza anche il pratico metodo Helper Tojson, che svolge il compito di convertire la risposta dell’API ai dati JSON – di solito eseguita con qualcosa lungo le linee di Res => Res.JSON () . Per utilizzare questo metodo Helper, semplicemente importalo anche da Unsplash-JS:

importare unSplash, < toJson >da 'Unsplash-Js

E quello’s quello! Ora tu’Ve ha i tuoi oggetti fotografici, con i quali puoi fare qualunque cosa il tuo cuore desidera!