Panduan Pemula untuk Unsplash API di JavaScript

Ringkasan:

Dalam panduan ini, saya akan memandu Anda melalui proses menggunakan API Unsplash di JavaScript. Kami akan membahas topik -topik seperti mendapatkan kunci API, menginstal paket NPM yang diperlukan, dan melakukan panggilan API untuk mencari foto. Selain itu, kami akan belajar cara menyimpan gambar yang dikembalikan ke drive lokal Anda.

Poin -Poin Kunci:

1. Unsplash API adalah alat yang ampuh bagi pengembang JavaScript untuk menemukan dan menggunakan gambar berkualitas tinggi dalam proyek mereka.

2. Panduan ini berfokus pada menginstal dan menggunakan perpustakaan Unsplash di sebuah node.Proyek JS.

3. Disarankan untuk memiliki pengetahuan dasar tentang JavaScript sebelum memulai dengan API Unsplash.

4. Anda akan memerlukan akun pengembang Unsplash untuk mengakses API.

5. Seri tutorial tentang menggunakan JavaScript untuk mengotomatiskan blogging mencakup tutorial sebelumnya tentang API OpenAI, yang layak untuk dicoba.

6. Kode lengkap untuk panduan ini dapat ditemukan di github.

7. Untuk menggunakan API Unsplash, instal paket NPM yang relevan seperti Unsplash-Js dan Node-Fetch.

8. Struktur folder untuk proyek Anda harus mencakup gambar dan folder Unsplash.

9. Anda dapat memperoleh kunci API Unsplash dengan mendaftar untuk akun dan mendaftarkan aplikasi baru di situs web Unsplash.

10. Setelah mendapatkan kunci API, buat instance API Unsplash dalam kode JavaScript Anda.

11. Lakukan panggilan API untuk mencari foto menggunakan API Unsplash dan ambil foto yang dikembalikan di JavaScript.

12. Anda dapat menyesuaikan parameter panggilan API, seperti halaman, per_page, dan orientasi.

13. Pilih foto acak dari respons dan ambil URL -nya.

14. Gunakan paket Node-Fetch untuk mengunduh foto dan simpan di drive lokal Anda.

15. Ingatlah untuk memasukkan atribusi yang tepat untuk foto sesuai dengan pedoman Unsplash.

Pertanyaan:

1. Apa API Unsplash?
API Unsplash adalah alat yang memungkinkan pengembang JavaScript untuk menemukan dan menggunakan gambar berkualitas tinggi dalam proyek mereka.

2. Pengetahuan apa yang diperlukan untuk mulai menggunakan API Unsplash?
Pengetahuan dasar JavaScript direkomendasikan sebelum menggunakan API Unsplash.

3. Bagaimana Saya Bisa Mendapatkan Kunci API Unsplash?
Untuk mendapatkan kunci API Unsplash, Anda harus mendaftar ke akun di situs web Unsplash dan mendaftarkan aplikasi baru.

4. Paket NPM apa yang diperlukan untuk mengintegrasikan API Unsplash?
Anda perlu menginstal paket unsclash-js dan node-fetch untuk mengintegrasikan API Unsplash ke dalam proyek JavaScript Anda.

5. Dapatkah Anda menyediakan struktur folder untuk proyek menggunakan API Unsplash?
Proyek harus menyertakan folder seperti gambar dan unsplash, bersama dengan file lain yang diperlukan.

6. Bagaimana cara membuat panggilan API untuk mencari foto menggunakan API Unsplash?
Anda dapat melakukan panggilan API menggunakan metode yang disediakan oleh API Unsplash, menentukan parameter seperti kueri dan halaman.

7. Apakah mungkin untuk menyimpan foto yang dikembalikan dari API Unsplash ke drive lokal saya?
Ya, Anda dapat menggunakan paket node-fetch untuk mengunduh foto dan menyimpannya ke drive lokal Anda.

8. Apa yang harus saya sertakan dalam judul untuk foto yang diunduh?
Keterangan harus mencakup atribusi ke fotografer sesuai dengan pedoman Unsplash.

9. Bagaimana Saya Dapat Mengakses Kode Lengkap Untuk Panduan Ini?
Kode lengkap untuk panduan ini dapat ditemukan di github menggunakan tautan yang disediakan.

10. Dapatkah Anda menjelaskan tujuan tutorial sebelumnya tentang API OpenAI?
Tutorial sebelumnya dalam seri ini mencakup pengaturan proyek dan memberikan gambaran tentang apa yang kami coba capai dengan otomatisasi javascript.

