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

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 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.

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:

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.

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:

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:

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!