Demonstration of Geek Box and Our Development Process

This demonstration will be about the Geek Box and our development process here at Geek Inc. It will be a multi-part series where we’re talking about downloading, creating a local project and working with the various components of those projects.

So let’s get started. First and foremost what we need is a project folder to start with. You can see I am currently in my desktop directory and I’m going to create a new folder which we’re gonna call testProject. I’ll select my folder and I rename it as testProject. In my console, I’m able to go to testProject and you can see that I have an empty directory. I can open it graphically like this or I can use the command line tool and do a list to see that there are no files in place.

The initial start of a project, what we will need in terms of software on the machine itself are several tools. The first is VirtualBox which is a free tool provided by Oracle and you simply go to virtualbox.org  and you can download VirtualBox from here for whichever platform you are using. This demonstration will be on a Mac OS but this will work nicely on Linux or Windows machine as well.

VirtualBox Free Tool by Oracle

In addition to that, we also require Vagrant. Vagrant is another free tool that’s put up by HashiCorp. It allows command line integration, simple configuration files to set up completely independent virtual machines within VirtualBox or variety of other virtual systems.

Vagrant by HashiCorp

Once we’ve done that then what we need to do is we need to create a vagrant configuration file within our testProject. What we have done in previous iterations of this is we’ve worked with the Scotch Box tool.

Scotch Box is put up by Scotch.io who are some very very clever developers and you can see there’s been a number of other developers that have worked with this, over 2 million downloads of the Scotch Box system. However, beyond the simple LAMP stack that we can use within Vagrant, the new system allows us to use Scotch Box Pro.

Scotch Box Pro

So at Geek, what we’ve done is we’ve licensed Scotch Box Pro and completely created our own stack that suits our development projects and it’s based on Ubuntu 16, it has PHP 7, MySQL 5.7. It’s got all of the goodies that you need in a standard development environment but you don’t have to configure completely separate system in order for that to happen.

The cool thing was Scotch Box is what you do is you simply create a file called a Vagrantfile. This is the template that we use for our Geek Box:


# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|
 config.vm.box = "geekinc-ca/geekbox"
 config.vm.hostname = "geekbox"
 config.vm.network "private_network", ip: "192.168.33.10"
 config.vm.synced_folder ".", "/var/www", :mount_options => ["dmode=777", "fmode=666"]
end

These comments at the top are important but then from there we have the configuration and we say we would like to use the geekbox. Now, geekbox we’ve set to be available publicly and so you just need to use these two little bits of magic here: you need the box itself and the hostname. And then, the network configuration – this is where you’ll access it on your own local machine. We set up by default to be 192.168.33.10. It’s a local network. It shouldn’t collide with one of your networks but if you need to change that, that’s where you can do it. And then, we have set a sync folder to take the local directory and put it into the webroot directory for Apache.

Once we’ve done that, what we need to do is we actually need to save it into our project. So, I’m gonna go up here and I’m going to save this file and here it is in our project folder. If I move this away and we go back to our console and we do a list again, you can see there’s the Vagrantfile. If we display what’s inside of it, amazingly it’s what we just saved.

Console - ls command

This is where the cool magic happens. Once you have VirtualBox installed and Vagrant installed, you simply move to the directory that you’ve created, in this case it’s testProject that has the Vagrantfile in place and you type vagrant up and then the system thinks for a moment. I already have the Geek Box downloaded on my system so this is relatively a fast process. If this is the first time you’ve done it, we’ll have to actually go and fetch it from the Amazon repository that it’s sitting on so will take a couple of minutes to download it but what it does is it takes the box itself – the Virtual machine image, pulls it down and takes the configuration details from the Vagrantfile and applies them and so it will create the private network. It will name the box itself, it will set up the folder synchronization and you can set up all kinds of other things in here. This is the simplest form of the configuration file but as you can see it’s going through in creating it and now that it’s done that, we have a running virtual machine.

Console - vagrant up

If I go back to my console and I type vagrant ssh, it will think for a moment and it brings us right into the Geek Box system. You can think of this as a local version of your production server. It has a complete Ubuntu environment.

If we go to the etc directory and we have, it actually become a root to do that and we take a look, you can see it’s a full configuration and the full environment.

Console - etc

If we go to var/www and we take a look in there, you can see that it’s synchronized var/www with our project folder.

Inside of this project folder, if I create a new folder and we name it public and then we go into the public folder itself and we create a new file. Let’s create a new one inside of Sublime Text and we’ll create just a simple HTML file.

So I’ll go:

<html>
<head><title>Demo Page</title></head>
<body>This is a quick demo of Geek Box - OXTER</body>
</html>

If I save this, it will think for a moment. Say where would you like to save it? We’re gonna put it on the public directory. We’re gonna call this index.html

Now, it saves it. You can see it’s sitting there within the directory structure as we had it in our project.