11. Bagaimana saya bisa menyesuaikan parameter panggilan API, seperti halaman dan orientasi?
Anda dapat memberikan nilai yang berbeda untuk parameter seperti halaman dan orientasi saat melakukan panggilan API.

12. Apakah ada batasan jumlah permintaan API yang dapat saya buat dengan API Unsplash?
Ya, ada batasan jumlah permintaan API per jam untuk aplikasi demo. Pastikan untuk memeriksa dokumentasi untuk detailnya.

Jawaban:

1. API Unsplash adalah alat yang ampuh yang memungkinkan pengembang JavaScript untuk dengan mudah menemukan dan menggunakan gambar berkualitas tinggi dalam proyek mereka. Apakah Anda seorang pemula atau pengembang yang berpengalaman, API Unsplash dapat sangat meningkatkan proyek Anda dengan menyediakan perpustakaan besar gambar yang digunakan untuk digunakan. Ini menghilangkan kebutuhan untuk mencari gambar secara manual dan memberikan cara mudah untuk mengintegrasikan gambar langsung ke dalam kode Anda.

2. Sebelum menyelam menggunakan API Unsplash, disarankan untuk memiliki pengetahuan dasar tentang JavaScript. Ini akan membantu Anda memahami dan bekerja dengan cuplikan kode JavaScript yang digunakan dalam panduan ini. Jika Anda baru mengenal JavaScript, ada banyak sumber daya online dan tutorial yang tersedia yang dapat membantu Anda memulai. Layak berinvestasi dalam mempelajari dasar -dasar JavaScript sebelum melanjutkan lebih lanjut.

3. Untuk mengakses API Unsplash, Anda akan memerlukan kunci API. Memperoleh kunci API adalah proses langsung. Pertama, buka situs web Unsplash dan daftar untuk akun. Setelah Anda memiliki akun, arahkan ke bagian pengembang situs web. Di sini, Anda akan menemukan opsi untuk mendaftarkan aplikasi baru. Klik tombol “Daftarkan Aplikasi Baru” dan isi detail yang diperlukan. Setelah mengirimkan formulir, Anda akan diberi kunci API yang dapat Anda gunakan untuk mengakses API Unsplash.

4. Untuk mengintegrasikan API Unsplash ke dalam proyek JavaScript Anda, ada beberapa paket NPM yang perlu Anda instal. Paket-paket ini adalah Unsplash-Js dan Node-Fetch. Paket Unsplash-Js menyediakan pembungkus untuk API Unsplash, membuatnya lebih mudah untuk berinteraksi dengan API dari kode JavaScript Anda. Paket Node-Fetch digunakan untuk membuat permintaan HTTP ke API Unsplash dan mengambil data yang diinginkan. Untuk menginstal paket-paket ini, navigasikan ke direktori proyek Anda di terminal dan jalankan perintah “NPM menginstal Node-Fetch Unsplash-Js”. Ini akan menginstal paket yang diperlukan dan menambahkannya ke dependensi proyek Anda.

5. Saat bekerja dengan API Unsplash di sebuah node.Proyek JS, penting untuk mengatur file dan folder Anda dengan benar. Seiring dengan file proyek Anda yang ada, Anda harus membuat dua folder baru – “gambar” dan “Unsplash”. Folder “Gambar” akan digunakan untuk menyimpan foto yang diunduh dari API Unsplash, sedangkan folder “Unsplash” akan berisi kode JavaScript untuk berinteraksi dengan API. Pastikan folder ini ditempatkan di lokasi yang sesuai di dalam struktur direktori proyek Anda.

6. Membuat panggilan API untuk mencari foto menggunakan API Unsplash relatif mudah. Menggunakan paket Unsclash-Js, Anda dapat membuat instance API Unsplash dengan meneruskan kunci API Anda sebagai parameter. Setelah Anda memiliki instance API, Anda dapat menggunakan metodenya untuk membuat berbagai jenis panggilan API. Misalnya, Anda dapat menggunakan “Pencarian.Metode GetPhotos “untuk mencari foto berdasarkan kueri. Anda dapat memberikan parameter tambahan seperti halaman, per_page, dan orientasi untuk memperbaiki hasil pencarian Anda. Setiap panggilan API mengembalikan respons, yang berisi data yang perlu Anda kerjakan, seperti URL foto.

