Przewodnik po API Unsplash w JavaScript

Streszczenie:

W tym przewodniku przeprowadzę cię przez proces korzystania z API Unsplash w JavaScript. Omówimy tematy takie jak uzyskanie klawisza API, zainstalowanie niezbędnych pakietów NPM i wykonywanie połączeń API w celu wyszukiwania zdjęć. Dodatkowo dowiemy się, jak zapisać zwrócone obrazy na lokalnym dysk.

Kluczowe punkty:

1. API UNSPlash to potężne narzędzie dla programistów JavaScript do znalezienia i wykorzystywania wysokiej jakości obrazów w swoich projektach.

2. Ten przewodnik koncentruje się na instalacji i korzystaniu z biblioteki UNSPLASH w węźle.Projekt JS.

3. Zaleca się, aby mieć podstawową wiedzę na temat JavaScript przed rozpoczęciem API Unsplash.

4. Będziesz potrzebować konta programisty Unsplash, aby uzyskać dostęp do interfejsu API.

5. Seria samouczka na temat korzystania z JavaScript do automatyzacji blogowania zawiera poprzedni samouczek na temat API Openai, który warto sprawdzić.

6. Pełny kod tego przewodnika można znaleźć na GitHub.

7. Aby korzystać z interfejsu API UNSPLASH, zainstaluj odpowiednie pakiety NPM, takie jak Unsplash-JS i Fetch-Fetch.

8. Struktura folderów dla twojego projektu powinna zawierać obrazy i foldery Unsplash.

9. Możesz uzyskać klucz API UNSPLASH, rejestrując się na konto i rejestrując nową aplikację na stronie internetowej UNSPLASH.

10. Po uzyskaniu klucza API utwórz instancję API UNSPLASH w kodzie JavaScript.

11. Wykonaj połączenia API, aby wyszukiwać zdjęcia za pomocą API Unsplash i pobieraj zwrócone zdjęcia w JavaScript.

12. Możesz dostosować parametry wywołania interfejsu API, takie jak Page, Per_page i Orientacja.

13. Wybierz losowe zdjęcie z odpowiedzi i odzyskaj jego adres URL.

14. Użyj pakietu Fetch w węźle, aby pobrać zdjęcie i zapisać je na lokalnym dysku.

15. Pamiętaj, aby uwzględnić odpowiednie przypisanie zdjęcia zgodnie z wytycznymi Unsplash.

Pytania:

1. Co to jest API UNSPLASH?
API UNSPlash to narzędzie, które pozwala programistom JavaScript na znalezienie i wykorzystywanie wysokiej jakości obrazów w swoich projektach.

2. Jaka wiedza jest wymagana, aby zacząć korzystać z interfejsu API Unsplash?
Zalecana jest podstawowa znajomość JavaScript przed użyciem API UNSPlash.

3. Jak mogę uzyskać klucz API Unsplash?
Aby uzyskać klawisz API UNSPLASH, musisz zarejestrować konto na stronie internetowej UNSPlash i zarejestrować nową aplikację.

4. Jakie pakiety NPM są niezbędne do zintegrowania interfejsu API UNSPlash?
Musisz zainstalować pakiety Unsplash-JS i Node-Fetch, aby zintegrować API UNSPLASH z projektem JavaScript.

5. Czy możesz podać strukturę folderów dla projektu za pomocą API Unsplash?
Projekt powinien zawierać foldery takie jak obrazy i Unsplash, a także inne wymagane pliki.

6. Jak mogę wykonać wywołanie interfejsu API, aby wyszukać zdjęcia za pomocą API UNSPLASH?
Możesz wykonywać wywołania interfejsu API za pomocą metod dostarczonych przez API UNSPlash, określając parametry takie jak zapytanie i strona.

7. Czy można zapisać zwrócone zdjęcia z interfejsu API UNSPlash na mój lokalny dysk?
Tak, możesz użyć pakietu Fetch w węźle, aby pobrać zdjęcia i zapisać je na lokalnym dysku.

8. Co powinienem uwzględnić w podpisie pobranego zdjęcia?
Podpis powinien zawierać przypisanie fotografowi zgodnie z wytycznymi Unsplash.

9. Jak mogę uzyskać dostęp do pełnego kodu tego przewodnika?
Pełny kod tego przewodnika można znaleźć na GitHub za pomocą podanego linku.

10. Czy możesz wyjaśnić cel poprzedniego samouczka na temat API Openai?
Poprzedni samouczek z tej serii obejmuje konfigurację projektu i daje wyobrażenie o tym, co staramy się osiągnąć dzięki automatyzacji JavaScript.

