Tehnički vodič: Kako kreirati Apple Watch aplikaciju?

Tehnički vodič: Kako kreirati Apple Watch aplikaciju?

Nedavno smo imali priliku da se upoznamo sa jednom od prvih Apple Watch aplikacija sa ovih prostora iza koje stoji Aleksandar Vacić, developer i dizajner iz Srbije koji je svoj Run 5k app pripremio za dugo iščekivan pametni sat. Ovoga puta, Aleksandar do detalja objašnjava proces izrade, te tehničku specifikaciju potrebnu za kreiranje vaše Watch aplikacije.

Kreiranje aplikacija za Apple Watch jeste interesantno iskustvo, sa više aspekata. Retke su situacije da se nađete u poziciji da učestvujete u “rađanju” jedne potpuno nove platforme. Jedan takav momenat bio je predstavljanje iPhone SDK 2008-e kada su svi postojeći Mac developeri imali veliku startnu prednost nad ostalima. Imati iole upotrebljivu aplikaciju na App Store-u u vreme kada je na istom bilo nekoliko stotina ili par hiljada aplikacija, sa finansijske strane bila je fantastična stvar.

Apple Watch je sličan momenat, pogotovo od kada je na Spring Forward događaju objavljeno da će Watch apps imati svoj zaseban App Store u okviru Apple Watch aplikacije, koja postoji od iOS 8.2. To je sjajna vest za developere jer se praktično počinje od nule, uz znatno manju konkurenciju nego na glavnom Store-u.

Ovaj članak je namenjen iOS developerima koji bi voleli da se poigraju kreiranjem Watch aplikacija, ali nisu imali prilike da protegnu prste. Prvi deo — koji sada čitate — jeste big picture pogled na koncepte i potrebne alate. Drugi deo će biti više tehnički orijentisan sa primerima konkretnog koda.

Ideja vodilja je da vam uštedimo nekoliko dana čitanja dokumentacije i blog postova i da vas odmah uputimo na pravu stazu, bez mnogo lutanja. Svi saveti su bazirani na iskustvu kreiranja Watch aplikacije za moj najpopularniji iOS app – Run 5k.

Native aplikacije za sat nije moguće kreirati sa WatchKit-om 1.0, to će biti moguće u narednoj instanci. Stoga je potrebno da imate postojeću iPhone aplikaciju koja nešto korisno već radi, a Watch app predstavlja samo još jednu ekstenziju te aplikacije, slično Today widget-ima ili Action ekstenzijama.

Apple Watch ne može raditi samostalno već zavisi od prisustva uparenog iPhone-a. Podržani modeli su iPhone 5 i noviji. Iz samo Apple-u znanih razloga, nijedan model iPada nije podržan.

Kakve aplikacije kreirati?

Na desetine tekstova je napisano na ovu temu proteklih nekoliko meseci i nemam posebnu želju da ih sumiram. Apple Watch je samo još jedna korisna sprava, ali joj namenu i mesto u svom životu morate odrediti sami. I kao korisnik i kao developer.

Smatram da sve iOS aplikacije koje već imaju Today widget prosto moraju da imaju i Watch app. Bilo da widget-e koristite za notifikacije ili kao daljinski pregled / upravljač – sat je u svakom pogledu bolja lokacija za bilo koju od tih aktivnosti.

Lakše je objasniti na primeru: moja Run 5k app ima Today widget koji je dostupan i kada je iPhone zaključan. To onome ko trči omogućava da jednostavno u toku treninga proveri koliko je ostalo do kraja, koja je aktuelna brzina, koliko je daljine pređeno itd. Takođe može da pauzira ili nastavi trčanje, čime se widget pretvara u daljinski upravljač. Da bi to radilo, napisao sam kôd kojim iOS app ekstenzija dobija potrebne podatke i osluškuje da li ekstenzija zahteva neku od definisanih akcija.

