JavaScript ile Donanım Hackleme

Nesnelerin İnterneti (IoT), İnternet'in tarayıcının ötesine ulaşmasını sağladı. Elektronik olarak ağa bağlı cihazlardan oluşan bu "şeyler", yakaladıkları verileri ekosistemlerine geri besleyen sensörler aracılığıyla fiziksel dünya ile etkileşime girebilir.

Şu anda, bu cihazlar çoğunlukla belirli bir amaç düşünülerek tasarlanmış ürünlerdir; tipik bir örnek, aktiviteyi izleyen bir fitness bandıdır. Toplanan bilgileri bir uygulamaya rapor eder, daha sonra verileri analiz edebilir ve kullanıcıyı daha da ileriye taşımak için öneriler ve motivasyon sunar.

SmashingMag'de Daha Fazla Okuma :

• Doğru Prototipleme Aracını Seçme
• IoT Deneyimlerinin Prototipi Nasıl Yapılır: Donanımı İnşa Etme
• Prototip IoT Deneyimleri: Yazılımı Yapılandırma
• TAP ve Adobe Fireworks ile iOS Prototipleme

IoT cihazları oluştururken, görev tipik olarak iki rol arasında bölünür: Bir donanım mühendisi fiziksel cihazı oluşturur ve bir geliştirici ekosistemi oluşturur. Ancak, bu her zaman gerekli değildir. JavaScript söz konusu olduğunda, izomorfik yapısı , donanım dahil olmak üzere birden fazla platformda bir dilin kullanılmasına izin verir.

Bu George, konuşan bitki, Nesnelerin İnterneti'ne (oldukça huysuz) bir ek. Sensörleri, toprağın nem seviyesi, ortam sıcaklığı ve ışık yoğunluğu dahil olmak üzere çevresi hakkında veri toplar. 8 × 8 LED yüzüyle, hoşnutsuzluğunu görselleştirebilir ve HTML5'in Web Konuşma API'sini kullanarak sıradan sorularınızı alaycı bir şekilde yanıtlayabilir. George, yeni ve ilgi çekici deneyimler sunmak için donanımla kaynaşmış web teknolojilerinin nasıl kullanılabileceğinin harika bir örneğidir.

Bu makale, JavaScript kullanarak kendi IoT cihazlarınızı oluşturmaya nasıl başlayacağınızla ilgili temel bilgileri kapsar.

Başlarken

Donanım prototipleri ve İnternet bağlantılı cihazlar oluşturmak, geleneksel olarak yalnızca elektrik mühendislerinin deneyebileceği bir şeydi. Bu, Arduino UNO, Particle (eski adıyla Spark Core) ve Raspberry Pi gibi geliştirme kartlarının görünümüyle değişti.

Geliştirme kartları, bilgisayardaki bir anakartı taklit eder. USB ve güç gibi giriş ve çıkış soketlerinin yanı sıra harici bileşenler eklemenize izin veren pin kartlarına sahiptirler. Bir mikrodenetleyici yongası, uygulamanın kodunu çalıştıran ve girişler ve çıkışlar ile iletişim kuran işlemci görevi görür. Bu çip nispeten yavaştır ve sensör verilerini okumak gibi basit görevleri gerçekleştirmek için özel olarak tasarlanmıştır. Bununla birlikte, ışıkların, motorların ve daha birçok bileşenin güç kaynağını değiştirmeyi mümkün kılan anahtarlama özelliğine de sahiptir.

Maker hareketi son birkaç yılda çekiş kazanıyor ve IoT cihazları inşa etmek büyük bir iş haline geldi. Bu, geliştirme kartları pazarını genişletti ve artık her biri kendi özelliklerine sahip geniş bir ürün yelpazesi sunuluyor. Rekabet, birçok kişinin kablosuz iletişim (Wi-Fi ve Bluetooth yongaları ile), boyut ve pil ömrü gibi benzersiz satış noktalarına odaklanmasına neden oldu. Kendi cihazlarınızı tasarlarken, hangi fiziksel özelliklere ihtiyacınız olduğunu düşünmeniz gerekecektir . Aynı şekilde, tahtada çalıştırabileceğiniz programlama dili gibi yazılım da kararı etkileyecektir. İyice araştırın ve ihtiyaçlarınıza en uygun tahtayı seçin.

