• Projekt XNotes - apka notatnik, który przetwarza notki głosowe na tekst. Notatki są trzymane w prywatnym repo użytkownika w plikach .MD.
  • Pisanie apki w metodologii PAAS - platform as a service.
  • Tu: klient dostaje obraz Dockera, który może zahostować np. na AWS (self-hosted).
  • Wymagania apki:
    1. Połączenie i logowanie z GH,
    2. Rozpoznanie mowy (speech to text)
    3. Wygodne UI,
    4. Autozapisywanie
    5. Responsywne
    6. Wbudowany edytor Markdown z podstawowym edytorem tekstu
    7. Dodanie zdjęć, audio i ich otwieranie/odtwarzanie z apki.
  • Rozpisanie funkcjonalności metodą MoSCoW
    • Must
    • Should (dobrze żeby było)
    • Could
    • Want
• BDD - behavioral driven design
  • Rozpisanie problemu na 3 części:
    • Szczegółowy use case - w jaki sposób user będzie dokonywać interakcji z funkcjonalnością.
    • Główna potrzeba biznesowa - po co to robimy i jak ta funkcjonalność spełnia potrzeby użytkownika.
    • Działanie techniczne / opis wizualny - jak dana funkcjonalność mogłaby wyglądać czy działać.
    • Uwagi - komentarz jeśli coś wymaga dopowiedzenia.
• Funkcjonalności rozpisane zasadą BDD:
  • Must:
    • Apka ma korzystać z logowania typu oauth poprzez GitHuba
      • Cel biznesowy - braku potrzeby rejestrowania i przechowywania użytkowników w bazie danych - GitHub robi to za nas.
        • Czemu nie np. OneDrive? Chcemy ograniczyć "niszę" odbiorców do wyłącznie programistów, bo np. dane narzędzie ma sens tylko w danej niszy.
      • Use case - użytkownik może zalogować się do apki za pomocą konta GitHub.
      • Działanie techniczne / opis wizualny - przycisk "Zaloguj się z GitHub", które otwiera nowe okno z autoryzacją. Na sukcesie przenosi do dashboard/kreatora, inaczej pokaże błąd.
    • Apka ma być podłączona do repo GitHuba zalogowanego użytkownika
      • Cel biznesowy - aby wszystkie notatki znajdowały się w repozytorium użytkownika, wykorzystanie platformy do przechowywania plików.
      • Use case - użytkownik korzysta z kreatora, który pozwala na stworzenie/wykorzystanie danego repo w celu przetrzymywania napisanych notatek.
      • Działanie wizualne - użytkownik ma dostęp do panelu, w którym znajdują się wszystkie zapisane notatki. Użytkownik ma możliwość stworzenia własnego zbioru notatek za pomocą kreatora.
        • Kreator to formularz, może być wielokrokowy (multistep) w zależności od potrzeby biznesowej, który pozwala na wybranie, czy stworzyć nowy zbiór czy zaimportować już istniejące.
    • Apka ma działać, niezależnie od urządzenia
      • Cel biznesowy - aby użytkownik mógł korzystać komfortowo z aplikacji, niezależnie od tego, czy to jest laptop, tablet czy smartfon.
      • Use case - użytkownik może korzystać na urządzeniach mobilnych (tablet/smartfon) z aplikacji typu PWA / React Native / responsywnej wersji aplikacji (mobilnej/desktopowej).
      • Działanie wizualne - aplikacja jest dopasowana do ekranu użytkownika.
    • Apka ma mieć edytor do plików .MD i tekstowych z podstawowymi elementami UI.
      • Cel biznesowy - aby użytkonik w wygodny sposób mógł modyfikować swoje notatki, bez wychodzenia z aplikacji i korzystania z aplikacji osób trzecich.
      • Use case - użytkownik ma możliwość edycji tekstu oraz dostępu do podstawowych narzędzi tekstowych (formatowanie, czcionka, itp.)
        • Mogłoby działać podobnie jak Notion.
      • Działanie wizualne - przycisk z ikoną długopisu, który otwiera edytor (WYSIWIG) z możliwością jego zamknięcia (lub ręcznego zapisania w przypadku braku autozapisu)
  • Should:
    • Apka ma udostępniać intuicyjny interfejs UI do zarządzania kategoriami w repo.
      • Cel biznesowy - aby użytkownik chętniej korzystał z aplikacji, ogranicza to frustrację która może doprowadzić do przejścia na aplikację osób trzecich.
      • Use case - użytkownik może w dowolny sposób zarządzać swoimi notatkami (przenoszenie, modyfikacja folderów i notatek, itp.)
      • Działanie wizualne - interfejs UI, który pozwala użytkownikowi na powyższy use case.
    • Apka ma mieć opcję autozapisywania.
      • Cel biznesowy - aby użytkownik nie musiał pamiętać o zapisywaniu, szczególnie w krytycznych sytuacjach np. urządzenie użytkownika nagle przestanie działać.
      • Use case - aplikacja, gdy użytkownik modyfikuje treść w swoich notatkach, automatycznie zapisuje zmiany po krótkim opóźnieniu (2-3 sekundy od ostatniej wprowadzonej wartości)
      • Działanie techniczne - aplikacja ma nasłuchiwanie na wprowadzanie treści i gdy minie 2 - 3 sekundy to wyśle te zmiany do repo (stosuje się tu tzw. “debounce”, żeby nie wysyłać litera po literce do GitHuba / serwer)
  • Could:
    • Apka ma możliwość rozpoznawania mowy i przetwarzania typu “speech to text”.
      • Cel biznesowy - aby użytkownik mógł w wygodny sposób wprowadzać notatki, bez potrzeby pisania na klawiaturze.
        • Może to być szczególnie przydatne dla osób, które z jakiegoś powodu nie mogą pisać na klawiaturze
        • bądź osób, które chcą zrobić notatkę “na szybko”. Nie musi korzystać z aplikacji osób trzecich i “przeskakiwać” pomiędzy aplikacjami.
      • Use case - użytkownik ma możliwość uruchomienia “nagrywania”, po czym aplikacja przetwarza treść głosową i zwraca jej treść jako tekst.
      • Działanie wizualne - przycisk przypominający nagrywanie (REC), który zamienia się na pauzę i zatrzymanie.
      • Działanie techniczne - apka korzysta z Speech Recognition API.
  • Want:
    • Apka ma możliwość “dołączenia” plików audio i ich odtwarzania bezpośrednio w aplikacji.
      • Cel biznesowy - aby użytkownik mógł w wygodny sposób odsłuchiwać treści bez uruchamiania do tego aplikacji osób trzecich.
      • Use case - użytkownik ma możliwość dołączenia pliku audio z dysku urządzenia i jej odsłuchania (tak jak jest np. w Messengerze/Whatsappie)
      • Działanie wizualne - w menu przycisku Dodaj (symbolizowany jako +) można dodać opcję “Audio”. Element audio ma możliwość odtworzenia/zatrzymania i jej przewijania.
      • Działanie techniczne - apka może korzystać z Drag n Drop + File System API.
• Backend - jako mikroserwisy połączone w jedną sieć.
• Frontend - w CRA + TypeScript (ja bym zrobił Vite + React + TypeScript)
• Offtop
  • Zadania do Reacta:
    • Tester komponentów, który sprawdzi najlepszą optymalność. (Czy korzysta z memoizacji, itp.)
    • Komponent 1mln element list (żeby się to nie cięło), który korzysta z react-window i Service Workers / Web Workers.