Skip to content

Samouczek: Wstęp do Conpeek SDK

Zanim zaczniemy

W tym samouczku skupimy się na budowie pluginu na Twojej stronie internetowej. Postępuj krok po kroku by zbudować poprawnie działającą aplikację.

Uwaga

Ten samouczek został opracowany dla osób, które chcą się nauczyć konfiguracji pluginu poprzez praktykę. Jeśli wolisz zawszę możesz skorzystać z dokumentacji

Samouczek podzieliliśmy na kilka części

Nie musisz wcale przechodzić przez wszystkie części samouczka naraz, żeby wynieść z niego cokolwiek. Spróbuj jednak dojść najdalej jak możesz - nawet jeśli będą to tylko dwa rozdziały.

Co będziemy budować

Na koniec nasz kod będzie wyglądał tak: Efekt końcowy. Być może w tej chwili kod wygląda bez sensu albo nie rozumiesz jego składni, ale bez obaw! Celem tego samouczka jest wła śnie pomóc ci zrozumieć konfigurację.

Wymagania

Zakładamy, że HTML i JavaScript nie są ci obce, ale nawet jeśli to twoja pierwsza styczność z tymi językami, to samouczek nie powinien przysporzyć ci większego problemu. Zakładamy również, że znasz takie pojęcia z programowania obiektowego jak “funkcja”, “obiekt” czy “tablica”, a także przynajmniej w niewielkim stopniu rozumiesz, czym jest “klasa”.

Jeśli potrzebujesz odświeżyć sobie wiedzę o JavaScripcie, zalecamy lekturę tego poradnika. Zwróć uwagę, że będziemy tu korzystać z niektórych funkcjonalności standardu ES6 - jednej z ostatnich wersji języka JavaScript - takich jak funkcje strzałkowe (ang. arrow functions), klasy oraz wyrażenia let i const. Możesz skorzystać ze środowiska Babel REPL, aby sprawdzić, co powstanie w wyniku transpilowania kodu napisanego w standardzie ES6.

Szablon

Dla potrzeb korzystania z samouczka udostępniamy szablon strony wraz z przyciskami oraz nazwanymi funkcjami. Przyciski ustawianę będą jeden pod drugim by ułatwić poruszanie się po przykładzie.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Samouczek: Conpeek SDK</title>
</head>
    <body>
      <video autoplay id="conpeek_plugin_video_box"></video><br>
      <button type="button" id="CHAT" disabled onclick="onClickChatButton()">Chat</button><br>
      <script type="text/javascript" src="conpeek.js"></script>
    </body>
</html>