Tomasz Nikodem Hajto, ps. „Gianni” [...] – Ja kupuję tylko firmy Gianni Versace – powiedział i w ten sposób został na długie lata „Giannim”

Lubię przekazywać nazwami funkcji / podprojektów jakieś skojarzenie w formie easter-egga. Mam nadzieję, że śmieszne. #lajko <---- tag z #hejto dad jokes

No więc dzisiaj - frontend z użyciem Vue (nazwany właśnie `gianni` - sprawdź repo, daj gwiazdkę https://github.com/wombatDaiquiri/lajko ). Znowu pojęcie o tym jak działa framework mam mgliste. Ale działa. Jak chcielibyście mnie poprawić, to zapraszam do komentarzy

Jak po sznurku, z tutoriala https://vuejs.org/guide/quick-start.html#creating-a-vue-application

> npm create vue@latest

tutaj poklikałem co mi się wydawało sensowne na czuja xD

> Project name: … gianni
> Add TypeScript? … No
> Add JSX Support? … No
> Add Vue Router for Single Page Application development? … No
> Add Pinia for state management? … No
> Add Vitest for Unit Testing? … No
> Add an End-to-End Testing Solution? › No
> Add ESLint for code quality? Yes
> Add Prettier for code formatting? Yes

no więc mamy folder z przykładową apką vue.

> cd gianni
> npm run dev

wchodzimy z przeglądarki na http://localhost:5173/ - no coś tam się wyświetla.

ponieważ jestem totalnym beztalenciem graficznym, to po prostu odtworzę wygląd z hejto.

Efekt końcowy na screenie poniżej;

No więc jak teraz sobie użyć apki? (tutaj jak otworzyć terminal: ) Otóż musicie;

1. odpalić `nodejs scrape.js` żeby pobrać dane z hejto
2. skopiować nazwę pliku utworzonego w data-snapshots ( będzie wyglądała mniej-więcej tak: 2023-09-21T2331.109Z.json )
2.1. (już w tym momencie możecie sobie przejść do kroku X ale wtedy dostaniecie normalne hejto tylko brzydsze)
3. odpalić skrypt do przesortowania postów (możecie odpalić oba)
3.1. `nodejs process.js --cmd=likes_total --source=data-snapshots/2023-09-21T2331.109Z.json`
3.2. `nodejs process.js --cmd=comment_likes_sum --source=data-snapshots/2023-09-21T2331.109Z.json`
4. wskazać w pliku ./gianni/src/App.vue skąd pobrać posty ( `import posts from '../../data-processed/cls/2023-09-21T2331.109Z.json';` )
5. wejść do folderu gianni: `cd gianni`
6. odpalić serwer z frontendem xD kiedyś se o tym też pogadamy ( `npm run dev` )
7. wchodzicie na http://localhost:5173/ i widzicie brzydkie hejto, ale z postami być może w innej kolejności niż na hejto
8. zauważcie, że tylko raz kopiowaliśmy nazwę i wszędzie ją podmieniliśmy - to oczywiście super kandydat na automatyzację/flagę. Ale napisanie aplikacji w taki sposób to albo zdrowy rozsądek albo doświadczenie. Nie chcę na Was wywierać presji więc pozwolę sobie być nieskromny.

wszystkie te kroki można zautomatyzować - ale automatyzowanie czas. a moja doba ma jedynie 24 godziny, tak samo jak Wasze. Więc mam jeszcze dużo tematów na posty.

#programowanie #javascript #frontend #webdev

inb4 czemu nie czysty js: bo wymaga więcej tłumaczenia a tutaj można robić "cargo cult" i używać magicznych formułek do tworzenia interfejsów

permalink do repo: https://github.com/wombatDaiquiri/lajko/tree/v0.0.3