מדריך למתחילים לממשק API של Unsplash ב- JavaScript

סיכום:

במדריך זה אני אעבור אותך בתהליך השימוש בממשק ה- API של Unsplash ב- JavaScript. אנו נסקור נושאים כמו קבלת מפתח API, התקנת חבילות NPM הכרחיות וביצוע שיחות API לחיפוש תמונות. בנוסף, נלמד כיצד לשמור את התמונות שהוחזרו לכונן המקומי שלך.

נקודות מפתח:

1. API של Unsplash הוא כלי רב עוצמה עבור מפתחי JavaScript למצוא ולהשתמש בתמונות באיכות גבוהה בפרויקטים שלהם.

2. מדריך זה מתמקד בהתקנה ושימוש בספריית Unsplash בצומת.פרויקט JS.

3. מומלץ לקבל ידע בסיסי ב- JavaScript לפני שתתחיל עם ה- API של Unsplash.

4. תזדקק לחשבון מפתחים מבטלים כדי לגשת לממשק ה- API.

5. סדרת ההדרכה לשימוש ב- JavaScript לאוטומטי בלוגים כוללת הדרכה קודמת ב- API של OpenAI, שכדאי לבדוק.

6. את הקוד המלא של מדריך זה ניתן למצוא ב- GitHub.

7. כדי להשתמש בממשק ה- API של Unsplash, התקן את חבילות ה- NPM הרלוונטיות כמו Unsplash-JS ו- Node-Fetch.

8. מבנה התיקיה לפרויקט שלך צריך לכלול את התמונות ותיקיות ה- Unsplash.

9. אתה יכול להשיג מפתח API של Unsplash על ידי הרשמה לחשבון ורישום יישום חדש באתר Unsplash.

10. לאחר קבלת מקש ה- API, צור מופע של ה- API של Unsplash בקוד ה- JavaScript שלך.

11. ערוך שיחות API לחיפוש תמונות באמצעות API של Unsplash ולהביא את התמונות שהוחזרו ב- JavaScript.

12. אתה יכול להתאים אישית את הפרמטרים של שיחת API, כגון עמוד, per_page, וכיוון.

13. בחר תמונה אקראית מהתגובה ואחזר את כתובת האתר שלה.

14. השתמש בחבילת Node-Fetche כדי להוריד את התמונה ולשמור אותה בכונן המקומי שלך.

15. זכור לכלול ייחוס נאות לתמונה לפי הנחיות ה- Unsplash.

שאלות:

1. מהו ה- API של Unsplash?
ה- API של Unsplash הוא כלי המאפשר למפתחי JavaScript למצוא ולהשתמש בתמונות באיכות גבוהה בפרויקטים שלהם.

2. איזה ידע נדרש כדי להתחיל להשתמש ב- API של Unsplash?
מומלץ לידע בסיסי ב- JavaScript לפני השימוש בממשק ה- API של Unsplash.

3. כיצד אוכל להשיג מפתח API של Unsplash?
כדי לקבל מפתח API של Unsplash, עליך להירשם לחשבון באתר Unsplash ולרשום יישום חדש.

4. אילו חבילות NPM נחוצות כדי לשלב את ה- API של Unsplash?
עליך להתקין את חבילות ה- unsplash-js ואת הצומתים כדי לשלב את ה- API של Unsplash בפרויקט JavaScript שלך.

5. האם אתה יכול לספק את מבנה התיקיה לפרויקט באמצעות API של Unsplash?
על הפרויקט לכלול תיקיות כמו תמונות ו- Unsplash, יחד עם קבצים נדרשים אחרים.

6. כיצד אוכל לבצע שיחת API לחיפוש תמונות באמצעות API של Unsplash?
באפשרותך לבצע שיחות API בשיטות המסופקות על ידי ה- API של Unsplash, לציין פרמטרים כמו שאילתה ודף.

7. האם ניתן לשמור את התמונות שהוחזרו מממשק ה- API של Unsplash לכונן המקומי שלי?
כן, אתה יכול להשתמש בחבילת Node-Fetch כדי להוריד את התמונות ולשמור אותן בכונן המקומי שלך.

8. מה עלי לכלול בכיתוב לתמונה שהורדה?
הכיתוב צריך לכלול ייחוס לצלם בהתאם להנחיות ה- Unsplash.

9. כיצד אוכל לגשת לקוד המלא עבור מדריך זה?
ניתן למצוא את הקוד המלא עבור מדריך זה ב- GitHub באמצעות הקישור המסופק.

10. האם אתה יכול להסביר את מטרת ההדרכה הקודמת ב- API של OpenAI?
ההדרכה הקודמת בסדרה זו מכסה את הגדרת הפרויקט ונותנת מושג מה אנו מנסים להשיג באמצעות אוטומציה של JavaScript.