7. Ya, dimungkinkan untuk menyimpan foto yang dikembalikan dari API Unsplash ke drive lokal Anda. Untuk mencapai ini, Anda dapat menggunakan paket Node-Fetch, yang memungkinkan Anda mengambil dan mengunduh file dari server jarak jauh. Setelah melakukan panggilan API dan mendapatkan URL foto yang ingin Anda simpan, Anda dapat menggunakan paket Node-Fetch untuk mengunduh foto. Setelah diunduh, Anda dapat menyimpannya ke lokasi yang Anda inginkan di drive lokal menggunakan teknik manipulasi file yang disediakan oleh Node.JS. Ingatlah untuk memeriksa syarat dan ketentuan API Unsplash untuk segala pembatasan penggunaan atau persyaratan atribusi saat menyimpan dan menggunakan foto yang diunduh.

8. Saat menyimpan foto yang diunduh, penting untuk memasukkan atribusi yang tepat sesuai pedoman Unsplash. Unsplash memiliki persyaratan khusus untuk atribusi untuk memberikan kredit kepada fotografer yang memberikan gambar mereka untuk penggunaan gratis. Atribusi biasanya harus menyertakan nama fotografer dan tautan ke profil Unsplash mereka atau foto itu sendiri di Unsplash. Pastikan untuk memeriksa ulang pedoman atribusi spesifik yang dinyatakan oleh Unsplash dan memastikan bahwa Anda mematuhi mereka saat menggunakan foto dalam proyek Anda. Atribusi yang tepat tidak hanya memenuhi kewajiban hukum tetapi juga mengakui pekerjaan dan kontribusi fotografer.

9. Kode lengkap untuk panduan ini, bersama dengan sumber daya tambahan apa pun, dapat ditemukan di GitHub. Tautan yang disediakan akan mengarahkan Anda ke repositori GitHub di mana Anda dapat mengakses kode dan dokumentasi terkait apa pun. Kode ini mencakup contoh cara mendapatkan kunci API Unsplash, instal paket NPM yang diperlukan, dan lakukan panggilan API untuk mencari foto. Selain itu, ini mencakup menghemat foto yang dikembalikan ke drive lokal Anda, mematuhi pedoman atribusi Unsplash, dan aspek -aspek lain yang relevan dengan menggunakan API Unsplash.

10. Tutorial sebelumnya dalam seri ini berfokus pada penggunaan API OpenAI di JavaScript. Ini memberikan pengantar untuk menggunakan JavaScript untuk mengotomatisasi tugas blogging dan menunjukkan cara mengatur proyek untuk bekerja dengan API OpenAI. Meskipun tidak terkait langsung dengan API Unsplash, tutorial sebelumnya menawarkan wawasan yang berharga untuk bekerja dengan API secara umum dan menampilkan kekuatan menggunakan JavaScript untuk mengotomatisasi berbagai tugas. Jika Anda belum melalui tutorial sebelumnya, saya sangat merekomendasikan untuk memeriksanya untuk mendapatkan pemahaman yang komprehensif tentang konsep dan teknik yang digunakan dalam seri ini.

11. Saat melakukan panggilan API untuk mencari foto menggunakan API Unsplash, Anda memiliki fleksibilitas untuk menyesuaikan berbagai parameter. Misalnya, Anda dapat menentukan parameter halaman untuk mengambil set hasil pencarian yang berbeda. Ini bisa berguna saat menerapkan pagination atau saat Anda ingin mendapatkan gambar dari berbagai halaman hasil pencarian. Demikian pula, Anda dapat mengatur parameter per_page untuk mengontrol jumlah foto yang dikembalikan per API. Ini memungkinkan Anda untuk mengelola jumlah data yang Anda terima berdasarkan persyaratan spesifik Anda. Selain itu, parameter orientasi memungkinkan Anda untuk menyaring foto berdasarkan orientasinya, seperti lanskap atau potret. Dengan menentukan parameter ini dalam panggilan API Anda, Anda dapat menyesuaikan hasil yang sesuai dengan kebutuhan proyek Anda.

12. Ya, ada batasan jumlah permintaan API yang dapat Anda buat dengan API Unsplash, terutama untuk aplikasi demo. Batas -batas ini dirancang untuk mencegah penyalahgunaan dan memastikan penggunaan API yang adil. Saat Anda mendaftarkan aplikasi Anda dan mendapatkan kunci API, Anda biasanya akan memiliki batas yang telah ditentukan pada jumlah permintaan yang diizinkan per jam atau per hari. Sangat penting untuk meninjau dokumentasi API Unsplash atau Ketentuan Layanan untuk memahami batasan spesifik yang berlaku untuk aplikasi Anda. Jika Anda mengantisipasi melebihi batas default, Anda mungkin perlu meningkatkan akun Anda atau menjelajahi opsi alternatif yang disediakan oleh Unsclash untuk penggunaan volume yang lebih tinggi.

