Εισαγωγή στοAPI προγράμματος περιήγησης

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

Σε αυτό το άρθρο, θα εξερευνήσουμε10 υποχρησιμοποιημένα API προγράμματος περιήγησηςπου μπορεί να σας βοηθήσει να λύσετε κοινά προβλήματα πιο αποτελεσματικά. Γιατί να γεμίζετε το έργο σας με βιβλιοθήκες όταν το πρόγραμμα περιήγησης μπορεί να κάνει τη δουλειά;

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

1. Structured Clone API

Το Structured Clone API είναι μια αλλαγή παιχνιδιών για την αντιγραφή αντικειμένων. Για πολλούς προγραμματιστές, η αντιγραφή αντικειμένων ήταν πάντα μια δύσκολη εργασία, που συχνά απαιτεί βιβλιοθήκες ή πολύπλοκες λειτουργίες. Με αυτό το API, μπορείτε να δημιουργήσετε ένα βαθύ αντίγραφο ενός αντικειμένου χωρίς κόπο:

const copy = structuredClone(original);

Αυτό το one-liner λύνει πολλά προβλήματα:

Χειρίζεται πολύπλοκους τύπους δεδομένων όπωςΧάρτης, Σειρά, καιΑμορφη μάζα.
Διαχειρίζεται κυκλικές αναφορές χωρίς να διακόπτεται ο κώδικάς σας.
Σημείωση: Δεν κλωνοποιεί λειτουργίες, κάτι που είναι σημαντικό να θυμάστε.

Για παράδειγμα, σκεφτείτε πότε πρέπει να αντιγράψετε ένα σύνθετο αντικείμενο που περιλαμβάνει ένθετους πίνακες ή αντικείμενα. Η χρήση παραδοσιακών μεθόδων όπως η σειριοποίηση JSON μπορεί να οδηγήσει σε απώλεια δεδομένων ή σφάλματα, ειδικά με κυκλικές αναφορές. Το Structured Clone API εξαλείφει αυτές τις ανησυχίες, παρέχοντας έναν απρόσκοπτο τρόπο αντιγραφής των δεδομένων σας.

Υποστήριξη:Διατίθεται σε σύγχρονα προγράμματα περιήγησης όπως Chrome, Firefox και Safari, καθιστώντας το ασφαλές για χρήση στην παραγωγή.

Πρακτική συμβουλή: Όταν χρησιμοποιείτε αυτό το API, ελέγχετε πάντα τη συμβατότητα του προγράμματος περιήγησης για να βεβαιωθείτε ότι η εφαρμογή σας λειτουργεί με συνέπεια σε διαφορετικά περιβάλλοντα.

2. API απόδοσης

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

performance.mark("start");
// κωδικός για μέτρηση
performance.mark("τέλος");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("υπολογισμός"));

Αυτό μπορεί να σας βοηθήσει να προσδιορίσετε:

Ποιες λειτουργίες είναι πιο γρήγορες.
Εάν οι βελτιστοποιήσεις είναι πράγματι ωφέλιμες.
Είτε ένα Worker είτε το WASM αξίζει να εφαρμοστεί.

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

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

Υποστήριξη:Λειτουργεί άριστα σε όλα τα σύγχρονα προγράμματα περιήγησης.

Πρακτική συμβουλή: Χρησιμοποιήστε το Performance API κατά την ανάπτυξη για να συγκεντρώσετε δεδομένα σχετικά με την απόδοση του κώδικά σας. Αυτές οι πληροφορίες μπορούν να καθοδηγήσουν τις προσπάθειες βελτιστοποίησης και να βελτιώσουν την εμπειρία χρήστη.

3. API ορατότητας σελίδας

Αναρωτηθήκατε ποτέ τι συμβαίνει όταν ένας χρήστης αλλάζει καρτέλες; Με το API ορατότητας σελίδας, μπορείτε να εντοπίσετε πότε η καρτέλα σας είναι ενεργή ή όχι:

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    video.pause();
  }
});

Αυτό το API είναι απίστευτα χρήσιμο για:

Βασικά API προγράμματος περιήγησης που πρέπει να γνωρίζετε

📦

Structured Clone API
Αντιγράψτε σύνθετα αντικείμενα χωρίς κόπο.