11. כיצד אוכל להתאים אישית את הפרמטרים של שיחת ה- API, כגון עמוד והתמצאות?
אתה יכול להעביר ערכים שונים לפרמטרים כמו עמוד והתמצאות בעת ביצוע ה- API שיחה.

12. האם יש מגבלה על מספר בקשות ה- API שאוכל לקבל באמצעות ה- API של Unsplash?
כן, יש גבולות למספר בקשות API לשעה לאפליקציות הדגמה. הקפד לבדוק את התיעוד לפרטים.

תשובות:

1. ה- API של Unsplash הוא כלי רב עוצמה המאפשר למפתחי JavaScript למצוא בקלות ולהשתמש בתמונות באיכות גבוהה בפרויקטים שלהם. בין אם אתה מתחיל או מפתח מנוסה, ממשק ה- API של Unsplash יכול לשפר מאוד את הפרויקטים שלך על ידי מתן ספרייה עצומה של תמונות חופשיות לשימוש. זה מבטל את הצורך לחפש תמונות באופן ידני ומספק דרך קלה לשלב תמונות ישירות בקוד שלך.

2. לפני שצוללים בשימוש בממשק ה- API של Unsplash, מומלץ לקבל ידע בסיסי ב- JavaScript. זה יעזור לך להבין ולעבוד עם קטעי קוד JavaScript המשמשים במדריך זה. אם אתה חדש ב- JavaScript, ישנם מספר משאבים ומדריכים מקוונים שיכולים לעזור לך להתחיל. כדאי להשקיע זמן מה בלימוד היסודות של JavaScript לפני שתמשיך הלאה.

3. כדי לגשת לממשק ה- API של Unsplash, תזדקק למפתח API. השגת מפתח API הוא תהליך פשוט. ראשית, עבור לאתר Unsplash והירשם לחשבון. לאחר שיש לך חשבון, נווט אל קטע המפתחים באתר. כאן תוכלו למצוא את האפשרות לרשום יישום חדש. לחץ על כפתור “רשום יישום חדש” ומלא את הפרטים הנדרשים. לאחר הגשת הטופס, תספק לך מפתח API בו תוכל להשתמש כדי לגשת לממשק ה- API של Unsplash.

4. כדי לשלב את ה- API של Unsplash בפרויקט JavaScript שלך, יש כמה חבילות NPM שתצטרך להתקין. חבילות אלה אינן מתמודדות עם צומת. חבילת Unsplash-JS מספקת עטיפה לממשק ה- API של Unsplash, מה שמקל על אינטראקציה עם ה- API מקוד ה- JavaScript שלך. חבילת Node-Fetch משמשת לקביעת בקשות HTTP לממשק ה- API של Unsplash ולאחזר את הנתונים הרצויים. כדי להתקין חבילות אלה, נווט אל ספריית הפרויקט שלך בטרמינל והפעל את הפקודה “NPM התקן Unsplash-JS Node-Fetch”. זה יתקין את החבילות הנדרשות ויוסיף אותן לתלות בפרויקט שלך.

5. כשאתה עובד עם ה- API של Unsplash בצומת.פרויקט JS, חשוב לארגן את הקבצים והתיקיות שלך כראוי. יחד עם קבצי הפרויקט הקיימים שלך, תצטרך ליצור שתי תיקיות חדשות – “תמונות” ו- “unsplash”. תיקיית “תמונות” תשמש לאחסון התמונות שהורדו מממשק ה- API של Unsplash, ואילו התיקיה “Unsplash” תכיל את קוד ה- JavaScript לאינטראקציה עם ה- API. ודא כי תיקיות אלה ממוקמות במיקום המתאים במבנה הספריה של הפרויקט שלך.

6. ביצוע שיחות API לחיפוש תמונות באמצעות ה- API של Unsplash הוא יחסית פשוט. באמצעות חבילת Unsplash-JS, אתה יכול ליצור מופע של ה- API של Unsplash על ידי העברת מקש ה- API שלך כפרמטר. ברגע שיש לך מופע של ה- API, אתה יכול להשתמש בשיטות שלו כדי לבצע סוגים שונים של שיחות API. לדוגמה, אתה יכול להשתמש ב”חיפוש.שיטת GetPhotos לחיפוש תמונות המבוססות על שאילתה. אתה יכול לספק פרמטרים נוספים כגון דף, per_page, והתמצאות כדי לשכלל את תוצאות החיפוש שלך. כל שיחת API מחזירה תגובה, המכילה את הנתונים שאתה צריך לעבוד איתם, כמו כתובות האתר של התמונות.

