⛩️ WarsawJS Workshop #18 — JavaScript (Intermediate Level)
Copy + Paste
# Opcjonalnie
npm run mock:build
npm run mock:start-server
npm install
npm run dev
Copy + Paste
git checkout master
npm version patch
git push && git push --tags
- "Autentykacja" (uwierzytelnianie) vs autoryzacja (kontrola dostępu)?
- kim jesteś?
- co możesz zrobić?
- Przykłady?
- bankowość online
- OAuth 2.0 - standard w komunikacji między użytkownikiem a serwerem
- GitHub i jego aplikacje
- po co są aplikacje?
- dlaczego tak pobieramy dane o sobie, zamiast skorzystać z publicznego API?
- limit autoryzacji z jednego uwierzytelniania = 10
- limit autoryzacji będąc uwierzytelnionym = 60
- ...
-
✅ Prezentacja listy tematów warsztatów
-
✅ Pojedynczy temat zawiera:
- ✅ Tytuł warsztatu
- ✅ Lista osób, którzy zgłosili się jako trenerzy
- ✅ Autor (pierwszy trener) tematu jest odpowiednio wyróżniony
- ✅ Przyciski:
- ✅ Do głosowania na temat przez społeczność (np. serduszko)
- ⛔ Zabezpieczenie przed wielokrotnym głosowaniem
- ✅ Do zapisania kolejnego trenera
- ✅ Zabezpieczenie przed wielokrotnym zapisaniem
-
✅ Formularza dodawania tematu
- ✅ Prezentacja dla zalogowanego użytkownika
- ✅ Resetowanie po wysłaniu formularza
- ✅ Zapisanie danych z formularza
- ⛔ Edycja wcześniej zgłoszonych przez siebie tematów
-
✅ Osoby zgłaszające się jako trenerzy autoryzują się przez GitHuba i udostępniają tylko podstawowe dane o sobie.
- ✅ Stworzenie aplikacji autoryzującej
- ✅ Integracja z GitHub API
- ✅ Własna implementacja autoryzacji
- ✅ Wykorzystanie paczki
hellojs
- ✅ Zalogowanie użytkownika
- ✅ Wylogowanie użytkownika
-
✅ Temat zostaje wyróżniony w sytuacji kiedy zbierze on:
- ✅ min. 3 trenerów
- ✅ min. 40 uczestników (lajków)
-
⛔ Tematy zapisywane są w:
- ✅ poziom początkujący:
in-memory
- ✅ poziom podstawowy:
local storage
- ⛔ poziom średni:
json server
- ⛔ poziom zaawansowany:
firebase
/sqlite
/mongodb
/azure
- ✅ poziom początkujący:
-
Stworzenie
- katalogu
warsawjs-workshop-18-topics-manager
- a w nim pliku
index.html
- katalogu
-
Stworzyć plik
package.json
npm init -f
-
Instalacja
parcel
-a:npm i parcel-bundler
-
Uruchomienie polecenie, które stworzy możliwość podgląda w przeglądarce:
npx parcel index.html
albo
./node_modules/.bin/parcel index.html
-
⭐ Zadania dodatkowe:
-
Stworzenie zadania
npm run dev
w plikupackage.json
, które będzie uruchamiaćparcel index.html
-
Stworzyć plik
.gitignore
z katalogiem.cache/
-
-
Stworzyć plik
scripts/main.js
-
Osadzić skrypt w pliku
index.html
-
Zainstalować paczkę
bulma
(oraz jej największą zależnośćnode-sass
):npm i bulma node-sass
-
Dodać paczkę
bulma
w plikumain.js
za pomocą fnrequire
-
Stworzyć nagłówek strony
-
Stworzyć menu strony
-
Dodać link (do menu) w celu logowania via
GitHub
-
Podpiąć się pod jego kliknięcie i wyświetlić
console.log
-
Autoryzacja za pomocą
OAuth 2.0
- poziom podstawowy: wykorzystać paczkę
hellojs
- poziom zaawansowany: napisać mechanizm komunikujący się z GitHubem
- poziom podstawowy: wykorzystać paczkę
-
Wejdź na stronę: https://github.com/settings/applications/new
-
Stwórz nową aplikację. Poniżej opis pól:
Application name
- dowolna nazwa (nie ma znaczenia)Homepage URL
- dowolny adres (nie ma znaczenia)Application description
- opis aplikacji (nie ma znaczenia) [opcjonalny]Authorization callback URL
- adres na który zostanie użytkownik przekierowany po zalogowaniu (ma znaczenie)
Kliknij "Save"
-
Wejdź na stronę https://auth-server.herokuapp.com/
-
Zaloguj się (np. via GitHub)
-
Stwórz nową aplikację. Poniżej opis pól:
reference
- dowolna nazwa (nie ma znaczenia)domain
- adres z aplikacją (ma znaczenie)client_id
- skopiuj z poprzedniej aplikacji (ma znaczenie)client_secret
- skopiuj z poprzedniej aplikacji (ma znaczenie)grant_url
- wpisz adreshttps://github.com/login/oauth/access_token
Kliknij "Save"
-
Zainstalować paczkę
hellojs
npm i hellojs
-
Dodać paczkę
hellojs
w plikumain.js
za pomocą fnrequire
-
Skonfigurować
hellojs
za pomocąclient_id
hello.init({ github: CLIENT_ID });
-
Podłączyć logowanie pod handler kliknięcia w przycisk.
hello('github').login();
💡 Pamiętać! Wyłącz domyślne zachowania linki za pomocą
evt.preventDefault()
. -
Stworzyć funkcję do pobierania profilu użytkownika.
hello('github').api('/me');
-
Nasłuchać na pobranie użytkownika i wyświetlić
login
iavatar
Proponuję stworzyć funkcję
renderUserDetails
.
⭐ Wykorzystać dowolny system szablonów, np.Mustache.js
. -
Stworzyć przycisk do wylogowania i podłączyć pod niego funkcję:
hello.logout('github')
-
Odświeżyć stronę po wylogowaniu użytkownika za pomocą:
location.reload(true);
-
Pobierać użytkownika od razu na starcie aplikacji
Zabezpieczyć się przed brakiem danych za pomocą:
hello('github').getAuthResponse();
-
Stworzyć plik
config.js
i przenieść do niego konfigurację zw. z GitHubem -
⭐ Zadania dodatkowe:
- Pokazywanie przycisku "Zaloguj" tylko dla niezalogowanego użytkownika
- Pokazywanie przycisku "Wyloguj" tylko dla zalogowanego użytkownika
-
Stworzyć listę tematów z nieprawdziwymi danymi, np.
<section class="section"> <h1 class="title">Zgłoszone tematy</h1> <h2 class="subtitle">Zagłosuj na temat, aby został wkrótce zrealizowany</h2> <div class="columns is-multiline"> <div class="column is-3"> <div class="card"> <header class="card-header"> <p class="card-header-title"> "Temat nr. 1" </p> </header> <div class="card-content"> <div class="content"> Opis tematu... </div> </div> <footer class="card-footer"> <a href="#" class="card-footer-item">Zagłosuj</a> <a href="#" class="card-footer-item">Chcę być trenerem</a> </footer> </div> </div> ... </div> </section>
-
Stworzyć formularz do dodawania tematu, np.
<section class="section"> <div class="columns is-centered"> <div class="column is-half"> <article class="message"> <div class="message-header"> <p>Zgłoś propozycję warsztatów</p> </div> <div class="message-body"> <form action="" class="js-form-add-topic"> <div class="field"> <label class="label"> <sup class="has-text-danger">*</sup> Temat </label> <div class="control"> <input class="input" type="text" name="topic" required/> </div> </div> <div class="field"> <label class="label"> <sup class="has-text-danger">*</sup> Opis </label> <div class="control"> <textarea class="textarea" name="description" required></textarea> </div> </div> <div class="field is-grouped"> <div class="control"> <button class="button is-link">Prześlij</button> </div> <div class="control"> <button class="button is-text" type="reset">Cancel</button> </div> </div> </form> </div> </article> </div> </div> </section>
-
Zapisywać w
in-memory storage
dane z wysłanego formularzaDo przechowywania tematów proponuję wykorzystać kolekcję typu
Set
.Do pobierania danych z formularza polecam wykorzystać:
const $form = document.querySelector('.js-form-add-topic'); const data = new FormData($form); const map = new Map(data.entries()); console.log(map);
-
Wyczyścić pola formularza.
Proponuję wykorzystać funkcję
$form.reset()
. -
Odświeżyć listę tematów.
Proponuję stworzyć funkcję
renderTopics
.
⭐ Można wykorzystać dowolny system szablonów, np.Mustache.js
. -
⭐ Zadania dodatkowe:
- Pokazywać formularz z dodawaniem tylko dla zalogowanego użytkownika
- ...
- ...
- ...
- Bulma
- OAuth 2.0
- GitHub
- Lista moich aplikacji: https://github.com/settings/developers
- Stworzenie nowej aplikacji: https://github.com/settings/applications/new
- Listę aplikacji, które posiadają Twoje credentiale: https://github.com/settings/applications
- Limity: https://api.github.com/rate_limit
- Pomoc w zakładaniu aplikacji:
- Pomocne:
- Zawijanie tekstu: https://css-tricks.com/almanac/properties/t/text-overflow/
- https://github.com/piecioshka/super-event-emitter
- https://github.com/parcel-bundler/parcel
- https://github.com/tschaub/gh-pages
- https://github.com/wycats/handlebars.js/
- https://github.com/kelektiv/node-uuid
- https://json-schema-faker.js.org/ - narzędzie, które buduje losowe dane w JSON
- https://json-schema.org - specyfikacja budowania
- https://chancejs.com/ - biblioteka zwraca losowe dane w odpowiednim formacie
- https://github.com/marak/Faker.js/ - budowanie wielu losowych danych
The MIT License @ 2018