Αυτοματοποίηση χωρίς API: Headless Browser σε πλατφόρμα χαμηλού κώδικα Latenode

Γεια σας, είμαι ο Daniel από το Latenode 👋

Σήμερα, θα συζητήσουμε για ένα εργαλείο αυτοματοποίησης που δεν χρησιμοποιείται ευρέως μεταξύ των ειδικών του no-code. Επιπλέον, αυτό το χαρακτηριστικό, εγγενές στο Latenode, δεν είναι διαθέσιμο σε πλατφόρμες όπως το Zapier, το Make και άλλες, αλλά έχει ισχυρές δυνατότητες για την ενίσχυση των ροών εργασίας σας.

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

Επεξήγηση προγράμματος περιήγησης χωρίς κεφάλι

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

1. Αυτοματοποίηση διαδικασιών μέσω API.

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

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

2. Headless Browser για αυτοματοποίηση χωρίς APIs

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

Τι είναι το Headless Browser;

Φανταστείτε ένα κανονικό πρόγραμμα περιήγησης στο διαδίκτυο όπως το Chrome ή το Firefox. Τώρα, αφαιρέστε όλα τα ορατά μέρη του περιβάλλοντος εργασίας - κουμπιά, γραμμή διευθύνσεων, σελιδοδείκτες. Τι μένει; Ο "εγκέφαλος" που μπορεί να πλοηγηθεί στο διαδίκτυο, να ανοίξει ιστότοπους και να αλληλεπιδράσει μαζί τους. Αυτό είναι αυτό που αποκαλούμε "ακέφαλο" πρόγραμμα περιήγησης. Μπορεί να αυτοματοποιήσει διάφορες εργασίες σε ιστότοπους χωρίς να εμφανίζει οπτικό περιεχόμενο και μπορεί να το κάνει αυτό με ιλιγγιώδη ταχύτητα. Ένα σενάριο, όχι ένας άνθρωπος, ελέγχει τη διαδικασία.

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

Πώς λειτουργεί ένας Headless Browser;

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

1. URL για περιήγηση: Πρώτον, πρέπει να καθορίσετε τη διεύθυνση URL της ιστοσελίδας με την οποία θέλετε να αλληλεπιδράσετε. Αυτό είναι σαν να πληκτρολογείτε τη διεύθυνση μιας ιστοσελίδας σε ένα κανονικό πρόγραμμα περιήγησης, αλλά εδώ, το κάνετε μέσω μιας δέσμης ενεργειών.
2. Επιλογείς για πλοήγηση: Οι επιλογείς είναι ζωτικής σημασίας για να πείτε στο πρόγραμμα περιήγησης χωρίς κεφαλή με ποια στοιχεία μιας ιστοσελίδας θέλετε να αλληλεπιδράσετε. Αυτοί μπορεί να είναι επιλογείς CSS, XPath ή εντολές JavaScript. Σας επιτρέπουν να εντοπίζετε συγκεκριμένα στοιχεία όπως κουμπιά, πεδία κειμένου, εικόνες κ.λπ.
3. Πρόσθετες παράμετροι: Ανάλογα με την εργασία σας, μπορεί να χρειαστεί να εισάγετε κείμενο σε φόρμες, να μεταφορτώσετε αρχεία ή να κάνετε κλικ σε κουμπιά. Αυτές οι ενέργειες διεκπεραιώνονται από δέσμες ενεργειών που γράφετε, οι οποίες καθορίζουν τι να γίνει και πότε να γίνει.

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

Τι μπορεί να κάνει ένα πρόγραμμα περιήγησης χωρίς κεφάλι;

Υπάρχουν ορισμένες βασικές ενέργειες που υποστηρίζει ο Headless Browser υπό τον έλεγχό σας:

• Αυτοματοποιημένη πλοήγηση και αλληλεπίδραση: Τα προγράμματα περιήγησης χωρίς κεφάλι μπορούν να εκτελούν εργασίες όπως η συμπλήρωση φορμών, το κλικ σε συνδέσμους, η απόσπαση δεδομένων, ακόμη και η λήψη στιγμιότυπων οθόνης από ιστοσελίδες.
• Εξαγωγή και χειρισμός δεδομένων: Συχνά, ο στόχος είναι η εξαγωγή δεδομένων από ιστοσελίδες. Τα προγράμματα περιήγησης χωρίς κεφαλή μπορούν να αναλύσουν την HTML και το κείμενο μιας σελίδας και να εξάγουν τις πληροφορίες που χρειάζεστε, οι οποίες μπορούν στη συνέχεια να χρησιμοποιηθούν στην εφαρμογή σας ή να αποθηκευτούν για μετέπειτα χρήση.
• Εκτέλεση προσαρμοσμένων σεναρίων: Δεδομένου ότι τα προγράμματα περιήγησης χωρίς κεφαλή μπορούν να εκτελούν JavaScript, μπορείτε να εκτελέσετε προσαρμοσμένα σενάρια για να αλληλεπιδράσετε με ιστοσελίδες με πολύπλοκους τρόπους, όπως ο χειρισμός δυναμικού περιεχομένου ή η διαχείριση του ελέγχου ταυτότητας.

Για ποιους σκοπούς μπορώ να χρησιμοποιήσω ένα πρόγραμμα περιήγησης χωρίς κεφαλή;

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

Περιπτώσεις χρήσης του Headless Browser

Ας πάμε τώρα σε συγκεκριμένες περιπτώσεις χρήσης που μπορείτε απλά να κάνετε copy-paste και να ενεργοποιήσετε την ανάφλεξη του Headless Browser μόνοι σας, ακόμη και χωρίς προηγούμενη εμπειρία.

Περίπτωση χρήσης #1: Αναζήτηση στο Web όπως κάνουν τα plugins GPT με το Headless Browser

Διασκεδαστικό γεγονός: όταν χρησιμοποιείτε το ChatGPT και του ζητάτε να περιηγηθεί στον ιστό, ένα Headless Browser μπαίνει στο παιχνίδι! Ας φτιάξουμε ένα MVP για κάτι παρόμοιο και ας ζητήσουμε από τον Headless Browser να κάνει ένα ερώτημα αναζήτησης για εμάς.

Ακολουθεί μια σύντομη επισκόπηση του ακόλουθου σεναρίου:

• Η διεύθυνση URL του Webhook αναζητά ένα αίτημα δημοσίευσης με ένα αίτημα αναζήτησης.
• Το Headless Browser λαμβάνει αυτό το αίτημα, ανοίγει το Google και επιστρέφει τους τίτλους των 10 πρώτων θέσεων αναζήτησης.
• Η απόκριση του webhook στέλνει πίσω στο webhook το αποτέλεσμα.

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

Μετά από αυτό, ας κάνουμε μια αίτηση POST και ας στείλουμε το ερώτημα αναζήτησης ως 'Search' Key στο Body. Μόλις σε λίγα δευτερόλεπτα, είμαστε σε θέση να δούμε το αποτέλεσμα της εκτέλεσης του σεναρίου.

👉 Θέλετε να το δοκιμάσετε μόνοι σας; Αντιγράψτε το έτοιμο προς χρήση πρότυπο και περιηγηθείτε στο διαδίκτυο με τον Headless Browser!

Περίπτωση χρήσης #2: Ανάλυση δεδομένων από ιστοσελίδες με Headless Browser

Τώρα κατευθείαν στην ανάλυση δεδομένων από ιστοσελίδες! Μπορεί να χρησιμοποιηθεί τόσο ευρέως: από τον συγχρονισμό τιμών σε πραγματικό χρόνο από τις αγορές μέχρι τη μαζική απόξεση στοιχείων SEO για περαιτέρω ανάλυση.

Πρώτο παράδειγμα: τι θα λέγατε για την απόσπαση όλων των τίτλων (H1, H2, H3) από τη σελίδα προορισμού του Latenode; Ας το κάνουμε!

• Το σενάριο είναι το ίδιο:
• Το Webhook περιμένει μια διεύθυνση URL για ανάλυση.
• Το Headless Browser πλοηγείται στην παρεχόμενη διεύθυνση URL, βρίσκει και ανακτά τους τίτλους H1, H2, H3.
• Η απάντηση Webhook εμφανίζει τη λίστα των τίτλων ως αποτέλεσμα της κλήσης του σκανδάλου Webhook.