Seorang pemula’S Guide to Unsplash API di JavaScript

Anda dapat melihat Unsplash’S Statistik secara real-time, tetapi di sini ada beberapa poin:

Apakah Unsplash memiliki API

Об этой страницental

Ы заре kondecedit. С помощю этой страницы с сожем определить, что запросы о о ancing оеет иенно ы,. Почем это мопо произойтиonya?

Ээ страница отображается в тех слчаях, когда автомически систе secara google ристрюи uman рисисilan рancing рancing рancing рancing рancing рancing рancing рancing рancing рancing рancing рancing рancing рancing рancing рancing рancing рии и menelepon которые наршают уловия исполззованияisah. Страница перестанет отображаться после то A, как эти запросы прекратяupanisah яяisah ancing ancing. До это A.

Источником запросов может слжить Врддносно secara п, пар иа бас00 иасазаз) ыылку запросов. Если Вы исползеет общий дсст в и итернет, проблем м ы ы ip ip ip00 ip ip ip ip ip uman ip ip ip ip ip ip uman ip ip ip ip ip ip ip uman ip ip ip ip ip ip ip ON ip ip ip ip ip ip ON. Обратитесь к своем системном аинистратору. Подробнее secara.

Пожет такжeda появлят secara, если Вы Вонот A рлжвввв dari рыч о оаilat оыч о оаilat, еами, ии же Водитedit запросы чень часто засто.

Seorang pemula’S Guide to Unsplash API di JavaScript

API Unsplash adalah alat yang hebat untuk setiap pengembang JavaScript, terlepas dari tingkat pengalaman mereka. Itu membuatnya mudah ditemukan dan menggunakan gambar berkualitas tinggi dalam proyek Anda. Panduan ini akan menunjukkan kepada Anda, langkah demi langkah, cara menginstal perpustakaan Unsplash di node Anda.Proyek JS, melakukan panggilan API untuk mencari foto, dan menyimpan gambar yang dikembalikan ke drive lokal Anda. Dengan panduan ini, Anda akan dengan cepat menjadi ahli dalam menggunakan API Unsplash.

Kepala, tutorial ini adalah bagian kedua dari seri saya tentang menggunakan JavaScript untuk mengotomatiskan blogging. Saya sangat merekomendasikan memeriksa tutorial pertama, “Pengantar API Openai di JavaScript” sebelum melanjutkan karena mencakup pengaturan proyek dan memberi Anda gambaran tentang apa yang kami’mencoba untuk mencapai di sini.

Anda dapat menemukan kode lengkap di github di tautan ini.

Prasyarat

• Pengetahuan Dasar JavaScript
• Simpul siap untuk pergi.Proyek JS
• Akun Pengembang Unsplash

Apa kamu’ll belajar

• Cara mendapatkan kunci API Unsplash: memandu Anda melalui proses membuat akun pengembang Unsplash, sehingga Anda dapat menghasilkan kunci API dan mengakses perpustakaan foto Unsplash.
• Cara menginstal paket NPM yang relevan: Anda’ll pelajari tentang berbagai paket yang dapat membantu Anda mengintegrasikan API Unsplash ke dalam proyek JavaScript Anda.
• Cuplikan kode JavaScript untuk melakukan panggilan API Unsplash: Melalui panduan ini, Anda’ll mendapatkan pemahaman yang lebih baik tentang API Unsplash dan cara membuat panggilan untuk mencari dan mengembalikan foto di JavaScript. Juga, jKode Avascript untuk menyimpan foto yang dikembalikan ke drive lokal Anda.

Dapatkan kunci API Unsplash

1. Pergi ke situs web Unsplash dan daftar untuk akun.
2. Setelah Anda memiliki akun, kunjungi bagian pengembang situs web dan klik pada “Daftarkan aplikasi baru” tombol. (Catatan: aplikasi demo terbatas 50 reqests per jam.)
3. Setelah Anda mengirimkan formulir, Anda akan diberikan kunci API yang dapat Anda gunakan untuk mengakses API Unsplash.

Instal Paket NPM

Baiklah, sebagai tindak lanjut dari tutorial terakhir dalam seri ini, Anda’LL perlu menjalankan NPM Instal Unsplash-Js Node-Fetch di terminal Anda untuk menginstal dua paket NPM lagi sebelum melanjutkan. Ini adalah langkah cepat’ll pastikan Anda’Re semua siap untuk bergerak maju dengan tutorial ini dan membangun apa yang Anda’telah belajar sebelumnya.