📈

API απόδοσης
Μετρήστε και βελτιώστε την απόδοση ιστού.

👀

API ορατότητας σελίδας
Εντοπίστε πότε η σελίδα είναι ορατή.

📏

ResizeObserver
Απαντήστε στις αλλαγές μεγέθους στοιχείων.

🔍

Παρατηρητής Διασταύρωσης
Παρακολούθηση ορατότητας στοιχείων.

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

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

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

Υποστήριξη:Συμβατό με όλα τα σύγχρονα προγράμματα περιήγησης.

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

4. ResizeObserver

Για σχεδιασμό με απόκριση, η παρακολούθηση των μεγεθών των στοιχείων μπορεί να είναι δύσκολη. Το ResizeObserver API σάς επιτρέπει να παρακολουθείτε τις αλλαγές στο μέγεθος ενός στοιχείου:

const ro = νέο ResizeObserver(εγγραφές => {
  για (συνεχής καταχώριση εγγραφών) {
    console.log(entry.contentRect.width);
  }
});
ro.observe(στοιχείο);

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

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

Υποστήριξη:Ευρέως διαθέσιμο σε σύγχρονα προγράμματα περιήγησης.

Πρακτική συμβουλή: Χρησιμοποιήστε το ResizeObserver για να βελτιώσετε την εμπειρία χρήστη διασφαλίζοντας ότι η διάταξη της εφαρμογής σας ανταποκρίνεται ομαλά στις αλλαγές μεγέθους. Αυτό είναι ιδιαίτερα ωφέλιμο για σχέδια με απόκριση, όπου τα στοιχεία πρέπει να προσαρμόζονται απρόσκοπτα.

5. Intersection Observer API

Ένα άλλο ισχυρό εργαλείο είναι το Intersection Observer API. Αυτό σας επιτρέπει να παρακολουθείτε πότε ένα στοιχείο εισέρχεται ή εξέρχεται από τη θύρα προβολής:

const Observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Φόρτωση περιεχομένου ή ενεργοποίηση κινούμενων εικόνων
    }
  });
});
Observer.observe(targetElement);

Οι περιπτώσεις χρήσης περιλαμβάνουν:

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

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

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

Υποστήριξη:Διατίθεται σε σύγχρονα προγράμματα περιήγησης.

Πρακτική συμβουλή: Εφαρμόστε το Intersection Observer API για βελτιστοποίηση απόδοσης, ειδικά σε εφαρμογές με μεγάλο περιεχόμενο. Αυτό θα σας βοηθήσει να δημιουργήσετε μια πιο ομαλή εμπειρία για τους χρήστες, ενώ παράλληλα θα εξοικονομήσετε πόρους.

6. Ανάκτηση API

Οι μέρες του XMLHttpRequest έχουν περάσει. Το Fetch API απλοποιεί τη διαδικασία υποβολής αιτημάτων δικτύου:

fetch(url)
  .then(response => answer.json())
  .then(data => console.log(data));

Με αυτό το API, μπορείτε εύκολα:

Χειριστείτε διαφορετικούς τύπους απόκρισης, όπως JSON, κείμενο και blobs.
Χρησιμοποιήστε το async/wait για καθαρότερο και πιο ευανάγνωστο κώδικα.
Ορίστε προσαρμοσμένες κεφαλίδες για τα αιτήματά σας, καθιστώντας το ευέλικτο για διάφορα API.

Για παράδειγμα, ίσως χρειαστεί να ανακτήσετε δεδομένα χρήστη από ένα REST API. Με το Fetch API, μπορείτε να γράψετε συνοπτικό και ευανάγνωστο κώδικα που χειρίζεται την ασύγχρονη φύση των αιτημάτων δικτύου χωρίς την πολυπλοκότητα των επανακλήσεων.

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

Υποστήριξη:Υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης.

Πρακτική συμβουλή: Χρησιμοποιήστε το Fetch API για όλα τα αιτήματα δικτύου σας για να βελτιώσετε την αναγνωσιμότητα και τη συντηρησιμότητα. Θυμηθείτε να χειρίζεστε σωστά τα σφάλματα για να εξασφαλίσετε μια ομαλή εμπειρία χρήστη.