Watch app koju sam kreirao radi isto to ali bez potrebe da se telefon juri po džepu ili torbici. Prostim pokretom ruke se dobije isti set informacija i mogućnosti. Ako vam je potrebno još inspiracije zavirite u WatchAware showcase i pogledajte šta su drugi već najavili i pripremili.

Razvojni alati

Osnova je svakako Mac računar sa OS X Yosemite. Xcode 6.2 je minimum i on donosi sa sobom podršku za iOS 8.2 i odgovarajući SDK. Kako u ovom trenutku sata nema u slobodnoj prodaji, kompletan razvoj se odvija u iOS Simulatoru. Kada startujete Watch app, Xcode će startovati i iPhone i Watch simulator.

simulator_ispravljeno

Simulator za sat je rudimentaran i prikazuje samo čist ekran sata, bez tzv. chrome (okvira, narukvice itd) koji postoji na realnom satu. Apple na više mesta naglašava da dizajn aplikacije treba da ide od ivice od ivice. To predstavlja priličan mentalni problem dizajnerima čija će prva reakcija biti da ubace neku marginu oko sadržaja na ekranu i time bespotrebno izgube zlata vrednih 10pt ili više.

Što nema kod Apple-a, ima kod divnih ljudi dobre volje. Troy Gaul iz Iconfactory-ja je kreirao jednostavnu aplikaciju — Bezel — koja iscrta fizički izgled sata i u realnom vremenu “krade” ekran simulatora i iscrtava unutar sebe. Time dobijate realniji prikaz kako app izgleda na satu.

bezel

Max Rudberg je kreirao i set dodatnih maski za Bezel koje možete iskoristiti umesto predefinisane. Jedino što sreću kvari je što ne možete kliktati unutar Bezela već morate u Simulatoru.

Gledati app na ekranu Mac-a daje pogrešan utisak koliko je fizički taj ekran zaista veliki. Video sam dosta dizajnerskih promašaja sa premalim ili preblizu postavljenim touch targetima. Savet: nemojte inspiraciju tražiti na Dribbble-u.

Obzirom da sat ima Retina ekran, preporučujem sledeći trik: kupite xScope za Mac (zlata vredna app) i xScope Mirror za iOS i moći ćete projektovati Bezel direktno na vaš iPhone. U meniju Bezel-a podesite da se koristi 200% prikaz ako imate non-Retina Mac ekran. Time ćete dobiti 1:1 fizičku repliku sata na iPhone.

Druga opcija koju možete probati jeste WatchSim Danny Keogana. Uz pomoćni Mac server aplikacije, ovo bi trebalo da omogući da se simulator vidi na iPhone-u i da u stvari možete i da koristite Watch app na telefonu. To bi svakako bila naprednija opcija jer možete direktno testirati da li su touch targeti dovoljno dobro postavljeni. Ja nisam probao obzirom da već imam xScope ali sam svakako zainteresovan da čujem utiske.

Kada za par meseci uspete da kupite sat, sve će biti jednostavnije. Međutim, cilj je imati Watch app prvog dana prodaje i ovo je najbolji setup koji sada možete postaviti.

Dizajn

Apple je uložio mnogo truda da veoma precizno definiše UI smernice za obe veličine sata. Naime, 38mm i 42mm sat nemaju istu rezoluciju, za razliku od iPad-a gde i 9.7 inch i 7.9 inch model imaju istu rezoluciju i aplikacije su identične.

Kod sata, ne samo da se rezolucije razlikuju već se neznatno razlikuju i debljine linija u ikonama, veličine samih ikona, vrednosti margina između ivice ekrana i teksta, veličine teksta itd. Potpuno je fascinantno sa koliko pažnje je sve ovo kreirano, što je možda najbolje ilustrovati sa par primera iz zvaničnog Apple Watch Resources paketa koji je Apple pripremio:

38mm 42mm