11. Jak mogę dostosować parametry wywołania API, takie jak strona i orientacja?
Podczas wykonywania połączenia API możesz przekazać różne wartości dla parametrów, takich jak strona i orientacja.

12. Czy istnieje limit liczby żądań API, które mogę złożyć z API UNSPLASH?
Tak, istnieją limity liczby żądań API na godzinę aplikacji demo. Pamiętaj, aby sprawdzić dokumentację, aby uzyskać szczegółowe informacje.

Odpowiedzi:

1. API UNSPlash to potężne narzędzie, które pozwala programistom JavaScript na łatwe znalezienie i wykorzystywanie wysokiej jakości obrazów w swoich projektach. Niezależnie od tego, czy jesteś początkującym, czy doświadczonym programistą, API Unsplash może znacznie ulepszyć Twoje projekty, zapewniając ogromną bibliotekę obrazów bezpłatnych. Eliminuje potrzebę ręcznego wyszukiwania obrazów i zapewnia łatwy sposób integracji obrazów bezpośrednio z kodem.

2. Przed zanurzeniem się w użyciu interfejsu API Unsplash, zaleca się posiadanie podstawowej wiedzy na temat JavaScript. Pomoże ci to zrozumieć i pracować z fragmentami kodu JavaScript używane w tym przewodniku. Jeśli jesteś nowy w JavaScript, dostępnych jest wiele zasobów online i samouczków, które mogą pomóc Ci zacząć. Warto zainwestować trochę czasu w naukę podstaw JavaScript przed kontynuowaniem.

3. Aby uzyskać dostęp do interfejsu API UNSPLASH, będziesz potrzebować klucza API. Uzyskanie klucza API jest prostym procesem. Najpierw przejdź do strony internetowej UNSPLASH i zarejestruj się na konto. Po uzyskaniu konta przejdź do sekcji programistów witryny. Tutaj znajdziesz opcję zarejestrowania nowej aplikacji. Kliknij przycisk „Zarejestruj nową aplikację” i wypełnij wymagane szczegóły. Po przesłaniu formularza otrzymasz klucz API, którego możesz użyć, aby uzyskać dostęp do API UNSPLASH.

4. Aby zintegrować interfejs API UNSPLASH z projektem JavaScript, istnieje kilka pakietów NPM, które musisz zainstalować. Te pakiety to Unsplash-JS i Fetch-Fetch. Pakiet Unsplash-JS zapewnia opakowanie dla API UNSPlash, co ułatwia interakcję z API z kodu JavaScript. Pakiet palenia węzłów służy do składania żądań HTTP do interfejsu API UNSPLASH i pobierania żądanych danych. Aby zainstalować te pakiety, przejdź do katalogu projektu w terminalu i uruchom polecenie „NPM Zainstaluj węzeł Unplash-JS”. To zainstaluje wymagane pakiety i doda je do zależności projektu.

5. Podczas pracy z interfejsem API unsplash w węźle.Projekt JS, ważne jest poprawnie zorganizowanie plików i folderów. Wraz z istniejącymi plikami projektowymi musisz utworzyć dwa nowe foldery – „obrazy” i „Unsplash”. Folder „Images” zostanie użyty do przechowywania pobranych zdjęć z interfejsu API unsplash, podczas gdy folder „Unsplash” będzie zawierał kod JavaScript do interakcji z interfejsem API. Upewnij się, że foldery te są umieszczone w odpowiedniej lokalizacji w strukturze katalogu projektu.

6. Wykonanie połączeń API w celu wyszukiwania zdjęć za pomocą API Unsplash jest stosunkowo proste. Korzystając z pakietu Unsplash-JS, możesz utworzyć instancję API UNSPLASH, przekazując klucz API jako parametr. Po wystąpieniu interfejsu API możesz użyć jego metod do wykonywania różnych rodzajów wywołań API. Na przykład możesz użyć „wyszukiwania.Getphotos „Metoda wyszukiwania zdjęć na podstawie zapytania. Możesz podać dodatkowe parametry, takie jak strona, strona i orientacja, aby udoskonalić wyniki wyszukiwania. Każde połączenie API zwraca odpowiedź, która zawiera dane, z którymi musisz pracować, takie jak adresy URL zdjęć.

