NVM – Your Node.js Friend

I’ve been doing a lot of development on an old Node.js version lately (v0.10.28) and after realizing this, tried to update my Node version only to find out that a bunch of my previous code no longer worked due to base changes since my initial download of Node.js.

After some minor digging into hosting multiple Node.js versions but being able to switch between them whenever I wanted, I came across NVM (Node Version Manager). The NVM created by Creationix supports Mac and Ubuntu users, but for Windows users there are alternatives (nvm-windows and nvmw)

The basic gist of using it is to install NVM and call “nvm install 0.10.28” or whichever version you want to install. Then you can now call “nvm use 0.10.28” from your shell window and you are using that version! It makes it super simple to switch between versions of node and also check your development compatibility across the different versions and better inform your users.

Open Smart Hub

Ever since February 22 when I entered the Hackster Hardware Weekend in Seattle, I’ve had a growing passion for the open source side of home automation. What started as a simple idea to automate the closing and opening of windows became something bigger than I ever imagined.

The Hackster.io Hardware Weekend was how the Open Smart Hub was born. I started with a hacked together hub that could run on the Intel Edison and automate a servo to act as the window opening mechanism based on WeatherUnderground API information or light/motion from a Spark.io Core (now named Particle.io). Once the event finished I realized that my implementation couldn’t scale and was horribly confusing to recreate.

I began to research the implementations that were available to the public. What were the open source options? What were the professional products? How did they succeed or fail to solve the problem? My conclusion was that the home automation space was cluttered with all the different companies, organizations, products, and applications. What we as consumers and I as a programmer needed was a simple platform to expand, integrate, and customize my personalized home automation experience. IFTTT is a great alternative but it is impossible to add your own devices, actions, functions, etc. There is no communal collaboration! If you added a device and someone else wanted to use the same sort of device, they would have to recreate it themselves.

That is when I began to reimplement the Open Smart Hub with a modular design. I chose Node.js as my platform because of it’s low barrier to entry for programmers, abundant tutorials, and abundant library of open source modules. The core of the new implementation is the configuration file that declares the available device types (think WeMo switches, Hue light bulbs, Nest, Weather Underground data, etc.) as well as a user’s stored scenarios and devices. I chose an implementation where you could fully own and have the ability to control everything. After all it’s your home!

The implementation is split into two parts, a local hub run on a Raspberry Pi 2 within your home network which handles all the interaction between your devices and an online hub that gives you an accessible UI from anywhere.

Here’s a demo of a basic scenario implementation:

If you would like to check out the details or learn more check out the Hackster.io project: http://www.hackster.io/anthony-ngu/open-source-home-hub

Enabling Node.js WebSockets on Azure Web App

Recently I found myself confused by a websocket issue on an Azure deployment of a Node.js Socket.io app. In order to run WebSockets on an Azure WebApp or Website, you need to turn off IIS WebSockets module which conflicts with the Node.js WebSockets.

To do this, you have to turn on WebSockets in the configure of the app and do one of two things:

Option 1:

Create the following web.config file in your root folder prior to pushing to the Azure website:

Option 2:

FTP into your website’s location using the URL found in the Azure Management Portal and replace the web.config file in \site\wwwroot location with the content above.



Hackster Hardware Weekend (Hackathon)

I had the chance to participate this past weekend in a Hackster.io Hardware Weekend in Seattle and was blown away by the setup. Like most hackathons, they had big sponsors like Intel, Microsoft, Spark, AT&T, etc. However, unlike most of the software hackathons I have been to, they provided some hardware for people to use including Intel Edison boards with Seeed Studio Starter Kits and more. They also provided some cool and useful swag like a portable charger (which I used to power a Spark Core for my demo) and a small portable Leatherman pocket tool that is perfect for my recent maker lifestyle. The energy they provided was just spectacular and even though it was their first time hosting a hackathon, I think it went smoothly.

The food wasn’t just your normal pizza and salad hackathon meals. It also included a legitimate breakfast with bacon, eggs, bagels, cheese, etc. Lunches and dinners were comprised of delicious sandwiches (kind of like Banh Mi), mexican food, and one meal of pizza. On the side they have a whole bunch of candy, popcorn, and more snacks along with the steady supply of coffee, soda, juice, and water.

Unfortunately, like with most hackathons, the crowd of participants thinned out by day 2 with most of the remaining people being interested in learning more or deeply involved in the hacking process.