7. כן, אפשר לשמור את התמונות שהוחזרו מממשק ה- API של Unsplash לכונן המקומי שלך. כדי להשיג זאת, באפשרותך להשתמש בחבילת Node-Fetch, המאפשרת לך להביא ולהוריד קבצים משרת מרוחק. לאחר ביצוע שיחת ה- API וקבלת כתובת האתר של תמונה שברצונך לשמור, תוכל להשתמש בחבילת Node-Fetch כדי להוריד את התמונה. לאחר הורדתו תוכלו לשמור אותו במיקום הרצוי בכונן המקומי בטכניקות מניפולציה של קבצים המסופקים על ידי הצומת.JS. זכור לבדוק את התנאים וההגבלות של API של API לגבי מגבלות שימוש או דרישות ייחוס בעת שמירה ושימוש בתמונות שהורדו.

8. בעת שמירת התמונה שהורדת, חשוב לכלול ייחוס מתאים בהתאם להנחיות Unsplash. ל- Unsplash דרישות ספציפיות לייחוס כדי לתת קרדיט לצלמים המספקים את התמונות שלהם לשימוש בחינם. הייחוס אמור לכלול בדרך כלל את שם הצלם וקישור לפרופיל ה- Unsplash שלהם או את התמונה עצמה ב- Unsplash. הקפד לבדוק שוב את הנחיות הייחוס הספציפיות המפורטות על ידי Unsplash וודא שאתה מציית אליהם בעת השימוש בתמונות בפרויקטים שלך. ייחוס נכון לא רק ממלא חובות משפטיות אלא גם מכיר בעבודתו של הצלם ותרומתו של הצלם.

9. ניתן למצוא את הקוד המלא עבור מדריך זה, יחד עם כל משאבים נוספים, ב- GitHub. הקישור המסופק יפנה אותך למאגר GitHub בו תוכל לגשת לקוד ולכל תיעוד קשור. הקוד כולל דוגמאות כיצד להשיג מפתח API של Unsplash, להתקין את חבילות ה- NPM הדרושות ולבצע שיחות API לחיפוש תמונות. נוסף.

10. ההדרכה הקודמת בסדרה זו מתמקדת בשימוש בממשק ה- API של OpenAI ב- JavaScript. זה מספק מבוא לשימוש ב- JavaScript כדי לאוטומציה של משימות בלוגים ומדגים כיצד להגדיר פרויקט לעבודה עם ה- API של OpenAI. למרות שאינו קשור ישירות לממשק ה- API של Unsplash, ההדרכה הקודמת מציעה תובנות יקרות ערך על עבודה עם ממשקי API באופן כללי ומציגה את הכוח של שימוש ב- JavaScript כדי לאוטומטי משימות שונות. אם עוד לא עברת את ההדרכה הקודמת, אני ממליץ לבדוק אותו כדי לקבל הבנה מקיפה של המושגים והטכניקות המשמשות בסדרה זו.

11. בעת ביצוע שיחות API לחיפוש תמונות באמצעות ממשק ה- API של Unsplash, יש לך גמישות להתאים אישית פרמטרים שונים. לדוגמה, באפשרותך לציין את פרמטר העמוד כדי לאחזר קבוצות שונות של תוצאות חיפוש. זה יכול להיות שימושי בעת יישום עימות או כאשר ברצונך להשיג תמונות מדפים שונים של תוצאות החיפוש. באופן דומה, באפשרותך להגדיר את פרמטר ה- per_page כדי לשלוט על מספר התמונות שהוחזרו לכל תגובת API. זה מאפשר לך לנהל את כמות הנתונים שאתה מקבל על סמך הדרישות הספציפיות שלך. בנוסף, פרמטר האוריינטציה מאפשר לך לסנן תמונות על בסיס האוריינטציה שלהן, כגון נוף או דיוקן. על ידי ציון פרמטרים אלה בשיחות ה- API שלך, אתה יכול להתאים את התוצאות שיתאימו לצרכי הפרויקט שלך.

12. כן, יש גבולות למספר בקשות ה- API שתוכלו לקבל באמצעות ממשק ה- API של Unsplash, במיוחד עבור אפליקציות הדגמה. גבולות אלה נועדו למנוע התעללות ולהבטיח שימוש הוגן ב- API. כשאתה רושם את בקשתך ומקבל מפתח API, בדרך כלל תהיה לך מגבלה מוגדרת מראש על מספר הבקשות המותרות לשעה או ליום. חיוני לבדוק את התיעוד או תנאי השירות של API של Unsplash כדי להבין את המגבלות הספציפיות החלות על בקשתך. אם אתה מצפה לחרוג ממגבלות ברירת המחדל, יתכן שתצטרך לשדרג את חשבונך או לחקור אפשרויות חלופיות המסופקות על ידי Unsplash לשימוש בנפח גבוה יותר.