If we go back to the server itself, the Geek Box system and we take a look in here, you can see there’s a public directory. It’s a little difficult to read here with blue on green but note our public directory and if we go into public, we can see the index.html

What’s cool is from here we can open up our directory, our system using 192.168.33.10 and if we take a look at that, you can see:

192.168.33.10

which matches exactly what’s in index.html

I’m using my tools on my host machine, in this case my Mac OS system but I’m working with it directly inside of my tools – whether this be a full IDE or in this case a simple text editor. I don’t need to do anything on the console to make this work. If I wanna make a change and add a simple word or phrase in here or gonna put the word “OXTER”, we will save it and then we will refresh.

Update index.html

Look at that, we have OXTER right in the middle of our phrase.

Now, beyond this what we have seen in the documentation of Scotch Box, this comes prebuilt with PHP 7 and MySQL and the other goodies so why don’t we do instead of an index.html, let’s create a new file and we’ll call it phpinfo. So we’re gonna do php. That’s super simple and we’re gonna call it phpinfo.php:

<?php phpinfo(); ?>

If we go back to our project folder, you can see phpinfo is inside of the public directory. If we go back to our web browser and we go to phpinfo, we have the full breakdown of the php installation that’s sitting in this environment.

phpinfo

Now, we’ve installed a lot of Apache modules into this to make things easy for you as a developer. In a production system, you wouldn’t wanna have all of these stuff in place but when you’re developing, you don’t wanna have to think about configuring an environment specifically to make that happen. This is what we’ve done with our Geek Box to make things easy for you as a developer. So, that’s the Apache side of things.

Let’s look at the database side of things. We have within the system itself, we have MySQL so if I go mysql on the command line, it says you don’t have permission to do that.  So I can go through and I could log in as mysql -u root -p and then it prompts our password which I believe is root. There we are. So, we’ve setup the usernames and passwords in the development environment to be root, root just because it’s simple to work with. Again, on a production system you would not want that to be the case.

If I wanted to take a look at any of the databases that are in place, there’s nothing but the default that’s in place right now but we can go ahead and do that. We could say show databases;

show databases

There they are. We’re showing the database and you can see it’s the standard mysql with the information_schema, performance_schema, scotchbox (one that came with the system) and then the sys database.

It’s very very boilerplate stuff that’s on the system right now. In addition, we have postgresql which we’ve exposed the port to allow for the graphical tools within our environment.

Iif I go with PSequel and I load up a connection into this, I will go to an existing schema. So, we’re gonna go to bonita_engine and we connect. You can see there’s quite a bit more in here than what’s in the other and the reason for this is because this is using the Bonita BPM system as a part of the underlying workflow infrastructure in the system.

PSequel - bonita_engine

Let’s set aside PSequel for now and let’s pull over the Bonita BPM system.

This is the Bonita BPM studio which you’ll have to download separate from the Geek Box system but within this you can build your workflow diagrams whether they’re human tasks or you could create system tasks that come off of this that then execute connectors that will do anything from sending an email to updating database entry to making a RESTful connection to a remote system. There are all kinds of interesting things that you can do with this but all of this is base from the concept of a business data model and the user management system. This is the foundation where we built a lot of our software.

Bonita BPM studio

Within this system you can see we have a business data model where we can go through and use. In this case this is a data model that is involved in invoicing system, project managers and invoices and time sheets and vendors and all kinds of interesting details that go along with that.

Business Data Model

If we take this business data model, we can export it and we will save it on the desktop and apparently we’ve already saved that one so we’ve overwritten it and if we pull this over here to our desktop we can use it later. For now we’re just gonna let that sit there and we will move Bonita.

We’re gonna bring up our web browser again so that I can show you what the Bonita system looks like. So, inside of our web browser, this is what we are looking at before – this simple HTML file. Full Bonita infrastructure sits on a different port. Rather than being on port 80, it’s on port 8080 because this is actually running on top of Apache tomcat. If we don’t go to the context of Bonita and just go simply to port 8080, we will see the full tomcat 7 installation and there’s all kinds of interesting things you can do with this container but for the purposes of this demonstration, we’re gonna talk about Bonita BPM portal.

Bonita BPM Portal

Now, if I go in and I try to log-in as myself, the details will come up on here and I’m logged in as a user but I could also be an administrator. The reason for this because I’ve actually gone through and I’ve setup an organization that involves just me.

If I wanted to create a new user… we could say, let’s create a new person called Walter Bates and we’ll set-up a simple password. We create this user.

Then, if I try to log in this person. So, there’s walter.bates

If I try to log in, it’s gonna say you’re not able to do this and the reason for this is because we haven’t set-up a profile for this person. We haven’t actually set-up the organization. If I was to go through and now modify the profile’s place we’re gonna make Walter a simple user. We add him under the user profile.

