Zakres zmiennych, hoisting – co warto wiedzieć?

Elevator

Koniec wakacji, czas brać się do roboty 🙂 W tym wpisie postaram się krótko i treściwie omówić zakres zmiennych i hoisting w JavaScript.

Zakres zmiennych

Zakres zmiennych w JavaScript, to temat nieco skomplikowany. Programista, który dopiero zaczyna swoją przygodę z JSem, może być w niemałym szoku próbując okiełznać tajniki sztuki.

for (var a = 0; a < 5; a++) {}
console.log(a); // 5

Na początek stwórzmy standardową pętlę for, w której deklarujemy zmienną a = 0. Poniżej odwołujemy się do tej zmiennej i jako rezultat dostajemy 5.

Wniosek: Deklaracja zmiennej poprzez słowo kluczowe var powoduje zalokowanie miejsca w pamięci i zachowanie stanu pomimo zakończenia pętli. Zmienna jest widoczna w kontekście funkcji.

Na ratunek let i const

W standardzie ECMAScript 2015 (ES6) wprowadzone zostały nowe słowa kluczowe let i const. Służą do tego samego co var, ale mają ograniczony zasięg.

let is the new var.

for (let a = 0; a < 5; a++) {}
console.log(a); // Uncaught ReferenceError: a is not defined

Jak widzimy w powyższym przykładzie, zamiana var na let daje wymierny skutek. Nie mamy dostępu do zmiennej poza blokiem for. O to nam chodziło… wykorzystujemy zmienną z kontekstu blokowego.

Jak się ma do tego const?

Deklaruje nazwaną stałą tylko do odczytu – MDN

Nie możemy ponownie przypisać wartości do consta:

const a = 7;
a = 5; // Uncaught TypeError: Assignment to constant variable.

Nie możemy też ponownie zadeklarować stałej:

const a = 7;
const a = 5; // Uncaught SyntaxError: Identifier 'a' has already been declared

JS ma jednak swoje wymagania, a const może sporadycznie piszących w tym języku wprowadzić w błąd.

const a = [];
console.log(a); // []
a.push(2);
console.log(a); // [2]
a.push({ a: 3 });
console.log(a); // [2, {a: 3}]

W JavaScript const NIE oznacza deklaracji stałej wartości, lecz deklarację stałej referencji. W przypadku typów prymitywnych const zachowuje się tak jak oczekujemy. Przy typach złożonych mamy możliwość podmiany zawartości.

Idealnie obrazuje to przykład powyżej. Tworzymy stałą a = [], następnie poprzez metodę push dodajemy pierwszy element tablicy, itd.

Hoisting

Temat hoistingu jest często poruszany, zarówno na branżowych spotkaniach jak i rozmowach kwalifikacyjnych. To jeden z feature’ów JSa, o którym wszyscy słyszeli lub wkrótce usłyszą.

Hoisting, spolszczona nazwa windowanie, to mechanizm pozwalający na przeniesienie deklaracji zmiennych oraz metod na początek funkcji.

a = 5;
var a;
console.log(a); // 5

i

simpleFunction(); // hoisting

function simpleFunction() {
  console.log('hoisting');
}

W przykładzie pierwszym do zmiennej a przypisujemy 5, następnie ją deklarujemy. Log w konsoli daje rezultat 5. Drugi przykład, to wywołanie metody przed deklaracją. Rezultat taki sam jak wcześniej. Hoisting zadziałał.

Przy deklaracji zmiennych za pomocą słowa kluczowego let, hoisting zachowuje się bardziej przewidywalnie.

a = 5;
let a; // ReferenceError: a is not defined

Strict mode

Strict mode (tryb ścisły) to jeden z feature’ów ES5. Wprowadza kilka zmian do domyślnej semantyki JavaScript:

  1. Pozwala wyeliminować ciche błędy (ang. silent errors).
  2. Pozwala wyeliminować błędy, które uniemożliwiają optymalizację JSa przez przeglądarki.
  3. Uniemożliwia stosowanie składni mogącej wystąpić w kolejnych odsłonach ECMAScript.

Temat został pobieżnie wywołany, przy okazji hoistingu, nie bez przyczyny. Strict mode nie zezwala na skorzystanie ze zmiennej, dopóki nie zostanie zadeklarowana.

Warto przeczytać:

Chatbot, Wit.ai – tworzenie chatbota – Speech API

Artificial Intelligence

Rozpoznawanie głosu to temat trudny, nawet dla największych wyjadaczy. Z pomocą przychodzi jednak Wit.ai, wraz ze swoim Speech API. Dzięki dedykowanej aplikacji oraz wykorzystaniu WebRTCWebSockets możemy w prosty sposób przekonwertować mowę na tekst oraz skomunikować się z naszym chatbotem.

Trochę teorii

Wit.ai Speech API powstało w lutym 2014 roku jako rozwinięcie projektu Wit.ai. Zasada działania jest prosta, przesyłamy na backend (w tym wypadku na zewnętrzny serwer Wit.ai) plik audio. Dźwięk jest przetwarzany i konwertowany. Dostajemy w zwrotce JSON z intencją oraz wartościami, które zostaną wychwycone.

speech2json

Wit.ai Speech API łączy w sobie różne techniki przetwarzania języka naturalnego oraz silniki rozpoznawania mowy. Potrafi odseparować szumy z otoczenia, dostosować poziom głośności i wydobyć właściwe dźwięki.

Microphone

W ramach tego wpisu zapoznamy się z nakładką wit-ai/microphone. Biblioteka jest dewelopowana przez zespół zajmujący się  Wit.ai. Została napisana w CoffeeScript, wykorzystuje WebRTC i WebSockets, dzięki czemu nie musimy zapisywać plików audio lokalnie. Cały kod jest jawny, a jego rdzeń możemy znaleźć tutaj.

Implementacja Speech API

Po wpięciu biblioteki obsługującej mikrofon i komunikującej się z Wit.ai API, pozostało obsłużyć mikrofon na stronie internetowej.

Zaczynamy od stworzenia instancji Microphone:

const microphone = new Wit.Microphone(document.getElementById('microphone'));

Jak widać, odwołujemy się do elementu posiadającego id microphone. W ten sam sposób dodajemy info oraz error:

const info = message => {
  document.getElementById('info').innerHTML = message;
};
const error = message => {
  document.getElementById('error').innerHTML = message;
};

Teraz, korzystając z dokumentacji, stwórzmy kilka metod obsługujących naszą aplikację. Poinformujmy użytkownika, że można rozpocząć nagrywanie:

microphone.onready = () => {
  info('Mikrofon gotowy do nagrywania');
}

Po starcie, zmiana statusu z informacją:

microphone.onaudiostart = () => {
  info('Nagrywanie rozpoczęte');
};

Oraz po zakończeniu nagrywania:

microphone.onaudioend = () => {
  info('Nagrywanie zakończone, trwa konwertowanie');
};

Pamiętajmy, że w razie niepowodzenia, warto o tym poinformować użytkownika. Wykorzystujemy więc metodę onerror:

microphone.onerror = errorMessage => {
  error('Błąd: ' + errorMessage);
};

W momencie nawiązywania oraz zamykania połączenia mamy dwa dodatkowe callbacki: onconnectingondisconnected. Wykorzystujemy je do stworzenia dodatkowych statusów informujących:

microphone.onconnecting = () => {
  info('Trwa weryfikowanie mikrofonu');
};
microphone.ondisconnected = () => {
  info('Mikrofon nie jest podłączony');
};

Została nam jeszcze obsługa onresult. Analogicznie jak w wersji node’owej, tutaj też po zidentyfikowaniu osoby, spróbujemy wyszukać o niej informacji na wikipedii:

microphone.onresult = (intent, entities) => {
  if (entities.fullName === undefined) {
    document.getElementById('result').innerHTML = 'Nie zrozumiałem, spróbuj jeszcze raz!';
  } else {
    let fullName = entities.fullName.value;
    document.getElementById('result').innerHTML = fullName + '? Szukam na wikipedii...';
    window.open('https://pl.wikipedia.org/wiki/' + fullName.replace(' ', '_'));
  }
};

W metodzie connect przekazujemy token, który możemy wygenerować w ustawieniach aplikacji.

Speech API token

Podsumowanie

Po implementacji i deployu na Heroku, możemy sprawdzić jak się zachowuje aplikacja. Przykładowy screen z testu zamieszczam poniżej. Cały kod dostępny jest na moim githubie, zachęcam też do przetestowania aplikacji samodzielnie.

Spy chatbot - Speech API