NPM menginstal unsplash-js node-fetch

Struktur folder kami sekarang termasuk yang baru gambar-gambar Dan Unsplash folder dalam proyek. Seharusnya terlihat seperti ini:

��WordPress-otomasi 
┣ ��node_modules 
┣ ��Src 
┃ ┣ ��Images 
┃ ┃ ┗ �� �� �� �� ┗ ┗ ┗ ┗ ┗ ┗ ┗ ┗ ┗ ┗ ┗ ┗ ┗ ┗.jpg 
┃ ┣ ��openai 
┃ ┃ ┗ openai.JS 
┃ ┣ ��unsplash 
┃ ┃ ┗ ��unsplash.JS 
┣ .Env 
┣ .gitignore 
┣ .prettierrc 
┣ Indeks.JS 
┣ Paket-kunci.json 
┗ Paket.json 

Lakukan panggilan API Unsplash dan simpan foto yang dikembalikan

// Unsplash.JS

impor < createApi >dari 'Unsplash-js';
Impor Fetch dari 'Node-Fetch';
Impor FS dari 'FS';


Kelas Ekspor Konstruktor Unsplash (AccessKey) // Buat instance API Unsplash menggunakan kunci akses yang disediakan 
ini.unsplash = createapi (< accessKey, fetch >); 
>
 
async getPhoto (ketik, kueri, halaman = 1, per_page = 8, orientasi = 'lansekap') Coba // Kirim permintaan ke API Unsplash untuk mencari foto 
respons const = menunggu ini.Unsplash.mencari.getPhotos (kueri, 
halaman, 
per halaman, 
orientasi, 
>);
 
// Pilih foto acak dari respons 
const arandomphoto = respons.tanggapan.Hasil [Matematika.Lantai (Matematika.acak () * 8)]; 
// Dapatkan URL foto ukuran biasa 
const photourl = arandomphoto.URL.reguler; 
// Ambil fotonya 
Const Photo = Await Fetch (Photourl); 
// Dapatkan buffer foto 
const photobuffer = menunggu foto.arrayBuffer (); 
// Buat teks untuk foto - dengan gaya atribusi Unsplash 
Const Caption = ` 
 
foto oleh 
 
"rel =" noopener ugc nofollow "target =" _ blank "> 
$ 
 
pada 
 
Unsplash 
 
`;
 
// Periksa nilai parameter "type" dan jalankan blok kode yang sesuai 
sakelar (type) case 'buffer': 
// Konversikan buffer foto ke UInt8Array 
Data const = uint8Array baru (photoBuffer); 
menghibur.log (`$.jpg buffer siap`); 
// Kembalikan objek yang berisi buffer dan atribut foto 
Atribut Kembali: Keterangan: Keterangan, 
Judul: Kueri.Tolowercase (), 
alt_text: `gambar $`, 
>, 
Buffer: Data 
>; 
'File' kasus: 
// Konversi buffer foto menjadi buffer 
gambar const = buffer.dari (photobuffer); 
// Buat jalur file untuk foto 
const filepath = `src/gambar/$.jpg` 
// Tulis foto ke sistem file 
Tunggu FS.janji.WriteFile (FilePath, Image); 
menghibur.log (`$.jpg disimpan`); 
merusak; 
bawaan: 
menghibur.log (`tipe tidak valid: $`); 
kembali nol; 
> 
> Tangkap (Kesalahan) Konsol.log (kesalahan); 
kembali nol; 
> 
>

>

Di kelas ini Unsplash.JS, Kode dimulai dengan mengimpor modul dan paket yang diperlukan:

• Metode CreateApi dari paket Unsplash-Js digunakan untuk membuat instance API Unsplash.
• Paket pengambilan digunakan untuk membuat permintaan dapat mengunduh foto.
• Modul fs (sistem file) bawaan digunakan untuk membuat aliran tulis untuk menyimpan foto.

Kemudian, saya mendefinisikan fungsi async getPhoto yang membungkus seluruh kode. Di dalam fungsi, saya menggunakan blok mencoba-tangkapan untuk menangani kesalahan apa pun yang mungkin terjadi saat membuat permintaan atau menyimpan foto.

Di dalam blok coba, saya menggunakan pencarian.Metode GetPhotos (params) dari API Unsplash untuk mencari foto dengan kueri parameter, halaman, per_page dan orientasi .