Στη συνέχεια, κάνουμε ξανά μια αίτηση POST στο σενάριό μας και στέλνουμε τον ιστότοπο για ανάλυση στο τμήμα του σώματος, όπως φαίνεται παρακάτω:

Ως αποτέλεσμα, λαμβάνουμε τη λίστα των τίτλων H1, H2 και H3 από την ιστοσελίδα που στείλαμε στο πρόγραμμα περιήγησης χωρίς κεφαλή.

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

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

Κάνοντας ένα ακόμη αίτημα POST με δύο νομίσματα, αναπόφευκτα θα λάβετε δύο συναλλαγματικές ισοτιμίες ως απάντηση από το σενάριο Latenode .

Περίπτωση χρήσης #3: Συμπλήρωση φορμών με χρήση Headless Browser

Τώρα μετατοπίζουμε την προσοχή μας από την αναζήτηση και την ανάκτηση στην πλήρωση. Τι γίνεται με τη συμπλήρωση μιας φόρμας ιστού αυτόματα και χωρίς API;

• Παρέχετε στο πρόγραμμα περιήγησης χωρίς κεφαλή το σύνδεσμο προς τη φόρμα ιστού.
• Δώστε του κείμενο για εισαγωγή.
• Δώστε τη διαδρομή προς το στοιχείο HTML, CSS ή XPath για να πληκτρολογήσετε το κείμενό σας.

Ο κώδικας για τη συμπλήρωση ενός τέτοιου απλού κώδικα HTML μοιάζει ως εξής:

const targetUrl = '<https://webhook.latenode.com/368/dev/SIMPLE_FORM>';

await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36');
await page.goto(targetUrl);

// Using 'id' selectors as per your HTML structure
await page.type('#subject', data["{{$3.body.subject}}"]);
await page.type('#title', data["{{$3.body.title}}"]);
await page.type('#overview', data["{{$3.body.overview}}"]);
await page.type('#platform-updates', data["{{$3.body.updates}}"]);
await page.type('#useful-materials', data["{{$3.body.materials}}"]);
await page.type('#other-news', data["{{$3.body.news}}"]);

// The 'value' in the select option should match the 'value' attribute of the option
await page.select('#platform', 'TestEmail');
await page.click('#submit'); // Updated to use the 'id' of the submit button

// Assuming the popup is the confirmation of submission
await page.waitForSelector('#popup', {visible: true, timeout: 5000});

return { message: 'FORM SUBMITTED' };

Περίπτωση χρήσης #4: Δημιουργία στιγμιότυπων οθόνης με το Headless Browser

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

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

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

Ο κόμβος Headless Browser σας επιστρέφει ένα στιγμιότυπο οθόνης σε μορφή base64. Μετά από αυτό, ο κόμβος JavaScript σας επιτρέπει να το μετατρέψετε όπως χρειάζεται το περαιτέρω σύστημά σας για να λάβετε αυτό το αρχείο.

👉Για να προσαρμόσετε αυτό το έτοιμο προς χρήση πρότυπο και να αρχίσετε να δημιουργείτε στιγμιότυπα οθόνης με περαιτέρω αποστολή στη συνομιλία σας στο Telegram, ακολουθήστε τα παρακάτω βήματα:

• Αντιγράψτε το πρότυπο από τη γκαλερί μας.
• Στον κόμβο JavaScript, αντικαταστήστε το Telegram Bot Token & ChatID με τα δεδομένα σας.
• Αναπτύξτε το σενάριό σας και καλέστε τη διεύθυνση URL του webhook με μη αυτόματο τρόπο.

Συμπέρασμα 

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

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

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

Για μια οπτική αναπαράσταση του αυτοματισμού Headless Browser, παρακολουθήστε το σεμινάριο Latenode για τον αυτοματισμό χαμηλού κώδικα με τη βοήθεια του έτοιμου προς χρήση κόμβου Headless Browser στην πλατφόρμα μας.

Σχετικά άρθρα:

• JavaScript + AI: ένα τέλειο ντουέτο για αυτοματισμούς χαμηλού κώδικα
• Δημιουργήστε ενσωμάτωση με οποιαδήποτε εφαρμογή: Δύο μέθοδοι
• Πρώτη δια βίου προσφορά για Early Birds!