7. Tak, można zapisać zwrócone zdjęcia z API Unsplash na lokalny dysk. Aby to osiągnąć, możesz użyć pakietu Fetch Node, który umożliwia pobieranie i pobieranie plików z zdalnego serwera. Po wykonaniu połączenia API i uzyskaniu adresu URL zdjęcia, które chcesz zapisać, możesz użyć pakietu Fetch w węźle, aby pobrać zdjęcie. Po pobraniu możesz zapisać go w żądanej lokalizacji na dniu lokalnym za pomocą technik manipulacji plikami dostarczonymi przez węzeł.JS. Pamiętaj, aby sprawdzić warunki API UNSPlash dla wszelkich ograniczeń użytkowania lub wymagań dotyczących atrybucji podczas zapisywania i korzystania z pobranych zdjęć.

8. Zapisując pobrane zdjęcie, ważne jest, aby uwzględnić właściwe przypisanie zgodnie z wytycznymi Unsplash. Unsplash ma szczególne wymagania dotyczące przypisywania, aby przypisać fotografom, którzy dostarczają swoich zdjęć do bezpłatnego użycia. Przypisanie powinno zazwyczaj zawierać nazwę fotografa i link do ich profilu Unsplash lub samego zdjęcia na Unsplash. Upewnij się, że dwukrotnie sprawdzaj konkretne wytyczne dotyczące atrybucji określone przez UNSPLASH i upewnij się, że przestrzegasz ich podczas korzystania z zdjęć w swoich projektach. Właściwe przypisanie nie tylko wypełnia obowiązki prawne, ale także uznaje pracę i wkład fotografa.

9. Pełny kod tego przewodnika, wraz z dowolnymi dodatkowymi zasobami, można znaleźć na GitHub. Dostarczone link skieruje Cię do repozytorium GitHub, w którym można uzyskać dostęp do kodu i dowolnej powiązanej dokumentacji. Kod zawiera przykłady uzyskania klawisza API UNSPLASH, zainstalowanie niezbędnych pakietów NPM i wykonanie połączeń API w celu wyszukiwania zdjęć. Dodatkowo obejmuje zapisywanie zwróconych zdjęć na lokalny dysk, przestrzegając wytycznych dotyczących atrybucji Unsplash i innych istotnych aspektów korzystania z API UNSPLASH.

10. Poprzedni samouczek z tej serii koncentruje się na korzystaniu z API Openai w JavaScript. Zapewnia wprowadzenie do korzystania z JavaScript do automatyzacji zadań blogowania i pokazuje, jak skonfigurować projekt pracy z API Openai. Chociaż nie jest to bezpośrednio związane z interfejsem API UNSPlash, poprzedni samouczek oferuje cenne wgląd w pracę z API w ogóle i prezentuje moc używania JavaScript do automatyzacji różnych zadań. Jeśli jeszcze nie przeszedłeś przez poprzedni samouczek, gorąco polecam sprawdzenie go, aby uzyskać kompleksowe zrozumienie koncepcji i technik zastosowanych w tej serii.

11. Podczas wykonywania połączeń API w celu wyszukiwania zdjęć za pomocą interfejsu API UNSPlash, masz elastyczność dostosowywania różnych parametrów. Na przykład możesz określić parametr strony, aby pobrać różne zestawy wyników wyszukiwania. Może to być przydatne podczas wdrażania paginacji lub jeśli chcesz uzyskać obrazy z różnych stron wyników wyszukiwania. Podobnie możesz ustawić parametr Per_Page, aby kontrolować liczbę zdjęć zwróconych na odpowiedź API. Umożliwia to zarządzanie ilością otrzymanych danych na podstawie konkretnych wymagań. Dodatkowo parametr orientacyjny pozwala filtrować zdjęcia na podstawie ich orientacji, takich jak krajobraz lub portret. Określając te parametry w połączeniach API, możesz dostosować wyniki, aby odpowiadały potrzebom projektu.

12. Tak, istnieją limity liczby żądań API, które możesz składać za pomocą API Unsplash, szczególnie w przypadku aplikacji demo. Limity te mają na celu zapobieganie nadużyciom i zapewnienie uczciwego wykorzystania interfejsu API. Po zarejestrowaniu wniosku i uzyskaniu klucza API zwykle będziesz mieć predefiniowany limit liczby żądań dozwolonych na godzinę lub dziennie. Konieczne jest przejrzenie dokumentacji API UNSPLASH lub Warunków usług, aby zrozumieć konkretne limity, które mają zastosowanie do Twojej aplikacji. Jeśli przewidujesz przekroczenie limitów domyślnych, może być konieczne zaktualizowanie konta lub zbadać alternatywne opcje dostarczone przez Unsplash w celu uzyskania większego zużycia objętości.

Początkujący’Przewodnik po API Unsplash w JavaScript

