Πώς να μετατρέψετε μια εφαρμογή ιστού σε μια εφαρμογή επιτραπέζιου υπολογιστή, χρησιμοποιώντας Chromium και PyInstaller

Η συσκευασία και διανομή της εφαρμογής σας ακούγεται απλή κατ 'αρχήν. Είναι απλώς λογισμικό. Στην πράξη, είναι αρκετά δύσκολο.

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

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

Με την πάροδο του χρόνου, καθώς χάραξα τον κώδικα στο Atom - τον συντάκτη της επιλογής μου αυτές τις μέρες - θυμήθηκα ότι το Atom είναι στην πραγματικότητα ένα πρόγραμμα περιήγησης. Χρησιμοποιεί το Node.js ως back end και το πλαίσιο ηλεκτρονίων για το περιβάλλον εργασίας του. Αυτό με ενέπνευσε να αρχίσω να ασχολούμαι με τα εσωτερικά της Electron, ελπίζοντας να βρω παραδείγματα και βέλτιστες πρακτικές σχετικά με τον τρόπο επίλυσης της συσκευασίας για επιτραπέζιους υπολογιστές.

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

Με όλα αυτά στο χέρι, άρχισα να δουλεύω.

Το ενσωματωμένο πλαίσιο Chromium

Το Chromium είναι ο βασικός κώδικας που τροφοδοτεί το πρόγραμμα περιήγησης Chrome της Google. Συγκεντρώνει όλα τα στοιχεία που καθιστούν μια διεπαφή, επεξεργάζεται την είσοδο του χρήστη και γράφει τις λειτουργίες της.

Το Chromium Embedded Framework (CEF) είναι μια ομάδα λειτουργιών C που μπορούν να ελέγξουν αυτό το πρόγραμμα περιήγησης. Παρέχει επίσης σενάρια που βοηθούν στην απλοποίηση της διαδικασίας δημιουργίας και σύνταξής της.

Το Visual Studio Code, Slack, Mattermost, Curse, Postman και Kitematic είναι όλα παραδείγματα εφαρμογών για επιτραπέζιους υπολογιστές που χρησιμοποιούν Electron. Όλα αυτά τα συστήματα χαρακτηρίζονται ως ιστότοποι που εκμεταλλεύονται το πρόγραμμα περιήγησης κάτω από το CEF.

Εάν σκέφτεστε ότι η Python μπορεί να δεσμευτεί με το C και να επωφεληθεί από αυτές τις δυνατότητες, τότε έχετε δίκιο Μην ψάχνετε περισσότερο από το έργο pycef για να καλέσετε τις λειτουργίες CEF wrapper απευθείας. Ωστόσο, έρχεται με το δυαδικό Chromium ως πρόσθετη εξάρτηση. Επομένως, αν ανησυχείτε για τη διαχείριση περίπλοκων δηλώσεων υποστήριξης, σκεφτείτε πριν προχωρήσετε.

Στην ιδιαίτερη κατάστασή μου, το έργο Sofi διαχειρίζεται όλες τις αλληλεπιδράσεις μέσω διαδικτυακής υποδοχής, παρέχοντας μια συνεπή διεπαφή σε διαφορετικούς τύπους πλατφορμών (web, desktop, mobile κ.λπ.) Αυτό σημαίνει ότι δεν χρειάζεται να κάνω χειροκίνητη εντολή ή οδήγηση του προγράμματος περιήγησης. Θέλω μόνο να αλληλεπιδράσω με το DOM που προβάλλει το πρόγραμμα περιήγησης μέσω τυπικών τεχνολογιών Ιστού.

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

Λαμβάνοντας υπόψη τις απλές απαιτήσεις μου, ένιωσα ότι το pycef - ή οποιαδήποτε άλλη σύνδεση χαμηλότερου επιπέδου - ήταν πάρα πολύ. Αντ 'αυτού, εκμεταλλεύτηκα ένα προκατασκευασμένο δείγμα από το έργο CEF: cefsimple . Αυτό το πρόγραμμα περιήγησης αποκρύπτει όλα τα οπτικά στοιχεία που θέλω, οπότε αν χρησιμοποιώ το CLI για να ανοίξω μια ιστοσελίδα, ο χρήστης δεν έχει ιδέα ότι είναι πραγματικά μέσα σε ένα πρόγραμμα περιήγησης. Μοιάζει με ένα κανονικό παράθυρο από οποιαδήποτε εφαρμογή.

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

Τα βήματα είναι τα εξής:

  1. Ρίξτε μια γρήγορη ματιά στον τρόπο δημιουργίας με CEF από δυαδικά αρχεία.
  2. Πιάσε μία από τις δυαδικές διανομές από το repo. Βεβαιωθείτε ότι έχετε διαβάσει τις συμβουλές εργαλείων πριν επιλέξετε μία, καθώς δεν περιέχουν όλα τα πακέτα τα ίδια αρχεία. Αναζητούσα συγκεκριμένα ένα cefsimple.
  3. Κοιτάξτε μέσα από το CMakeLists.txtαρχείο και βεβαιωθείτε ότι έχετε εγκαταστήσει τα απαραίτητα εργαλεία κατασκευής. Αυτό είναι συγκεκριμένο για την πλατφόρμα.
  4. Εκτελέστε την κατασκευή. Αυτό εξηγείται στο ίδιο αρχείο με το προηγούμενο βήμα και είναι επίσης συγκεκριμένο για την πλατφόρμα, αλλά τείνει να ακολουθεί τη διαδικασία: δημιουργία και cd σε κατάλογο build, εκτέλεση cmake για τα εργαλεία συλλογής και την αρχιτεκτονική σας, δείχνοντας τον γονικό κατάλογο. Δεδομένου ότι χρησιμοποίησα τα εργαλεία OSX Ninja σε μια πλατφόρμα 64-bit, η εντολή έμοιαζεcmake -G "Ninja" -DPROJECT_ARCH="x86_64" ..
  5. Ο κατάλογος build θα περιέχει τώρα τα αρχεία εξόδου. Η δομή μπορεί να είναι λίγο συγκεχυμένη, αλλά περιγράφεται στο κυρίως README. Ως αναφορά, το προηγούμενο βήμα είχε ως αποτέλεσμα ένα πακέτο εφαρμογών κάτω build/tests/cefsimple/Release/cefsimple.app.
  6. Μην ξεχνάτε ότι θα πρέπει να το κάνετε αυτό για να δημιουργήσετε τα δυαδικά αρχεία που χρειάζεστε για κάθε πλατφόρμα και αρχιτεκτονική λειτουργικού συστήματος που υποστηρίζετε.

