Πώς να δημιουργήσετε εγγενείς εφαρμογές για επιτραπέζιους υπολογιστές με JavaScript (Proton Native)

Όταν έγραφα αυτό το άρθρο, ο Νόμος του Atwood ήρθε στο μυαλό:

Οποιαδήποτε εφαρμογή μπορεί να γραφτεί σε JavaScript, τελικά θα γραφτεί σε JavaScript. - Τζεφ Άτγουντ

Αρχικά δημοσιεύτηκε στο blog μου!

Σήμερα πρόκειται να ρίξουμε μια ματιά στο Proton Native και να κάνουμε μια απλή εφαρμογή με αυτό.

Σε αντίθεση με τις εφαρμογές Electron , οι εφαρμογές που έχουν δημιουργηθεί με το Proton Native είναι στην πραγματικότητα εγγενείς (εξ ου και το όνομα) και δεν βασίζονται στον ιστό στο χρώμιο.

Το Proton Native είναι σαν το React Native αλλά για επιτραπέζιους υπολογιστές. Συγκεντρώνεται σε εγγενή κώδικα πλατφόρμας, οπότε φαίνεται και αποδίδει σαν μια εγγενής εφαρμογή

Ας ξεκινήσουμε λοιπόν.

Παράθυρα

Εγκαταστήστε τα εργαλεία κατασκευής εκτελώντας:

npm install --global --production windows-build-tools

Linux

Θα χρειαστείτε αυτές τις βιβλιοθήκες:

  • libgtk-3-dev
  • βασικό

Μακ

Δεν χρειάζεσαι τίποτα.

Τώρα εκτελέστε τα εξής:

npm install -g create-proton-app

και

create-proton-app my-app

να φτιάξω ένα νέο έργο.

Ανοίξτε τον κατάλογο έργου με τον αγαπημένο σας επεξεργαστή κώδικα. Ο κατάλογος πρέπει να έχει την εξής μορφή:

 └───node_modules ├───.babelrc ├───index.js ├───package.json └───package-lock.json

index.js πρέπει να μοιάζει με αυτό:

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

Το Appστοιχείο είναι απλώς ένα κοντέινερ που κρατά το Window και Menu, και Windowέχει τρία στηρίγματα: title(ο τίτλος του παραθύρου), size(παίρνει ένα αντικείμενο που περιέχει το πλάτος και το ύψος του παραθύρου) και menuBar(ορίστε σε ψευδές επειδή δεν θέλουμε ένα γραμμή μενού).

Πριν ξεκινήσουμε την κωδικοποίηση, ας εγκαταστήσουμε cryptoχρησιμοποιώντας npm:

npm i crypto

Θα χρησιμοποιήσουμε cryptoγια κατακερματισμό του κειμένου με τον αλγόριθμο MD5.

index.js

Πρώτα εισήγαγα Textκαι TextInputμπορούσα να τα χρησιμοποιήσω αργότερα. Στη συνέχεια, classμετά τη ρύθμιση του textκαι md5για να αδειάσετε τις συμβολοσειρές στο state αντικείμενο, δημιούργησα μια συνάρτηση hashπου παίρνει ένα textόρισμα.

Στη hashσυνάρτηση, ορίζουμε την κατάσταση textκαι δηλώνουμε md5ότι αποθηκεύουμε το κρυπτογραφημένο κείμενο (όπως παρακάτω)

this.setState({ text });let md5 = crypto.createHash("md5")  .update(text, "utf8").digest("hex");

και ορίστε το αντικείμενο κατάστασης στην ενημερωμένη md5.

this.setState({ md5 });

Η renderμέθοδος επιστρέφει κάποιο jsxστοιχείο. Το Boxστοιχείο είναι ακριβώς όπως divστο React ή Viewστο React Native, το οποίο κρατά το TextInputκαι Text. Αυτό συμβαίνει επειδή το στοιχείο γονικού παραθύρου δεν επιτρέπει την ύπαρξη περισσότερων από ένα παιδιών.

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

Τώρα λοιπόν κάθε φορά που το κείμενο αλλάζει, textκατακερματιστεί και ρυθμιστεί σε md5.

Τώρα αν το τρέξουμε με

npm run start

αυτό το παράθυρο πρέπει να εμφανιστεί:

Και αν εισαγάγουμε κάποιο κείμενο, γίνεται κατακερματισμός σε md5 ως εξής:

Μπορείτε να πείτε "Φαίνεται άσχημο - ας προσθέσουμε λίγο στυλ σε αυτό." Λοιπόν, κατά τη στιγμή της σύνταξης αυτού του άρθρου, το Proton Native είναι ακόμα στα σπάργανα. Είναι πολύ αμαξάκι και δεν υποστηρίζει στυλ (ακόμη), αλλά είναι ένα διασκεδαστικό έργο για να παίξετε.

Εάν θέλετε να συνεισφέρετε στο έργο, ρίξτε μια ματιά στο repo.

Εάν έχετε οποιεσδήποτε ερωτήσεις ή προτάσεις, μη διστάσετε να σχολιάσετε ή να επικοινωνήσετε μαζί μου στο Twitter @ 4msal4 και μην ξεχάσετε να πατήσετε αυτό το κουμπί χειροκρότημα :)

; Αγορά μου έναν καφέ;

; Δείτε την προηγούμενη ιστορία μου;

Πώς να δημιουργήσετε μια εφαρμογή ειδήσεων με το React Native.