מתחיל’מדריך ל- API של Unsplash ב- JavaScript

אתה יכול להציג את Unsplash’S סטטיסטיקות בזמן אמת, אך הנה כמה נקודות כדור:

האם ל- Unsplash יש ממשק API

Б эой сранице

Ы зé. С помדיר. Почем эо мого?

Эа сраница о бображае тех сах, кога воматеשיים си сисלוח рmе рגות р רבות ш רבות р р рוהים р рוהים которые нé. Сраница пересанет ообрוחים. До эого момента д.

Исочником запросов может сmжж вредоносfte по, подаееые моди базלוח нилm mчnзnзnчnчnчnчnчnчnчnчnчnчnчnчnчnчnчзדי ы з запросов. Еи ы иололalty ощий дדיר. O. Подробнרבה.

Проверка по сов может тelte пояяе, еи ы водите сדיר еами, или же водите запроы ченн часо.

מתחיל’מדריך ל- API של Unsplash ב- JavaScript

ה- API של Unsplash הוא כלי נהדר עבור כל מפתח JavaScript, ללא קשר לרמת הניסיון שלהם. זה מקל על למצוא ולהשתמש בתמונות באיכות גבוהה בפרויקטים שלך. מדריך זה יראה לך, שלב אחר שלב, כיצד להתקין את ספריית Unsplash בצומת שלך.פרויקט JS, ערוך שיחות API לחיפוש תמונות ושמור את התמונות שהוחזרו בכונן המקומי שלך. בעזרת מדריך זה, תהפוך במהירות למומחה בשימוש ב- API של Unsplash.

ראשית, הדרכה זו היא החלק השני של הסדרה שלי לשימוש ב- JavaScript כדי לאוטומטי בלוגים. אני ממליץ מאוד לבדוק את ההדרכה הראשונה, “מבוא ל- API של Openai ב- JavaScript” לפני שהוא ממשיך כשהוא מכסה את הגדרת הפרויקט ונותן לך מושג מה אנחנו’מנסה להשיג כאן.

אתה יכול למצוא את הקוד המלא ב- GitHub בקישור זה.

תנאים מוקדמים

• ידע בסיסי ב- JavaScript
• צומת מוכן.פרויקט JS
• חשבון מפתחים מבטלים

מה אתה’ילמד

• כיצד להשיג מפתח API של Unsplash: תעבור אותך בתהליך יצירת חשבון מפתחים מבטלים, כך שתוכל ליצור מפתח API ולגשת לספריית התמונות Unsplash.
• כיצד להתקין את חבילות ה- NPM הרלוונטיות: אתה’ילמדו על החבילות השונות שיכולות לעזור לכם לשלב את ה- API של Unsplash בפרויקט JavaScript שלכם.
• קטעי קוד JavaScript על ביצוע שיחות API של Unsplash: דרך מדריך זה, אתה’ארוך הבנה טובה יותר של ה- API של Unsplash וכיצד לבצע שיחות לחיפוש ולהחזיר תמונות ב- JavaScript. כמו כן, ה- Jקוד AvaScript לשמירת התמונות שהוחזרו לכונן המקומי שלך.

השג מפתח API של Unsplash

1. עבור לאתר Unsplash והירשם לחשבון.
2. לאחר שיש לך חשבון, עבור אל קטע המפתחים באתר ולחץ על “רשום יישום חדש” לַחְצָן. (הערה: אפליקציות הדגמה מוגבלות ל 50 חוזר לשעה.)
3. לאחר שתגיש את הטופס, תספק לך מפתח API בו תוכל להשתמש כדי לגשת לממשק ה- API של Unsplash.

התקן חבילות NPM

בסדר, כמעקב אחר ההדרכה האחרונה בסדרה זו, אתה’אני צריך להריץ NPM התקן NOSPLASH-JS Node-Fetch. זהו צעד מהיר ש’וודא שאתה’הכל מוגדר להתקדם עם הדרכה זו ולבנות על מה שאתה’למד קודם.

NPM התקן את צומת ה- Unsplash-JS

מבנה התיקיות שלנו כולל כעת את החדש תמונות וכן לא מתקדם תיקיות בפרויקט. זה אמור להיראות משהו כזה:

�� WordPress-Automation 
┣ ��node_modules 
┣ ��Src 
Images ┣ �� 
┃ ┃ ┗ �� קידוד במחשב נייד.JPG 
┃ ┣ ��openai 
┃ ┃ ┗ Openai.JS 
┃ ┣ �� unsplash 
┃ ┃ ┗ �� unsplash.JS 
┣ .env 
┣ .גיטינור 
┣ .Prettierrc 
┣ אינדקס.JS 
┣ מנעול חבילה.JSON 
┗ חבילה.JSON 

ערוך שיחת API של Unsplash ושמור את התמונה שהוחזרה

// unsplash.JS

יְבוּא < createApi >מ'- Unsplash-JS ';
יבוא Fetch מ- 'Node-Fetch';
יבוא FS מ- 'FS';


ייצוא Class Clust 
זֶה.unsplash = createapi (< accessKey, fetch >); 
>
 
async getPhoto (סוג, שאילתה, עמוד = 1, per_page = 8, אוריינטציה = 'נוף') נסה // שלח בקשה לממשק ה- API של Unsplash כדי לחפש תמונות 
תגובה של const = מחכה לזה.לא מתקדם.לחפש.getPhotos (שאילתה, 
עמוד, 
per_page, 
נטייה, 
>);
 
// בחר תמונה אקראית מהתגובה 
const arandomphoto = תגובה.תְגוּבָה.תוצאות [מתמטיקה.רצפה (מתמטיקה.אקראי () * 8)]; 
// קבל את כתובת האתר של צילום גודל רגיל 
const Photourl = Arandomphoto.כתובות אתרים.רגיל; 
// להביא את התמונה 
Const Photo = מחכה להביא (Photourl); 
// קבל את מאגר הצילומים 
const Photobuffer = מחכה לתמונה.ArrayBuffer (); 
// צור כיתוב לצילום - בסגנון ייחוס של Unsplash 
Const Pattion = ` 
 
תמונה על ידי 
 
"rel =" noopener ugc nofollow "target =" _ ריק "> 
$ 
 
עַל 
 
לא מתקדם 
 
`;
 
