# UN Sanctions APP

> Aplikácia pre OSN v spolupráci s The Graduate Institute, Geneva (IHEID)

## UN Sanctions APP

### Realizácia projektu: **2020 – 2021**

Pre The Graduate Institute, Geneva (IHEID) sme pripravili aplikáciu UN Sanction App. Jedná sa o interaktívny analytický nástroj, použiteľný v reálnom čase pre vedcov a politikov, ktorí majú záujem preskúmať sankcie OSN alebo pracujú na ich navrhovaní a implementácii.

[Aplikácia iOS](https://apps.apple.com/us/app/sanctionsapp/id658885419)

[Aplikácia android](https://play.google.com/store/apps/details?id=com.graduateinstitute.sanctions)

![UN Sanctions APP – webová a mobilná aplikácia](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/14/9d/149d68f6ae5e2250.png)

### Výsledky

Klientovi sme odovzdali a spustili úplne novú aplikáciu, ktorá je použiteľná ako vo webovom prehliadači v podobe PWA, tak aj na smartfónoch cez aplikáciu, ktorá je dostupná cez iStore a Google Play. Na všetkých týchto platformách je možné aplikáciu použiť kompletne v offline režime.

![PWA](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/2c/f2/2cf2ffe828bf8201.svg)

#### Aplikácia vo webovom rozhraní

![App Store](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/91/dc/91dcc5b19c295a12.svg)

#### Custom aplikácia pre APP Store

![Google Play](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/ab/3f/ab3f267d776fbdc1.svg)

#### Custom aplikácia pre Google Play

### Priebeh projektu

### Východisková situácia

Existujúca aplikácia postavená na zastaralej technológii Flash, ktorej končila podpora pre iOS aj Android. Webová aplikácia bola tiež zastaralá a moderné prehliadače ju blokovali.

![UN Sanctions APP – pôvodná Flash aplikácia](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/62/c6/62c60f0ca2426111.png)

### Hlavná výzva

Potrebovali sme pripraviť aplikáciu použiteľnú vo webovom prehliadači a rovnako na mobilných zariadeniach. Jedna zo základných požiadaviek bola, aby aplikácia bola schopná fungovať kompletne v offline režime. Zároveň bolo potrebné navrhnúť prehľadné používateľské aj administračné rozhranie, zamerané na textový obsah.

### Technologické riešenie

Na základe analýzy sme navrhli technické riešenie, ktoré spočívalo v implementácii frontendovej aplikácie v React.js, ktorá pomocou GraphQL načítava dáta z headless manažovaného CMS Sanity.io, pre ktoré sme navrhli štruktúru databázy a prispôsobili administračné rozhranie.

![React.js, GraphQL a Sanity.io](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/a9/32/a9328e98816bce0b.svg)

### UX a grafický návrh

Veľmi dôležité bolo navrhnúť ergonomické rozloženie používateľského rozhrania, keďže sa jedná o „content heavy“ aplikáciu. Dôraz bol kladený hlavne na prehľadné zobrazenie informácií a intuitívnu navigáciu medzi jednotlivými časťami obsahu. Pri dizajnovaní sme zvolili prístup „mobile-only“, pri ktorom sme celú aplikáciu navrhli na mobilné rozlíšenia a na desktope sa zobrazuje dizajn totožný s mobilom, len na širšej obrazovke.

![UN Sanctions APP – návrh mobilných obrazoviek](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/9e/c5/9ec556137849ce59.png)

### Implementácia PWA

Prvá fáza projektu (2020) zahŕňala implementáciu aplikácie ako PWA – čo znamená, že túto „webstránku“ je možné si uložiť do telefónu a používať ju ako mobilnú aplikáciu. Zaujímavosťou je plne funkčný offline režim uloženej aplikácie.

![UN Sanctions APP – mobilná aplikácia](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/d0/83/d083dd08476ed85b.png)

### Implementácia mobilnej aplikácie

V druhej fáze (2021) sme vytvorili mobilnú aplikáciu v react-native pre Android aj iOS, ktorú je možné si stiahnuť a nainštalovať do mobilného zariadenia. Rovnako dokáže fungovať plne v offline režime a využíva rovnaký zdroj dát ako PWA. Počas druhej fázy sme vylepšili niektoré funkcionality PWA a dopracovali nové obsahové časti celej aplikácie.

### Nastavenie spolupráce

Základom každej úspešnej spolupráce je komunikácia.

![Meetingy](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/49/25/4925e0d7a49af77a.svg)

#### Pravidelné status meetingy

Na pravidelnej báze sa spoločne stretávame a riešime aktuálne úlohy, stav, prípadne plánujeme budúce vylepšenia.

![Slack](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/63/42/6342a7e2c9d31e7d.svg)

#### Instantná komunikácia – Slack

V našom tíme využívame na internú komunikáciu Slack, tak sme to preniesli aj do komunikácie s klientom. V prípade potreby si vieme vydiskutovať veci takmer okamžite a žiadna dôležitá vec nečaká v zahltenom emailovom inboxe.

![Asana](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/6f/ac/6fac543e144c5e64.svg)

#### Manažment úloh – Asana

Pri jednotlivých projektoch využívame na manažment úloh Asanu. Klienti tak majú pod kontrolou vždy aktuálny stav taskov a celý proces je tak oveľa plynulejší.

![Projekt manažment](https://pub-8fe949c228e240689a06fd2b221c5a38.r2.dev/originals/e1/66/e1669d9fba7bfb1a.svg)

#### Projekt manažment

Pre každý projekt je dedikovaný projekt manažér, ktorý vytvára mostík medzi rečou klienta a programátora. Zároveň sa klient má na koho obrátiť a aj zložitejšie situácie spoločne vždy vyriešime.

### Naše ďalšie projekty

---

Source: https://webikon-web.pages.dev/projekty/un-sanctions-app/