Add Walter Bates to User profile

From here, if I log out and once again log in as Walter, you can see I’m now logged in as a user but I’m not able to be an administrator on the system.

I’m going very quickly through this  software demonstration. There’s a number of things that Bonita BPM allows you to do. We will get into them in subsequent video sessions but what I wanted to show you was two things: 1) when you first set-up the system, you need to log in as the install user. The username and password is simply install and install. Like using root, root on the database, install, install makes things simple for you to work with when you first create things and 2) when you log in as the install user, you’ll see that there’s no additional profile. You cannot be another user or an administrator but you get additional features – you have the BPM services, you have the organization which is what we are looking at here with the two users, you also have the Business Data Model which is the file that we created from the Bonita studio and you have additional resources which are pages and apps that the Bonita BPM engine can use. Again, we’ll get into this in subsequent sessions.

Install user - Organization feature Install user - Resources feature

What I’d like to do is actually install the business data model using the export from the Bonita studio. Before we can do that, if I actually click on the business data model tab, it says “The BPM services must be paused before importing a new business data model.”

import new BDM

So, we can either click here Go to BPM Services or we could click on the link up here for BPM Services. Then, it will say currently this system is “running” which is great. We need to pause it and it thinks for a moment and pauses.

And then now, if I go back to Business Data Model I can update by installing my BDM. So, I load this up, I hit activate and it asks you to confirm because when you do this, you are actually modifying the database.

Importing bdm zip file

When I load this in, the system thinks for a moment and then I go back to BPM services and I resume it. Then, we have our system in place which is easiest to see inside of the database. We connected to the bonita_engine which includes the users. If I go all the way to the user table and I load this up, you can see there’s Ben and Walter Bates, we have our password hashes in place, firstname and lastname and all sorts of details.

user table

You don’t need to go through all of these but you can see that the data is there but the business data model actually is done on a completely separate schema. So what we do is we fire up a new window and instead of going into the bonita_engine, we go to bonita_bdm for the business data model.

PSequel - bonita_bdm

We’ll make the connection and if we look at this, we can see we have each of the different tables that maps to the same business data model within the system. If we pull this over here you can see.

bonita_bdm

Now, the difference between them. Inside of PostgreSQL you can see that all of the table names are lowercase. Inside of the Business Data Model, it’s camel caps. The reason for this is because the business data model goes beyond just creating the database tables. What it does is it actually creates plain old Java objects to interact and interface with that data directly so within the Bonita system and through the APIs that you can create, the Java objects then become the gatekeepers to the database itself.

It’s not to say that you can’t interact with the data inside the database directly. In some cases that makes the most sense but generally, you want to run through the BDM POJOs to put the data into and out of your database.

Again, if I actually load this up you can see we have the structure of the tables in place and the details. If I click on invoice, you can see we have number, data_issued, due_date, terms – details along those lines and if we take a look over here, the difference you can see is there’s a persistenceid and persistenceversion. These details are used to interface the objects one with another. These are the foreign keys between the tables.

Invoice BDM

Within the Java object, you don’t have to worry about it. Working directly within the database, you do need to keep tract of these details.

Alright. So, final point with this interface using the Geek Box system. The system itself as far as creating your project is as simple as creating a directory and updating the Vagrantfile to include the configuration to pull down the Geek Box from the cloud server and then, anything that you put within this directory structure then gets replicated into the Vagrant system itself. It goes directly to the var/www directory and then you can see we have created a public directly to work with web-based files.

When you are working with the system, it is running inside of a virtual machine and it runs live. Anytime you make a save on your host machine, the virtual system will reflect that change immediately.

To finish your work up and close the system down, what you need to do is exit back out of your virtual machine and then you simply type vagrant halt. This will shut down your machine and while it’s halting, if we go right back to the Bonita directory, it will load the system because it’s cached. However, the system itself has shut right down and it’s no longer running in the background.

Console - exit - vagrant halt and vagrant destroy

This is something for you to be aware of. If you’re running with a cache version of the system, you may or may not actually see the changes that are in place. If you see that your changes aren’t showing up then what you need to do is actually restart your Vagrant box. When you completed your project and you no longer need the Vagrant box on your system, what you can do is a vagrant destroy which will remove the file from your system.

I’m not gonna do that because we have some additional videos to do over the next few sessions to show you how we developed things here at Geek  but once we’re finished, we’ll show you how to clean it up, shut it down and you should be able to go ahead and do this entirely on your own.

This has been the demonstration. At least the first session within the demonstration of the Geek Box and our development process. If you have any questions feel free to contact us here at Geek Inc. We will be happy to answer them for you. If you would like us to do additional development for you, once again we are at your disposal and you can contact us at geekinc.ca

I’ve hoped you enjoyed this session and I hope you’ll join us next time.