Anda juga dapat menyesuaikan per_page, halaman, orientasi, dan permintaan untuk mendapatkan foto spesifik yang Anda inginkan dan juga Anda dapat memeriksa respons JSON untuk hasilnya dan dapat menggunakan berbagai ukuran gambar dengan mengubah URLS.RAW, URLS.penuh, url.biasa, dll.

Kemudian, saya menggunakan paket fetch untuk membuat permintaan get ke tautan unduhan foto dengan memberikan ukuran rutin foto secara acak menggunakan arandomphoto.URL.biasa dan saya menunggu tanggapannya.

Metode arraybuffer () adalah untuk mendapatkan buffer foto.

Saya menggunakan FS.janji.Metode WriteFile (FilePath, Image) untuk menyimpan foto ke drive lokal, itu akan menulis buffer ke file.

Jika ada kegagalan, saya menggunakan blok tangkapan untuk mencatat kesalahan ke konsol.

Tips: Jika Anda ingin secara acak memilih salah satu foto yang dikembalikan oleh API, Anda dapat menggunakan matematika.Lantai (Matematika.acak () * 8) metode. Ini akan menghasilkan angka acak antara 0 dan 9, yang dapat digunakan sebagai indeks hasil yang ingin Anda pilih.

// indeks.JS

impor < Unsplash >dari "./src/unsplash/unsplash.JS ";
impor dotenv dari 'dotenv';
dotenv.config ();

const unsplash = unsplash baru (proses.Env.Unsplash_key);
Menunggu Unsplash.getPhoto ('file', 'coding di laptop');

Sama seperti di tutorial pertama, di indeks.JS file, kami mengimpor Unsplash.JS kelas dan membuat instance baru dengan lewat di unsplash_key . Kami menyimpan kunci API di a .Env File untuk menambahkan keamanan. Kemudian kami menjalankan metode getPhoto dengan meneruskan jenis respons yang kami inginkan dan frasa pencarian untuk foto tersebut. Dan voila! Kami menyimpan gambar bernama pengkodean pada laptop.jpg di src/ gambar/ folder.

Kesimpulan

API Unsplash adalah alat yang ampuh yang membuatnya mudah ditemukan dan menggunakan gambar yang indah di proyek Anda. Paket Unsplash-Js menyederhanakan proses membuat panggilan API di JavaScript.

Dalam panduan ini, Anda belajar cara menginstal paket yang diperlukan, melakukan panggilan API untuk mencari foto, dan menyimpan gambar yang dikembalikan ke drive lokal Anda. Anda juga belajar cara menangani kesalahan dan cara mengakses foto acak dari hasil yang dikembalikan oleh API.

Sebagai langkah berikutnya, Anda dapat membangun ini dan menjelajahi lebih banyak opsi yang tersedia di API Unsplash seperti pagination, mengunduh foto-foto dengan ukuran yang berbeda, mengunduh foto-foto orientasi yang berbeda, dan juga Anda dapat menggunakan foto untuk penggunaan komersial dan non-komersial dengan mengikuti pedoman yang disediakan oleh Unsplash. Anda juga dapat mencoba menggunakan API dengan perpustakaan yang berbeda seperti Axios dan menjelajahi fitur lain yang disediakan oleh Unsplash API.

Bacaan lebih lanjut

Otomasi Blog dengan seri tutorial JavaScript

• Openai API (Bagian i&Bagian II): Pembuatan konten otomatis
• API Unsplash: Pemilihan gambar otomatis untuk posting blog
• API WordPress: Mengunggah konten blog yang mudah
• Otomatisasi Blogging: Menyatukan semuanya

Dokumentasi resmi

�� Unsplash’S API

Unsplash adalah perpustakaan dengan pertumbuhan tercepat lebih dari 900 ribu+ gratis, berkualitas, definisi tinggi, foto bebas lisensi di dunia. Setiap foto di Unsplash bebas digunakan, untuk penggunaan pribadi dan komersial. Tidak ada pembayaran dan tidak ada langganan lisensi yang diperlukan.

Unsplash membuat pengalaman menemukan kualitas, fotografi yang dapat digunakan lebih mudah, lebih cepat, dan lebih baik dari sebelumnya, itulah sebabnya’s dipercaya oleh dunia’tim dan produk produk terbaik untuk pencipta.

Statistik

Anda dapat melihat Unsplash’S Statistik secara real-time, tetapi di sini ada beberapa poin:

�� Foto tentang Unsplash disumbangkan oleh Over 127K+ fotografer dan digunakan oleh 70+ juta kreatif
⚡ 11 miliar+ foto dilayani setiap bulan
⬇️ 55 juta+ foto diunduh setiap bulan
�� 20 foto diunduh setiap detik (untuk konteks, itu’S ukuran stok adobe, shutterstock, dan getty gabungan)