Możesz wyświetlić Unsplash’S Stats w czasie rzeczywistym, ale oto kilka punktów:

Czy Unsplash ma interfejs API

Оjed

Ыы зарегистрир John. С помощю этой страницы ыы сожем оRipееделить, что запросы оRтравляете имено ыы, а не роvert. Почем это могло пRроизойиS?

Эта страница отображается тех слччаях, когда автоматическими системамgz которые наршают усовия исполззования. Страница перестанеura. До этого момента для исползования слжжж Google неоtoś.

Источником запросов может слжить ведоносное по, подкbarów. ыылку заRzy. Еarag ы исползеете общий доступ и интернет, проблема может ыть с компюююеyn с таким жж жж жесом, кк у комszczeюююе000. Обратитеunks к соем системном адинистратору. Подроlit.

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

Początkujący’Przewodnik po API Unsplash w JavaScript

API Unsplash jest doskonałym narzędziem dla każdego programisty JavaScript, niezależnie od poziomu doświadczenia. Ułatwia to znalezienie i korzystanie z wysokiej jakości obrazów w twoich projektach. Ten przewodnik pokaże Ci krok po kroku, jak zainstalować bibliotekę Unsplash w twoim węźle.Projekt JS, wykonaj połączenia API, aby wyszukiwać zdjęcia i zapisać zwrócone obrazy na lokalnym dysk. Dzięki temu przewodnikowi szybko zostaniesz ekspertem w korzystaniu z API UNSPLASH.

Heads Up, ten samouczek jest drugą częścią mojej serii w zakresie korzystania z JavaScript do automatyzacji blogowania. Bardzo polecam sprawdzenie pierwszego samouczka, “Wprowadzenie do API Openai w JavaScript” przed kontynuowaniem, ponieważ obejmuje konfigurację projektu i daje wyobrażenie o tym, co my’Próbuję tutaj osiągnąć.

Pełny kod na GitHub można znaleźć pod tym linkiem.

Wymagania wstępne

• Podstawowa znajomość JavaScript
• Gotowy węzeł.Projekt JS
• Konto programisty Unsplash

Co ty’uczyć się

• Jak uzyskać klucz API Unsplash: Przejrzyj Cię przez proces tworzenia konta programistów Unsplash, abyś mógł wygenerować klucz API i uzyskać dostęp do biblioteki zdjęć UNSPLASH.
• Jak zainstalować odpowiednie pakiety NPM: Ty’Dowiedz się o różnych pakietach, które mogą pomóc zintegrować API UNSPLASH z projektem JavaScript.
• SNIPPETY KODOWEJ JAVASCRIPT dotyczące wykonywania wywołania API UNSPlash: Za pośrednictwem tego przewodnika, ty’LL zyskuj lepsze zrozumienie interfejsu API UNSPlash i sposobu wykonywania połączeń do wyszukiwania i zwrotu zdjęć w JavaScript. Także Jkod Avascript do zapisywania zwróconych zdjęć na dysk lokalny.

Uzyskaj klucz API UNSPLASH

1. Wejdź na stronę Unsplash i zarejestruj się na konto.
2. Po uzyskaniu konta przejdź do sekcji programistów witryny i kliknij “Zarejestruj nową aplikację” przycisk. (Uwaga: aplikacje demo są ograniczone do 50 Wymaga na godzinę.)
3. Po przesłaniu formularza otrzymasz klucz API, którego możesz użyć do dostępu do API UNSPLASH.

Zainstaluj pakiety NPM

W porządku, jako kontynuację ostatniego samouczka z tej serii, ty’LL musi uruchomić instalację węzła Unplash-JS w terminalu, aby zainstalować dwa kolejne pakiety NPM przed kontynuowaniem. To jest szybki krok’Upewnij się, że ty’Zakłada się, aby iść naprzód z tym samouczkiem i opierać się na tym, co ty’nauczył się wcześniej.

NPM instaluj fett insplash-js

Nasza struktura folderów obejmuje teraz nowy obrazy I Unsplash Foldery w projekcie. Powinno to wyglądać tak:

�� WordPress-Automation 
┣ ��Node_Modules 
┣ ��src 
┃ �� ��images 
┃ ┃ ┗ �� kodowanie na laptopie.jpg 
┃ �� ��openai 
┃ ┗ ┗ openai.JS 
┃ �� ��Unsplash 
┃ ┃ ��Unsplash.JS 
┣ .Env 
┣ .Gitignore 
┣ .Prettierrc 
┣ indeks.JS 
┣ Pakiet Pakiet.JSON 
┗ Pakiet.JSON 

