Thursday, May 19, 2016

A First Look at AngularJS

Lately I have been hearing a lot of people talk about using a framework called AngularJS. Just this week version 1.5.2 was released and 2.0 was moved in to beta. I figured it was about time that I did a little research and dug into what AngularJS is and what this framework can do for me. So here is a summary of what I've learned.

AngularJS is a popular front-end JavaScript Framework. It is open-source and the majority of the project is maintained by Google. AngularJS was designed to help build single page applications or websites also known as SPA. The idea is to give the end-user an experience similar to a desktop or mobile application. No page reloads or moving from page to page. The user will see one single page and the content will change as soon as they interact with the application. With the increased demand for mobile applications AngularJS has become a good alternative for web developers to create good-looking mobile applications.

By this point many web developers have been using jQuery for some time now. AngularJS feels very comfortable because its setup is just like jQuery. All you need to do is link the Angular.js library file to your webpage. Once the page has referenced Angular.js you can start using some AngularJS directives like ng-app, ng-click, ng-model and many more. AngularJS also has CDN (content delivery network) locations that you can link to that will allow you to access the cached file from a different website. What this means is if one of your customers have viewed any website that has used the same CDN they already have the framework on their machine. Because AngularJS has become popular and many people are using CDNs there's a high probability of that the user coming to your website will not need to download the framework at all.

One of the coolest features included in AngularJS is the concept of data binding. Basically you create a template which is how the data would format within a block of HTML and when a user preforms an action the template will bind data to a certain section of HTML on your site. Coming from a windows form background this concept is very familiar for me. Over the years I started doing more web development and I drifted away from this design pattern. It's nice to see this pattern is moving into the web space. When I started as a web developer it felt frustrating that after a specific action the page would need to refresh. And example of this is when someone selects their state from a drop-down list the page would refresh in order to get the data of all of the cities in the next drop-down list. Using data binding you now have the ability to use AngularJS to automatically find the cities for the next drop-down list without needing to refresh the page.

Components are another important feature included within AngularJS. A component is a reusable block of code. You can build components and share them with other developers to create consistent usable controls within your team. An example of this is you may have some form of animated button. It could consist of different images that show animation when your mouse hovers over it. You can build a component and share it within your team so everyone’s buttons will look consistent.

Another thing that is nice about AngularJS is they have a clean separation of concerns. Basically what that means is the code is separate from the user interface. This gives developers the ability to run automated testing. Many developers test their code using tools like nUnit to make sure it's performing how The developer would expect. Unit testing is something that's difficult on webpages this framework makes it easier to automate this type of testing.

In conclusion there's a few things I would like to point out. It's important to use the right tool for the right job and AngularJS may not be the right tool for all jobs. For example, AngularJS works very well as a single page application. If you're creating A webpage to log time or work orders on a single page AngularJS would be a perfect tool for that type of job. If you're making a commercial website with many pages used for marketing like photo galleries or different products this option may not be the best fit. Another thing to consider is in my research I discovered there's major differences between version 1.5.2 and 2.0. If I were a developer starting a new project, I would probably choose to hold off on AngularJS until version 2.0 was officially released. I do not like using beta frameworks in production applications and I would hate to learn a version that is going to be deprecated. With all that being said I only scratch the surface on the benefits of AngularJS and this is a very promising framework that I will definitely be using and future applications.

Monday, September 1, 2014

Wiring for Raspberry Pi Test Application (Part 3 of 5)

Before I got started I knew I wanted to create an application that would run on my Raspberry Pi that would enable me to open and close my garage door from my iPhone. I wanted to create a test application that would allow me to detect if a button was pressed. The press of the button would mean the garage door was in the up state. I also wanted the program to push the garage door button. At this point I did not know how to do that but I figured if I could turn on an LED that would give me the power I needed to make the garage door open or close. I will discuss all of the details of the garage door application in my last blog post of this series.

The test application I planned on writing was very simple it was going to have a label and two buttons. The label would display a message if the hardware button were pressed. The application would also have some software buttons that could be clicked on and the LED would turn on.

Before getting too deep in the applications functionality let’s start by learning more about how to wire up the hardware components.

For complete disclosure I am not an electrician and electronics is definitely not my strong area. I'm going to take you through the process I went through to get the LED and button working on my Raspberry Pi. Initially when I started this phase of the project I approach the wiring like a hacker. I grabbed an LED and touched the legs to pin 1(3.3v) and pin 6(ground) to see if it would power on.

I noticed other projects had resistors connected up to the LEDs and switches. I was not sure what size resister I needed nor did I know how to read the resistor’s color code. I knew this was an area that I could dig a lot deeper into. To start, I decided to see if I could find some online calculators to help me learn what size resistors to use.

I started by wearing up the LED first. I found an LED Calculator website that worked perfectly.

My first problem is it was asking for values I did not know. I ordered my LEDs through Digi-Key so I went to their website to see if I could find a data sheet. Everything I needed was on the product description webpage.

Here are some screenshots showing the values:

At this point I knew I needed 150 ohm resistors. A quick stop at RadioShack and I was able to pick up the correct resistors for this part of the project.

Now that I felt comfortable with the resistor I was using for the LED portion of this project I decided I wanted to figure out how the switch worked. The first thing I learned is the GPIO on the Raspberry Pi either needs to be hot or grounded. If it's just left without ground or power it can toggle between states and it's very unreliable.

The first thing I ran into was people talking about pull up and pull down resistors. I found this blog post that did a good job explaining the differences between the two and how the circuit below actually works.

Check out keith's blog post here:

Pull Up Example
A basic summary of this diagram shows that the 3.3 V is going through a 10K resistor. The 10K resistor will definitely give us enough power to keep the GPIO pin hot. As long as the switch is not closed none of the current will be directed to ground. As soon as the switch is pressed all the current will pass through the 1K resistor and go to ground. This will leave the GPIO pin void of any current, which will make it in the grounded or off state.

Technically I don't think I needed to add the 1K resistor but a lot of people were talking about its importance. This will restrict the current flowing from the GPIO pin when the switch is closed, in case the pin has been configured as an output. The 1K resistor will allow a maximum of 3.3 V to go to ground.

Lets start soldering! Remember to disconnect power and video before you do any soldering. For my application I will use pin #1 (3.3V), pin #6 (Ground), pin #7 (GPIO-4), and pin #11(GPIO-17)

I am going to start with my LED. I'm going to connect the power side of the LED to pin #11 (GPIO–17). Through code we will make the pin hot to turn on the LED or off to turn the LED off. The longer leg is the side the gets connected to the power or in our case pin #11. The shorter of the two legs will be connected to ground, which is pin #6.

I left the ground wire a little longer because I'm going to need to tap into ground when I'm working on the switch circuit.

Now I'm going to work on my switch.

Here's how I wired up the switch. One side of the switch is hooked up to the ground leg on the LED. The other side is connected to a 1K resistor. The 1K resistor is soldered to a 10K resistor. Where these two resistors are soldered together it is connected to pin #7(GPOI-4). The other side of the 10K resistor is soldered to pin #1 (3.3 Volts)

Okay so at this point we are done soldering everything we need to the Raspberry Pi to begin working on our test application. For the next phase I'm going to connect up a keyboard and mouse to the Raspberry Pi. As soon as the Raspberry Pi starts I will boot into X Windows where I can run the demo application that I will cover in the next post.