Οδηγός αρχαρίων για το API Unsplash στο JavaScript

Περίληψη:

Σε αυτόν τον οδηγό, θα σας οδηγήσω στη διαδικασία χρήσης του API UNSPLASH στο JavaScript. Θα καλύψουμε θέματα όπως η απόκτηση ενός κλειδιού API, η εγκατάσταση των απαραίτητων πακέτων NPM και η πραγματοποίηση κλήσεων API για αναζήτηση φωτογραφιών. Επιπλέον, θα μάθουμε πώς να αποθηκεύσουμε τις επιστρεφόμενες εικόνες στην τοπική σας μονάδα δίσκου.

Βασικά σημεία:

1. Το API Unsplash είναι ένα ισχυρό εργαλείο για τους προγραμματιστές JavaScript να βρουν και να χρησιμοποιούν εικόνες υψηλής ποιότητας στα έργα τους.

2. Αυτός ο οδηγός επικεντρώνεται στην εγκατάσταση και τη χρήση της βιβλιοθήκης unsplash σε έναν κόμβο.έργο JS.

3. Συνιστάται να έχετε βασικές γνώσεις του JavaScript πριν ξεκινήσετε με το API Usplash.

4. Θα χρειαστείτε έναν λογαριασμό προγραμματιστών unsplash για να αποκτήσετε πρόσβαση στο API.

5. Η σειρά Tutorial για τη χρήση του JavaScript για την αυτοματοποίηση του blogging περιλαμβάνει ένα προηγούμενο σεμινάριο στο 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. Επιλέξτε μια τυχαία φωτογραφία από την απάντηση και ανακτήστε τη διεύθυνση URL της.

14. Χρησιμοποιήστε το πακέτο Node-Fetch για να κατεβάσετε τη φωτογραφία και να το αποθηκεύσετε στην τοπική σας μονάδα δίσκου.

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 και NODE-FETCH για να ενσωματώσετε το 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 και node-fetch. Το πακέτο UNSPLASH-JS παρέχει ένα περιτύλιγμα για το API UNSPLASH, καθιστώντας ευκολότερη την αλληλεπίδραση με το API από τον κωδικό JavaScript σας. Το πακέτο Node-Fetch χρησιμοποιείται για την υποβολή αιτήσεων HTTP στο API UNSPLASH και την ανάκτηση των επιθυμητών δεδομένων. Για να εγκαταστήσετε αυτά τα πακέτα, μεταβείτε στον κατάλογο του έργου σας στο τερματικό και εκτελέστε την εντολή “NPM εγκατάσταση του NOST-JS NODE-FETCH”. Αυτό θα εγκαταστήσει τα απαιτούμενα πακέτα και θα τα προσθέσει στις εξαρτήσεις του έργου σας.

5. Όταν εργάζεστε με το API Unsplash σε έναν κόμβο.JS Project, είναι σημαντικό να οργανώσετε σωστά τα αρχεία και τους φακέλους σας. Μαζί με τα υπάρχοντα αρχεία έργου σας, θα χρειαστεί να δημιουργήσετε δύο νέους φακέλους – “εικόνες” και “unsplash”. Ο φάκελος “εικόνων” θα χρησιμοποιηθεί για την αποθήκευση των φωτογραφιών που έχουν ληφθεί από το API UNSPLASH, ενώ ο φάκελος “Unsplash” θα περιέχει τον κωδικό JavaScript για αλληλεπίδραση με το API. Βεβαιωθείτε ότι αυτοί οι φάκελοι τοποθετούνται στην κατάλληλη θέση εντός της δομής του καταλόγου του έργου σας.

6. Η πραγματοποίηση κλήσεων API για αναζήτηση φωτογραφιών χρησιμοποιώντας το API UNSPLASH είναι σχετικά απλή. Χρησιμοποιώντας το πακέτο UNSPLASH-JS, μπορείτε να δημιουργήσετε μια παρουσία του API UNSPLASH, περνώντας το κλειδί API ως παράμετρο. Μόλις έχετε ένα παράδειγμα του API, μπορείτε να χρησιμοποιήσετε τις μεθόδους του για να κάνετε διάφορους τύπους κλήσεων API. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε την “αναζήτηση.μέθοδος getPhotos “για αναζήτηση φωτογραφιών με βάση ένα ερώτημα. Μπορείτε να παρέχετε πρόσθετες παραμέτρους όπως σελίδα, per_page και προσανατολισμό για να βελτιώσετε τα αποτελέσματα αναζήτησης. Κάθε κλήση API επιστρέφει μια απάντηση, η οποία περιέχει τα δεδομένα με τα οποία χρειάζεστε, όπως οι διευθύνσεις URL των φωτογραφιών.