Wykonaj połączenie API Unsplash i zapisz zwrócone zdjęcie

// Unsplash.JS

import < createApi >z &bdquo;unsplash-js&rdquo;;
importować pobieranie z &bdquo;węzłów&rdquo;;
importować FS z &bdquo;FS&rdquo;;


Klasa Eksport Unsplash Constructor (AccessKey) // Utwórz instancję API UNSPLASH za pomocą dostarczonego klucza dostępu 
Ten.unsplash = createapi (< accessKey, fetch >); 
>
 
Async getphoto (typ, zapytanie, strona = 1, per_page = 8, orientacja = &bdquo;krajobraz&rdquo;) Spróbuj // Wyślij żądanie do interfejsu API unsplash, aby wyszukiwać zdjęcia 
const response = czekaj na to.Unsplash.szukaj.Getphotos (zapytanie, 
strona, 
na stronę, 
orientacja, 
>);
 
// Wybierz losowe zdjęcie z odpowiedzi 
const arandomphoto = odpowiedź.odpowiedź.Wyniki [matematyka.podłoga (matematyka.Random () * 8)]; 
// Uzyskaj adres URL ze zdjęciami zwykłego rozmiaru 
const Photourl = arandomphoto.URL.regularny; 
// Pobierz zdjęcie 
const Photo = czekaj na Fetch (Photourl); 
// Zdobądź bufor fotograficzny 
const Photobuffer = czekaj na zdjęcie.arrayBuffer (); 
// Utwórz podpis dla zdjęcia - w stylu atrybucji Unsplash 
Const Caption = ` 
 
zdjęcie zrobione przez 
 
"rel =" noopener UGC nofollow "Target =" _ puste "> 
$ 
 
NA 
 
Unsplash 
 
`;;
 