Burada sunulan örneklerde Arduino UNO kullanıyoruz. Bu özel geliştirme kartı, kullanımı çok kolay olduğu için muhtemelen piyasadaki en popüler olanıdır. Yeni başlıyorsanız, Arduino tarafından sunulanlara benzer bir başlangıç ​​kiti satın almanızı öneririz. Seçtiğiniz geliştirme panosu için uyumlu bileşenler ve genellikle başlamanıza yardımcı olacak birçok belge ile birlikte gelir.

Elektrik ve Devrelerin Temelleri

Adından da anlaşılacağı gibi, bir elektronik devre daireseldir. Elektronlar, devre etrafındaki güç kaynağının (örneğin bir pil) artı ucundan aynı güç kaynağının eksi ucuna akar.

Bir elektrik devresinin içinde neler olup bittiğinin fiziğini anlamanın en kolay yolu, onu bir su deposu sistemiyle karşılaştırmaktır. Bir borudaki su, tıpkı bir teldeki elektronlar gibi akar. Bu elektronlar, devrenin bileşenlerine güç veren elektrik akımını oluşturan şeydir.

Tankta depolanan su miktarı musluktaki basıncı etkilediği gibi, güç kaynağında ne kadar fazla elektron varsa, o kadar fazla şarj olur. Bu voltajdır . Voltaj ne kadar yüksek olursa, negatif ve pozitif kutuplar arasında o kadar fazla elektrik basıncı oluşur ve devre etrafındaki elektronların hızını kontrol eder.

Tıpkı bir borudan akan su hacmi gibi, bir devrenin akımı da telden akan elektronların sayısını ifade eder. Bu, bir devre kurarken önemlidir, çünkü her bileşenin görevini yerine getirmek için yeterince aldığından emin olmanız gerekir. Akım amper veya amper (A) cinsinden ölçülür ve bize kullanılan elektron miktarı hakkında bilgi verebilir. Örneğin bir motor 100 miliamper (mA) tüketiyorsa ve bir pil saatte 1000 miliamper (mAh) kapasiteye sahipse, motoru tek bir şarjla 10 saat çalıştırabiliriz.

Bir devredeki bileşenler, çalışmak için devrede olduğundan daha az akım gerektirdiğinde, çok fazla güç alabilir ve kırılabilirler. Bu durumda, bunun olmasını önlemek için direnişin tanıtılması gerekir. Su benzetmemizi kullanarak, bir borunun çapı, içinden akabilecek su miktarını sınırlayacaktır, tıpkı direncin elektron akışını sınırlandırması gibi.

Dirençler akımı azaltmak için kullanılan bileşenlerdir. Direncin dışındaki renkli bantlarla gösterilen, uyguladıkları direnç miktarına göre değişirler. Farklı renkler farklı sayıları temsil eder ve bu bantları bir araya getirmek, söz konusu direncin direncini ortaya çıkaracaktır. (Hesap makineleri mevcuttur!) Değer ne kadar yüksek olursa, devreye o kadar fazla direnç uygulanır ve bileşeninize o kadar az zarar verirsiniz. Ohm yasasını kullanarak - direnç, gerilime bölünen akıma eşittir (veya R = V / I ) - bir devrede ihtiyaç duyulan tam direnci hesaplayabilirsiniz.

Selam Dünya

Kapsanan temel bilgilerle, hepsinin nasıl bir araya geldiğini görselleştirmek için basit bir örneğe bakabiliriz. Donanım geliştirmenin “Merhaba Dünyasını” üstleneceğiz: LED'in yanıp sönmesi.