I came to the event without a clue as to what I was going to build and not really sure if I wanted to join a team, make one, or run it solo. After hearing about some of the prizes for using certain APIs (Weather Underground and WebRTC) I decided to focus my time on the Weather Underground APIs. Even after deciding what I wanted to use, I didn’t really have a clear understanding of what my final product would be and how it could change the world. I just decided to start hacking something together that I thought would be cool to own and ended up going down the path alone.

Stages of my Creation:

  1. Started with the idea to read the forecast for the day and display it to you through an small LCD screen so that I wouldn’t need to pull up an app to view the forecast. Decided to use the Intel Edison, Cylon.js, and the Weather Underground APIs to do this.
  2. Added functionality that would open your windows using a servo if your indoor temperature was past your comfortable zone and the outdoor temperature was colder. I also added functionality to change these settings through buttons and rotary angle sensors on the board.
  3. Added functionality to push the data to the cloud
  4. Realized that I could also connect to a Spark Core and communicate with it via WiFi and the Cloud from the Intel Edison, so I integrated a lighting scenario with a wireless connection.
  5. Created a prototype case for the now deemed “Hub” in Autodesk Fusion 360.
  6. Created a webpage using AngularJS on Azure that would showcase the data my back-end was receiving so that I could view information on the go.

The prototype Open Source Home Automation Hub was born.

Some things I’ve come to realize for my next hackathon:

  • Work in teams! I worked solo this weekend and although I did a lot of work to combine all the components, I definitely could have gone further with the idea and took it to the next level ending up with a professional product rather than a hacked together demo.
  • Set up a team before hand and know the expertise of everyone in the team and how best to leverage them. (This also might mean vet out the people who might have less to contribute if you are going hardcore)
  • Sometime’s it’s more about the presentation, the story, and the idea than the execution during the hackathon (although that might be due to the hardware nature of this hackathon). After all, you only have so much time both to hack and to present your creation.
  • Network! This is really just a great opportunity to meet other people in a related field and find out their skills and platforms of choice. Who knows? You might find a couple new tools that might be useful for your future endeavors.
  • Roll with it. A vision is great, but be able to adapt if things don’t work out quite like you expected.  Sometimes code breaks and it can be stressful but learn from it and debug better.
  • Have fun!

AngularJS: Triggering a Javscript function after rendering an Element Directive

I recently tried to find an elegant solution to a conundrum with AngularJS, but could only find one working solution.

My problem:

I was trying to trigger a Javascript function that needed to be run after all of the elements on a page were loaded. (In my case, after an AngularJS element directive had run and loaded a grid view dynamically). I realized that since I was trying to alter a DOM element after a DOM change that was caused by a directive, I could not use ng-view and $viewContentLoaded, a normal JQuery $(document).ready call, or an onChange event of the div (since that only applies to input types).

The solution:

on the html page side I simply added the “element-watch” tag to the div which already had my element directive.

Diving into AngularJS

I’ve heard the name “AngularJS” get dropped here and there for a long time now, so I figured that it was time I delved into it a little to see what the fuss is all about.

Why AngularJS?

  1. They do a good job of making it easy to develop a website in the typical MVC (model, view, controller) fashion.
  2. Re-usability / no-repetitiveness of code with directives for elements, attributes, and class names and ng-repeat
  3. Easy to use filters on objects/data.

Here are some of what I learned from my quick dive into the world of AngularJS:

  • Within a controller, it is always better to create a reference to “this”
  • No need to pull in all the separate javascript files anymore. Bootstrap, JQuery, etc. is all included.
  • create an angular module for every “app”, website, or object based on functionality.
  • add controllers to the app for all reusable functionality / better modeling.
  • using the “ng-{keyword}” tag in your html objects gives you a massive amount of flexibility in showing, hiding, repeating, HTML elements based on JSON data, and 2-way data binding.
  • === is a comparison similar to ==
  • ng-class=”{className:variable === 3}” setting of a class based on a variable
  • INCREDIBLY EASY to use JSON data
  • forms have validity BUILT IN and allow you to toggle things based on the value
  • CSS formatting for input types:
  • Include html templates/files in other pages with:
  • Has services built in:
    • $http for fetching JSON data
    • $log for login messages to the javscript console
    • $filter for filtering an array
    • Example:

Would I use it regularly?

I believe that I have found my replacement for jquery and a good model for javascript development for the web. I definitely will be using it for most (if not all) of my websites.