Diagram dla portalu pobierającego API javascript

Question

Dzień dobry, tworzę projekt szkolny, w zasadzie już kończę.
Wykonałem stronę która pobiera za pomocą Fetch API z dwóch źródeł dane, NBP odnośnie walut tradycyjnych i innego pośrednika odnośnie kryptowalut. Jak widać na stronie (link poniżej) są różne przeliczniki, kalkulator walut tradycyjnych i cyfrowych, gazeta z nowinkami również pobieranymi na bieżąco przez API.  

Strona projektu: www.biznes-internetowy.pl  (domena nie ma nic wspólnego z treścią, po prostu taką miałem wolną więc wrzuciłem pliki dla zobrazowania)

W czym więc problem?
Nie mam żadnego pojęcia o diagramach UML i ciężko przełożyć mi jakąkolwiek teorie, do mojego projektu a muszę jakieś diagramy do projektu dostarczyć. Nie posiadam bazy danych więc diagram klas i erd odpada? 
Zostaje zatem zrobienie diagramu przypadków użycia, jeśli błądzę i można dla tej strony zrobić coś więcej, proszę mnie poprawić. Wracając do diagramu przypadków użycia jedyne co przychodzi mi do głowy to rzeczy które po przelaniu na obraz, wyglądają bardzo prymitywnie.

 

Gdzie "wyszukaj newsy" oraz "wyszukaj kontakt" dodałem czerwieniąc się na policzkach ze wstydu, bo to samo musiałoby tyczyć się wszystkich podstron, ale czy to ma sens? 
Proszę o wskazówki odnośnie tego jak mógłbym rozbudować diagram przypadków użycia, aby miał ręce i nogi, oraz czy jest możliwość zrobienia jeszcze innego diagramu UML?

Dziękuje bardzo za pomoc.

 

 

Answer 1

Pierwsza sprawa skorzystaj z jakiegos edytora, najprosciej bedzie Ci wykorzystać draw.io tutaj masz opisane jak mozesz zrobic diagram przypadkow użycia https://about.draw.io/uml-use-case-diagrams-with-draw-io/

Twoja apka korzysta z zapytan do zewnetrznego serwisu, mozliwe ze robisz kilka requestow zeby zebrac dane itp a do tego przydatny moze byc ten diagram https://about.draw.io/create-uml-sequence-diagrams-in-draw-io/ w skrocie mozesz w nim opisac poszczegolne sekwencje ktore wykonujesz aby wyświetlić dane.

Answer 2

Zrozumiałem że struktura mojej strony i jej kod, nie jest na tyle skomplikowany aby mieć pole popisu dla innych diagramów. Postaram się więc stworzyć jeden diagram, przypadków użycia ale bardziej rozbudowany niż ta prymitywna wersja. Wiem z definicji co można na nim przedstawić, jednak średnio z przełożeniem teorii na praktykę.
Chcąc przedstawić interakcje aktora z systemem mam pojedyncze czynności które może wykonywać:

• Sprawdź kurs
  -waluty tradycyjnej
  -kryptowaluty
• Przelicz kurs
• Wyszukaj "newsy"
• Wyszukaj "kontakt"
• Wyszukaj "giełdy"
• Wyszukaj "gazeta"
• Wyszukaj "kalkulator" itd.

Pytanie czy nie należy przebudować struktury tych przypadków? Jeśli nie to czy dla np.

• Wszukaj "Giełdy" mogę dodać relacje extended z "Porównaj giełdy" i analogicznie dla reszty?*
• Wszukaj "Kalkulator" -||- "Przelicz waluty"
• Wszukaj "Kryptowaluty" -||- "Wybierz kryptowalute" ==> "Sprawdź szczegółowe statystyki"
• Wyszukaj "gazeta" -||- "Wybierz artykuł" ==> "Przejdź do artykułu"

Jeżeli jest to rozwiązanie słuszne, to czy w celu rozwinięcia diagramu mogę dodać kilka zadań które wykonuje system? Dodając kolejnego aktora: "System"?
Następnie dla np.:

• Wyszukaj "gazeta" dodać zależność od systemu "Pobierz listę artkułów"
• Wyszukaj "kryptowaluty" "Pobierz listę kryptowalut" i analogicznie dla reszty?

Choć pewnie nadal jestem w błędzie.
Proszę o wskazówki.