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-21T23
31.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-21T23
31.109Z.json`
3.2. `nodejs process.js --cmd=comment_likes_sum --source=data-snapshots/2023-09-21T23
31.109Z.json`
4. wskazać w pliku ./gianni/src/App.vue skąd pobrać posty ( `import posts from '../../data-processed/cls/2023-09-21T23
31.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
