iMeteo: Předpověď počasí do kapsy s moderní aplikací

Případová studie vývoje multiplatformní aplikace s widgety vyvinuté pomocí frameworku Flutter

Požadavek

Přání klienta

Klient se na nás obrátil s požadavkem na multiplatformní aplikaci, která bude podporovat widgety a zobrazování inzerce. Cílem bylo doplnit webovou aplikaci o mobilní verzi na základě zpětné vazby stávajících uživatelů, protože webové řešení některé požadované funkce neumožňovalo. Klient sice měl k dispozici starší aplikace pro Android a iOS, které vznikly společně s webem, ty však postupně zastaraly a neodpovídaly nové podobě webového řešení po jeho redesignu.

Hlavním požadavkem bylo přizpůsobení meteorologických informací regionu uživatele (Slovensko a střední Evropa) a rozšíření funkcí webové aplikace o nové notifikace, widgety, stavový řádek a správu předplatného. Mobilní aplikace měla také podporovat model „Consent or pay“ / „Pay or okay“, kdy uživatel buď povolí reklamy a může aplikaci používat zdarma, nebo si zaplatí aplikaci bez inzerce (předplatné). K zobrazování reklam chtěl klient použít sadu nástrojů Prebid s napojením na služby Google Ads a Adform. Na základě doporučení interního IT týmu se klient rozhodl pro realizaci pomocí frameworku Flutter. Nechtěl však projektem zatěžovat vlastní vývojáře, a tak hledal externího dodavatele pro úzkou spolupráci.

Problém

Výzva pro naše vývojáře

Jako vždy jsme i při práci na tomto projektu narazili na některé výzvy a překážky, s nimiž jsme si museli kreativně poradit. Prvním problémem byla implementace notifikací a widgetů – některé věci fungovaly v praxi jinak než „na papíře“ (v dokumentaci), a tak jsme se na platformě iOS potýkali s různými omezeními (live widgety, perzistentní notifikace).

Dále jsme se museli vypořádat s chybějícími stavy a scénáři. Klient nám sice dodal designy pro klíčové obrazovky, avšak v některých případech se naši vývojáři museli pořádně zamyslet a pokusit se do hloubky porozumět zamýšlenému záměru UI/UX, aby dokázali udržet jednotnou koncepci.

Třetí překážka souvisela s knihovnou třetí strany, která nebyla kompatibilní s frameworkem Flutter. Jelikož obsahovala jen nativní komponenty, rozhodli jsme se tuto knihovnu nakonec vyřadit a použít místo ní tu, která neměla s Flutterem problém. Tím jsme předešli problémům s kompatibilitou napříč platformami.

Časová náročnost

Analýza nám zabrala 1 měsíc
Vývoj probíhal 3 měsíce
1 měsíc navíc jsme potřebovali na dokončení funkcí zobrazování reklam

Data

Google Play 10000+ stažení
AppStore 1000+ stažení

Klient

MediaAd s.r.o.

slovenská společnost, která pomáhá majitelům webových stránek zvyšovat zisky a inzerentům zlepšovat výkonnost kampaní
specializuje se na nové reklamní formáty a pokročilou optimalizaci programatické reklamy pomocí platforem Adform, Appnexus, Criteo a DV360
využívá výkonné reklamní formáty s vysokou mírou vizibility a prokliků, first-party data (informace shromážděné od vlastních zákazníků a návštěvníků webu) a header bidding prvky (dražba reklamního prostoru)

https://www.imeteo.sk/

Řešení

Jak jsme aplikaci zpracovali

Jak jsme si s technickými výzvami poradili? Rozdíly mezi Androidem a iOS jsme řešili především na úrovni aplikační logiky a chování jednotlivých funkcí. Zároveň jsme přizpůsobili i části UI/UX tak, abychom zachovali očekávané chování aplikace, správné rozložení obrazovek a dostupnost všech funkcí.

Pokud jde o chybějící obrazovky a scénáře, museli jsme věnovat dostatek času a úsilí porozumění UI/UX aplikace. To nám pomohlo pochopit záměr příslušných scénářů použití a zachovat jednotnou vizuální identitu značky.

A konečně problém s nativními komponentami ve Flutteru jsme vyřešili použitím knihovny Admob, která nám umožnila napojení jak na Google Ads, tak na Adform přes nástroj Prebid.

Co všechno je součástí systému?

Hodinová a denní předpověď počasí s detailními informacemi a přehlednými grafy
Aktuální informace o počasí pro polohu uživatele a pro uložené lokality
Radar srážek
Meteorologické výstrahy (bouře, vysoké teploty, námraza, …) a notifikace
Zprávy a články o počasí
Detektor blesků v rámci prémiového předplatného
Widgety
Stavový řádek na Androidu

Klient

iMeteo.sk

největší slovenský meteorologický server
předpověď počasí podle regionů a měst, hodinová předpověď, výhled až na 30 dní
srážkový radar, výstrahy (bouřky, silný vítr, povodně, mrazy, …), meteorologické modely
zpravodajství o počasí pro Slovensko, Evropu a celý svět, včetně článků z oblasti vědy, astronomie a životního prostředí

Chci také aplikaci

Hlavní přínos

To nejlepší na aplikaci

Efektivní monetizace: Propojení sady nástrojů Prebid se službami Adform a Google Ads umožňuje zobrazovat reklamu, za kterou inzerent nabízí nejvíce peněz.

Funkce předplatného: Placené členství uživatelům umožní používat aplikaci bez reklam, umístit si na plochu widgety a získat přístup k detektoru blesků.

Sjednocení UX: Aplikace nyní nabízí jednotný uživatelský dojem jak na webu, tak na mobilních zařízeních.

Reference klienta

,,Pre iMeteo sme potrebovali modernú mobilnú aplikáciu, ktorá doplní náš web o funkcie ako widgety, notifikácie či predplatné. Think Easy nás presvedčili dôslednosťou hneď pri úvodnej analýze a počas celého vývoja bolo vidieť, že nad aplikáciou premýšľajú do hĺbky. Tam, kde v našich podkladoch niečo chýbalo, dokázali sa vžiť do zámeru dizajnu a domyslieť riešenie tak, aby aplikácia fungovala jednotne na iOS aj Androide. Oceňujeme aj vecnú, ľudskú komunikáciu bez zbytočného technického žargónu. Máme partnera, na ktorého sa vieme spoľahnúť aj pri ďalšom rozvoji aplikácie."

Petr Minárik, MediaAd, s.r.o

Platformy a použité technologie

Co jsme při vývoji použili

iMeteo je multiplatformní aplikace vytvořená ve frameworku Flutter. Používá BLoC/Cubit pro state management, GoRouter pro navigaci a GetIt pro dependency injection. Pro komunikaci s back-endem aplikace používá Dio, pro push notifikace Firebase a pro monitoring chyb Sentry.

Aplikace je propojena se službou Google Maps pro zobrazení map, podporuje iOS a Android widgety prostřednictvím Home Widget a integruje služby Google Mobile Ads a In-App Purchase pro účely monetizace. Modely a stavy jsou generovány pomocí nástroje Freezed.