pwa

Weboldal a mobil app helyett
Van olcsóbb megoldás mobilra

Viktor
Weboldal vagy mobil UI tervezés termékfejlesztés közben
Forrás: Unsplash, amayli

Biztosan te is jártál már úgy, hogy rengeteg ötletet összeírtál magadnak. Ezek közül végre sikerült kiválasztani a kedvencedet. Rászántad az idődet, hogy utánanézz, lekutasd a témát. Ilyet még senki sem csinált! Remek! – gondoltad magadban. Már csak meg kell valósítani. De hogyan? Weboldal legyen vagy mobil alkalmazás? Netán PWA? Ez azonban csak a kezdet. Számos más kérdést kell még feltenned magadnak.

Ötletem már van. Hogyan lesz ebből bármi is?

Ha még nem találkoztál digitális termék fejlesztésével, akkor ajánlom körbejárni a témát. Az Így tervezz mobil alkalmazást 5 lépésben – 1. rész kendőzetlenül körbejárja a téma. Ezért most nem írom le részletesen, bővebben ott olvashatsz róla.

Hol induljak el vele?

“Hogyhogy hol?? Az interneten, nem?” – Nos, nem ilyen egyszerű! 🙂

Volt szerencsém beszélgetni pár ötletgazdával. Ezek az alkalmak kiválóak arra, hogy pár kérdést a helyére tegyünk. Olyan szempontok merülnek fel, amik nem jutottak eszébe az ötletgazdának. Ez nem gond, hiszen azért osztja meg velem, hogy hozzáértően, konstruktív kritikát fogalmazzunk meg együtt.

– Én csak egy mobil appot szeretnék, ami ezt meg azt csinál. – mondja Feri
– Értem. Tehát lesznek felhasználóid, beléptetéssel, igaz? – kérdezem
– Aha! – vágja rá
– Social login is lesz? – teszem fel. – Tudod, Google, Facebook, stb.
– Erre nem is gondoltam. – vallja be
– Kelleni fog majd egy szerver is. – vetem fel
– Az meg minek? – kételkedik
– Tudod, a fizetési tranzakciókat hol fogod látni? Mi van, ha probléma merül fel?
– Egy admin oldalra gondolsz? – csillan fel a szeme
– Igen. Neked fizető ügyfeleid lesznek, akiknek lesznek problémái. – erősítem meg

A fenti párbeszéd persze a képzelet szüleménye. Bár hasonlók szoktak elhangozni.

További szempontok, amiket érdemes megválaszolnod magadnak:

  1. Ha mobil app, akkor Android és iOS-re ki kell adni a store-okban.
  2. Kb. fél évente érdemes őket frissíteni. Ez fontos ASO (App Store Optimization, kb. ugyan az, mint a SEO) szempontból.
  3. Szükséged lesz fejlesztői fiókra, ahol kiadhatod (Owner, Account Holder)
  4. Kelleni fog valaki, aki megtervezi a kinézetet (design).
  5. Szerver (web)alkalmazás elengedhetetlen lesz a felhasználók, termékek, beállítások kezelésére. Cloud, VPS, mi legyen?
  6. Kell egy rövid, jól csengő név, logó. Apropó, domain regisztráció.
  7. Weboldal, ahol ismertető, Blog, GDPR, Adatkezelési szabályzat stb. elhelyezhető.
  8. Nem mindenki szereti a mobil alkalmazást. Biztosan erre van szükséged? Hallottál már a PWA-ról?
  9. A sok funkcióból szűrd ki, mi lenne az, amit legelőször szeretnél bemutatni? A többit hagyd későbbre!

Mennyi az annyi?

Konkrétumokban nem lehet beszélni erről. Ahány elképzelés, annyi féle kombináció. Azonban ökölszabályokat lehet hozni.