7. Web Storage API

Η αποθήκευση των προτιμήσεων χρήστη ή των δεδομένων περιόδου σύνδεσης δεν ήταν ποτέ ευκολότερη με το API του Web Storage. Παρέχει δύο κύριες επιλογές αποθήκευσης:

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

Παράδειγμα:

Χρήση του Structured Clone API

Δημιουργία πρωτότυπου αντικειμένου

Καθορίστε το αντικείμενο που θα αντιγραφεί.

Call structuredClone()

Χρησιμοποιήστε το API για να κλωνοποιήσετε το αντικείμενο.

Χειριστείτε σύνθετους τύπους

Υποστηρίζει Map, Set και Blob.

Αποφύγετε την κλωνοποίηση συναρτήσεων

Να θυμάστε ότι δεν κλωνοποιεί λειτουργίες.

localStorage.setItem('key', 'value');
τιμή const = localStorage.getItem('κλειδί');

Αυτό το API είναι ιδιαίτερα χρήσιμο για:

Αποθήκευση προτιμήσεων χρήστη, όπως ρυθμίσεις θέματος ή επιλογές γλώσσας.
Διαχείριση δεδομένων περιόδου σύνδεσης, όπως διακριτικά ελέγχου ταυτότητας χρήστη.
Παρακολούθηση ειδών σε ένα καλάθι αγορών χωρίς να απαιτείται λύση από την πλευρά του διακομιστή.

Για παράδειγμα, εάν δημιουργείτε έναν ιστότοπο ηλεκτρονικού εμπορίου, μπορείτε να χρησιμοποιήσετε το Web Storage API για να θυμάστε τα στοιχεία που προσθέτει ένας χρήστης στο καλάθι του, ακόμα κι αν απομακρυνθεί ή ανανεώσει τη σελίδα.

Υποστήριξη:Υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης.

Πρακτική συμβουλή: Χρησιμοποιήστε το localStorage για δεδομένα που θέλετε να διατηρηθούν στις συνεδρίες και το sessionStorage για δεδομένα που είναι σχετικά μόνο κατά τη διάρκεια μιας επίσκεψης. Λάβετε πάντα υπόψη σας τις συνέπειες για την ασφάλεια κατά την αποθήκευση ευαίσθητων πληροφοριών.

8. Web Notifications API

Το Web Notifications API επιτρέπει στις εφαρμογές web να εμφανίζουν ειδοποιήσεις στους χρήστες. Αυτή η δυνατότητα μπορεί να βελτιώσει την αφοσίωση των χρηστών κρατώντας τους ενήμερους ακόμα και όταν δεν χρησιμοποιούν ενεργά την εφαρμογή σας:

if (Notification.permission !== "χορηγήθηκε") {
  Notification.requestPermission();
}

const notification = new Notification("Hello!", {
  body: "Αυτό είναι ένα μήνυμα ειδοποίησης!",
});

Οι περιπτώσεις χρήσης περιλαμβάνουν:

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

Για παράδειγμα, εάν αναπτύσσετε μια εφαρμογή ανταλλαγής μηνυμάτων, μπορείτε να χρησιμοποιήσετε το Web Notifications API για να ειδοποιήσετε τους χρήστες για νέα μηνύματα ενώ περιηγούνται σε άλλες καρτέλες ή εφαρμογές.

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

Υποστήριξη:Διατίθεται στα περισσότερα σύγχρονα προγράμματα περιήγησης.

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

9. Εργάτες Υπηρεσιών

Το Service Workers είναι μια ισχυρή δυνατότητα που σας επιτρέπει να εκτελείτε σενάρια στο παρασκήνιο, ξεχωριστά από μια ιστοσελίδα. Αυτό επιτρέπει λειτουργίες όπως υποστήριξη εκτός σύνδεσης και συγχρονισμός φόντου:

self.addEventListener('install', event => {
  // Εκτελέστε βήματα εγκατάστασης
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        απάντηση επιστροφής || fetch(event.request);
      })
  )
});

Με το Service Workers, μπορείτε:

Αποθηκεύστε πόρους προσωρινής μνήμης για να κάνετε την εφαρμογή σας διαθέσιμη εκτός σύνδεσης.
Υποκλοπή αιτημάτων δικτύου για την εξυπηρέτηση αποθηκευμένου περιεχομένου ή εναλλακτικές απαντήσεις.
Ενεργοποιήστε τις ειδοποιήσεις push για να διατηρήσετε την αφοσίωση των χρηστών.

Για παράδειγμα, εάν δημιουργείτε μια Προοδευτική εφαρμογή Ιστού (PWA), οι Υπάλληλοι Υπηρεσιών είναι απαραίτητοι για την παροχή μιας απρόσκοπτης εμπειρίας εκτός σύνδεσης. Οι χρήστες μπορούν να συνεχίσουν να αλληλεπιδρούν με την εφαρμογή σας ακόμη και χωρίς σύνδεση στο Διαδίκτυο και τυχόν αλλαγές θα συγχρονιστούν μόλις συνδεθούν ξανά.

Υποστήριξη:Υποστηρίζεται σε σύγχρονα προγράμματα περιήγησης, αλλά πάντα ελέγχετε τη συμβατότητα πριν από την εφαρμογή.

Πρακτική συμβουλή: Χρησιμοποιήστε το API «cache» στο Service Workers σας για να αποθηκεύσετε βασικούς πόρους και να βελτιώσετε τους χρόνους φόρτωσης για τους χρήστες που επιστρέφουν. Βεβαιωθείτε ότι το Service Workers σας έχει εγγραφεί και ενεργοποιηθεί σωστά για βέλτιστη απόδοση.

10. Web Share API

Το Web Share API επιτρέπει στους χρήστες να μοιράζονται περιεχόμενο από την εφαρμογή Ιστού σε άλλες εφαρμογές στη συσκευή τους, όπως μέσα κοινωνικής δικτύωσης:

navigator.share({
  title: 'Web Share API',
  text: 'Ρίξτε μια ματιά σε αυτό το περιεχόμενο!',
  url: 'https://example.com',
}).τότε(() => {
  console.log('Το περιεχόμενο κοινοποιήθηκε με επιτυχία!');
}).catch((σφάλμα) => {
  console.error('Σφάλμα κοινής χρήσης:', σφάλμα);
});

Τα βασικά χαρακτηριστικά του Web Share API περιλαμβάνουν:

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

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

Υποστήριξη:Διατίθεται στα περισσότερα σύγχρονα προγράμματα περιήγησης με υποστήριξη για κινητά.

Πρακτική συμβουλή: Πριν χρησιμοποιήσετε το Web Share API, ελέγξτε αν το υποστηρίζει η συσκευή του χρήστη. Παρέχετε μια εναλλακτική επιλογή για κοινή χρήση εάν το API δεν είναι διαθέσιμο για να εξασφαλίσετε μια απρόσκοπτη εμπειρία.

Σύναψη

Η χρήση των API του προγράμματος περιήγησης μπορεί να βελτιώσει σημαντικά τις εφαρμογές Ιστού σας χωρίς την ανάγκη πρόσθετων βιβλιοθηκών. Σε αυτό το άρθρο, καλύψαμε 10 ισχυρά API, συμπεριλαμβανομένων των Structured Clone API, Performance API και άλλων. Καθένα από αυτά τα εργαλεία μπορεί να βοηθήσει στην απλοποίηση του κώδικά σας και στη βελτίωση της απόδοσης.

Είστε έτοιμοι να ανεβάσετε τις δεξιότητές σας στην ανάπτυξη Ιστού στο επόμενο επίπεδο; Εξερευνήστε αυτά τα API στο επόμενο έργο σας και δείτε πώς μπορούν να λειτουργήσουν για εσάς. Για περαιτέρω ανάγνωση σχετικά με τα εργαλεία που μπορούν να βελτιώσουν την παραγωγικότητά σας, ανατρέξτε στο δικό μαςΜετατροπέας εικόνας σε GIFκαιΔωρεάν μετατροπέας βίντεο σε MP3.

Για περισσότερες πληροφορίες σχετικά με τις πιο πρόσφατες εξελίξεις στις τεχνολογίες Ιστού, επισκεφθείτεOpenAIκαιΑγκαλιασμένο πρόσωπο.