7. Ναι, είναι δυνατόν να αποθηκεύσετε τις επιστρεφόμενες φωτογραφίες από το API UNSPLASH στην τοπική σας μονάδα. Για να επιτύχετε αυτό, μπορείτε να χρησιμοποιήσετε το πακέτο Node-Fetch, το οποίο σας επιτρέπει να λαμβάνετε και να κατεβάσετε αρχεία από έναν απομακρυσμένο διακομιστή. Αφού πραγματοποιήσετε την κλήση API και την απόκτηση της διεύθυνσης URL μιας φωτογραφίας που θέλετε να αποθηκεύσετε, μπορείτε να χρησιμοποιήσετε το πακέτο κόμβου για να κατεβάσετε τη φωτογραφία. Μόλις ληφθεί, μπορείτε να το αποθηκεύσετε στην επιθυμητή τοποθεσία σας στην τοπική μονάδα χρησιμοποιώντας τεχνικές χειρισμού αρχείων που παρέχονται από τον κόμβο.JS. Θυμηθείτε να ελέγξετε τους όρους και προϋποθέσεις του API Unsplash για τυχόν περιορισμούς χρήσης ή απαιτήσεις απόδοσης κατά την αποθήκευση και τη χρήση των φωτογραφιών που κατεβάσουν.

8. Κατά την αποθήκευση της φωτογραφίας που έχει ληφθεί, είναι σημαντικό να συμπεριληφθεί η σωστή απόδοση σύμφωνα με τις οδηγίες UNSPLASH. Το Unsplash έχει συγκεκριμένες απαιτήσεις για την απόδοση για να δώσει πίστωση στους φωτογράφους που παρέχουν τις εικόνες τους για δωρεάν χρήση. Η απόδοση θα πρέπει συνήθως να περιλαμβάνει το όνομα του φωτογράφου και έναν σύνδεσμο για το προφίλ του Unsplash ή την ίδια τη φωτογραφία στο Unsplash. Βεβαιωθείτε ότι έχετε διπλασιάσει τις συγκεκριμένες οδηγίες απόδοσης που αναφέρεται από το Unsplash και βεβαιωθείτε ότι συμμορφώνεστε μαζί τους όταν χρησιμοποιείτε τις φωτογραφίες στα έργα σας. Η σωστή απόδοση όχι μόνο εκπληρώνει νομικές υποχρεώσεις αλλά αναγνωρίζει επίσης το έργο και τη συνεισφορά του φωτογράφου.

9. Ο πλήρης κωδικός για αυτόν τον οδηγό, μαζί με τυχόν πρόσθετους πόρους, μπορεί να βρεθεί στο GitHub. Ο παρεχόμενος σύνδεσμος θα σας κατευθύνει στο αποθετήριο GitHub όπου μπορείτε να έχετε πρόσβαση στον κώδικα και οποιαδήποτε σχετική τεκμηρίωση. Ο κώδικας περιλαμβάνει παραδείγματα για το πώς μπορείτε να αποκτήσετε ένα πλήκτρο API Unsplash, να εγκαταστήσετε τα απαραίτητα πακέτα NPM και να πραγματοποιήσετε κλήσεις API για αναζήτηση φωτογραφιών. Επιπλέον, καλύπτει την αποθήκευση των επιστρεφόμενων φωτογραφιών στην τοπική σας μονάδα δίσκου, προσκολλώντας τις οδηγίες απόδοσης Unsplash και άλλες σχετικές πτυχές της χρήσης του API Unsplash.

10. Το προηγούμενο σεμινάριο σε αυτή τη σειρά επικεντρώνεται στη χρήση του API OpenAI στο JavaScript. Παρέχει μια εισαγωγή στη χρήση του JavaScript για την αυτοματοποίηση των εργασιών blogging και δείχνει πώς να δημιουργήσετε ένα έργο για συνεργασία με το API OpenAI. Αν και δεν σχετίζεται άμεσα με το API UNSPLASH, το προηγούμενο σεμινάριο προσφέρει πολύτιμες γνώσεις για τη συνεργασία με τα API γενικά και προβάλλει τη δύναμη της χρήσης JavaScript για αυτοματοποίηση διαφόρων εργασιών. Εάν δεν έχετε ήδη περάσει από το προηγούμενο σεμινάριο, συνιστώ ανεπιφύλακτα να το ελέγξετε για να έχετε μια ολοκληρωμένη κατανόηση των εννοιών και των τεχνικών που χρησιμοποιούνται σε αυτή τη σειρά.

11. Όταν πραγματοποιείτε κλήσεις API για αναζήτηση φωτογραφιών χρησιμοποιώντας το API UNSPLASH, έχετε την ευελιξία να προσαρμόσετε διάφορες παραμέτρους. Για παράδειγμα, μπορείτε να καθορίσετε την παράμετρο της σελίδας για να ανακτήσετε διαφορετικά σύνολα αποτελεσμάτων αναζήτησης. Αυτό μπορεί να είναι χρήσιμο κατά την εφαρμογή της σελίδας ή όταν θέλετε να αποκτήσετε εικόνες από διαφορετικές σελίδες των αποτελεσμάτων αναζήτησης. Ομοίως, μπορείτε να ορίσετε την παράμετρο per_page για να ελέγξετε τον αριθμό των φωτογραφιών που επιστρέφονται ανά απάντηση API. Αυτό σας επιτρέπει να διαχειριστείτε το ποσό των δεδομένων που λαμβάνετε με βάση τις συγκεκριμένες απαιτήσεις σας. Επιπλέον, η παράμετρος προσανατολισμού σας επιτρέπει να φιλτράρετε φωτογραφίες με βάση τον προσανατολισμό τους, όπως το τοπίο ή το πορτρέτο. Καθορίζοντας αυτές τις παραμέτρους στις κλήσεις API, μπορείτε να προσαρμόσετε τα αποτελέσματα που ταιριάζουν στις ανάγκες του έργου σας.

