Tag Archives: Bootstrap

Project: BBB Admin Page – Setting up a Development Environment

To summarize our current location: We’re on the path of building an administration website built using the AngularJS framework, hosted on the BeagleBone Black (BBB). The purpose of the administration site is to allow us to adjust key configuration parameters and launch other applications. Essentially, I want to provide a web interface to the BBB, similar to the one provided for a network router.

Having written a prototype node.js app which provides us near real-time data via the sockets.io module, we are ready to begin building out the application to do more. Because we’re going to do a lot more, we need to better define our development environment.

In this post, I’ll document the development environment I’m using to build out the administration web application then in subsequent posts I’ll delve into discussions on our AngularJS MV* infrastructure and tying Angular to core BBB functions.

Visual Studio: A Most Unconventional Development Environment for BBB

I’m going to use Visual Studio Community Edition 2013 (VS2013) as my development environment. It may seem unconventional because my target platform is the BBB, but since a lot of the code I’m going to be writing is web-oriented and the bulk of the coding is most easily done on my Windows PC, I need a Windows development environment. While text editors (e.g., Notepad++, EditPlus) and newer development tools (e.g., Sublime, JetBrainsBrackets) are possible options, I’m pretty used to the Visual Studio toolset. The new VS2013 is a full-featured professional package, so there’s a ton of functionality available, including Javascript Intellisense and debugging capabilities. Microsoft has put a focus on providing functionality for JavaScript, Bootstrap and AngularJS developers, primarily for websites running on their Azure platforms, but we can leverage these tools for our work on the BBB – we’ll simply publish to BBB instead of Azure. Best of all, Microsoft has made Visual Studio Community Edition free for non-enterprise use.

So let’s start. If you don’t have VS2013 already, head to the the Visual Studio website and download it. It’s not a small piece of software, so allow 15-30 minutes to download and install.

Microsoft Visual Studio Community 2013 Website

Microsoft Visual Studio Community 2013 Website

Before we jump in, I’m also going to add in the Web Essentials 2013 for Visual Studio plugin to give us even more developer friendly tools. Information on Web Essentials is available here, but the download is kept here. Once everything is installed, we’re ready to fire up Visual Studio.

Visual Studio Community Edition

Visual Studio Community Edition

Creating a VS2013 node.js Project

To start, we’ll create a project, but reference our existing work, then we’ll import the relevant files to get to a point where we are ready to work.

Create Visual Studio Node.js Project

Step A – Create Visual Studio Node.js Project

Import Files into Visual Studio 2013

Step B – Import Files into Visual Studio 2013

Up and Running in Visual Studio with node.js Project

Step C – Up and Running in Visual Studio with node.js Project

Preparing the VS2013 for Debugging: Reconciling the Required Server Modules

If we try debugging, by pressing the green arrow, we’ll run into two problems:

  • Visual Studio will ask us to build the project. VS2013 is not really compiling, but it needs to build a framework for it to support our debugging efforts. This is pretty easy to get around, we just tell VS2013 OK, do what you need to do.
  • Our application will fail in the command line, because we’re missing our referenced libraries. To fix this, we need to import the modules into our project.

Specifically, we need the following modules for the server:

  • http, fs – since these are included as part of the base node installation, we do not need to install them
  • socket.io – we will import this module, using VS2013’s npm package installation tool
  • bonescript – we will modify our code to not require this, using node’s fs module instead

We can install socket.io by selecting npm (Node Package Manager) from the Solution Explorer window, right-clicking and selecting the “Install New npm Packages …” option. The first time you do this, it will download all of the available module options (there are a ton), but subsequent times, it will be near instantaneous to get to the window we want.

VS2013 - Install npm Packages

VS2013 – Install npm Packages

As per our first few lines of the app.js file, we can see the list of modules we need to include. Simply search for the relevant modules and add them, Visual Studio will add them to the project and, optionally, to the package.json file. Make sure that you include the right modules, because there are so many of the same name – if you make a mistake, simply remove them from the Solution Explorer tree.

VS2013 - Install npm Module Dialog

VS2013 – Install npm Module Dialog

We will also modify our code to use the fs module, instead of the bonescript module, to have a more generic code base.

Running and Debugging our Application

With this complete, we’re ready to test our project. We can select the Debug menu’s “Start debugging” option, press green arrow button on the menu bar or simply press the F5 function key to launch the application. Of course, we won’t see a temperature, because we’re running the application on a PC for the moment, but it will prove that our application is functioning and ready for debugging. We can even use breakpoints and the watch windows if need be.

VS2013 - Project Debugging

VS2013 – Project Debugging

Adding Some Polish to the Client-Side Presentation Through the Bootstrap.js Module

Bootstrap is a widely-used Javascript module for marking up client-side user interface. It’s popularity is because it is a mobile-first, responsive HTML/CSS/Javascript framework.

To add Bootstrap to our client HTML, we’ll first have to reference it within a script. For simplicity-sake, we’ll use the provided CDN in our HTML header. We can now add some basic commands to make some improvements to our previous gaudy html. Specifically, we’ll throw in a couple of labels to pretty our browser presentation:

Adding Some Basic Bootstrap to App Client

Adding Some Basic Bootstrap to our App Client

Running App and Client (with Bootstrap)

Running App and Client (with Bootstrap)

Final Step – Upload to the BeagleBone Black

There are two way to manage how our code now gets to the BBB:

  • Use GitHub – in this case you’ll add, commit and push the changes to the repository, then pull them down from the BBB. This is the recommended approach
  • Use WinSCP – upload the files to BBB directly. This may be faster and more direct. Furthermore, it is possible to set up a directory synchronization task to manage host and target directories automatically.

For this blog entry we will show the second option, using WinSCP’s synchronization functionality. In this method, you’ll might want to omit synchronizing the VS2013 directories and files, as shown below:

Using WinSCP Synchronize Directories Feature

Using WinSCP Synchronize Directories Feature

We can PuTTY to the BBB and run our application:

Updated App  Running on BBB

Finally, I’ve updated the repository here: https://github.com/bitstobrowser/AdminApp

Project: Corsi Database – Initial Database Seed and Grid Display

Seeding the database with test data

With the initial database model defined, I created a seed method to load some sandbox data – this seed method is referenced in the system start-up and will create and populate the database if there is nothing present:

Corsi Database Initialization

Corsi Database Initialization at System Start

Corsi Database Seed Method

Corsi Database Seed Method (called if the database does not exist)

Of course, this whole seeding process is just to kick-off the project, so that we have a sandbox of information to test and view. In the future, we’ll add game data every night as it becomes available.

Getting to a View of the Data

We are using the Model-View-Controller (MVC) pattern. The Model is coming together nicely now that we have data in the database. We need to create the Controller and View to allow us to navigate and display the data.

I ran into a bit of a snag when I couldn’t get Visual Studio to auto-generate this for me because I was using MVC 4 with Entity Framework 6, so after figuring out how to upgrade, I was able to get Visual Studio to build out the scaffolding for me. I had to use the Nuget Package Manager’s Update section to bring in the necessary MVC 5.x upgrade package.

I then used Nuget to install Grid.MVC to start making the data look pretty. I needed to bring in Bootstrap and JQuery to round out the formatting.

I added a logo and voila, we have our first web browser accessible view of the base data that we’ll use to compute Corsi stats.

Initial MVC GameEvents View

Initial MVC GameEvents View