Ja se bavim iOS razvojem od prvog SDK i nikada do sada nisam video da je Apple imao ovako spreman paket uputstava, dokumentacije i direktno upotrebljivog materijala na samom početku. Sve to govori koliko dugo i sa koliko pažnje se ovom projektu pristupilo.

Za detalje, svakako pročitajte zvanični HIG vodič.

Sat ima Retina ekran stoga kada se priča o rezoluciji treba razmišljati u pt-ima. 38mm sat ima 136×170 pt, 42mm sat ima 156×190 tačaka. I to je to.

Kreirati nešto upotrebljivo i korisno na toliko malom prostoru je uzbudljiv izazov.

Watch App ikonica

Kada sam već spomenuo ikone, toplo preporučujem da pročitate članak Michaela Flarupa o kreiranju app ikona za Apple Watch. Vredi znati i naučiti kako sve to funkcioniše, a zatim možete iskoristiti Michaelov .psd fajl koji – zahvaljujući skriptabilnosti Photoshop-a – automatski kreira ikonu u svim potrebnim dimenzijama. Vaše je samo da spremite maksimalnu veličinu od 1024x1024px.

Ili upotrebite iOS 8 app icon template koji je kreirao Max Rudberg i koji takođe podržava Apple Watch.

Savet: na ikonici za sat, ostavite apsolutni minimum potrebnih detalja da aplikacija bude prepoznatljiva. U slučaju Run 5k izbacio sam segmentne prstenove oko “5k” koji postoje na iOS app ikoni. Razlog je prost – kada se ikona smanji na 36pt (ili još manje) prstenovi postanu neprepoznatljivi i izgleda kao da je ekran na tom delu umrljan.

appicon copy

Iskoristite spomenuti xScope Mirror i proverite kako ikona izgleda na iPhoneu i procenite sami šta je dovoljan minimum.

3 podvrste Watch aplikacija

Sem glavne Watch app, WatchKit ima još dve podvrste: Glance i Notification. Obe su opcione i da li ćete ih kreirati zavisi od vaše app:

project

Preporučujem da izaberete sve opcije i pustite Xcode da vam kreira sve što treba za razvoj. Lakše je kasnije izbaciti ono što vam ne treba za app nego dodavati ručno i eventualno propustiti neko od podešavanja.

UI elementi za sve podvrste se nalaze u istom storyboard-u kao i glavna Watch app i predstavljaju dodatne “ulazne” tačke. Za svaku imate poseban WKInterfaceController i pišete odgovarajući kod.

Na svakom koraku razvoja se vidi koliko se Apple trudi da uniformiše User Experience, što ću ilustrovati na primeru Glance-a koji se sastoji od dva striktno odvojena dela ekrana: zaglavlje i telo. Interface Builder nudi veliki broj predefinisanih šablona i za gornji i donji segment – evo primera kako to izgleda za gornji segment:

ispravka_siroko

Iako se to ne vidi, ovo nije sve – ova lista je skrolabilna i opcija ima još dosta. Ako izabere neki od ovih šablona, elemente na ekranu ne možete gotovo nikako menjati – veličina teksta, parametri slike, broj vidljivih karaktera i maksimalni broj linija – sve to je zakucano i praktično jedino možete menjati boju teksta.

Ako vam to ne odgovara, izaberite prvi šablon sa spiska koji ima samo jednu grupu i onda unutar nje dodajte šta god želite.

Ovde završavamo prvi deo priče. Za par dana sledi i drugi deo sa više tehničkih detalja i primera. Zapratite Netokraciju i Aleksandra na Twitter-u, kako ne biste propustili nastavak serijala!

Ostavi komentar

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Tehnologija

Kako paušalci mogu pristupiti svom eSandučetu i poreskom rešenju za 2020. godinu?

Januar 2020. za preduzetnike paušalce doneo je još jednu novost – rešenje o porezu direktno u njihovo eSanduče. Međutim, sudeći po reakcijama preduzetnika, taj proces nije jednostavan kao što izgleda. O tome šta vam je sve potrebno kako biste pristupili rešenju o prispelim obavezama analiziramo u nastavku teksta.