12. Ναι, υπάρχουν όρια στον αριθμό των αιτημάτων API που μπορείτε να κάνετε με το API UNSPLASH, ειδικά για εφαρμογές επίδειξης. Αυτά τα όρια έχουν σχεδιαστεί για να αποτρέψουν την κατάχρηση και να εξασφαλίσουν δίκαιη χρήση του API. Όταν καταχωρίσετε την αίτησή σας και λαμβάνετε ένα κλειδί API, συνήθως θα έχετε προκαθορισμένο όριο στον αριθμό των αιτήσεων που επιτρέπονται ανά ώρα ή ανά ημέρα. Είναι σημαντικό να αναθεωρήσετε την τεκμηρίωση ή τους όρους υπηρεσίας του UNSPLASH API για να κατανοήσετε τα συγκεκριμένα όρια που ισχύουν για την αίτησή σας. Εάν αναμένετε να υπερβείτε τα προεπιλεγμένα όρια, ίσως χρειαστεί να αναβαθμίσετε τον λογαριασμό σας ή να εξερευνήσετε εναλλακτικές επιλογές που παρέχονται από το UNSPLASH για υψηλότερη χρήση όγκου.

Ένας αρχάριος’Οδηγός S για το API Unsplash στο JavaScript

Μπορείτε να δείτε το unsplash’Στατιστικά S σε πραγματικό χρόνο, αλλά εδώ είναι μερικά σημεία σφαίρας:

Το Unsplash έχει API

Э э э э э э э э э э э э э э э э э э э э э э э э э э э э э э э э э э

Ы з з з з з з з и и и и п п п п п п з п з з з з з з з з з п. С п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п п. ПOчем э э э э э э э э э э э п п п п п п п?

Э э э э э а а а а и е е з з л л л л л л л э э э э э э э э э э э э Κοιτάζοντας το ριμπάγ. С с п п п п п э э э э э э э э э э э э э э э э э э э э э э э э э э э э. Д э э э э д д д и и д д д ρίας н и д д д д д д д д д д д д д д д д д д д д д д д д д д д д д д д д д д д.

И и з а а а а а а а а ы ы з .. Е е е е д п п ж ж ж ж ж ж ж ж ж ж ж ж ж ж ж ж ж ж п п п п п п п п п п п п п п п п п. Орrρά. Пороннαι.

ПON п п е е а а τροφή пρέφ а а а а а τροφήλου. е е е и τροφή ее же жÉ в в ж и и и и ч ч.

Ένας αρχάριος’Οδηγός S για το API Unsplash στο JavaScript

Το API Unsplash είναι ένα εξαιρετικό εργαλείο για κάθε προγραμματιστή JavaScript, ανεξάρτητα από το επίπεδο εμπειρίας τους. Διευκολύνει την εύρεση και τη χρήση εικόνων υψηλής ποιότητας στα έργα σας. Αυτός ο οδηγός θα σας δείξει, βήμα-βήμα, πώς να εγκαταστήσετε τη βιβλιοθήκη Unsplash στον κόμβο σας.JS Project, πραγματοποιήστε κλήσεις API για αναζήτηση φωτογραφιών και αποθηκεύστε τις επιστρεφόμενες εικόνες στην τοπική σας μονάδα δίσκου. Με αυτόν τον οδηγό, θα γίνετε γρήγορα ειδικός στη χρήση του API Unsplash.

Heads Up, αυτό το σεμινάριο είναι το δεύτερο μέρος της σειράς μου σχετικά με τη χρήση JavaScript για αυτοματοποίηση του blogging. Συνιστώ ανεπιφύλακτα να ελέγξετε το πρώτο σεμινάριο, “Εισαγωγή στο OpenAi API στο JavaScript” Πριν συνεχίσετε καθώς καλύπτει τη ρύθμιση του έργου και σας δίνει μια ιδέα για το τι εμείς’Προσπαθώ να πετύχετε εδώ.

Μπορείτε να βρείτε τον πλήρη κωδικό στο GitHub σε αυτόν τον σύνδεσμο.

Προϋποθέσεις

• Βασικές γνώσεις του JavaScript
• Ένας κόμβος έτοιμου για μεταφορά.έργο JS
• Λογαριασμός προγραμματιστών Unsplash

Τι εσύ’Θα μάθω