Przydatne linki

Chatbot, Wit.ai – tworzenie chatbota – Wit Node.js SDK

Artificial Intelligence

Dzisiaj już trzeci wpis z serii Wit.ai. Tym razem zajmiemy się tworzeniem chatbota w node.js. Przy tej okazji zapoznamy się z Wit Node.js SDK i zbudujemy aplikację, która wyświetli artykuł o szukanej osobie w wikipedii.

Wit Node.js SDK – przygotowanie środowiska

Instalacja

Instalacja Wit Node.js SDK przebiega w standardowy sposób.  Do instalacji używamy npm:

npm install --save node-wit

Jeżeli wszystko przebiegnie pomyślnie, zostanie stworzony folder node_modules, a w nim znajdować się będzie zainstalowana paczka.

Require

Możemy teraz, w głównym katalogu, stworzyć plik index.js. Tam z kolei dodajemy potrzebne zależności:

const Wit = require('node-wit').Wit;
const interactive = require('node-wit').interactive;

W tym tutorialu skorzystamy z Wit oraz interactive, więc dodajemy tylko te zależności.

Połączenie z Wit.ai API

Access token

Na początku musimy pobrać access token. Będziemy przekazywać go jako parametr, przy uruchamianiu aplikacji. Unikniemy w ten sposób zaszycia naszego tokenu w kodzie. Do wydobycia tokenu użyjemy node’owego proccess.

const accessToken = (() => {
  if (process.argv.length !== 3) {
    process.exit(1);
  }

  return process.argv[2];
})();

Tworzenie instancji Wit

Teraz możemy stworzyć nową instancję Wit. W tym celu dodajemy do naszego kodu następujące dwie linijki:

const client = new Wit({ accessToken, actions });
interactive(client);

Jak widzimy powyżej, tworząc instancję Wit, przekazujemy wcześniej utworzony accessToken. Dopisujemy od razu actions, które utworzymy za chwilę.

Akcje

Nasz chatbot do poprawnego działania potrzebuje jeszcze akcji. Do zapewnienia podstawowej komunikacji z Wit.ai API potrzebujemy w naszym przypadku dwóch akcji:

  • send – wbudowana akcja Wit.ai, przyjmuje dwa parametry: request i response
  • findPerson – zdefiniowana przez nas akcja

Zadeklarujmy więc akcje w naszym programie:

const actions = {
  send(request, response) {
    console.log('request', request);
    console.log('response', response);
  },
  findPerson({ context, entities }) {
    console.log('context', context);
    console.log('entities', entities);
  }
};

Testując naszą aplikację możemy zobaczyć od podszewki w jaki sposób działa Wit.ai.

Przykładowe wykorzystanie

Aby na tym poziomie nasz chatbot miał już jakąś funkcjonalność, sparsujemy wyodrębnione dane i sprawdzimy czy na temat danej osoby znajduje się artykuł w wikipedii.

Do tego celu wykorzystamy opn. Instalujemy paczkę przez npm.

npm install --save opn

Dodajemy opn do projektu:

const opn = require('opn');

Na koniec pozostało jeszcze zmodyfikowanie metody findPerson:

findPerson({ context, entities }) {
  const fullName = entities.fullName[0].value;
  const url = 'https://pl.wikipedia.org/wiki/' + fullName.replace(' ', '_');

  if (fullName) {
    context.fullName = fullName;
    opn(url, { wait: false });
  } else {
    console.error('Nie zrozumiałem.');
  }

  return context;
}

Test

Pozostało nam przetestować działanie aplikacji node.js. W tym celu wykorzystamy terminal:

Wit Node.js SDK

W terminalu otrzymaliśmy informację (zadeklarowaną w poprzednim wpisie o Wit.ai). Dodatkowo w prosty sposób sprawdzimy czy na temat danej osoby znajduje się artykuł na wikipedii.

Adam Małysz wiki

Dawid Ryłko wiki

Podsumowanie

W tym wpisie zapoznaliśmy się z Wit Node.js SDK i zbudowaliśmy prostą aplikację w Node.js. Kolejny wpis tej serii poświęcimy na rozbudowanie naszego chatbota.

Dodatkowo cały kod, z tego tutorialu do tworzenia chatbota, można pobrać z mojego repozytorium na githubie:
https://github.com/dawidrylko/spy/tree/1.0