Dreamhubb

Mobilné rozhranie pre dve platformy

Dreamhubb je multiplatformová mobilná aplikácia pre iOS a Android. Moja práca sa týkala frontendu. Tento projekt preto prezentujem ako skúsenosť s používateľskou časťou mobilnej aplikácie, bez pripisovania autorstva celému produktu.

Výzva

Vyvíjať používateľské rozhranie mobilnej aplikácie určenej pre iOS aj Android.

Riešenie

Moja práca sa sústredila na frontend aplikácie s využitím Vue 3, Quasaru a Capacitoru. Súčasťou technologického základu sú TypeScript a Pinia.

Vue v mobilnom prostredí

Zaznamenaný stack kombinuje Vue 3, Quasar a Capacitor s TypeScriptom a Piniou. Ide o technologicky odlišný prístup než React Native použitý vo FitUp. Konkrétne obrazovky a funkcie, na ktorých som pracoval, doplním podľa reálneho rozsahu.

Môj prínos

Frontendový vývoj multiplatformovej mobilnej aplikácie vo Vue 3, Quasare a Capacitore.

Predvídateľný stav obrazovky

Ukážka rozlišuje načítavanie, úspešné načítanie a chybu. Namiesto neurčitého stavu dáva rozhraniu explicitnú informáciu o tom, čo má používateľovi zobraziť. Nejde o skutočný model dát aplikácie Dreamhubb.

// Illustrative example
type ScreenState<T> =
  | { status: "loading" }
  | { status: "ready"; data: T }
  | { status: "error"; message: string };

async function loadScreen<T>(
  request: () => Promise<T>,
): Promise<ScreenState<T>> {
  try {
    return { status: "ready", data: await request() };
  } catch {
    return { status: "error", message: "Please try again." };
  }
}