• Πώς να αποκτήσετε ένα πλήκτρο API Unsplash: σας καθοδηγεί στη διαδικασία δημιουργίας ενός λογαριασμού προγραμματιστή 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 εγκατάστασης unsplash-js node-fetch στο τερματικό σας για να εγκαταστήσετε δύο ακόμη πακέτα NPM πριν συνεχίσετε. Αυτό είναι ένα γρήγορο βήμα που’Θα σιγουρευτώ σε εσάς’Όλοι θα προχωρήσουν με αυτό το σεμινάριο και θα αξιοποιήσετε σε αυτό που εσείς’Έμαθε πριν.

NPM Εγκατάσταση unsplash-js node-fetch

Η δομή του φακέλου μας περιλαμβάνει τώρα το νέο εικόνες και ανυψωμένος φακέλοι στο έργο. Θα πρέπει να μοιάζει με αυτό:

��WordPress-utomation 
┣ ��node_modules 
┣ ��SRC 
┃ ┣ ��Images 
┃ ┃ ┗ �� �� �� �� �� �� ��.jpg 
┃ ┣ ��openai 
┃ ┃ ┗ openai.JS 
┃ ┣ ��Unsplash 
┃ ┃ ┗ ��Unsplash.JS 
┣ .env 
┣ .γουρουνότι 
┣ .καλαμάκι 
┣ ευρετήριο.JS 
┣ πακέτο κλειδώματος.json 
┗ πακέτο.json 

Κάντε κλήση API Unsplash και αποθηκεύστε την επιστρεφόμενη φωτογραφία

// unsplash.JS

εισαγωγή < createApi >από το 'Unsplash-JS'
εισαγωγή εισόδου από το 'Node-Fetch'
Εισαγωγή FS από το 'FS'


Export Class Unsplash Constructor (AccessKey) // Δημιουργήστε μια παρουσία του API UNSPLASH χρησιμοποιώντας το παρεχόμενο κλειδί πρόσβασης 
Αυτό.unsplash = createApi (< accessKey, fetch >) 
>
 
async getPhoto (Τύπος, ερώτημα, σελίδα = 1, per_page = 8, προσανατολισμός = 'landscape') δοκιμάστε // Στείλτε ένα αίτημα στο API UNSPLASH για αναζήτηση φωτογραφιών 
const response = περιμένετε αυτό.ανυψωμένος.Αναζήτηση.getPhotos (ερώτημα, 
σελίδα, 
ανά σελίδα, 
προσανατολισμός, 
>);
 
// Επιλέξτε μια τυχαία φωτογραφία από την απάντηση 
const arandomphoto = απάντηση.απάντηση.Αποτελέσματα [Μαθηματικά.δάπεδο (μαθηματικά.τυχαίο () * 8)]; 
// Λάβετε το κανονικό url φωτογραφίας μεγέθους 
const photourl = arandomphoto.urls.τακτικός; 
// Λήψη της φωτογραφίας 
const photo = περιμένοντας fetch (photourl); 
// Λάβετε το buffer φωτογραφιών 
const photobuffer = περιμένω φωτογραφία.ArrayBuffer (); 
// Δημιουργία λεζάντα για τη φωτογραφία - σε στυλ απόδοσης unsplash 
const caption = ` 
 
Φωτογραφία από 
 
"rel =" noopener ugc nofollow "target =" _ blank "> 
$ 
 
επί 
 
Ανυψωμένος 
 
`;
 