Belirtildiği gibi, birden fazla geliştirme kartından herhangi birini kullanabilirsiniz. Bu örnekte Arduino UNO kullanacağız. Ayrıca Mac OS X çalıştıran bir Mac kullanacağız, ancak tüm örnekler Windows'ta da çalışmalıdır.

Donanım

İhtiyacın olacak:

• 1 × Arduino UNO
• 1 × lehimsiz devre tahtası
• 1 × standart LED
• 1 × 220 Ohm direnç
• 2 × atlama kabloları

Bu, henüz bahsedilmeyen birkaç bileşen içerir:

• Atlama kabloları, tıpkı bir devrede herhangi bir tel kullanıldığı gibi elektron akışını yönlendirmek için kullanılır.
• LED, aslında küçük bir ampul olan ışık yayan diyotun kısaltmasıdır. Bir uzun bacağı ve bir kısa bacağı vardır. Daha uzun bacak, devrenin pozitif akışının nereye girmesi gerektiğini ve daha kısa bacak, negatif çıkışı belirtir. Bunları yanlış yoldan alırsanız, LED yanmayacaktır.
• Lehimsiz bir devre tahtası (delikli beyaz blok), lehimlemeye gerek kalmadan devrelerin oluşturulmasına izin veren, bir devreyi kolayca değiştirmeyi ve düzeltmeyi ve ayrıca bileşenleri yeniden kullanmayı mümkün kılan bir prototipleme aracıdır. Bunlar birçok farklı şekil ve boyutta gelir, ancak hepsi aynı rolü oynar.

Aşağıdaki resim akımın akışını göstermektedir. Bileşenler, aşağıdaki örnekte LED ve direncin yaptığı gibi, bölümleri birbirine bağlamak için kullanılabilir. Daha büyük devre tahtalarında, dış dikey çizgiler, tasarladığınız devreye ayırma sağlamak için pozitif ve negatif atlama kablolarını bağlamak için yaygın olarak kullanılır.

Bileşenlerinizi aşağıdaki şemada ayrıntılı olarak açıklandığı gibi yerleştirin - pin için eşleşen pin. Bu, sonraki bölümde devam ederken işleri kolaylaştıracaktır.

Devreyi başlatmak için Arduino üzerindeki pin 10'dan bir jumper kablosu bağlayın. Arduino'nun devre ile konuşmaya başladığı nokta budur. Arduino'nun sağ tarafındaki herhangi bir numaralı pini kullanabilirsiniz - sadece kodunuzun doğru olana atıfta bulunduğundan emin olun.

LED üzerinden ideal miktarda akım geçtiğinden emin olmak için direnç gereklidir. LED'den farklı olarak devreye hangi yönden takıldığı önemli değildir.

Pin 10'un akımın geçmesine izin verip vermediği (kodunuz tarafından kontrol edilir), LED'in açık mı yoksa kapalı mı olduğunu belirleyecektir.

Başka bir aktarma kablosu daha sonra LED'in negatif tarafına bağlanır ve devreyi tamamlamak için toprağa döner. Basit!

Tamamlandığında, devreniz aşağıdaki resimdeki gibi görünmelidir. Bunu USB üzerinden bilgisayarınıza takın. Bir sonraki görev, Arduino'yu JavaScript ile çalışacak şekilde ayarlamaktır.

Herhangi bir yazılım yazmadan önce, Arduino'nun JavaScript ile çalışabilmesi için doğru bellenime sahip olduğundan emin olmamız gerekir. Bellenim, esas olarak bilgisayar için bir API sunar, böylece kod USB bağlantı noktası aracılığıyla kartla etkileşime girebilir.

Arduino web sitesinden entegre geliştirme ortamını (IDE) indirin ve kurun. Ardından, Arduino'nuzun USB üzerinden takılı olduğundan emin olarak IDE'yi açın.