Perpustakaan Unsplash

Kualitas perpustakaan dan aksesibilitas adalah yang membedakan Unsplash dengan situs foto stok tradisional yang ada saat ini.

• Kurasi manual
  Tim editorial kami mengkurasi setiap foto yang didistribusikan di Unsplash untuk memastikan perpustakaan kami diperbarui dengan fotografi otentik, kelas dunia, beresolusi tinggi. Tidak ada lagi cheesy, stok foto. Kami fokus pada kualitas, bukan kuantitas.
• Aksesibilitas
  Semua foto dilisensikan di bawah lisensi Unsplash, membuatnya gratis untuk penggunaan pribadi dan komersial. Tidak perlu pembayaran atau lisensi yang membingungkan dengan tanggal kedaluwarsa.
• Konten dijamin aman untuk bekerja
  Foto Unsplash adalah PG-13 dan ditinjau secara manual sebelum diekspos di Unsplash atau didistribusikan melalui Unsplash’S API. API kami juga dapat mengambil koleksi foto khusus untuk menjamin kualitas dan keamanan lebih lanjut.
• Foto eksklusivitas
  Unsplash’Perpustakaan S adalah eksklusif untuk Unsplash – artinya, tidak ada situs stok foto lainnya yang dapat meng -host atau mendistribusikan foto -foto ini di situs mereka. Bermitra dengan Unsplash berarti Anda memiliki akses ke konten yang unik dan indah.

Studi Kasus API

Unsplash’S API adalah mesin foto paling kuat Di dunia dengan lebih dari 1000+ mitra, lebih dari 1 miliar+ panggilan per bulan, dan 99.998% uptime dalam 30 hari terakhir.

Menggunakan API Unsplash untuk mencari foto di aplikasi React

Saya baru -baru ini diberi tugas menambahkan fitur ke aplikasi yang akan memberi pengguna kemampuan untuk memilih gambar untuk disimpan dengan objek. Untungnya, pilihan API terserah saya! Sayangnya, saya tidak tahu’T benar -benar bekerja dengan API gambar apa pun sebelumnya! Jadi, seperti yang mungkin Anda duga, saya mulai bermain -main dengan API Unsplash – dan saya’m di sini untuk berbagi pengalaman saya menggunakan antarmuka yang sangat mudah digunakan ini, khususnya dalam konteks memasukkannya ke dalam proyek bereaksi.

Mulai

Untuk mendapatkan akses ke API, pertama -tama lompat ke halaman pengembang Unsplash dan buat akun. Setelah akun Anda diatur, Anda’LL perlu mendaftarkan aplikasi Anda – perhatikan bahwa saat awalnya dalam mode demo, Anda akan dibatasi hingga 50 permintaan per jam (yang saya temukan lebih dari cukup untuk pengujian, dll). Kemudian, di halaman untuk aplikasi yang baru saja Anda daftarkan, perhatikan dua kunci unik Anda’Anda telah diberikan untuk mengakses API, ‘Kunci akses’ dan ‘Kunci rahasia,’ yang Anda’ll membutuhkan saat Anda mengajukan permintaan tertentu, tergantung pada izin yang diperlukan.

Karena kita’secara khusus melihat untuk memasukkan ini ke dalam aplikasi bereaksi, biarkan’s Manfaatkan pembungkus javascript untuk API. Untuk menambahkannya ke proyek/paket Anda.File JSON:

$ npm menginstal unsplash-js

Perpustakaan ini membuat berinteraksi dengan API sangat mudah dengan membuat instance dari objek Unsplash yang berisi tombol aplikasi/auth Anda, di mana Anda dapat memanggil berbagai metode untuk mencapai titik akhir tertentu dan melakukan tugas -tugas tertentu.

Mencari dengan kata kunci

API memiliki kedalaman fungsionalitas yang luar biasa, tetapi kami’RE akan fokus hanya pada satu tugas – mencari foto dengan kata kunci yang diberikan. Titik akhir bahwa kita’Memukul kembali dalam kasus ini adalah:

Dapatkan https: // API.Unsplash.com/pencarian/foto

Params yang dapat kami kirim bersama dengan permintaan termasuk: kueri, yang merupakan istilah pencarian, halaman, dan per_page, yang merupakan nomor halaman untuk diambil dan jumlah item yang Anda’D suka kembali per halaman. Kedua param ini adalah opsional, masing -masing default ke 1 dan 10. Anda juga dapat melewati ID koleksi untuk mempersempit pencarian ke koleksi tertentu, serta orientasi untuk mengambil hanya lanskap, potret, atau foto berorientasi kuadrat.

