Vodič za početnike za pisanje dodataka za skicu 1. dio - Prvi koraci

Dakle, želite početi pisati dodatke za Sketch, ali nemate pojma odakle započeti? Pa nastavite čitati jer je ovaj članak za vas!

Ako ste poput mene, nije lako pokušati pronaći osnovne pojmove. Postoji puno primjera postojećih dodataka, ali teško je znati gdje započeti. Kako bih vam pomogao, sastavio sam sve informacije koje sam pronašao na jednoj jednostavnoj lokaciji.

Ovo definitivno nije napredni vodič za pisanje dodataka, jer nisam programer. Ja sam UI / UX dizajner koji se slučajno kodira prilično pristojno (tako mislim). Pravi programeri mogu otvoreno plakati kad vide moj kôd, ali mislim da to šifriram na način koji je početnicima razumljiv.

Ako ste inženjer u potrazi za naprednijim primjerima, ovdje postoji mnoštvo informacija: http://james.ooo/sketch-plugin-development i na službenom web mjestu za razvojne programere Sketch: http://developer.sketchapp.com/

Zašto pisati dodatak?

Dodaci su savršeni za automatiziranje ponavljajućih zadataka, što olakšava rad i proizvodnju. Vjerojatno postoji dodatak za ono što trebate učiniti, stoga prvo pretražite prije nego što pokušate napisati svoje, jer je to najvjerojatnije netko drugi učinio bolje. Ali ako je vaš proces stvaranja korisničkog sučelja jedinstven (poput mene, dizajniranje korisničkog sučelja za igre u Unityu), najvjerojatnije će vam trebati prilagođeno rješenje.

Početak rada

Prije nego što započnete pisati liniju koda, započnite s postavljanjem svoga softvera i oznaka.

  1. Ako ga već nemate, preuzmite uređivač teksta. (Koristim Atom, ali vani je mnogo sjajnih uređivača teksta poput Sublime ili Textmate)
  2. Zatim otvorite svoju Konzolu za uklanjanje pogrešaka i dodajte je u svoj Dock, to ćete koristiti mnogo.

3. Konzola vaš stroj koristi za SVE uklanjanje pogrešaka, pa stvorite filtar pretraživanja

Ako koristite MacOS Sierra, upotrijebite ovaj filtar u ulazu za pretraživanje:

postupak: skica 
knjižnica: skica 

Zatim spremite filtar kao skicu

Ako koristite OS ranije od Sierre, kreirajte novi filtar dnevnika upita sustava Sketch prema: Datoteka> Novi zapisnik upita sustava

Kopirajte ove postavke i pritisnite OK.

Sada biste trebali vidjeti filter Sketch u lijevom stupcu.

4. Označite svoju mapu Sketch Plugins za brz pristup dodavanjem u svoje favorite u prozoru Finder.

I vi ćete puno pristupiti toj mapi, a ako je sakrijete u svojoj knjižnici, malo je neugodno za navigaciju.

/ Korisnici / YOURUSERNAME / Biblioteka / Podrška aplikacijama / com.bohemiancoding.sketch3 / Dodaci

I sada ste spremni napisati svoj prvi dodatak!

Izrada dodatka u 10 jednostavnih koraka

Dodaci za skicu u osnovi su mape s nastavkom .sketchplugin, što olakšava dijeljenje s drugim korisnicima.

Za ovaj demo ćemo napraviti osnovnu skriptu za dobivanje imena stranice. Ne morate znati kako kodirati da biste ovo radili, ali to vam pomaže ako razumijete neke osnovne pojmove. U sljedećim postovima dokumentirat ću razne skripte koje sam koristio da bih preuzeo određene podatke iz Sketcha i prilagodio ih. Ali za ovaj demo prikaz koristit ću samo ovaj.

Dodaci za skicu napisani su u CocoaScript, što je mješavina Objective-C / Cocoa i JavaScript. Prilično sam upoznat s Javascript-om, tako da ga pokupi nije bilo previše teško. Neću reći da ga na bilo koji način tečno razumijem, ali čini mi se da bih mogao da se probijem s nekim osnovnim znanjem JavaScripta.

S tim na umu, započnimo!

  1. Započnite stvaranjem nove mape u mapi Sketch Plugins i nazovite je MyPlugin.sketchplugin

(Jednom kada dodate .sketchplugin proširenje, dvostrukim klikom pokušati će instalirati dodatak umjesto otvaranja mape. Da biste ga otvorili, desnom tipkom miša kliknite dodatak i odaberite Prikaži sadržaj paketa)

2. Unutar te mape stvorite mapu koja se zove Sadržaj

3. Unutar sadržaja, stvorite mapu pod nazivom Sketch

Vaša konačna struktura mape dodataka trebala bi izgledati ovako:

Unutar mape Sketch započeti ćete stvarati dodatak koji se sastoji od 2 datoteke, manifesta i skripte.

Manifest opisuje dodatak i može dodati stvari poput prečaca na tipkovnici ili dodatnih skripti, oni se uvijek nazivaju manifest.json

Skripta će krenuti stvarnim kodom dodatka i referenca se u manifestu. Imena se mogu prilagoditi kako god želite sve dok se podudaraju u obje datoteke.

4. U svom uređivaču teksta stvorite novu datoteku koja se zove manifest.json i spremite je na MyPlugin.sketchplugin> Sadržaj> Skica

5. Kopirajte i zalijepite ovaj kod u manifest.json i spremite.

Sada biste trebali vidjeti MyPlugin na izborniku Sketch dodataka. Možete promijeniti ime dodatka ili prečaca i ono će se odraziti na izborniku dodataka u Sketch-u. Za prečace je važno da odaberete onu koja već nije dodijeljena postojećoj aplikaciji ili prečacu dodatka ili se neće prikazati.

Sada ćemo stvoriti MyScript.js, na koji se manifest odnosi i učitava kada je odabran. Provjerite odgovara li ovom imenu datoteci vašeg manifesta!

6. Vratite se u uređivač teksta i stvorite novu datoteku pod nazivom MyScript.js, a također je spremite u MyPlugin.sketchplugin> Sadržaj> Sketch folder

7. Kopirajte i zalijepite ovaj kôd u MyScript.js

Bolje ću objasniti ovu skriptu u nekim daljnjim postovima, zajedno s dodatnim isječcima. Ali za sada, komentari objašnjavaju što svaki redak radi.

8. Idite na Skicu i otvorite novu datoteku, ako je nemate

9. Na izborniku Dodaci odaberite MyPlugin> Dobivanje imena stranica

10. Otiđite do svoje konzole, a na dnu dnevnika trebali biste vidjeti naziv stranice.

22:54:42 Dohvati nazive stranica (dodatak za skicu): Stranica 1

Pokušajte promijeniti naziv stranice u datoteci Sketch i ponovno pokrenite dodatak. Zapisnik bi trebao pokazati novo ime. Dodajte drugu stranicu i preimenujte je, a zatim pokrenite dodatak, a na konzoli će se pojaviti oba naziva stranice.

I to je to!

Očigledno je da puno više možete učiniti s dodacima, ali to je stvarno samo za početak. Koristim Sketch samo nekoliko tjedana i već sam impresioniran njegovom prilagodbom i snagom. Nadam se da ovo pomaže drugim ljudima koji su se susreli sa istim problemima kao i ja, jer zajednica dodataka postaje poboljšana samo ako više ljudi doprinosi.

Ovdje možete preuzeti ovaj primjer dodataka. Slobodno me kontaktirajte za sva pitanja: Twitter, Facebook, e-pošta.

Nastavite do 2. dijela