// Ελέγξτε την τιμή της παράμετρο "τύπου" και εκτελέστε το αντίστοιχο μπλοκ κώδικα 
διακόπτης (τύπος) θήκη 'buffer': 
// μετατρέψτε το buffer φωτογραφιών σε uint8Array 
const data = νέο uint8Array (photobuffer); 
κονσόλα.log (`$.JPG buffer έτοιμο &raquo;); 
// επιστρέψτε ένα αντικείμενο που περιέχει το buffer και τα χαρακτηριστικά της φωτογραφίας 
Χαρακτηριστικά επιστροφής: Λεζάντα: Λεζάντα, 
Τίτλος: ερώτημα.tolowerCase (), 
alt_text: `Μια εικόνα $`, 
>, 
Buffer: Δεδομένα 
>; 
φάκελος υπόθεσης': 
// μετατρέψτε το buffer φωτογραφιών σε buffer 
const εικόνα = buffer.από (photobuffer); 
// Δημιουργήστε μια διαδρομή αρχείου για τη φωτογραφία 
const filePath = `src/εικόνες/$.jpg` 
// γράψτε τη φωτογραφία στο σύστημα αρχείων 
Περιμένετε FS.υπόσχεση.writefile (filePath, εικόνα); 
κονσόλα.log (`$.JPG Saved`); 
Διακοπή; 
Προκαθορισμένο: 
κονσόλα.log (`Μη έγκυρος τύπος: $`); 
επιστροφή null; 
> 
> Κονσόλα αλίευση (σφάλμα).log (σφάλμα); 
επιστροφή null; 
> 
>

>

Σε αυτήν την αναβαθμισμένη τάξη Ανυψωμένος.JS, Ο κώδικας ξεκινά με την εισαγωγή των απαραίτητων μονάδων και πακέτων:

• Η μέθοδος CreateApi από το πακέτο UNSPLASH-JS χρησιμοποιείται για τη δημιουργία μιας παρουσία του API UNSPLASH.
• Το πακέτο λήψης χρησιμοποιείται για να κάνει ένα αίτημα λήψης για λήψη της φωτογραφίας.
• Η ενσωματωμένη μονάδα FS (System System) χρησιμοποιείται για τη δημιουργία μιας ροής εγγραφής για να αποθηκεύσετε τη φωτογραφία.

Στη συνέχεια, ορίζω μια λειτουργία async getPhoto που περιτυλίγει ολόκληρο τον κωδικό. Μέσα στη συνάρτηση, χρησιμοποιώ το μπλοκ δοκιμής για να χειριστεί οποιοδήποτε σφάλμα που μπορεί να συμβεί κατά τη λήψη των αιτήσεων ή την αποθήκευση της φωτογραφίας.

Μέσα στο μπλοκ δοκιμής, χρησιμοποιώ την αναζήτηση.Μέθοδος GetPhotos (PARAMS) του API UNSPLASH για αναζήτηση φωτογραφιών με το ερώτημα, τη σελίδα, τη σελίδα, το per_page και τον προσανατολισμό .

Μπορείτε επίσης να προσαρμόσετε το per_page, τη σελίδα, τον προσανατολισμό και το ερώτημα για να λάβετε τις συγκεκριμένες φωτογραφίες που θέλετε και μπορείτε επίσης να ελέγξετε την απάντηση JSON για το αποτέλεσμα και να χρησιμοποιήσετε διαφορετικά μεγέθη της εικόνας αλλάζοντας τις διευθύνσεις URL.ακατέργαστες διευθύνσεις URL.Πλήρεις, διευθύνσεις URL.τακτική, κ.λπ.

Στη συνέχεια, χρησιμοποιώ το πακέτο Fetch για να κάνω ένα αίτημα GET στον σύνδεσμο λήψης της φωτογραφίας παρέχοντας το τυχαίο κανονικό μέγεθος της φωτογραφίας χρησιμοποιώντας το Arandomphoto.urls.τακτική και περιμένω την απάντηση.

Η μέθοδος ArrayBuffer () είναι να αποκτήσετε το buffer φωτογραφιών.

Χρησιμοποιώ το FS.υπόσχεση.WriteFile (FilePath, Image) Μέθοδος για να αποθηκεύσετε τη φωτογραφία στην τοπική μονάδα, θα γράψει το buffer στο αρχείο.

Σε περίπτωση αποτυχίας, χρησιμοποιώ το μπλοκ αλιευμάτων για να καταγράψω το σφάλμα στην κονσόλα.

Συμβουλές: Εάν θέλετε να επιλέξετε τυχαία μία από τις φωτογραφίες που επιστρέφονται από το API, μπορείτε να χρησιμοποιήσετε τα μαθηματικά.δάπεδο (μαθηματικά.Random () * 8) Μέθοδος. Αυτό θα δημιουργήσει έναν τυχαίο αριθμό μεταξύ 0 και 9, ο οποίος μπορεί να χρησιμοποιηθεί ως δείκτης του αποτελέσματος που θέλετε να επιλέξετε.

// ευρετήριο.JS

εισαγωγή < Unsplash >από "./src/unsplash/unsplash.JS ";
Εισαγωγή dotenv από το 'dotenv';
δελτίο.config ();

const unsplash = νέο unsplash (διαδικασία.env.Unsplash_key);
Περιμένετε το Unsplash.getPhoto ('αρχείο', 'κωδικοποίηση σε φορητό υπολογιστή');

Όπως στο πρώτο σεμινάριο, στο δείκτης.JS αρχείο, εισήγαμε το Ανυψωμένος.JS τάξη και δημιούργησε μια νέα παρουσία του περνώντας στο unsplash_key . Αποθηκεύσαμε το κλειδί API σε ένα .env αρχείο για πρόσθετη ασφάλεια. Στη συνέχεια, τρέξαμε τη μέθοδο GetPhoto περνώντας στον τύπο απόκρισης που θέλαμε και τη φράση αναζήτησης για τη φωτογραφία. Και voila! Αποθηκεύσαμε μια εικόνα που ονομάζεται κωδικοποίηση σε φορητό υπολογιστή.jpg Στο SRC/ Images/ Folder.

συμπέρασμα

Το API Unsplash είναι ένα ισχυρό εργαλείο που διευκολύνει την εύρεση και τη χρήση όμορφων εικόνων στα έργα σας. Το πακέτο UNSPLASH-JS απλοποιεί τη διαδικασία πραγματοποίησης κλήσεων API στο JavaScript.

Σε αυτόν τον οδηγό, μάθατε πώς να εγκαταστήσετε τα απαραίτητα πακέτα, να κάνετε κλήσεις API για αναζήτηση φωτογραφιών και να αποθηκεύσετε τις επιστρεφόμενες εικόνες στην τοπική σας μονάδα δίσκου. Επίσης, μάθατε πώς να χειρίζεστε σφάλματα και πώς να αποκτήσετε πρόσβαση σε μια τυχαία φωτογραφία από τα αποτελέσματα που επιστρέφονται από το API.

Ως επόμενο βήμα, μπορείτε να το αξιοποιήσετε και να εξερευνήσετε περισσότερες επιλογές που διατίθενται στο API UNSPLASH, όπως η σελίδα, να κατεβάσετε τις φωτογραφίες διαφορετικών μεγεθών, να κατεβάσετε τις φωτογραφίες διαφορετικού προσανατολισμού και επίσης μπορείτε να χρησιμοποιήσετε τις φωτογραφίες για εμπορική και μη εμπορική χρήση ακολουθώντας τις οδηγίες που παρέχονται από το UNSPLASH. Μπορείτε επίσης να δοκιμάσετε να χρησιμοποιήσετε το API με διαφορετικές βιβλιοθήκες όπως το Axios και να εξερευνήσετε τα άλλα χαρακτηριστικά που παρέχονται από το API UNSPLASH.

Περαιτέρω αναγνώσεις

Αυτοματοποίηση ιστολογίου με σειρά Tutorial JavaScript

• OpenAi API (Μέρος Ι&Μέρος II): Αυτοματοποιημένη δημιουργία περιεχομένου
• Api unsplash: Αυτοματοποιημένη επιλογή εικόνας για αναρτήσεις ιστολογίου
• WordPress API: Αδιάβροχη μεταφόρτωση περιεχομένου ιστολογίου
• Αυτοματοποίηση blogging: Φέρτε τα πάντα μαζί

Επίσημα έγγραφα

�� unsplash’api

Το Unsplash είναι η ταχύτερα αναπτυσσόμενη βιβλιοθήκη άνω των 900k+ δωρεάν, ποιότητας, υψηλής ευκρίνειας, φωτογραφιών χωρίς άδεια στον κόσμο. Κάθε φωτογραφία στο Unsplash είναι ελεύθερη για χρήση, τόσο για προσωπική όσο και για εμπορική χρήση. Χωρίς πληρωμές και δεν απαιτούνται συνδρομές άδειας χρήσης.

Το Unsplash κάνει την εμπειρία της εύρεσης ποιότητας, χρήσης φωτογραφίας ευκολότερη, ταχύτερη και καλύτερη από ποτέ, γι ‘αυτό’Εμπιστευθείτε από τον κόσμο’Οι καλύτερες ομάδες προϊόντων και προϊόντα για δημιουργούς.

Στατιστικά στοιχεία

Μπορείτε να δείτε το unsplash’Στατιστικά S σε πραγματικό χρόνο, αλλά εδώ είναι μερικά σημεία σφαίρας:

�� Οι φωτογραφίες στο Unsplash συμβάλλουν πάνω από 127K+ φωτογράφοι και χρησιμοποιείται από 70+ εκατομμύρια δημιουργικά
⚡ 11 δισεκατομμύρια+ φωτογραφίες σερβίρονται κάθε μήνα
⬇* 55 εκατομμύρια+ φωτογραφίες μεταφέρονται κάθε μήνα
�� 20 φωτογραφίες μεταφέρονται κάθε δευτερόλεπτο (για το πλαίσιο, αυτό’S Το μέγεθος του αποθέματος Adobe, Shutterstock και Getty συνδυάζεται)

Η βιβλιοθήκη Unsplash

Η ποιότητα της βιβλιοθήκης και της προσβασιμότητας είναι αυτό που διαφοροποιεί το μη διαχωρισμό σε παραδοσιακούς ιστότοπους φωτογραφιών που υπάρχουν σήμερα.

• Χειροκίνητη εκτροπή
  Η συντακτική μας ομάδα επιμένει κάθε φωτογραφία που διανέμεται στο Unsplash για να διασφαλίσει ότι η βιβλιοθήκη μας ενημερώνεται με αυθεντική, παγκόσμια κλάση, υψηλής ανάλυσης, φωτογραφία. Δεν υπάρχουν πλέον τυρώδες, φωτογραφίες αποθεμάτων. Εστιάζουμε στην ποιότητα, όχι στην ποσότητα.
• Προσιτότητα
  Όλες οι φωτογραφίες διαθέτουν άδεια με την άδεια Unsplash, καθιστώντας τους δωρεάν τόσο για προσωπικές όσο και για εμπορικές χρήσεις. Δεν υπάρχει ανάγκη για πληρωμές ή συγχέοντας άδειες με ημερομηνίες λήξης.
• Περιεχόμενο εγγυημένο ασφαλές για εργασία
  Οι φωτογραφίες χωρίς PLASH είναι PG-13 και επανεξετάζονται με το χέρι πριν εκτίθενται σε unsplash ή διανέμονται μέσω του unsplash’api. Το API μας μπορεί επίσης να λάβει προσαρμοσμένες συλλογές φωτογραφιών για περαιτέρω εγγύηση ποιότητας και ασφάλειας.
• Αποκλειστικότητα φωτογραφιών
  Ανυψωμένος’Η βιβλιοθήκη S είναι αποκλειστική για το Unsplash – δηλαδή, κανένας άλλος ιστότοπος αποθεμάτων δεν μπορεί να φιλοξενήσει ή να διανείμει αυτές τις φωτογραφίες στους ιστότοπούς τους. Η συνεργασία με το Unsplash σημαίνει ότι έχετε πρόσβαση σε μοναδικό, όμορφο περιεχόμενο.

Μελέτες περιπτώσεων API

Ανυψωμένος’Το API είναι το πιο ισχυρή μηχανή φωτογραφίας στον κόσμο με πάνω από 1000+ συνεργάτες, περισσότερα από 1 δισεκατομμύριο κλήσεις ανά μήνα, και 99.998% uptime τις τελευταίες 30 ημέρες.

Χρησιμοποιώντας το API Unsplash για να αναζητήσετε φωτογραφίες σε μια εφαρμογή React

Μου δόθηκε πρόσφατα το καθήκον να προσθέσω ένα χαρακτηριστικό σε μια εφαρμογή που θα έδινε στους χρήστες τη δυνατότητα να επιλέξουν μια εικόνα για αποθήκευση με ένα αντικείμενο. Ευτυχώς, η επιλογή του API ήταν στο χέρι μου! Δυστυχώς, είχα’t πραγματικά συνεργάστηκε με οποιαδήποτε API εικόνας πριν! Έτσι, όπως ίσως έχετε μαντέψει, άρχισα να παίζω με το API Unsplash – και εγώ’εδώ για να μοιραστώ την εμπειρία μου χρησιμοποιώντας αυτήν την πολύ εύχρηστη διεπαφή, ειδικά στο πλαίσιο της ενσωμάτωσής της σε ένα έργο React.

Ξεκινώντας

Για να αποκτήσετε πρόσβαση στο API, πρώτα hop στη σελίδα Unsplash Developers και δημιουργήστε έναν λογαριασμό. Μόλις ρυθμιστεί ο λογαριασμός σας, εσείς’Θα πρέπει να καταχωρήσετε την εφαρμογή σας – Σημειώστε ότι ενώ αρχικά σε λειτουργία επίδειξης, θα περιορίζεστε σε 50 αιτήματα ανά ώρα (τα οποία βρήκα ήταν περισσότερο από αρκετό για δοκιμές κ.λπ.). Στη συνέχεια, στη σελίδα για την εφαρμογή που μόλις εγγραφείτε, σημειώστε τα δύο μοναδικά κλειδιά’έδωσαν πρόσβαση στο API, το ‘Κλειδί πρόσβασης’ και το ‘Μυστικό κλειδί,’ που εσύ’θα χρειαστεί όταν υποβάλλετε ορισμένα αιτήματα, ανάλογα με τα απαιτούμενα δικαιώματα.

Επειδή εμείς’Εξετάζοντας ειδικά την ενσωμάτωση αυτού σε μια εφαρμογή React, ας’S Χρησιμοποιήστε το περιτύλιγμα JavaScript για το API. Για να το προσθέσετε στο έργο/το πακέτο σας.Αρχείο JSON:

$ NPM Εγκατάσταση unsplash-js

Αυτή η βιβλιοθήκη καθιστά την αλληλεπίδραση με το API πολύ εύκολο, δημιουργώντας μια παρουσία ενός αντικειμένου Unsplash που περιέχει τα πλήκτρα εφαρμογής/auth, στο οποίο μπορείτε να καλέσετε διάφορες μεθόδους για να χτυπήσετε συγκεκριμένα τελικά σημεία και να εκτελέσετε ορισμένες εργασίες.

Αναζήτηση με λέξη -κλειδί

Το API έχει ένα απίστευτο βάθος λειτουργικότητας, αλλά εμείς’θα επικεντρωθεί σε ένα μόνο έργο – αναζητώντας φωτογραφίες με μια δεδομένη λέξη -κλειδί. Το τελικό σημείο που εμείς’Το να χτυπάς σε αυτή την περίπτωση είναι:

Λάβετε https: // api.ανυψωμένος.com/αναζήτηση/φωτογραφίες

Οι παραμέτρους που μπορούμε να στείλουμε μαζί με το αίτημα περιλαμβάνουν: Query, που είναι οι όροι αναζήτησης, η σελίδα και το per_page, οι οποίοι είναι ο αριθμός σελίδας για ανάκτηση και τον αριθμό των στοιχείων που εσείς’D αρέσει να επιστρέφει ανά σελίδα. Και οι δύο αυτές παραμέτρους είναι προαιρετικές, προεπιλογή σε 1 και 10, αντίστοιχα. Μπορείτε επίσης να περάσετε τα αναγνωριστικά συλλογών για να περιορίσετε την αναζήτηση σε συγκεκριμένες συλλογές, καθώς και τον προσανατολισμό για να ανακτήσετε μόνο το τοπίο, το πορτρέτο ή τις φωτογραφίες προσανατολισμένες στο Squarish.

Έτσι, για παράδειγμα, μια αναζήτηση φωτογραφιών με λέξη -κλειδί ‘Σκύλοι,’ Συμπεριλαμβανομένων των προεπιλεγμένων τιμών για τη σελίδα και το per_page, θα έμοιαζε με αυτό:

Λάβετε https: // api.ανυψωμένος.com/αναζήτηση/φωτογραφίες?Ερώτημα = σκύλοι

Που στη συνέχεια επιστρέφει ένα αντικείμενο σαν αυτό:

 "Σύνολο": 30536, 
"Total_pages": 3054, 
"Αποτελέσματα": [ 
 "ID": "do2wtawctc4", 
"Created_at": "2019-03-25T12: 30: 46-04: 00", 
"updated_at": "2019-05-17T19: 52: 55-04: 00", 
"Πλάτος": 4000, 
"Ύψος": 5000, 
"Χρώμα": "#261d16", 
"Περιγραφή": null, 
"alt_description": "Ένα γκρίζο και λευκό πόσιμο νερό από ένα κουτί με κουτί", 
"URL": "RAW": "https: // εικόνες.ανυψωμένος.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & IXID = Eyjhchbfawqiojcymdi4fq ", 
"Full": "https: // εικόνες.ανυψωμένος.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & Q = 85 & FM = JPG & Crop = Entropy & CS = SRGB & IXID = Eyjhchbfawqiojcymdi4fq ", 
"Κανονική": "https: // εικόνες.ανυψωμένος.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & Q = 80 & FM = JPG & Crop = Entropy & CS = TinySRGB & W = 1080 & FIT = MAX & IXID = EYJHCHBFAWQIOJCYMDI4FQ ", 
"Μικρό": "https: // εικόνες.ανυψωμένος.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 80 & fm = jpg & crop = entropy & cs = tinysrgb & w = 400 & fit = max & ixid = eyjhchbfawqiojcymdi4fq ", 
"Thumb": "https: // εικόνες.ανυψωμένος.com/photo-1553531384-411a247ccd73?ixlib = rb-1.2.1 & q = 80 & fm = jpg & crop = entropy & cs = tinysrgb & w = 200 & fit = max & ixid = eyjhchbfawqiojcymdi4fq " 
>, 
"Σύνδεσμοι": "Self": "https: // api.ανυψωμένος.com/photos/do2wtawctc4 ", 
"html": "https: // unsplash.com/photos/do2wtawctc4 ", 
"Λήψη": "https: // unsplash.com/photos/do2wtawctc4/download ", 
"download_location": "https: // api.ανυψωμένος.com/photos/do2wtawctc4/download " 
>,// . 

Έτσι λοιπόν από τη συστοιχία αποτελεσμάτων, μπορούμε να τραβήξουμε συνδέσμους, ετικέτες, περιγραφές κ.λπ. Από κάθε φωτογραφία επέστρεψε αρκετά εύκολα.

Αλλά πριν φτάσουμε τόσο μακριά, πρέπει πρώτα να δημιουργήσουμε τα πράγματα στην εφαρμογή React μας. Δημιουργήστε μια παρουσία με το κλειδί πρόσβασης και το μυστικό κλειδί:

Εισαγωγή unsplash από το 'Unsplash-JS'

const unsplash = νέο unsplash (appliceId: "", 
μυστικό: ""
>);

Αυτή η βιβλιοθήκη περιλαμβάνει επίσης το React Native Integration-όταν χρησιμοποιείτε, απλά εισάγετε από το UNSPLASH-JS/NATIVE αντ ‘αυτού.

Τώρα, μπορούμε απλά να καλέσουμε διάφορες μεθόδους εμφάνισης στο Unsplash που παρέχουν πρόσβαση στα τελικά σημεία του API. Στην περίπτωσή μας, εμείς’Αναζητώντας φωτογραφίες με λέξη -κλειδί, οπότε εμείς’θα χρησιμοποιήσω την αναζήτηση.Φωτογραφίες (λέξη -κλειδί, σελίδα, per_page) . Αυτή η μέθοδος απαιτεί έως και τρία επιχειρήματα – λέξη -κλειδί, μια συμβολοσειρά, η οποία απαιτείται, ενώ τα άλλα δύο επιχειρήματα, η σελίδα και το per_page είναι προαιρετικά.

ανυψωμένος.Αναζήτηση.Φωτογραφίες ("γάτες", 1) 
.Τότε (Tojson) 
.τότε (json => // κάντε κάτι με το αντικείμενο JSON 
>);

Ο παραπάνω κώδικας χρησιμοποιεί επίσης την εύχρηστη μέθοδο Helper Tojson, η οποία εκτελεί το έργο της μετατροπής της απόκρισης API σε δεδομένα JSON – συνήθως γίνεται με κάτι σύμφωνα με τις γραμμές του res => res.json () . Για να χρησιμοποιήσετε αυτή τη μέθοδο βοηθού, απλώς εισαγάγετε την από το UNSPLASH-JS επίσης:

Εισαγάγετε το Unsplash, < toJson >Από το 'Unsplash-JS

Και αυτό’έτσι! Τώρα εσύ’Έχετε τα αντικείμενα φωτογραφιών σας, με τα οποία μπορείτε να κάνετε ό, τι επιθυμεί η μικρή σας καρδιά!