Tudnod kell, hogy egy mobil fejlesztés több lépésből áll, mint egy weblap kialakítása. Emiatt az árak is markánsabbak. A néhány száztól a több ezer munkaóráig terjedhet egy kis-közepes termék kialakítása. Vannak nem megúszható részek. De néhány párhuzamosítható, vagy későbbre tolható. Innen pedig egyszerű a matek, mert az óraszámot fel kell szorozni a fejlesztői órabérekkel.

Az egész az alábbi nagy fázisokban határozható meg:

  1. Ötlet gyűjtés
    • Kinek?
    • Mit?
    • Fizetős vagy Ingyenes?
  2. Termék meghatározása
    • Funkciók
    • Mi lenne, ha… ?
    • Iparági szabványok felkutatása
  3. Prototípus(ok) kialakítása
    • Rajzok, Mock-up-ok
    • felhasználói interjúk
    • design tervezetek (Figma, Adobe XD)
    • MVP
  4. Fejlesztés
    • felhasználói visszajelzések alapján
    • design véglegesítése
    • kódolás
    • mobil app, szerver, weblap, automatizálás, fizetési szolgáltató integrálása
  5. Tesztelés
    • fejlesztői tesztek (unit, integrációs)
    • automata tesztek
    • végfelhasználói tesztek (end-to-end, E2E)
    • jegyzőkönyvek, riportok
  6. Bevezetés, értékesítés
    • sales, marketing, PR
    • közösségépítés, kampányok
    • app store-okban kiadás
  7. Utóélet, támogatás
    • ügyfélszolgálat, helpdesk
    • rendszeres javítások
    • (termék visszahívása, kivonása)

Beszélj szakemberrel

Ha ezek borzasztóan hangzanak, beszélj egy szakemberrel.

A fenti tevékenységek közül számos elhagyható, egyszerűsíthető. Nem feltétlenül kell mindent megcsinálni. Nem is lenne reális kisebb ötleteknél.

Éppen ezért nem árt, ha nem egyedül vágsz neki. Pár alkalmas tanácsadás, vagy beszélgetés költsége még mindig megfizethető, mielőtt nagy fába vágnád a fejszédet. Kérhetsz ütemezést, hogy a cash-flow rendben legyen.

A jó szakember le tud beszélni egy költséges, vagy bonyolult részről. Akár egy jó alternatív helyettesítő megoldást mutat rá.

Érdemes élni a szakmai kapcsolatainak a kiaknázásával. Megfelelő szolgáltatók, partnerek ajánlásában sokat tud segíteni. Nem neked kell 3-5-10 felé beszélni az adott szakterületen. Persze fel is oszthatóak a feladatok: mindenki azt csinálja, amihez ért.

Kommunikáció

Fontos a projekt közben a tiszta kommunikáció. Ez lehet élőben, video call-on keresztül, emailben. A lényeg, hogy a leghatékonyabb legyen. Mindenki ideje drága. A meeting végére szülessen egy döntés. Ne csak a meeting kedvéért üljünk össze. A felmerülő kérdéseket és az azokra kapott válaszokat rögzítsük egy rendszerben (issue tracker, feladatkezelő, Excel 🙂 ), ahol mindenkinek elérhető.

Haladj a saját ütemedben

  • Ha nincsen meg a tudásod, olvass!
  • Ha nincsen meg a tőkéd, kerítsd elő! Vagy szerezz támogatót! Vagy egy közösséget, aki megelőlegezi neked. Ilyen a www.brancskozosseg.hu.

Lehet, hogy először csak egy fehér A4-es papíron lesz bemutatható. Ezután már lesz egy Figma terved, prototípusod. Aztán jöhet egy reszponzív weboldal, PWA vagy egy böngésző kiegészítő (Firefox, Chrome extension). Ha jó a fejlesztői keretrendszer, akkor abból könnyen lehet készíteni natív appokat. (Ilyen például a legnépszerűbb Flutter mobil app keretrendszer.)

A témában írtam több cikket, ezek is érdekelhetnek:

Ha szeretnél mobil appot fejlesztetni, de nem tudod, hogy hogyan indulnál neki, vagy csak támogatásra van szükséged benne, akkor keress meg a kapcsolataim egyikén.

(PWA) 2021-ben hódítanak a Progresszív Web Alkalmazások

Viktor
PWA jól működik a természetben is, offline.
forrás: Unsplash.com / Nature Mobile

A Progresszív Web Alkalmazás, röviden PWA, olyan megoldás, ami a weblap és a mobil app között helyezkedik el. Részben tartalmazza azokat a funkciókat, amiket egy mobil app tud, de kényelmesebb egy weblapnál. Ebben a cikkben ennek részleteit gyűjtöttem össze.

Mi egy PWA pontosan?

A PWA nem más, mint egy weboldal (HTML, CSS) technológiájára épülő mobil alkalmazás. Ennél persze többről van szó!

Az előző gondolat egy leegyszerűsített értelmezés, de kétség kívül ez az alapja. Alex Russell és Frances Berriman fogalmazták meg azt a 9 ismérvet, amit egy PWA -nak tudnia kell.

  1. Reszponzív: bármelyik kijelzőn jól mutat
  2. Kapcsolat független: internet kapcsolat nélkül is használható
  3. App-szerű használat: a mobil app-okban megszokott módon navigálhatunk benne
  4. Naprakész: egy un. Service Worker automatikusan figyeli, hogy mindig a legfrissebb verziót használjuk
  5. Biztonságos: TLS kapcsolatot használ, ami gondoskodik róla, hogy a forgalmat ne lehessen lehallgatni
  6. Könnyen megtalálható: egy megfelelően kitöltött un. Manifest írja le a tartalmat, amit a keresők gyorsan megtalálhatnak és indexelhetnek
  7. Elköteleződés: hozzáfér az operációs rendszer újbóli elköteleződést (re-engagement) segítő beállításaihoz, pl. Push Notification
  8. Telepíthető: Kitűzhető a mobilunk kezdőképernyőjére, hogy kézre essen a következő használatkor
  9. Linkelhető: egy linken érhető el az első használathoz, ezért könnyedén elérhető, megosztható másokkal

Hol lehet hasznos egy PWA?

A 2020-as évben beköltöztünk az online térbe egycsapásra. Naponta nyíltak (először csak kényszerből) a webshop-ok. Akinek addig nem létezett üzlete vagy vállalkozása, azok is felismerték az online vásárlás erejét. Ez felerősítette, hogy tovább bővüljenek az online vásárlások.

Nem minden webshop volt felkészülve a mobilra optimalizált megoldásokkal, ami gyors oldal elhagyást jelent a konkurencia javára. Ebből látszott, hogy a fizikai boltok szinte teljesen megszűntek, akinek nem volt online megoldása, az komoly gondba került (nagyon sokan bezártak végleg).

Egy mobilos felhasználói élményt javíthat a PWA:

  • Push Notification-k és értesítések küldése
  • Gyorsan lehet bejelentkezni a Facebook vagy Google felhasználónkkal
  • Internet nélkül is lehet vásárolni, gyűjtögetni a kosárba
  • Egyedi analitika nyomonkövetése
  • Könnyített mobil fizetési módok

Egy PWA jó belépő lehet akkor, ha nem akarjuk a felhasználót rákényszeríteni egy újabb app telepítésére, viszont a vállalkozásunkat pörgetni akarjuk.

Egy fodrászat, műkörmös időpontfoglalása egyszerűsödik. Mindenki magának intézheti, kényelmesen. A fodrásznak sem kell a hajas kezével, az ügyfelét késlekedve telefonokat bonyolítania. Ehelyett egy naptárat lát, aki szeretne menni, megadhatja a frizura típusát, így ez alapján becsülhető az idő. Elegendő az időpontra érkezni, ami csökkenti a sorbanállást.

A turisztikai app-ok töretlen sikernek örvendenek. A korlátozott utazások miatt egyéb, eddig nem ismert megoldásokat igényelnek a kirándulók.