Herhangi bir şeyi çalıştırmadan önce, doğru USB bağlantı noktasına sahip olduğunuzu da kontrol etmeniz gerekir. “Araçlar” → “Bağlantı Noktası”na gidin. Adlar farklı olabilir, bu nedenle Mac OS X'te adında "tty" ve "usb" ve Windows'ta "COM" olan bir bağlantı noktası seçmek iyi bir kuraldır.

Tamamlandığında, şimdi bellenimi yükleyebilirsiniz. “Dosya” → “Örnekler” → “Firmata” → “Standart Firmata”yı seçin. İşiniz bittiğinde, “Dosya” → “Mac'te Yükle”yi (veya “Çizim” → “Windows'ta Yükle”) seçin.

Şimdi biraz JavaScript yazma zamanı!

Yazılım

LED'i JavaScript ile kontrol etmek için Johnny-Five adlı Node.js için oluşturulmuş bir kitaplık kullanmamız gerekecek. Temel olarak, donanım oluşturmayı web topluluğu için daha erişilebilir hale getirmek için Bocoup'taki ekip tarafından oluşturulmuş bir kitaplıktır. Node.js'nin ne olduğunu veya nasıl kullanılacağını bilmiyorsanız, Elliot Bonneville'in bu web sitesinde harika bir tanıtımı var.

Örneğimizin çekirdeği Arduino kullandığından, bu kitaplık makinemizin donanıma USB portu üzerinden bağlanmasını sağlar.

Başlamak için Node.js'nin kurulu olması gerekir. Değilse, Node.js web sitesinden indirebilirsiniz. Bu, uygulamanın tüm bağımlılıklarını yüklemek için kullanacağımız Düğüm Paket Yöneticisi'ni (npm) de yükleyecektir. Örnek, komut satırı aracı olarak Terminal kullanılarak bir Mac üzerinde çalıştırılmıştır; ancak Node.js çoklu platform olduğundan, bu herhangi bir makinede çalışabilir.

Bu makalede yer alan tüm kodlar GitHub'da mevcuttur.

Bu proje için gerekli olan tüm bağımlılıkları kurmak için aşağıdaki koddan alınabilecek bir package.json dosyası oluşturmanız gerekecek. Bu, örneğin çalışmasını sağlamak için gereken kitaplıkların bir alışveriş listesidir . install komutu başlatıldığında, npm dışarı çıkacak ve her şeyin çalışması için gereken tüm malzemeleri alacaktır. Bu dosya kök klasörünüzde olmalıdır.

 { "name": "Hardware-Hacking-with-JavaScript", "description": "Smashing Magazine - Hardware Hacking with JavaScript", "version": "0.0.1", "homepage": "https://www.james-miller.co.uk/", "keywords": ["arduino","tutorial","hardware"], "author": { "name":"James Miller & Mate Marschalko" }, "repository": { "type": "git", "url": "git://github.com/jimhunty/Hardware-Hacking-with-JavaScript.git" }, "bugs": "https://github.com/jimhunty/Hardware-Hacking-with-JavaScript/issues", "license": "MIT", "dependencies": { "johnny-five": "^0.9.13" } }

Komut satırı aracınızda, package.json dosyasıyla bu örnek için oluşturduğunuz klasörde olduğunuzdan emin olun; ardından npm install çalıştırın. Bu paketleri kurma izniniz yoksa, bunun yerine sudo npm install kullanın.

Şimdi, örneğimizi çalıştırmak için uygulama kodunu oluşturmanız gerekiyor. Bu dosyaya blink-led.js adını verdik. Yorumlar neler olduğunu detaylandırıyor.

 // Johnny-Five is our JavaScript framework for accessing Arduino. var jfive = require("johnny-five"); var board, led; board = new jfive.Board(); // Similar to jQuery, we wait for the board to be ready. board.on("ready", function() { // 10 represents the pin number that the LED is plugged into. led = new jfive.Led(10) // The LED blinks (ie turns on and off) every 1000 milliseconds. led.blink(1000); });