Jadi, misalnya, pencarian foto dengan kata kunci ‘anjing,’ termasuk nilai default untuk halaman dan per_page, akan terlihat seperti ini:

Dapatkan https: // API.Unsplash.com/pencarian/foto?kueri = anjing

Yang kemudian mengembalikan objek seperti ini:

 "Total": 30536, 
"Total_pages": 3054, 
"Hasil": [ 
 "id": "do2wtawctc4", 
"create_at": "2019-03-25t12: 30: 46-04: 00", 
"update_at": "2019-05-17t19: 52: 55-04: 00", 
"Lebar": 4000, 
"Tinggi": 5000, 
"Color": "#261d16", 
"Deskripsi": NULL, 
"alt_description": "Air minum serak abu -abu dan putih dari karton air kotak", 
"URL": "RAW": "https: // gambar.Unsplash.com/photo-1553531384-411a247ccd73?IXLIB = RB-1.2.1 & ixid = eyjhchbfawqiojcymdi4fq ", 
"Full": "https: // gambar.Unsplash.com/photo-1553531384-411a247ccd73?IXLIB = RB-1.2.1 & q = 85 & fm = jpg & crop = entropy & cs = srgb & ixid = eyjhchbfawqiojcymdi4fq ", 
"Reguler": "https: // gambar.Unsplash.com/photo-1553531384-411a247ccd73?IXLIB = RB-1.2.1 & q = 80 & fm = jpg & crop = entropy & cs = tinysrgb & w = 1080 & fit = maks & ixid = eyjhchbfawqiojcymdi4fq ", 
"Kecil": "https: // gambar.Unsplash.com/photo-1553531384-411a247ccd73?IXLIB = RB-1.2.1 & q = 80 & fm = jpg & crop = entropy & cs = tinysrgb & w = 400 & fit = maks & ixid = eyjhchbfawqiojcymdi4fq ", 
"Thumb": "https: // gambar.Unsplash.com/photo-1553531384-411a247ccd73?IXLIB = RB-1.2.1 & q = 80 & fm = jpg & crop = entropy & cs = tinysrgb & w = 200 & fit = maks & ixid = eyjhchbfawqiojcymdi4fq " 
>, 
"Tautan": "self": "https: // api.Unsplash.com/foto/do2wtawctc4 ", 
"html": "https: // unsplash.com/foto/do2wtawctc4 ", 
"Unduh": "https: // unsplash.com/foto/do2wtawctc4/download ", 
"download_location": "https: // api.Unsplash.com/foto/do2wtawctc4/download " 
>,// . 

Jadi dari array hasil, kita dapat mengambil tautan, tag, deskripsi, dll. dari setiap foto dikembalikan dengan mudah.

Tapi sebelum kita sampai sejauh itu, pertama -tama kita perlu mengatur hal -hal di aplikasi reaksi kita. Buat instance Unsplash dengan kunci akses dan kunci rahasia Anda:

Impor Unsplash dari 'Unsplash-js';

const unsplash = baru unsplash (applicationId: "", 
rahasia: ""
>);

Perpustakaan ini juga mencakup integrasi Native React-saat menggunakan, cukup impor dari Unsplash-js/asli sebagai gantinya.

Sekarang, kita dapat dengan mudah memanggil berbagai metode instance di Unsplash yang menyediakan akses ke titik akhir API. Dalam kasus kami, kami’mencari foto dengan kata kunci, jadi kami’akan menggunakan pencarian.Foto (kata kunci, halaman, per_page) . Metode ini membutuhkan hingga tiga argumen – kata kunci, string, yang diperlukan, sedangkan dua argumen lainnya, halaman, dan per_page adalah opsional.

Unsplash.mencari.Foto ("Kucing", 1) 
.lalu (TOJSON) 
.lalu (json => // lakukan sesuatu dengan objek JSON 
>);

Kode di atas juga memanfaatkan metode helper handy tojson, yang melakukan tugas mengubah respons API ke data JSON – biasanya dilakukan dengan sesuatu di sepanjang garis res => res.json () . Untuk menggunakan metode pembantu ini, cukup impor dari Unsplash-js juga:

Impor Unsplash, < toJson >dari 'Unsplash-js

Dan itu’s itu! Kamu sekarang’ve punya objek foto Anda, yang dengannya Anda dapat melakukan apa pun yang diinginkan hati kecil Anda!