A webshop-okról már volt szó, előnyük egyértelmű.

Meg kell jelenni az online térben, különben nem létezik az a vállalkozás, amelyik nem így tesz. Az egyszerű, tájékoztató jellegű, céges honlapok ideje lejárt.

A cégek berendezkedve a hibrid munkavégzésre, a munkaerőnek új szolgáltatásokat szeretne biztosítani. A Home Office elterjedésével már jóval túlmutat ez az egyszerű munkaidő regisztrálásán. Egy feladatkezelő könnyedén naprakészen tartja, hogy ki-mikor-mit végez? Céges eseményekről lehet értesíteni a dolgozókat. Visszajelzéseket kérni a felhasználóktól, hogy csak egy pár példát említsek.

A fentiek inkább a mobiltelefonos felhasználását hangsúlyozták, azonban van egy fontos terület még: az asztali számítógépen való használat. Egy ügyviteli rendszer, egy webshop adminisztrációs felület ugyan olyan jól kialakítható vele, mint egy mobil app. Véd a váratlan internet kapcsolat megszakadása ellen, és tovább tudunk dolgozni a programmal.

A PWA hátrányai

Azáltal, hogy nem az alkalmazás áruházakból (Google Play vagy App Store) telepítjük őket a telefonjainkra, elveszítjük annak a mérésnek a lehetőségét, hogy feltárjuk a célközönségünket. Ezek némileg kiküszöbölhetőek más analitikai megoldásokkal. Lényegében nem biztos, hogy az fontos számunkra, hogy mikor telepítették, és kik, hanem hogy valóban hozott-e forgalom növekedést. Minden esetre ez egy olyan tényező, amit SEO szempontjából érdemes figyelembe venni.

Bár egy PWA jobban kihasználja egy mobil képességeit, bizonyos funkciókhoz nem biztos, hogy hozzáférünk. Ilyen lehet a Bluetooth kapcsolat, vagy a GPS adatok. Főleg az Apple az iPhone-okon korlátozza ezek telepítését. Mérlegelni kell, hogy a fenti funkciókra valóban szükségünk van-e, és ha tényleg elengedhetetlen, akkor választani egy natív megoldást, ami ezt megoldja.

Alapvetően a telefonunkon lévő böngésző szab gátat a telefonon elérhető funkcionalitások kihasználásához, de néhány trükkel ezek bizonyos mértékig tágíthatóak. Azonban fontolóra kell venni, hogyha egy speciális képesség kell a telefonunkról, akkor a PWA szűk lesz egy idő után, és a natív irányba kell elmozdulnunk.

Mit kapunk a pénzünkért?

Azok a jó megoldások, amik belátható beruházások mellett a megtérülést szem előtt tartva valósulnak meg. Jó szempont az, ha kicsiben indulunk, és az igények növekedésével tudjuk fejleszteni a terméket.

Ma már van rá lehetőség, hogy a prototípustól (Figma), egy PWA-n keresztül el tudunk jutni egy natív app-ig. Közben nem kell mindig az elejéről kezdeni a fejlesztést. Ha ugyan az a csapat, a későbbiekben onnan tudja folytatni, ahol abbamaradt a fejlesztés, azzal sok idő és pénz takarítható meg.

Megoldások

A Flutter Web-es megoldása kínál olyan PWA megoldást, ami a későbbiekben natív Android vagy iOS applikációkká bővíthető. Ennek tetejében a két platformra egyszerre készül el a program. A Flutter keretrendszerről írtam korábban, ami nagyon jó megoldást kínál egy PWA vagy SPA (Single-Page Application) kiadásához.

Amennyiben nem vagy biztos benne, hogy merre indulj el, keress meg bizalommal, hogy beszéljünk a személyre szabott megoldásodról!

További Flutter-ről szóló cikkjeimet érdemes elolvasni.

A cikk megírásához a www.coredna.com hasonló posztjából szemezgettem.