Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
JavaScript
w inteligentnych budynkach
Mateusz Ziarko
Head of Front-End Development & Design
Sensinum
Inteligentne budynki
Co to jest?
• automatyka
• czujniki
• Internet of Things
Inteligentne budynki
Czym są zarządzane?
• fizyczne panele
• aplikacje natywne (iOS, Android)
• ***
Inteligentne budynki
Czym są zarządzane?
• fizyczne panele
• aplikacje natywne (iOS, Android)
• ***
Gdzie tutaj
JavaScript?
Webowe aplikacje SPA
W czym to zbudować?
• AngularJS, knockout.js, React or whatever
• HTML5 API
• WebSocket
• webRTC
W czym to zbudować?
• AngularJS, knockout.js, React or whatever
• HTML5 API
• WebSocket
• webRTC
My zrobiliśmy
to w tym
Co nam to dało?
• skalowalność rozwiązania
• niezależność od implementacji serwerowej
• efekt WOW
• dostęp np. do interfej...
Co nam to dało?
• skalowalność rozwiązania
• niezależność od implementacji serwerowej
• efekt WOW
• dostęp np. do interfej...
Czym jest webRTC?
• projekt OpenSource
• wzbogaca współczesne przeglądarki o proste API
do komunikacji real-time
• getUser...
Czym jest webRTC?
• projekt OpenSource
• wzbogaca współczesne przeglądarki o proste API
do komunikacji real-time
• getUser...
Liczący się gracze wspierają
webRTC
• Mozilla Firefox
• Google Chrome
• Opera
Również w wersjach mobilnych

caniuse.com/#s...
getUserMedia
+
MediaStream
+
Recorder.js
github.com/mattdiamond/Recorderjs
Zarządzanie budynkiem

za pomocą komend głosowych
Jak to zrealizowaliśmy?
• dostęp do mikrofonu za pomocą getUserMedia
• rozpoczęcie nagrywania z wykorzystaniem
Recorder.js...
Jak to zrealizowaliśmy?
• analiza przez serwer i uruchomienie żądanych
procesów
• głosowa odpowiedź przez WebSocket i reak...
Co napsuło nam krwi?
• częstotliwość nagrywania
• stand-by urządzeń mobilnych i usypianie
procesów przeglądarki
• jednocze...
W jaki sposób testowaliśmy?
• aplikacja serwerowa miała pełne testy
jednostkowe i behawioralne
• SPA posiadało testy z wyj...
Co przez to osiągnęliśmy?
• responsywna aplikacja webowa -

desktop / tablet / smartphone
• obsługa przez komendy głosowe
...
Digital Home Management System
To naprawdę zaskoczyło
• niedalekie wdrożenia w pokazowym domu
pasywnym i biurowcu klasy A+ w okolicach
Krakowa
Dziękuję za uwagę
Pytania?
Mateusz Ziarko
Head of Front-End Development & Design
@ Sensinum
@cyp3r
mateusz.ziarko@sensinum.pl
studio.sensinu...
JS in the intelligent buildings @ meet.js Krk
JS in the intelligent buildings @ meet.js Krk
Prochain SlideShare
Chargement dans…5
×

JS in the intelligent buildings @ meet.js Krk

895 vues

Publié le

Presentation used at the speech about "JS in the intelligent buildings" at meet.js Krk (10/06/2015).

Publié dans : Internet
  • Login to see the comments

JS in the intelligent buildings @ meet.js Krk

  1. 1. JavaScript w inteligentnych budynkach Mateusz Ziarko Head of Front-End Development & Design Sensinum
  2. 2. Inteligentne budynki Co to jest? • automatyka • czujniki • Internet of Things
  3. 3. Inteligentne budynki Czym są zarządzane? • fizyczne panele • aplikacje natywne (iOS, Android) • ***
  4. 4. Inteligentne budynki Czym są zarządzane? • fizyczne panele • aplikacje natywne (iOS, Android) • *** Gdzie tutaj JavaScript?
  5. 5. Webowe aplikacje SPA
  6. 6. W czym to zbudować? • AngularJS, knockout.js, React or whatever • HTML5 API • WebSocket • webRTC
  7. 7. W czym to zbudować? • AngularJS, knockout.js, React or whatever • HTML5 API • WebSocket • webRTC My zrobiliśmy to w tym
  8. 8. Co nam to dało? • skalowalność rozwiązania • niezależność od implementacji serwerowej • efekt WOW • dostęp np. do interfejsu głosowego
  9. 9. Co nam to dało? • skalowalność rozwiązania • niezależność od implementacji serwerowej • efekt WOW • dostęp np. do interfejsu głosowego webRTC
  10. 10. Czym jest webRTC? • projekt OpenSource • wzbogaca współczesne przeglądarki o proste API do komunikacji real-time • getUserMedia i MediaStream Źródło: webrtc.org
  11. 11. Czym jest webRTC? • projekt OpenSource • wzbogaca współczesne przeglądarki o proste API do komunikacji real-time • getUserMedia i MediaStream Źródło: webrtc.org
  12. 12. Liczący się gracze wspierają webRTC • Mozilla Firefox • Google Chrome • Opera Również w wersjach mobilnych
 caniuse.com/#search=webrtc
 iswebrtcreadyyet.com Źródło: iswebrtcreadyyet.com
  13. 13. getUserMedia + MediaStream + Recorder.js github.com/mattdiamond/Recorderjs
  14. 14. Zarządzanie budynkiem
 za pomocą komend głosowych
  15. 15. Jak to zrealizowaliśmy? • dostęp do mikrofonu za pomocą getUserMedia • rozpoczęcie nagrywania z wykorzystaniem Recorder.js • wygenerowanie Blob’a WAV z zapisem dźwięku
 i konwersja na base64
  16. 16. Jak to zrealizowaliśmy? • analiza przez serwer i uruchomienie żądanych procesów • głosowa odpowiedź przez WebSocket i reakcja aplikacji
  17. 17. Co napsuło nam krwi? • częstotliwość nagrywania • stand-by urządzeń mobilnych i usypianie procesów przeglądarki • jednoczesne nagrywanie dźwięku i działanie komunikacji po WebSocket’ach • kompresja nagranego dźwięku
  18. 18. W jaki sposób testowaliśmy? • aplikacja serwerowa miała pełne testy jednostkowe i behawioralne • SPA posiadało testy z wyjątkiem części odpowiedzialnej za dźwięk, która testowana była „ręcznie”
  19. 19. Co przez to osiągnęliśmy? • responsywna aplikacja webowa -
 desktop / tablet / smartphone • obsługa przez komendy głosowe • uruchamianie tzw. Scen • Ambient Assisted Living z przeznaczeniem np. 
 dla osób starzejących się
  20. 20. Digital Home Management System
  21. 21. To naprawdę zaskoczyło • niedalekie wdrożenia w pokazowym domu pasywnym i biurowcu klasy A+ w okolicach Krakowa
  22. 22. Dziękuję za uwagę
  23. 23. Pytania? Mateusz Ziarko Head of Front-End Development & Design @ Sensinum @cyp3r mateusz.ziarko@sensinum.pl studio.sensinum.plwww

×