Önce kütüphaneler yüklenir, ardından değişkenler başlatılır. Oluşturucu kullanılarak yeni bir Board örneği oluşturulur ve on ready işlevi, kartın ısınmasını ve talimatları almaya hazır olmasını sağlar. LED'e bağlanan jumper kablosunu pin 10'a taktığınız için led değişkeninde tanımlanması gerekir. Göz blink yöntemi daha sonra ışığı 1 saniyelik aşamalarla açıp kapatmak için kullanılır.

Artık bu ışık şovunu başlatmak için ihtiyacınız olan her şeye sahipsiniz - müziği açın! Arduino'nuzun takılı olduğundan ve devrenin kurulduğundan emin olun. Komut satırında, dosya adını kodunuz olarak adlandırdığınız şeyle değiştirerek node blink-led.js dosyasını çalıştırın. Şimdi yanıp sönen bir ışığınız olmalı.

Işığın daha hızlı veya daha yavaş yanıp sönmesi için kodu değiştirmeyi deneyin. Bunu her yaptığınızda, kodunuzu Terminal'de yeniden başlatmanız gerekecektir. led.pulse() 'yi denemek isteyebilirsiniz; bu, geçiş olmadan geçiş yapmak yerine LED'i açıp kapatacaktır.

Ev İzleme

Zaten çok şey öğrendin! Artık bu bilgiyi Nest ve Hive gibi ticari ürünlere benzer şekilde basit bir ev izleme sistemi kurmak ve kullanmak için kullanabilirsiniz.

Bu sefer Node.js sunucusundan Arduino'ya bağlı bir sıcaklık sensörü kullanacaksınız. Sıcaklık sensör tarafından okunacak ve verileri basit bir web sayfasında görüntüleyen bir tarayıcıya beslenecektir.

Donanım

İhtiyacın olacak:

• 1 × Arduino UNO
• 1 × lehimsiz devre tahtası
• 1 × TMP36 sıcaklık sensörü
• 3 × atlama kabloları

Bu örnek için seçilen sıcaklık sensörü, çoğu başlangıç ​​setinde mevcuttur ve ayrı ayrı satın almak inanılmaz derecede ucuzdur.

Bir önceki LED yanıp sönme örneği ile bilgisayar üzerinde çalışan Node.js sunucusu ile Arduino arasındaki bağlantıyı kurdunuz. Bu bağlantı, Arduino'ya bağlı sensörlerden gelen verileri okumak için de kullanılabilir.

Yukarıda tamamlanmış devre görülmektedir. Bu pini pin için eşleştirmeye çalışın.

Sıcaklık sensörünü tutarken dikkatli olun çünkü bacakları karıştırmak kolaydır. Bileşenin düz tarafı ön taraftır ve sensörü bağlarken size bakmalıdır. Üç bacağın her birinin farklı bir amacı olduğundan, bunları yanlış kablolamak devrenizin çalışmayacağı anlamına gelir.

Analog giriş pinleri, kartın sol tarafında sıralanan beş pindir. Arduino'nun hem giriş hem de çıkış olmak üzere hem analog hem de dijital pinleri vardır. Dijital, yalnızca iki durum olduğu anlamına gelir - açık ve kapalı (veya elektrik sinyali ve elektrik sinyali yok) - ve yalnızca iki durumu yorumlayan düğmeler ve diğer ikili anahtarlar için mükemmeldir. Analog giriş ise bir dizi değeri temsil edebilir ve Arduino'daki analog giriş pinleri 0 ile 5 volt arasındaki herhangi bir voltajı ölçebilir (ve bu okumanın 10 bitlik bir değerini üretebilir). Sensörden okunan sıcaklık, hava sıcaklığıyla orantılı bir değişken direnç ölçümünde döndürülecektir.