Kultura 2.0

Predstavljamo rezultate istraživanja: Koliko srpske IT-jevce košta sedenje za računarom?

Rezultati naše online ankete u kojoj je učestvovalo ravno 700 profesionalaca koji rade u srpskom IT sektoru potvrđuju da dugo sedenje za računarom i savremen stil života ostavljaju posledice po zdravlje. Fokus ankete bio je na ispitivanju uticaja na koštano-mišićni sistem i prikupljanju informacija o najzastupljenijim načinima lečenja, prosečnim troškovima koje lečenje iziskuje, kao i o prevenciji u vidu fizičke aktivnosti.

Kultura 2.0

Da li je vaša AliExpress porudžbina bezbedna od korona virusa?

Sve oči svetske javnosti okrenute su ka Kini koja se, u ovom trenutku, bori sa širenjem smrtonosnog korona virusa. I dok čekamo da saznamo da li postoji rešenje za ovaj ozbiljan globalni zdravstveni problem, zapitali smo se - da li virus koji je par hiljada kilometara daleko može da se prenese i robom sa AliExpress-a?

Propustili ste

Kultura 2.0

4 poslovne lekcije koje sam naučio iz druge sezone Narcos Mexico

Oni su trgovci narkoticima, nemaju visoko obrazovanje i fensi MBA programe u svojim CV-jevima. Prodaju 'bijelo' za život, odrasli su na ulicama, nemaju stvarni dodir sa poslovnim svijetom i njegovim trendovim. Ili to samo tako izgleda?

Startapi i poslovanje

Nakon 10 godina u advertajzingu odlučili su da pokrenu restoran u Beogradu – zašto?

Tehnologija i hrana danas su nerazdvojni - kao meso i kiseli kupus. U priči koja sledi, otkrivamo kako je jedna beogradska agencija završila u food-tech vodama i upoznajemo vas sa novim konceptom restorana koji preti da u potpunosti promeni ovu industriju.

Kultura 2.0

Predstavljamo rezultate istraživanja: Koliko srpske IT-jevce košta sedenje za računarom?

Rezultati naše online ankete u kojoj je učestvovalo ravno 700 profesionalaca koji rade u srpskom IT sektoru potvrđuju da dugo sedenje za računarom i savremen stil života ostavljaju posledice po zdravlje. Fokus ankete bio je na ispitivanju uticaja na koštano-mišićni sistem i prikupljanju informacija o najzastupljenijim načinima lečenja, prosečnim troškovima koje lečenje iziskuje, kao i o prevenciji u vidu fizičke aktivnosti.

Tehnologija

Zašto je AI za nas i dalje kao tinejdžerski seks?

U misiji da demistifikujemo AI i konačno isteramo na čistac realne probleme i obesmislimo sav taj AI 'hype' organizujemo prvi internacionalni Brain Summit. Do tada, koje predrasude u vezi veštačke inteligencije vi imate?

Startapi i poslovanje

Beogradski Workpuls analizira efikasnost zaposlenih za preko 1.000 klijenata širom sveta

U trenutku kada se u mnogim kompanijama javlja dodatna potreba za optimizacijom radnih procesa i povećanjem efikasnosti, nameće se i potreba za savremenim alatima koji im u tome mogu pomoći. Jedan od njih je i Workpuls.

Startapi i poslovanje

Oh Monday poslaće vam svakog ponedeljka spisak ‘remote’ poslova u inostranim kompanijama

Usvajanje novih zakonskih odluka o paušalnom oporezivanju podiglo je ogromnu prašinu u IT zajednici. I dok jedni polako počinju da se prilagođavaju, drugi razmišljaju da li postoji način da ostanu u Srbiji a da rade za inostranu kompaniju - u čemu im može pomoći domaći projekat Oh Monday - nedeljni pregled poslova 'na daljinu' direktno u inbox.