Τώρα που έχετε εκτελέσιμο, εκτελέστε το από τη γραμμή εντολών με το --urlσετ στην ιστοσελίδα που θέλετε να ανοίξετε. Αυτό σημαίνει ότι η ενσωμάτωσή του σε ένα σενάριο Python γίνεται εύκολα μέσω της subprocessενότητας.

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

Συσκευασία

Τώρα που μπορούμε να προσφέρουμε μια εμπειρία στην επιφάνεια εργασίας, πρέπει να σκεφτούμε πώς να το διανείμουμε στους χρήστες μας. Η παραδοσιακή διανομή πακέτων Python επιτυγχάνεται μέσω του Python Package Index (PyPI). Ωστόσο, απαιτεί από τους χρήστες μας να εγκαταστήσουν τον διερμηνέα Python και κάποια μορφή εργαλείου συσκευασίας όπως easy_installή pip.

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

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

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

Ένα σύντομο απόσπασμα από το αποθετήριο του GitHub συνοψίζει τα πράγματα όμορφα:

Το PyInstaller διαβάζει ένα σενάριο Python που γράφτηκε από εσάς. Αναλύει τον κώδικά σας για να ανακαλύψει κάθε άλλη ενότητα και βιβλιοθήκη που χρειάζεται το σενάριό σας για να εκτελεστεί. Στη συνέχεια, συλλέγει αντίγραφα όλων αυτών των αρχείων - συμπεριλαμβανομένου του ενεργού διερμηνέα Python! - και τα τοποθετεί με το σενάριό σας σε έναν μόνο φάκελο ή προαιρετικά σε ένα μόνο εκτελέσιμο αρχείο.

Το εργαλείο παρέδωσε την υπόσχεσή του. Μου τόνισε στο αρχείο Python για την εφαρμογή του δείγματος μου και να συγκεντρώνει σε έναν κατάλογο αρκετά εύκολα με: pyinstaller sample.py. Αν θέλω ένα εκτελέσιμο, απλά προσθέστε την --onefileπαράμετρο.

Γίνεται λίγο πιο δύσκολο όταν πρέπει να προσθέσετε δεδομένα εκτός Python στο πακέτο σας. Αυτό συμβαίνει με τα αρχεία html και js που αποτελούν τη βάση του Sofi και του προγράμματος περιήγησης cefsimple που παρουσιάζει τη διεπαφή εφαρμογής από παλαιότερα. Το βοηθητικό πρόγραμμα PyInstaller παρέχει --add-dataακριβώς αυτό, επιτρέποντας μια αντιστοίχιση στη διαδρομή εντός του πακέτου όπου θα βρίσκεται το αρχείο δεδομένων (ή ο κατάλογος). Ωστόσο, μου πήρε λίγο χρόνο για να καταλάβω πώς να έχω σωστή πρόσβαση σε αυτούς τους καταλόγους μέσα από τον κώδικά μου. Ευτυχώς, η τεκμηρίωση με έδειξε προς τη σωστή κατεύθυνση.

Όπως αποδεικνύεται, κατά την εκτέλεση μιας ομαδοποιημένης εφαρμογής PyInstaller, δεν μπορείτε να βασίζεστε __file__και σε παρόμοιους μηχανισμούς για τον προσδιορισμό των διαδρομών. Αντ 'αυτού, το PyInstaller bootloader αποθηκεύει την απόλυτη διαδρομή προς το πακέτο sys._MEIPASSκαι προσθέτει ένα frozenχαρακτηριστικό για να σας ενημερώσει ότι τρέχετε μέσα σε ένα πακέτο. Εάν sys.frozenείναι Trueτότε φορτώστε τα αρχεία σας με βάση sys._MEIPASS, διαφορετικά χρησιμοποιήστε τις κανονικές λειτουργίες διαδρομής για να προσδιορίσετε πού βρίσκονται τα πράγματα.

Ήμουν σε θέση να δημιουργήσω με επιτυχία τόσο μια ομαδοποιημένη εφαρμογή OSX όσο και ένα εκτελέσιμο δυαδικό Linux του ίδιου σεναρίου Python. Έχω επαληθεύσει ότι μπορώ να κάνω το ίδιο με ένα εκτελέσιμο Windows, αλλά δεν είχα χρόνο να δημιουργήσω μια έκδοση των Windows του cefsimple browser για να δοκιμάσω τη διαδρομή δέσμης ακόμα.

Το τελικό προϊόν

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

Η επίδειξη που σχετίζεται με το CEF και τη συσκευασία είναι γκαλερί εικόνων και εμφανίζεται γύρω στις 18:15.

Για επιπλέον ανάγνωση για το πώς έφτιαξα τη Sofi, ρίξτε μια ματιά στη σειρά A Python Ate My GUI.

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