// Sprawdź wartość parametru &bdquo;Typ&rdquo; i wykonaj odpowiedni blok kodu 
przełącznik (typ) Case &bdquo;Bufor&rdquo;: 
// Konwertuj bufor fotograficzny na uint8Array 
const data = new uint8Array (Photobuffer); 
konsola.log (`$.JPG Bufor Ready`); 
// Zwróć obiekt zawierający bufor i atrybuty zdjęcia 
Atrybuty powrotu: podpis: podpis, 
Tytuł: zapytanie.Tolowercase (), 
alt_text: `` Obraz $ ', 
>, 
Bufor: dane 
>; 
sprawa &bdquo;Plik&rdquo;: 
// Konwertuj bufor fotograficzny na bufor 
const obraz = bufor.z (Photobuffer); 
// Utwórz ścieżkę pliku dla zdjęcia 
const filepath = `Src/Images/$.jpg` 
// Zapisz zdjęcie do systemu plików 
czekają na fs.obietnice.WriteFile (FilePath, obraz); 
konsola.log (`$.jpg saved`); 
przerwa; 
domyślny: 
konsola.log (`` Nieprawidłowy typ: $ '); 
powrót NULL; 
> 
> Catch (błąd) konsola.log (błąd); 
powrót NULL; 
> 
>

>

W tej natychmiastowej klasie Unsplash.JS, Kod rozpoczyna się od importu niezbędnych modułów i pakietów:

• Metoda CreateAPI z pakietu Unsplash-JS służy do utworzenia instancji API UNSPLASH.
• Pakiet Fetch służy do złożenia żądania GET do pobrania zdjęcia.
• Wbudowany moduł FS (system plików) służy do utworzenia strumienia zapisu, aby zapisać zdjęcie.

Następnie definiuję funkcję asynchroniczną getphoto, która owija cały kod. Wewnątrz funkcji używam bloku TRY-Catch, aby obsłużyć każdy błąd, który może wystąpić podczas składania żądań lub zapisywania zdjęcia.

Wewnątrz bloku próbuję, używam wyszukiwania.GetPhotos (PARAMS) Metoda interfejsu API UNSPLASH do wyszukiwania zdjęć z zapytaniem parametrów, strony, strony i orientacji .

Możesz także dostosować stronę Per_Page, orientację i zapytanie, aby uzyskać konkretne zdjęcia, które chcesz, a także możesz sprawdzić odpowiedź JSON dla wyniku i możesz użyć różnych rozmiarów obrazu, zmieniając adresy URL.Surowe, URL.Pełne, URL.Regularne itp.

Następnie używam pakietu Fetch, aby uzyskać żądanie GET do linku do pobrania zdjęcia, zapewniając randomizowany regularny rozmiar zdjęcia za pomocą Arandomphoto.URL.regularnie i czekam na odpowiedź.

Metoda ArrayBuffer () jest zdobycie bufora fotograficznego.

Używam FS.obietnice.Metoda WriteFile (FilePath, Image) Aby zapisać zdjęcie na dysk lokalny, zapisza bufor do pliku.

W przypadku jakiejkolwiek awarii używam bloku połowowego, aby zarejestrować błąd do konsoli.

Porady: Jeśli chcesz losowo wybrać jedno ze zdjęć zwróconych przez API, możesz użyć matematyki.podłoga (matematyka.Metoda Random () * 8). Wygeneruje to liczbę losową między 0 a 9, która może być używana jako indeks wyniku, który chcesz wybrać.

// indeks.JS

import < Unsplash >z "./src/unsplash/unsplash.js ";
importować dotenv z &bdquo;dotenv&rdquo;;
Dotenv.config ();

const unsplash = nowy Unsplash (proces.Env.Unsplash_key);
czekaj na Unsplash.getPhoto (&bdquo;plik&rdquo;, &bdquo;kodowanie na laptopie&rdquo;);

Tak jak w pierwszym samouczku, w indeks.JS Plik, zaimportowaliśmy Unsplash.JS klasa i stworzył nową instancję, przekazując Unsplash_Key . Zapisaliśmy klucz API w .Env plik do dodania bezpieczeństwa. Następnie przeprowadziliśmy metodę GetPhoto, przekazując rodzaj odpowiedzi, którą potrzebujemy, i wyrażenie wyszukiwania zdjęcia. I voila! Zapisaliśmy obraz o nazwie Kodowanie na laptopie.jpg W folderze SRC/ Images/.

Wniosek

API Unsplash to potężne narzędzie, które ułatwia znalezienie i korzystanie z pięknych obrazów w twoich projektach. Pakiet UNSPLASH-JS upraszcza proces wykonywania połączeń API w JavaScript.

W tym przewodniku nauczyłeś się instalować niezbędne pakiety, tworzyć połączenia API w celu wyszukiwania zdjęć i zapisywania zwróconych obrazów na dysk lokalny. Nauczyłeś się również, jak radzić sobie z błędami i jak uzyskać dostęp do losowego zdjęcia z wyników zwróconych przez API.

W następnym kroku możesz opierać się na tym i zbadać więcej opcji dostępnych w API UNSPLASH, takich jak paginacja, pobierz zdjęcia różnych rozmiarów, pobierz zdjęcia różnej orientacji, a także możesz użyć zdjęć do użytku komercyjnego i niekomercyjnego, postępując zgodnie z wytycznymi dostarczonymi przez Unsplash. Możesz także spróbować użyć interfejsu API z różnymi bibliotekami, takimi jak AXIOS i zbadać inne funkcje dostarczone przez API UNSPLASH.

Dalsze odczyty

Automatyzacja blogów z serią samouczków JavaScript

• API Openai (Część IIczęść druga): Zautomatyzowane generowanie treści
• API UNSPlash: Zautomatyzowany wybór obrazów dla postów na blogu
• API WordPress: Bez wysiłku przesyłanie treści blogów
• Automatyzacja blogów: Połącz wszystko

Oficjalne dokumentacje

�� Unsplash’S API

Unsplash to najszybciej rozwijająca się biblioteka o wartości ponad 900 tys.+, Jakości, wysokiej rozdzielczości, bez licencji na świecie. Każde zdjęcie na Unsplash jest bezpłatne, zarówno do użytku osobistego, jak i komercyjnego. Brak płatności i nie wymaga subskrypcji licencji.

Unsplash sprawia, że ​​doświadczenie w znajdowaniu jakości, użytecznej fotografii jest łatwiejsze, szybsze i lepsze niż kiedykolwiek, dlatego to dlatego’zaufany przez świat’najlepsze zespoły i produkty dla twórców.

Statystyki

Możesz wyświetlić Unsplash’S Stats w czasie rzeczywistym, ale oto kilka punktów:

�� Zdjęcia na Unsplash są wkładane przez Over 127K+ Fotografów i używane przez Ponad 70 milionów kreacji
⚡ 11 miliardów+ zdjęć są podawane co miesiąc
⬇️ 55 milionów zdjęć są pobierane co miesiąc
�� 20 zdjęć są pobierane co sekundę (dla kontekstu to’S wielkość stadego Adobe, Shutterstock i Getty łącznie)

Biblioteka Unsplash

Jakość biblioteki i dostępność jest tym, co odróżnia Unsplash od tradycyjnych witryn stockowych, które istnieją dzisiaj.

• Ręczna kuracja
  Nasz zespół redakcyjny kursuje każde zdjęcie dystrybuowane na Unsplash, aby zapewnić aktualizację naszej biblioteki o autentyczne, światowej klasy, wysokiej rozdzielczości. Nigdy więcej tandetnych, stock photos. Koncentrujemy się na jakości, a nie ilości.
• Dostępność
  Wszystkie zdjęcia są licencjonowane na licencji UNSPLASH, co czyni je bezpłatnymi zarówno dla zastosowań osobistych, jak i komercyjnych. Brak potrzeby płatności lub mylących licencji z datami ważności.
• Treść gwarantowana bezpieczna do pracy
  Zdjęcia Unsplash są PG-13 i ręcznie przeglądane przed ekspozycją na Unsplash lub dystrybuowane za pośrednictwem Unsplash’S API. Nasz interfejs API może również pobrać niestandardowe kolekcje zdjęć, aby jeszcze bardziej zagwarantować jakość i bezpieczeństwo.
• Wyłączność zdjęcia
  Unsplash’Biblioteka S jest wyłącznie dla UNSPLASH – co oznacza, że ​​żadna inna strona ze zdjęciami. Partnerstwo z Unsplash oznacza, że ​​masz dostęp do unikalnych, pięknych treści.

Studia przypadków API

Unsplash’S API to Najsilniejszy silnik fotograficzny na świecie z ponad 1000 partnerów, ponad 1 miliardami połączeń miesięcznie i 99.998% aktualizacji w ciągu ostatnich 30 dni.

Korzystanie z interfejsu API unsplash do wyszukiwania zdjęć w aplikacji React

Niedawno otrzymałem zadanie dodania funkcji do aplikacji, która dałaby użytkownikom możliwość wyboru obrazu do zapisania z obiektem. Na szczęście wybór API zależył od mnie! Niestety, miałem’T naprawdę wcześniej pracował z dowolnymi interfejsami API obrazu! Tak więc, jak można się domyślać, zacząłem bawić się z API Unsplash – i ja’M tutaj, aby podzielić się moim doświadczeniem za pomocą tego bardzo łatwego w użyciu interfejsu, szczególnie w kontekście włączenia go do projektu React.

Rozpoczęcie pracy

Aby uzyskać dostęp do interfejsu API, najpierw wskocz na stronę programistów Unsplash i utwórz konto. Po skonfigurowaniu konta, ty’LL musi zarejestrować swoją aplikację – pamiętaj, że choć początkowo w trybie demo będziesz ograniczony do 50 żądań na godzinę (co znalazłem więcej niż wystarczające do testowania itp.). Następnie, na stronie dla aplikacji, którą właśnie zarejestrowałeś, zwróć uwagę na dwa unikalne klucze’otrzymał dostęp do API, ‘Klucz dostępu’ i ‘Sekretny klucz,’ które ty’potrzeba, gdy składasz określone żądania, w zależności od wymaganych uprawnień.

Ponieważ my’W szczególności patrząc na włączenie tego do aplikacji React, niech’s skorzystaj z opakowania JavaScript dla API. Aby dodać go do projektu/pakietu.plik JSON:

$ npm instaluj unsplash-JS

Ta biblioteka bardzo łatwo ułatwia interakcję z interfejsem API, tworząc instancję obiektu Unsplash, który zawiera Twoje klucze aplikacji/autoryzacji, na których można wywołać różne metody naciśnięcia określonych punktów końcowych i wykonywania niektórych zadań.

Wyszukiwanie słowa kluczowe

API ma niesamowitą głębię funkcjonalności, ale my’Skoncentruj się tylko na jednym zadaniu – wyszukiwanie zdjęć według danego słowa kluczowego. Punkt końcowy, który my’W tym przypadku trafienie to:

Pobierz https: // API.Unsplash.com/wyszukiwanie/zdjęcia

Paramenty, które możemy wysłać wraz z żądaniem, obejmują: zapytanie, które jest wyszukiwaniami, stroną i per_page, które są numerem strony do pobrania i liczbą pozycji’D chciałbym zwrócić na stronę. Oba te paramenty są opcjonalne, domyślnie odpowiednio do 1 i 10. Możesz także przejść identyfikatory kolekcji, aby zawęzić wyszukiwanie do określonych kolekcji, a także orientację, aby odzyskać tylko krajobraz, portret lub zdjęcia zorientowane na kwadratowe.

Na przykład wyszukiwanie zdjęć ze słowem kluczowym ‘psy,’ W tym wartości domyślne dla strony i page, wyglądałoby tak:

Pobierz https: // API.Unsplash.com/wyszukiwanie/zdjęcia?Zapytanie = psy

Który następnie zwraca taki obiekt:

 „Total”: 30536, 
„Total_Pages”: 3054, 
"wyniki": [ 
 „ID”: „Do2WTAWCTC4”, 
„Created_at”: „2019-03-25T12: 30: 46-04: 00”, 
„Update_at”: „2019-05-17T19: 52: 55-04: 00”, 
„Szerokość”: 4000, 
„Wysokość”: 5000, 
„Kolor”: „#261d16”, 
„Opis”: Null, 
„Alt_description”: „Szara i biała husky pitna woda z pudełkowanego kartonu wodnego”, 
„URL”: „Raw”: „https: // obrazy.Unsplash.COM/Photo-1553531384-411A247CCD73?IXLIB = RB-1.2.1 i ixid = eyjhchbfawqioJCymdi4fq ", 
„Pełny”: „https: // obrazy.Unsplash.COM/Photo-1553531384-411A247CCD73?IXLIB = RB-1.2.1 & Q = 85 i fm = jpg & crop = entropy & cs = srgb & ixid = eyjhchbfawqioJCymdi4fq ", 
„Regularne”: „https: // obrazy.Unsplash.COM/Photo-1553531384-411A247CCD73?IXLIB = RB-1.2.1 & Q = 80 i fm = jpg & crop = entropy & cs = tinysrgb & w = 1080 & fit = max i ixid = eyjhchbfawqioJCymdi4fq ", 
„Małe”: „https: // obrazy.Unsplash.COM/Photo-1553531384-411A247CCD73?IXLIB = RB-1.2.1 & Q = 80 i fm = jpg & crop = entropy & cs = tinysrgb & w = 400 & fit = max & ixid = eyjhchbfawqioJCymdi4fq ", 
„Kciuk”: „https: // obrazy.Unsplash.COM/Photo-1553531384-411A247CCD73?IXLIB = RB-1.2.1 i Q = 80 i fm = jpg & crop = entropy & cs = tinysrgb & w = 200 & fit = max & ixid = eyjhchbfawqioJCymdi4fq " 
>, 
„Linki”: „self”: „https: // api.Unsplash.com/zdjęcia/do2wtawctc4 ", 
„html”: „https: // unsplash.com/zdjęcia/do2wtawctc4 ", 
„Pobierz”: „https: // unsplash.com/zdjęcia/do2wtawctc4/pobierz ", 
„Download_Location”: „https: // API.Unsplash.com/zdjęcia/do2wtawctc4/pobierz " 
>,// . 

Zatem z tablicy wyników możemy pobrać linki, tagi, opisy itp. Z każdego zdjęcia zwrócono dość łatwo.

Ale zanim dotrzemy tak daleko, najpierw musimy skonfigurować rzeczy w naszej aplikacji React. Utwórz instancję Unsplash z kluczem dostępu i tajnym kluczem:

importować Unsplash z „Unsplash-JS”;

const unsplash = nowy unsplash (ApplicingId: „”, 
Secret: „”
>);

Ta biblioteka zawiera również integracja Native React-podczas korzystania, po prostu importuj z Unsplash-JS/Native zamiast tego.

Teraz możemy po prostu wywołać różne metody instancji na Unsplash, które zapewniają dostęp do punktów końcowych API. W naszym przypadku my’Ponownie wyszukiwanie zdjęć według słowa kluczowego, więc my’LL używa wyszukiwania.Zdjęcia (słowo kluczowe, strona, per_page) . Ta metoda przyjmuje do trzech argumentów – słowo kluczowe, ciąg, który jest wymagany, podczas gdy pozostałe dwa argumenty, strona i strona są opcjonalne.

Unsplash.szukaj.Zdjęcia („koty”, 1) 
.Następnie (Tojson) 
.Następnie (json => // zrób coś z obiektem JSON 
>);

Powyższy kod wykorzystuje również poręczną metodę pomocniczą Tojson, która wykonuje zadanie przekształcenia odpowiedzi interfejsu API na dane JSON – zwykle wykonywane z czymś zgodnie.JSON () . Aby użyć tej metody pomocniczej, po prostu zaimportuj ją również z Unsplash-JS:

importować Unsplash, < toJson >z &bdquo;Unsplash-JS

I to’to! Teraz ty’dostałem obiekty fotograficzne, z którymi możesz robić wszystko, co pragnie Twojego serca!