piecioshka/warsawjs-workshop-18-topics-manager

⛩️ WarsawJS Workshop #18 — JavaScript (Intermediate Level)

warsawjs-workshop-18-topics-manager

⛩️ WarsawJS Workshop #18 — JavaScript (Intermediate Level)

✨ Development ✨

Copy + Paste

# Opcjonalnie
npm run mock:build
npm run mock:start-server

npm install
npm run dev

🚀 Deployment 🚀

Copy + Paste

git checkout master
npm version patch
git push && git push --tags

💡 O czym opowiedzieć? 💡

• "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
• ...

Features

• ✅ 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

Krok po kroku 👣

Etap 0: Setup

0. Stworzenie

   • katalogu warsawjs-workshop-18-topics-manager
   • a w nim pliku index.html

1. Stworzyć plik package.json

   npm init -f
   

2. Instalacja parcel-a:

   npm i parcel-bundler
   

3. Uruchomienie polecenie, które stworzy możliwość podgląda w przeglądarce:

   npx parcel index.html
   

   albo

   ./node_modules/.bin/parcel index.html
   

4. ⭐ Zadania dodatkowe:

   • Stworzenie zadania npm run dev w pliku package.json, które będzie uruchamiać

     parcel index.html
     

   • Stworzyć plik .gitignore z katalogiem .cache/

Etap 1: Scaffold 📁

0. Stworzyć plik scripts/main.js

1. Osadzić skrypt w pliku index.html

2. Zainstalować paczkę bulma (oraz jej największą zależność node-sass):

   npm i bulma node-sass
   

3. Dodać paczkę bulma w pliku main.js za pomocą fn require

4. Stworzyć nagłówek strony

5. Stworzyć menu strony

6. Dodać link (do menu) w celu logowania via GitHub

7. Podpiąć się pod jego kliknięcie i wyświetlić console.log

Etap 2: Założenie aplikacji na GitHub

0. Autoryzacja za pomocą OAuth 2.0

   • poziom podstawowy: wykorzystać paczkę hellojs
   • poziom zaawansowany: napisać mechanizm komunikujący się z GitHubem

1. Wejdź na stronę: https://github.com/settings/applications/new

2. 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"

3. Wejdź na stronę https://auth-server.herokuapp.com/

4. Zaloguj się (np. via GitHub)

5. 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 adres https://github.com/login/oauth/access_token

   Kliknij "Save"

6. Zainstalować paczkę hellojs

   npm i hellojs
   

7. Dodać paczkę hellojs w pliku main.js za pomocą fn require

8. Skonfigurować hellojs za pomocą client_id

   hello.init({
       github: CLIENT_ID
   });

9. Podłączyć logowanie pod handler kliknięcia w przycisk.

   hello('github').login();

   💡 Pamiętać! Wyłącz domyślne zachowania linki za pomocą evt.preventDefault().

10. Stworzyć funkcję do pobierania profilu użytkownika.

    hello('github').api('/me');

11. Nasłuchać na pobranie użytkownika i wyświetlić login i avatar

    Proponuję stworzyć funkcję renderUserDetails.
    ⭐ Wykorzystać dowolny system szablonów, np. Mustache.js.

12. Stworzyć przycisk do wylogowania i podłączyć pod niego funkcję:

    hello.logout('github')

13. Odświeżyć stronę po wylogowaniu użytkownika za pomocą:

    location.reload(true);

14. Pobierać użytkownika od razu na starcie aplikacji

    Zabezpieczyć się przed brakiem danych za pomocą:

    hello('github').getAuthResponse();

15. Stworzyć plik config.js i przenieść do niego konfigurację zw. z GitHubem

16. ⭐ Zadania dodatkowe:

    • Pokazywanie przycisku "Zaloguj" tylko dla niezalogowanego użytkownika
    • Pokazywanie przycisku "Wyloguj" tylko dla zalogowanego użytkownika

Etap 3: Dodawanie tematu

0. 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>

1. 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>

2. Zapisywać w in-memory storage dane z wysłanego formularza

   Do 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);

3. Wyczyścić pola formularza.

   Proponuję wykorzystać funkcję $form.reset().

4. Odświeżyć listę tematów.

   Proponuję stworzyć funkcję renderTopics.
   ⭐ Można wykorzystać dowolny system szablonów, np. Mustache.js.

5. ⭐ Zadania dodatkowe:

   • Pokazywać formularz z dodawaniem tylko dla zalogowanego użytkownika

Etap 4: Głosowanie na temat

0. ...

Etap 5: Zapisanie danych do LocalStorage

0. ...

Etap 6: Zapisanie kolejnego trenera

0. ...

Polecane źródła

• Bulma
  • https://bulma.io/documentation/overview/start/
• OAuth 2.0
  • https://tools.ietf.org/html/rfc6749#section-4.1
  • https://www.youtube.com/watch?v=RyOiUpNSHxo
• 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:
    • https://developer.github.com/apps/building-oauth-apps/
    • https://developer.github.com/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps/
• Pomocne:
  • Zawijanie tekstu: https://css-tricks.com/almanac/properties/t/text-overflow/

📦 Biblioteki 📦

• 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

Mockowanie danych

• 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

License

The MIT License @ 2018