Ο οδηγός για αρχάριους για τη συγγραφή σκίτσων Plugins Μέρος 1 - Ξεκινώντας

Θέλετε λοιπόν να αρχίσετε να γράφετε πρόσθετα σκίτσων, αλλά δεν έχετε ιδέα από πού να ξεκινήσετε; Συνεχίστε να διαβάζετε επειδή αυτό το άρθρο είναι για εσάς!

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

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

Αν είστε μηχανικός που αναζητά πιο προηγμένα παραδείγματα, υπάρχουν πολλές πληροφορίες εδώ: http://james.ooo/sketch-plugin-development και στον επίσημο ιστότοπο ανάπτυξης του Sketch: http://developer.sketchapp.com/

Γιατί να γράψετε μια προσθήκη;

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

Ξεκινώντας

Πριν ξεκινήσετε να γράφετε μια γραμμή κώδικα, ξεκινήστε με τη ρύθμιση του λογισμικού και των σελιδοδεικτών σας.

  1. Αν δεν έχετε ήδη ένα, κατεβάστε ένα πρόγραμμα επεξεργασίας κειμένου. (Χρησιμοποιώ Atom, αλλά υπάρχουν πολλοί μεγάλοι συντάκτες κειμένων εκεί έξω όπως το Sublime ή το Textmate)
  2. Στη συνέχεια, ανοίξτε την κονσόλα σας για σφαλμάτωση και προσθέστε την στην βάση σας, θα το χρησιμοποιήσετε πολύ.

3. Η κονσόλα χρησιμοποιείται από το μηχάνημά σας για την ΟΛΙΚΗ εντοπισμό σφαλμάτων, οπότε δημιουργήστε φίλτρο αναζήτησης

Εάν χρησιμοποιείτε MacOS Sierra, χρησιμοποιήστε αυτό το φίλτρο στην είσοδο αναζήτησης:

διαδικασία: Σκίτσο <επιστροφή τύπου>
βιβλιοθήκη: Σκίτσο <επιστροφή τύπου>

Στη συνέχεια, αποθηκεύστε το φίλτρο ως Σκίτσο

Εάν χρησιμοποιείτε ένα λειτουργικό σύστημα νωρίτερα από τη Sierra, δημιουργήστε ένα νέο φίλτρο καταγραφής ερωτήματος συστήματος σκετς: Αρχείο> Νέο αρχείο ερωτήματος συστήματος

Αντιγράψτε αυτές τις ρυθμίσεις και πατήστε OK.

Θα δείτε τώρα ένα φίλτρο Σκίτσο στην αριστερή στήλη.

4. Τοποθετήστε σελιδοδείκτη στο φάκελο Plugins Sketch για γρήγορη πρόσβαση προσθέτοντάς τα στα Αγαπημένα σας στο παράθυρο Finder.

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

/ Χρήστες / YOURUSERNAME / Υποστήριξη βιβλιοθήκης / εφαρμογών / com.bohemiancoding.sketch3 / Plugins

Και τώρα είστε έτοιμοι να γράψετε το πρώτο σας plugin!

Δημιουργία Plugin σε 10 εύκολα βήματα

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

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

Τα πρόσθετα σκίτσων γράφονται στο CocoaScript, το οποίο είναι ένα μίγμα Objective-C / Cocoa και JavaScript. Είμαι πολύ εξοικειωμένος με τη Javascript, οπότε η ανάληψη δεν ήταν πολύ δύσκολη. Δεν θα πω ότι είμαι άπταιστα σε αυτό με οποιοδήποτε μέσο, ​​αλλά φαίνεται να είμαι σε θέση να χαράξει το δρόμο μου γύρω από αυτό με κάποιες βασικές γνώσεις JavaScript.

Έχοντας αυτό υπόψη, ας ξεκινήσουμε!

  1. Ξεκινήστε δημιουργώντας ένα νέο φάκελο στο φάκελο Sketch Plugins και ονομάστε το MyPlugin.sketchplugin

(Μόλις προσθέσετε την επέκταση .sketchplugin, διπλό κλικ θα προσπαθήσει να εγκαταστήσει το πρόσθετο αντί να ανοίξει το φάκελο. Για να το ανοίξετε, κάντε δεξί κλικ στο πρόσθετο και επιλέξτε Εμφάνιση περιεχομένου πακέτου)

2. Στο εσωτερικό αυτού του φακέλου, δημιουργήστε ένα φάκελο που ονομάζεται Περιεχόμενα

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

Η τελική δομή του φακέλου του plugin θα πρέπει να έχει την εξής μορφή:

Μέσα στο φάκελο Sketch θα ξεκινήσετε τη δημιουργία του plugin σας, το οποίο αποτελείται τουλάχιστον από 2 αρχεία, ένα δηλωτικό και ένα σενάριο.

Το δηλωτικό περιγράφει το plugin και μπορεί να προσθέσει πράγματα όπως συντομεύσεις πληκτρολογίου ή πρόσθετα σενάρια, είναι πάντοτε με το όνομα manifest.json

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

4. Στον επεξεργαστή κειμένων σας, δημιουργήστε ένα νέο αρχείο που ονομάζεται manifest.json και αποθηκεύστε το στο MyPlugin.sketchplugin> Περιεχόμενα> Σκίτσο

5. Αντιγράψτε και επικολλήστε αυτόν τον κώδικα σε manifest.json και αποθηκεύστε.

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

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

6. Επιστρέψτε στον επεξεργαστή κειμένου και δημιουργήστε ένα νέο αρχείο που ονομάζεται MyScript.js και αποθηκεύστε το στο φάκελο MyPlugin.sketchplugin> Contents> Sketch

7. Αντιγράψτε και επικολλήστε αυτόν τον κώδικα στο MyScript.js

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

8. Μεταβείτε στο Sketch και ανοίξτε ένα νέο αρχείο, εάν δεν έχετε ήδη ανοίξει ένα

9. Από το μενού Plugins, επιλέξτε MyPlugin> Get Names Names

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

10:54:42 μμ Λήψη ονομάτων σελίδων (προσθήκη σκίτσου): Σελίδα 1

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

Και αυτό είναι!

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

Μπορείτε να κατεβάσετε αυτό το παράδειγμα plugin εδώ. Μη διστάσετε να επικοινωνήσετε μαζί μου για οποιεσδήποτε ερωτήσεις: Twitter, Facebook, Email.

Συνεχίστε στο Μέρος 2