// בדוק את הערך של פרמטר "הקלד" וביצע את חסימת הקוד המתאים 
החלף (סוג) מארז 'מאגר': 
// המרת את מאגר הצילומים ל- Uint8array 
const Data = חדש uint8array (Photobuffer); 
לְנַחֵם.log (`$.חיץ JPG מוכן '); 
// החזיר אובייקט המכיל את המאגר והתכונות של התצלום 
תכונות החזרה: כיתוב: כיתוב, 
כותרת: שאילתה.Tolowercase (), 
alt_text: `תמונה של $`, 
>, 
מאגר: נתונים 
>; 
מקרה 'קובץ': 
// המרת את מאגר הצילומים למאגר 
Const Image = חיץ.מ- (Photobuffer); 
// צור נתיב קובץ לתמונה 
const filepath = `src/תמונות/$.JPG ' 
// כתוב את התמונה למערכת הקבצים 
מחכה fs.הבטחות.WriteFile (FilePath, תמונה); 
לְנַחֵם.log (`$.JPG נשמר '); 
לשבור; 
בְּרִירַת מֶחדָל: 
לְנַחֵם.יומן (סוג לא חוקי: $ `); 
להחזיר null; 
> 
> קונסולת תפוס (שגיאה).יומן (שגיאה); 
להחזיר null; 
> 
>

>

בכיתה המיידית הזו לא מתקדם.JS, הקוד מתחיל בייבוא ​​המודולים והחבילות הנחוצות:

• שיטת CreateApi מחבילת Unsplash-JS משמשת ליצירת מופע של ה- API של Unsplash.
• חבילת Fetch משמשת כדי להגיש בקשת GET להורדת התמונה.
• מודול FS (מערכת קבצים) מובנה משמש ליצירת זרם כתיבה לשמירת התמונה.

לאחר מכן, אני מגדיר פונקציית async getPhoto שעוטפת את הקוד כולו. בתוך הפונקציה, אני משתמש בחסימת ניסיון לכה כדי לטפל בכל שגיאה שעלולה להתרחש תוך כדי ביצוע הבקשות או שמירת התמונה.

בתוך בלוק הניסיון אני משתמש בחיפוש.שיטת getPhotos (Params) של ממשק ה- API של Unsplash כדי לחפש תמונות עם שאילתת הפרמטרים, עמוד, per_page וכיוון .

אתה יכול גם להתאים אישית את ה- per_page, עמוד, אוריינטציה ושאילתה כדי לקבל את התמונות הספציפיות שאתה רוצה וגם אתה יכול לבדוק את התגובה של JSON לתוצאה ומסוגת להשתמש בגדלים שונים של התמונה על ידי שינוי כתובות אתרים.גולמי, כתובות אתרים.מלא כתובות אתרים.רגיל וכו ‘.

לאחר מכן, אני משתמש בחבילת Fetch כדי להגיש בקשה לקישור ההורדה של התמונה על ידי מתן הגודל הרגיל האקראי של התמונה באמצעות ArandomPhoto.כתובות אתרים.רגיל ואני מחכה לתגובה.

שיטת ArrayBuffer () היא להשיג את מאגר הצילומים.

אני משתמש ב- FS.הבטחות.שיטת WriteFile (FilePath, Image) כדי לשמור את התמונה בכונן המקומי, היא תכתוב את המאגר לקובץ.

במקרה של כישלון, אני משתמש בבלוק התפיסה כדי לרשום את השגיאה לקונסולה.

טיפים: אם ברצונך לבחור באקראי אחת מהתמונות שהוחזרו על ידי ה- API, אתה יכול להשתמש במתמטיקה.רצפה (מתמטיקה.אקראי () * 8) שיטה. זה יפיק מספר אקראי בין 0 ל 9, שיכול לשמש כאינדקס של התוצאה שברצונך לבחור.

// אינדקס.JS

יְבוּא < Unsplash >מ "./src/unsplash/unsplash.JS ";
יבוא dotenv מ- 'dotenv';
dotenv.config ();

const unsplash = new unsplash (תהליך.env.Unsplash_key);
לחכות לבלתי פלאש.getPhoto ('קובץ', 'קידוד במחשב נייד');

בדיוק כמו במדריך הראשון, ב אינדקס.JS קובץ, ייבחנו את לא מתקדם.JS Class ויצר מופע חדש של זה על ידי מעבר ב- Unsplash_key . שמרנו את מפתח ה- API ב .env קובץ לאבטחה נוספת. ואז הפעלנו את שיטת getPhoto על ידי העברת סוג התגובה שרצינו וביטוי החיפוש אחר התמונה. וואלה! שמרנו תמונה בשם קידוד במחשב נייד.JPG ב- SRC/ תמונות/ תיקיה.

סיכום

ה- API של Unsplash הוא כלי רב עוצמה שמקל על המציאה והשתמש בתמונות יפות בפרויקטים שלך. חבילת Unsplash-JS מפשטת את תהליך ביצוע שיחות API ב- JavaScript.

במדריך זה למדת כיצד להתקין את החבילות הדרושות, לבצע שיחות API לחיפוש תמונות ולשמור את התמונות שהוחזרו לכונן המקומי שלך. למדת גם כיצד לטפל בשגיאות וכיצד לגשת לתמונה אקראית מהתוצאות שהוחזרו על ידי ה- API.

כצעד הבא, תוכלו לבנות על כך ולחקור אפשרויות נוספות הזמינות בממשק ה- API של Unsplash כגון עיסוק, להוריד את התמונות בגדלים שונים, להוריד את התמונות של אוריינטציה שונה, וגם תוכלו להשתמש בתמונות לשימוש מסחרי ולא מסחרי על ידי ביצוע ההנחיות המסופקות על ידי Unsplash. אתה יכול גם לנסות להשתמש בממשק ה- API עם ספריות שונות כמו אקסיוס ולחקור את התכונות האחרות המסופקות על ידי API של Unsplash.

קריאות נוספות

אוטומציה לבלוג עם סדרת הדרכה של JavaScript

• API של Openai (חלק i& &חלק שני): ייצור תוכן אוטומטי
• Unsplash API: בחירת תמונות אוטומטית לפוסטים בבלוג
• API של וורדפרס: העלאת תוכן בלוג ללא מאמץ
• אוטומציה לבלוגים: להפגיש הכל

תיעוד רשמי

�� unsplash’s api

Unsplash היא הספרייה הצומחת במהירות ביותר של מעל 900K+ חינם, איכות, בהבחנה גבוהה, תמונות ללא רישיון בעולם. כל תמונה ב- Unsplash חופשית לשימוש, לשימוש אישי ומסחרי כאחד. אין תשלומים ואין צורך במנויי רישיון.

Unsplash הופך את החוויה של מציאת הצילום האיכותי והשימושי לקל, מהיר יותר וטוב מתמיד, וזו הסיבה שהיא’אמון על ידי העולם’צוותי המוצר והמוצרים הטובים ביותר ליוצרים.

סטטיסטיקה

אתה יכול להציג את Unsplash’S סטטיסטיקות בזמן אמת, אך הנה כמה נקודות כדור:

�� תמונות ב- Unsplash תרומות על ידי Over 127K+ צלמים ומשמש על ידי 70+ מיליון קריאייטיב
⚡ 11 מיליארד+ תמונות מוגשים כל חודש
⬇️ 55 מיליון+ תמונות מורידים כל חודש
�� 20 תמונות מורידים כל שנייה (להקשר, זה’בגודל של מלאי אדובי, Shutterstock ו- Getty בשילוב)

ספריית Unsplash

איכות הספריה והנגישות היא מה שמבדיל את התמציות לאתרי צילומים מסורתיים שקיימים כיום.

• אוצרות ידנית
  צוות העריכה שלנו אוצר כל תמונה המופצת ב- Unsplash כדי להבטיח שהספרייה שלנו מתעדכנת בצילום אותנטי, ברמה העולמית, גבוהה,. לא עוד גבינה, צילומי מלאי. אנו מתמקדים באיכות ולא בכמות.
• נְגִישׁוּת
  כל התמונות מורשות תחת רישיון ה- Unsplash, מה שהופך אותן בחינם לשימושים אישיים ומסחריים כאחד. אין צורך בתשלומים או לבלבל רישיונות עם תאריכי תפוגה.
• תוכן מובטח בטוח לעבודה
  תמונות לא מפוצלות הן PG-13 ונבדקות ידנית לפני שנחשפו על ידי Unsplash או מופצות דרך Unsplash’s api. ה- API שלנו יכול גם להביא אוספי תמונות בהתאמה אישית כדי להבטיח עוד יותר איכות ואבטחה.
• בלעדיות תמונות
  לא מתקדם’ספריית S היא בלעדית ל- Unsplash – כלומר, אף אתר צילומים אחר לא יכול לארח או להפיץ תמונות אלה באתרים שלהם. שותפות עם Unsplash פירושה שיש לך גישה לתוכן ייחודי ויפה.

מחקרי מקרה של API

לא מתקדם’S API הוא ה- מנוע הצילום החזק ביותר בעולם עם למעלה מ- 1000+ שותפים, יותר ממיליארד+ שיחות בחודש ו- 99.זמן UP של 998% בשלושים הימים האחרונים.

שימוש בממשק ה- API של Unsplash כדי לחפש תמונות באפליקציית React

לאחרונה ניתנה לי המשימה להוסיף תכונה לאפליקציה שתעניק למשתמשים את היכולת לבחור תמונה לחסוך באמצעות אובייקט. למרבה המזל, בחירת ה- API הייתה תלויה בי! לצערי, הייתי לא’זה באמת עבד עם כל ממשקי API של תמונה לפני כן! לכן, כפי שאולי ניחשתם, התחלתי לשחק עם ה- API של Unsplash – ואני’M כאן כדי לשתף את החוויה שלי באמצעות ממשק קל מאוד לשימוש זה, במיוחד בהקשר של שילובו בפרויקט React.

מתחילים

כדי לקבל גישה לממשק ה- API, ראשית קפוץ לדף המפתחים של Unsplash וליצור חשבון. ברגע שהחשבון שלך הוגדר, אתה’צריך לרשום את האפליקציה שלך – שים לב כי בעוד שבעבר בתחילה במצב הדגמה, אתה תהיה מוגבל ל 50 בקשות לשעה (שמצאתי שהספיק היה די יותר לבדיקה וכו ‘). ואז, בדף של האפליקציה שרשמת זה עתה, שימו לב לשני המפתחות הייחודיים שאתם’ניתן לגישה לממשק ה- API, ‘מפתח גישה’ וה ‘מפתח סודי,’ אשר אתה’צורך כאשר אתה מבצע בקשות מסוימות, תלוי בהרשאות הנדרשות.

כי אנחנו’באופן ספציפי מסתכלים על שילוב זה באפליקציית React, Let’S השתמש בעטיפת JavaScript עבור ה- API. כדי להוסיף אותו לפרויקט/חבילה שלך.קובץ JSON:

$ npm התקן את Unsplash-JS

ספרייה זו הופכת את האינטראקציה עם ה- API לקלה מאוד על ידי יצירת מופע של אובייקט Unsplash המכיל את מפתחות האפליקציה/Auth שלך, עליו תוכלו לקרוא לשיטות שונות כדי לפגוע בנקודות קצה ספציפיות ולבצע משימות מסוימות.

חיפוש לפי מילת מפתח

לממשק ה- API עומק פונקציונליות מדהים, אבל אנחנו’הולך להתמקד במשימה אחת בלבד – לחפש תמונות על ידי מילת מפתח נתונה. נקודת הסיום שאנחנו’מכה מחדש במקרה זה היא:

קבל https: // api.לא מתקדם.com/Search/תמונות

הפרמטרים שאנו יכולים לשלוח יחד עם הבקשה כוללים: שאילתה, שהיא מונחי החיפוש, העמוד וה- per_page, שהם מספר העמוד לאחזור ומספר הפריטים שאתה’D אוהב לחזור לדף. שני הפרמטרים הללו הם אופציונליים, מחליפים ל -1 ו -10, בהתאמה. אתה יכול גם להעביר מזהי אוספים כדי לצמצם את החיפוש לאוספים ספציפיים, כמו גם אוריינטציה כדי לאחזר רק נוף, דיוקן או תמונות מכוונות ריבועיות בלבד.

כך, למשל, חיפוש אחר תמונות עם מילת מפתח ‘כלבים,’ כולל ערכי ברירת המחדל עבור Page ו- Per_Page, ייראה כך:

קבל https: // api.לא מתקדם.com/Search/תמונות?שאילתה = כלבים

אשר מחזיר אובייקט כזה:

 "סה"כ": 30536, 
"Total_pages": 3054, 
"תוצאות": [ 
 "מזהה": "do2wtawctc4", 
"נוצר_ט": "2019-03-25T12: 30: 46-04: 00", 
"עדכן_": "2019-05-17T19: 52: 55-04: 00", 
"רוחב": 4000, 
"גובה": 5000, 
"צבע": "#261D16", 
"תיאור": null, 
"Alt_Description": "אסקי אפור ולבן שתייה מים מקרטון מים קופסא", 
"כתובות אתרים": "גולמי": "https: // תמונות.לא מתקדם.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & ixid = eyjhchbfawqiojcymdi4fq ", 
"מלא": "https: // תמונות.לא מתקדם.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 85 & fm = jpg & crop = אנטרופיה & cs = srgb & ixid = eyjhchbfawqiojcymdi4fq ", 
"רגיל": "https: // תמונות.לא מתקדם.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 80 & fm = jpg & crop = אנטרופיה & cs = tinysrgb & w = 1080 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ", 
"קטן": "https: // תמונות.לא מתקדם.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 80 & fm = jpg & crop = אנטרופיה & cs = tinysrgb & w = 400 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ", 
"אגודל": "https: // תמונות.לא מתקדם.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 80 & fm = jpg & crop = אנטרופיה & cs = tinysrgb & w = 200 & fit = max & ixid = eyjhchbfawqijcymdi4fq " 
>, 
"קישורים": "עצמי": "https: // api.לא מתקדם.com/תמונות/do2wtawctc4 ", 
"html": "https: // unsplash.com/תמונות/do2wtawctc4 ", 
"הורד": "https: // unsplash.com/תמונות/do2wtawctc4/הורדה ", 
"הורד_לוקציה": "https: // api.לא מתקדם.com/תמונות/do2wtawctc4/הורדה " 
>,// . 

אז ממערך התוצאות, אנו יכולים לתפוס קישורים, תגיות, תיאורים וכו ‘. מכל תמונה חזרה די בקלות.

אבל לפני שנגיע כל כך רחוק, ראשית עלינו להקים דברים באפליקציית React שלנו. צור מופע של Unsplash עם מקש הגישה שלך והמפתח הסודי:

יבוא ביטול פיצוץ מ'לאפש-ג'ס ';

const unsplash = New Unsplash (ApplicationId: "", 
סוד: ""
>);

ספרייה זו כוללת גם שילוב ילידי תגובה-בעת השימוש, פשוט ייבא מ- Unsplash-JS/יליד במקום.

כעת, אנו יכולים פשוט להתקשר לשיטות מופע שונות ב- Unsplash המספקת גישה לנקודות הקצה של ה- API. במקרה שלנו, אנחנו’מחפשים מחדש תמונות לפי מילת מפתח, אז אנחנו’יהיה להשתמש בחיפוש.תמונות (מילת מפתח, עמוד, per_page) . שיטה זו תופסת עד שלושה טיעונים – מילת מפתח, מחרוזת, הנדרשת, בעוד ששני הטיעונים האחרים, העמוד וה- per_page הם אופציונליים.

לא מתקדם.לחפש.תמונות ("חתולים", 1) 
.ואז (Tojson) 
.ואז (json => // עשה משהו עם אובייקט JSON 
>);

הקוד לעיל עושה שימוש גם בשיטת העוזר הנוח Tojson, שמבצע את המשימה להמיר את תגובת ה- API לנתוני JSON – בדרך כלל נעשה עם משהו בקווי res => res.JSON () . כדי להשתמש בשיטת עוזר זו, פשוט ייבא אותה גם מ- Unsplash-JS:

יבוא unsplash, < toJson >מ- 'Unsplash-JS

וזה’זה! עכשיו אתה’יש לך את חפצי הצילום שלך, איתם אתה יכול לעשות את כל מה שלבך הקטן רוצה!