Sensörün ortasındaki sinyal pinini A0 analog girişine bağlayın. Devreyi tamamlamak için sol pimi 5V pime (pozitif) ve sağ pimi toprağa (negatif) bağlayın.

Devreniz şimdi yukarıdaki resimdeki gibi görünmelidir. Ardından, sıcaklık sensörünü okumak için yeni bir dosya oluşturmanız gerekir. Bu dosya, Johnny-Five kitaplığının yüklenmesi, yeni bir pano örneğinin başlatılması ve ardından on ready bir olay dinleyicisinin eklenmesiyle önceki örnektekiyle aynı şekilde başlayacaktır.

 var jfive = require("johnny-five"); board = new jfive.Board(); board.on("ready", function() { // We create a new sensor instance and define the sensor type and the pin it's connected to. var tempSensor = new jfive.Thermometer({ controller: "TMP36", pin: "A0" }); // We add an event listener to the sensor and handle the incoming data. tempSensor.on("data", function() { // The data object also has a fahrenheit property, if that's what we are after. console.log(this.celsius + "°C"); }); });

Bu kod parçasını temperature.js olarak kaydedin ve bunu, node temperature.js yazarak konsoldan çalıştırın.

console.log kullanıldığından, okumalar hata ayıklama için Terminal'e gönderilir.

Sunucular ve Soketler

Artık Node.js'de çalışan çalışan bir termometreniz var. Bu basit örnek, bu verileri işlemek ve kullanmak için mevcut tüm farklı Node.js modüllerini göz önünde bulundurursanız, tek başına bir dizi olasılık açar. Bunu bir Google E-Tablosuna kaydedebilir, tweet atabilir veya hakkında yazabilir, hatta bu verileri WebSockets ile gerçek zamanlı olarak tarayıcıya aktarabilirsiniz - bundan sonra yapacağınız şey bu!

Tarayıcıyla bağlantı kurmak ve sensör verilerini akışa almak için HTML belgemizi sunmak için bir Node.js HTTP sunucusu başlatmamız ve ardından aralarında WebSocket bağlantısını açmamız gerekecek. Node.js'de bir web sunucusunu başlatmak, Express kitaplığı ile nispeten basittir. İlk önce, Terminal'den yükleyin:

 npm install --save express

Yüklendikten sonra, bu kod satırları sunucunun örneğini oluşturacaktır:

 // Load libraries and then initialize the server. var app = require('express')(); var http = require('http').Server(app); // When the user requests the root of the page (/), we respond with index.html. app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); // We listen for connections on port 3000. http.listen(3000, function(){ console.log('listening on *:3000'); });

Bunu bir server.js dosyası olarak kaydedin.

Bu sunucu kodunda, ilk iki satır gerekli kitaplıkları yükler ve bir HTTP sunucusu örneği oluşturur. Ardından, basit yönlendirme mantığı, kullanıcı kök ( / ) istediğinde projenin klasöründen index.html dosyasını sunar. Son olarak, bağlantı noktası 3000 bağlantıları dinler.

Bunu test etmek için proje klasörünün kök dizininde standart bir index.html dosyası oluşturun. Komut satırında projenizin klasörüne gidin ve node server.js . Daha sonra bir tarayıcıya https://localhost:3000 veya makinenizin IP adresini ve bağlantı noktasını (örneğin, https://190.140.0.00:3000 ) yazarsanız, standart index.html sayfanızı görmelisiniz. Bu, sunucunuzun tamamen kurulduğu anlamına gelir.

Bu kesinlikle bir Apache sunucusunu yapılandırmaktan daha kolaydı!

Bu kod parçasını temperature.js dosyasıyla birleştirmeden önce WebSocket bağlantısını kuracağız.

Bir WebSocket, tarayıcı ile sunucu arasında bir iletişim oturumu açmayı mümkün kılar. Bu API ile, bir yanıt için yoklama yapmak zorunda kalmadan iki yönlü gerçek zamanlı mesajlar gönderebilir ve olaya dayalı yanıtlar alabilirsiniz. Socket.IO, bu bağlantıyı kurmak ve yönetmek için kullanacağınız Node.js modülüdür. Socket.IO'yu tıpkı Express ve Johnny-Five'ı kurduğunuz gibi kurun:

 npm install --save socket.io

package.json dosyanızın artık bağımlılıklar altında Express ve Socket.IO ile nasıl güncellendiğine dikkat edin? Bu, uygulamanızı kendi makinesinden çalıştırmak isteyenlerin basitçe npm install çalıştırabileceği ve yüklediğiniz tüm modül bağımlılıklarının bir kerede kurulacağı anlamına gelir. Güzel! Artık WebSocket işlevini çalışan server.js koduna ekleyebilirsiniz. Aşağıda tam örnek:

 var app = require('express')(); var http = require('http').Server(app); // Load the Socket.IO library. var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendfile('index.html'); }); // Establish the WebSocket connection with the browser. io.on('connection', function(socket){ console.log('a user connected'); }); http.listen(3000, function(){ console.log('listening on *:3000'); });

İlk olarak, Socket.IO yüklenir ve ardından bir on connection olay dinleyicisi oluşturulur. Bu, bir kullanıcı index.html dosyasını yüklediğinde tetiklenecektir.

index.html sayfasında, sunucuyla konuşmak için Socket.IO istemci tarafı kitaplığının başlatılması gerekir. HTML dosyanızı buna hazırlamak için aşağıdaki kod parçasını kapanış body etiketinin hemen önüne ekleyin:

 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> var socket = io(); </script>

Bağlantı şimdi kurulmalı ve dizin sayfasını localhost bağlantısı aracılığıyla yükledikten sonra komut satırında “Bir kullanıcı bağlandı” mesajını görmelisiniz.

Artık socket.emit() fonksiyonu ile sunucudan tarayıcıya mesaj gönderebilirsiniz. Bunu server.js önceki işlevi değiştirerek yapabilirsiniz:

 io.on('connection', function(socket){ console.log('a user connected'); socket.emit('Server message', “Hello from the server!”); });

Mesajı almak için index.html şu şekilde değiştirmeniz gerekir:

 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> var socket = io(); socket.on('Server message', function (message) { console.log(message); }); </script>

Her şeyi doğru yaptıysanız, “Sunucudan merhaba!” ifadesini görmelisiniz. tarayıcınızın konsolunda mesaj. Tebrikler! Bu, bir Node.js HTTP sunucusu ile bir tarayıcı arasında gerçek zamanlı bir WebSocket bağlantısı kurduğunuz anlamına gelir!

Bu gerçekten oldukça faydalı ve sadece bu proje için değil. Sohbet uygulamaları, çok oyunculu oyunlar ve çok daha fazlasını oluşturmak için birden fazla tarayıcı arasında iletişim kurmak için bir WebSocket bağlantısı kullanılabilir!

Şimdi sıra Arduino ile iletişimi sağlayan temperature.js dosyasını tarayıcıya bağlanmaktan sorumlu yeni WebSocket sunucu kodumuzla birleştirmeye geldi.

Bu, server.js genişletilmesini gerektirir:

 var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var jfive = require("johnny-five"); var board = new jfive.Board(); var board, socket, connected = false; app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); io.on('connection', function(s){ console.log('A user has connected'); // Tracking connection connected = true; // Saving this for the board on ready callback function socket = s; }); board.on("ready", function() { console.log('board has connected'); var tempSensor = new jfive.Thermometer({ controller: "TMP36", pin: "A0" }); tempSensor.on("data", function() { // We send the temperature when the browser is connected. if(connected) socket.emit('Temperature reading', this.celsius); }); }); http.listen(3000, function(){ console.log('listening on *:3000'); });

Burada, Johnny-Five'ı yükleyen ve tahtayı başlatan satırın yanı sıra tüm board on ready işlevinde temperature.js kopyaladınız.

Ayrıca iki yeni değişken eklediniz: biri WebSocket bağlantılarını takip etmek, diğeri ise diğer işlevlerin erişilebilir olması için soket örneğini depolamak için - bu durumda, onu mesaj göndermek ve almak için kullanan board on ready işlevi için.

Şimdi, soket bağlantısından gelen verileri işlemek için index.html dosyasının güncellenmesi gerekiyor Temperature reading . Aşağıdaki kodun, Server message işleyicisinin önceden var olduğu komut dosyası öğeleri içindeki HTML belgesine eklenmesi gerekir.

 socket.on('Temperature reading', function (message) { console.log(message); });

Arayüz

Yapılacak son şey, sıcaklık okumasını kullanıcı dostu bir şekilde görüntülemek için index.html birkaç satır HTML ve CSS eklemektir. Ayrıca arka plan rengini güncelleyerek sıcaklığa bağlı olarak mavi (soğuk) ve turuncu (sıcak) arasında değişmesini sağlayacaksınız. HTML çok basittir: sayıyı tutmak için sadece bir h1 öğesi.

Aşağıdakilerin body eklenmesi gerekir.

 <h1 class="temperature">0C</h1>

Büyük ve ince bir yazı tipi sayılarla çok iyi çalışmalıdır; Google Fonts kitaplığındaki ücretsiz bir yazı tipi olan Lato'yu deneyin. Bunu belgenin head bölümüne yükleyin:

 <link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>

Bu örnekte stil minimaldir. Tek zor kısım, temperature etiketinin yüklenme şeklidir. content CSS özelliğiyle sınıf adını alır ve onu :before sözde öğesine ekler.

 body { background-color: hsl(0, 60%, 65%); transition: background-color 1s; } h1 { font-family: 'Lato', sans-serif; font-size: 120px; font-weight: 100; color: white; text-align: center; margin: 60px; } h1:before{ content: attr(class) ":"; font-size: 22px; position: relative; top: -69px; left: 0; text-transform: uppercase; }

Bu zaten güzel görünüyor!

Bitirmek için, WebSocket mesajını alırken değerleri güncellemek ve arka plan rengini değiştirmek için birkaç satır JavaScript ekleyin.

 <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> var socket = io(), temperature = document.querySelector(".temperature"); socket.on('Temperature reading', function(message) { // Rounding down the decimal values and adding C temperature.innerHTML = parseInt(message) + "C"; // Calculating the hue for the background color and changing it var hue = 200 - (parseInt(message) * 5); document.body.style.backgroundColor = "hsl(" + hue + ", 60%, 65%)"; }); </script>

Sen bittin! Arduino sıcaklık okumaları artık tarayıcıda gerçek zamanlı olarak gösterilecektir.

Çözüm

Kendi donanımınızı oluşturma olasılığı göz korkutucu olsa da, umarım, bu iki örnek üzerinde çalıştıktan sonra, olasılıkları düşünüyor ve bir sonraki projenizi planlıyorsunuz. Birçok bileşen Johnny-Five kitaplığı ile uyumludur, yani tek sınır sizin hayal gücünüzdür.

Kaynaklar

• “JavaScript ile Donanım Hackleme,” James Miller ve Mate Marschalko, GitHub
  Bu proje için gereken tüm kodlar
• Johnny-Beş, Rick Waldron, GitHub
  Bir "JavaScript robotik programlama çerçevesi"
• Cihazlarda Web, Mate Marschalko
  JavaScript ve diğer web teknolojileri ile elektronik korsanlığı üzerine bir web sitesi
• Yapmak
  Maker Media'nın yapımcılara yönelik, yeni projeler ve ipuçları sunan çevrimiçi bir dergisi
• Node.js için Arduino Deneyci Kılavuzu
  Johnny-Five ile daha fazla JavaScript ve Arduino projesi