Connecting your Azure Web App to a Database using Application Settings

You just built an application that connects with a Database on your local machine, but now you want to share it with the world. But you don’t want to share everything about your application with the world.

Azure web apps supports a number of different web platforms, but to effectively build while maintaining code on GitHub we need to keep configuration details of our app private including the connection string for our database.

In this case we’re going to be using a Node JS application connected to a Mongo Database hosted on a Virtual Machine.

Before we get started…
Do you have a MongoDB up and running?
Nope. – Read this post!
Yep! – Great keep going!

For reference, I’m starting with a chat application originally written by fellow evangelist Rami Sayar for an excellent Node Course he taught recently.

Prereqs:
Git
Azure Subscription
Connection string for a DB in Mongo – mine looks like this:
mongodb://40.83.182.555:27017/test

The Steps:
1. Clone or fork the repository
2. Create an App Service
3. Connect App Service to Repository
4. Add app settings in Azure Portal
5. Try it out!

1. Clone or fork the repository

The project I’m using for this demonstration is found here: Github
Now clone the project to your local machine, or fork it in GitHub.

Take a quick look at these files:
– package.json : checkout out the dependencies of the project, notice how we’re using the official mongodb driver
– mongoClientTest.js and dbTest.js : provide other examples/test files to run, just substitute your ip address of where mongo is being hosted to make sure you’re able to connect.
– app.js : this is the main file that will be run by Azure Web Apps (app.js or server.js will automatically be started by the cloud when deployed). Also, in app.js you’ll see we set ‘db’ using process.env app.set('db', process.env.DB ); – we’ll be using that in step 4.

Once comfortable with the files locally or in GitHub we’re ready to spin up our App Service in Azure.

2. Create an App Service

App Service is a PaaS service offered by Azure to make deployment of website/web services simple and easy to maintain, develop against, and scale.

To begin select the ‘Plus’ button in the upper left corner and select web+mobile, then select Web App:
selectnewwebapp

Now configure your web app:
configurewebapp

You may have to create a app service plan and resource group if you haven’t created one yet, for more info on this portion of the architecture click here and here

You’ll see this icon on your dashboard while the resource is spinning up:
deploying

Once running the portal should automatically take you to that resource, if not you’ll see it on your dashboard:
mongoappondashboard

Here’s the overview pane and the items we’ll be using in the rest of this tutorial highlighted:
webappoverview

3. Connect App Service to Repository

Now that we have an app service, let’s connect it to our repository.
There are a number of options for deployment.

In this case we’re going to deploy from GitHub, but we could have also used a local repository by adding Azure as a remote repo.

Azure will detect changes made to the repository on GitHub and redeploy the project. This makes deployments during hackathons super easy.

Select Deployment options from the overview pane -> Choose Source -> GitHub:
deployfromgithub

Note: You can also select Local Git Repository if you’ve liked to keep your code off of GitHub and add Azure as a remote repository git add remote azure "http://git.asdfgafdgasdfgasdf" – will be displayed in overview portal once initialized.

You’ll then be asked to login to GitHub so it can access the list of your repos.
Select your forked repo or the cloned repo you’ve committed to GitHub:
authrorize-andselectyourproject

Once selected you’ll see a notification in the top right corner with a loading bar for the deployment:
waitingfordeployment

Once that’s finished, you have code ready to roll in the cloud.
Azure has automatically installed the packages listed in your package.json and found the file named server.js to deploy. Next let’s configure it to talk to Mongo!

4. Add App Settings in Azure Portal

Now we have a project connected and deployed on Azure, but it won’t store the data anywhere, because a connection string hasn’t been included in the environment variables (aka application settings).

To add our monogodb to the project we just need to include the variable name and the connection string.
In our project, as noted before, we set db using process.env.DB

Select application settings and scroll down to until you see app settings then enter into the two empty fields “DB” and the connection string mentioned earlier: mongodb://40.83.182.555:27017/test
Like this:
appsettingpane

Then hit save!

Go back to your website and try entering some chatter!

Try it out!

If you visited the page it should look something like this:
finishedproduct

In the middle of the above screen shot you can see a terminal with a connection to the VM and same data in the MongoDB.

If you’re running into issues try connecting using dbTest.js or mongoClientTest.js after you add the specific IP for your VM hosting mongo.

Hope this made it super simple to connect your application to a database using Azure Web Apps.
Please let me know if you run into any issues in the comments below.

When Brett Stateham comes to town...
When Brett Stateham comes to town…

Running Mongo on Ubuntu Virtual Machine in Azure

You just setup a VM and you want to store data!

You checked out Document DB, but decided Mongo was more your style.

Prereqs:
An Ubuntu Virtual Machine in Azure

Let’s get started!

There are four steps:
1. Open the appropriate port on Azure
2. Install Mongo
3. Configure Mongo to connect to all external IPs
4. Connect your application

1. Open the appropriate port on Azure

Go to your virtual machine’s landing page and select the resource group in the top left corner:
vmnetworkselection

Resource groups are the way Azure breaks down how our VM interacts with the internet, other VMs, storage, and public/private networks.

To open the port we need to change our Network Security Group, which is represented by the shield and underlined in the screenshot above.

Then, once you’ve selected the Network Security Group, select Settings -> Inbound Security rules

This will allow us to open up our VM to the Public Internet via a port that we'll connect our client side application to.
This will allow us to open up our VM to the Public Internet via a port that we’ll connect our client side application to.

You’ll notice that SSH is already included, that’s what we’re using in our terminal. You may also have other ports opened if you’ve followed some of my other posts.

We’re going to create a new Inbound Security Rule called MongoPort where we’ll set the Destination port range to 27017 (the default port for MongoDB)

You can see the configuration pane in the screenshot above identified as item 3.

Once you hit ‘Okay’ or ‘Save’ the port will be opened in a couple seconds.

You should see a notification in the top right corner once completed. Now the port is available to the open internet, but Mongo isn’t installed or configured to be listening at that port. So let’s get to it.

2. Install Mongo

Installing Mongo on Ubuntu is easy and well documented by the MongoDB group. Just enter a few commands and you’ll be up and running in no time.

I followed the directions provided by docs.mongo.com –
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/

Make sure you’re following along with the directions for your specific instance of Ubuntu.

To check your version of Ubuntu enter:
$ lsb_release -a

Once you’ve followed the directions provided by Mongo, here are some other helpful commands to make sure everything is configured properly.

See a log of what MongoDB is doing:
$ cat /var/log/mongodb/mongod.log

See all the processes running on your machine:
$ ps -aux

See all the processes with mongo in the listing:
$ ps -aux | grep mongo

See the status of the ports:
$ netstat -ntlp

Here’s what the bottom of my log file looks like as well as a double checking of the current status of Mongo and what port its running on.

psandportcheckin

Before we access this DB from our application we need to change one setting so Mongo accepts connections from different IP addresses besides the local IP address.

3. Configure Mongo to connect to all external IPs

Before we go on, I need to make it clear that this is not a best practice, and no user data should be stored on a VM with an open port like this. But for development and practice purposes we’re going to make it easy to connect.

If you’re going to go into production, please refer to MongoDBs security checklist HERE.

Okay, having said that.

Open up the mongod.conf file using nano:

$ sudo nano /etc/mongod.conf

And uncomment the binding IP by adding an octothorpe at the beginning of the line like so:

uncomment

Save and close the file. ( Ctrl+X -> y -> enter )

Alright, now MongoDB should be ready to be connected to!

4. Try it out and Connect your application

Open the Mongo Command line by typing mongo in your ssh terminal.
And show your DBs and collections
show dbs
show collections

Here’s the getting started tutorial from Mongo that I found helpful:
https://docs.mongodb.com/v2.6/tutorial/getting-started/

And a great way to generate some test data to get familiar with your Databases and collections:
https://docs.mongodb.com/v2.6/tutorial/generate-test-data/
Here’s what it looked like for me!

usingmongo

The connection string for the VM is the IP address and the DB you’d like to write too. To connect to the test database on the is vm the connecion string to use looks something like this:

mongodb://40.83.182.555:27017/test

In the next blog I’ll show you how to connect your Azure Web App to Mongo on this VM!

Caught a Giants game this week!
Caught a Giants game this week!

Running Flask on Ubuntu VM

So you have a VM in Azure and want to put it to good use?

No.
Let’s set one up!

Yes.
Great!

Before we start make sure you can ssh into your machine and run

$sudo apt-get update

sudoaptgetupdate

It’s a four step process:
1. Open the appropriate port on Azure
2. Install pip, virtualenv, virtualenvwrapper, and flask
3. Write our code and run it
4. Keep it running with Gunicorn

1. Open the appropriate ports on Azure
Go to you virtual machines landing:
vmnumberonelandingpage

Then select the resource group in the top left corner:
resourcegroup

Resource groups are the way Azure breaks down how our VM interacts with the internet, other vms, storage, and public/private networks.

Top open the port we need to change our network security group, which is represented by the shield. (Underlined in the screenshot above)

Then select settings -> Inbound Security Rules:
networksecuritygroupsettings

This will allos us to open up our VM to the public internet so we can visit what’s presented at the port like a regular website.

You should see SSH already included, that’s the port we’re using in our ssh client/terminal.
defaultssh

We’re now going to add two new Inbound Security Rules one called FlaskPort where we’ll set the destination port range to 5000 and use for debugging. The second will be called FlaskProduction that we’ll use to deploy our complete app.
Here’s the configuration panel for FlaskPort:
FlaskPort
Press okay to accept the settings.

And the other panel for FlaskProduction:
flaskproduction
Again press okay to accept the settings.

Notice how the ‘Source Port Range’ is ‘*’ that just means that we’ll accept connections from the port of any machine. This tripped me up the first time.

In a couple seconds the port will be open we’ll be ready to visit it, but nothing will be there because we haven’t create an application server.

To do that we’ll install the basics.

2. Install pip, virtualenv, virtualenvwrapper, and flask

To use Python effectively we utilize virtual environments to help keep our various python project and required libraries in order.

If you get lost in these steps or want more context Gerhard Burger provides the same setup on a very helpful post on askubuntu.

First we install pip:
$ sudo apt-get install python-pip

Second we install virtualenv and virtualenvwrapper


$ sudo pip install virtualenv
$ sudo pip install virtualenvwrapper

Third we configure virtualenv and virtualenvwrapper

Create a WORKON_HOME string which will contain the directory for our virtual environments. We’ll name it vitualenvs

$ export $WORKON_HOME=~/.virtualenvs

Now we’ll create this directory.

$ mkdir $WORKON_HOME

And add this to our bashrc file so this variable is defined automatically every time we hit the terminal.

$ echo "export WORKON_HOME=$WORKON_HOME" >> ~/.bashrc

Then we’ll setup virtualenvwrapper by importing its functions with bashrc.

$ echo "source /usr/local/bin/virtualenvwrapper.sh" >> ~/.bashrc

You can see the additions to our bashrc file by opening it with nano. Scrolling down to the bottom you should see two lines like this:
bashrcconfigured

Then implement your changes.

$ source ~/.bashrc

Here’s what all that looks like all together:
configurepipandvirtualenvwrapper

Fourth, let’s create our first virtualenvironment

$ mkvirtualenv venv

And take a look at the currently installed packages
$ pip list

Like so:
firstvenv

Now we can install all of the python packages we want without risk of needing to reinstall python!

Fifth, install flask:


$ pip install flask
$ pip list

pipinstallflask
currentpackages
3. Write our code and run it!
Our first app is a simple site that shares an image.

We’re going to create a folder called Photo-App that contains two folders and an app.py that will serve our clients.

To change to our home directory:
$ cd ~
And create our new folder:
$ mkdir Photo-App

Then create a static and templates folder inside of our app.

$ sudo mkdir templtes
$ sudo mkdir static

mkPhotoApp
Then create our app.py which will be our python flask server code.

$ sudo nano app.py

Here’s the code:

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def index():
        return render_template("index.html")

if __name__ == "__main__":
        app.run(host='0.0.0.0', debug=True)

And what it looks like in nano:
nanoapppy

Then we need to add our first template:
$ sudo nano templates/index.html

<h1>Wazzup Dog</h1>
<img style="max-width:100%;" src="{{ url_for('static', filename='photo.jpg') }}">

And what it looks like in nano:
indexinnano

Now for our photo we’re going to download an image into our static file using curl.

$ cd static
$ curl 'http://timmyreilly.azurewebsites.net/wp-content/uploads/2015/12/Snapchat-1802119159214415224.jpg' -o 'photo.jpg'

Cool! We have an app!

To run it simply enter:
$ python app.py

Visit from a browser!

Type in the IP address of your virtualmachine with a colon at the end followed by the port.
Mine looks like:
http://138.91.154.193:5000/

And this is what I see!
wazzupdogimdex

Neato! But when we close the terminal we lose the application… Hmmmm let’s fix that!

4. Keep it running with Gunicorn
Real Python provided the bulk of this portion so if you get lost or checkout their site, plus they have info about setting up continuous deployment!

First, we install dependencies
$ sudo apt-get install -y nginx gunicorn

Now that our app is ready, let’s configure nginx.

If you’d like to learn more about this Open Source HTTP Server Software checkout their website.

Second, we start nginx.
$ sudo /etc/init.d/nginx start

And begin configuration for our project
We’re naming our nginx configuration the same as the parent directly of our app.py file in this test case.
Here are the commands:

$ sudo rm /etc/nginx/sites-enabled/default
$ sudo touch /etc/nginx/sites-available/Photo-App
$ sudo ln -s /etc/nginx/sites-available/Photo-App /etc/nginx/sites-enabled/Photo-App

Now we add the config settings for our app.

$ sudo nano /etc/nginx/sites-enabled/Photo-App
nginxconfigphotoapp
Here’s the raw text:

server {
location / {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /static {
alias /Photo-App/static/;
}
}

Then restart the server.

$ sudo /etc/init.d/nginx restart

And navigate to your Python PhotoApp project, and start it using Gunicorn:
$sudo gunicorn app:app -b 0.0.0.0:8000 --reload

You’re using gunicorn to start app hosted at 0.0.0.0:8000 with the reload tag configured.
The reload will look for changes in your code and reload the server everytime you change any server side stuff. It won’t auto-reload for HTML changes, but will reload them once you make a change to the python code.

Now try navigating to: http://138.91.154.193:8000/ or whatever your IP address is.

You can now close you’re ssh terminal and it will continue to run.

To stop it we have to kill the actual thread it’s running on.
$ pkill gunicorn

Like I said at the beginning of this step this was adapted from the realpython.org and they have some awesome next steps available for git deployment + automating the whole process.

The code for the app can be found on GitHub here: https://github.com/timmyreilly/Flask-For-UbuntuBlog

Happy Hacking!

This was a nice reminder in the busy airport.
This was a nice reminder in the busy airport.

Running Node and Express on Ubuntu VM

So you just spun up your first Ubuntu Virtual Machine?
No…
Let’s fix that: “Intro to Ubuntu on Azure”

YEAH!
Let’s put it to work!

The Basic Steps to using node on an Azure VM:
1. Open the Port
2. Install Git and Install Updates
3. Install Node and NVM
4. Code and Install Express
5. Run it and check it out!
6. Use forever to keep it alive

1. Open the Port
We’re not talking battleships or submarines we’re talking Infrastructure as a Service.
Visit the landing page for your Ubuntu Virtual Machine:
vmnumberonelandingpage

And select the resource group in the top left corner:
resourcegroup

Resource groups are the way we break down how our VM interacts with the internet, other vms, storage, and public/private networks.

To open the port we need to change our network security group which is represented by the shield. (Underlined in the above screenshot)
Then we’ll select settings -> Inbound security rules
networksecuritygroupsettings

This will allow us to open up our VM to the Public Internet so we can visit it like any other website.

Under ‘Inbound security rules’ SSH is already included:
defaultssh

We’re going to add a new Inbound security rule named ExpressServerPort where we’ll set the Destination port range to 3000 which we’ll see later when starting our server. Here’s the configuration pane for our ExpressServerPort:
destinationport

2. Install Git and Check Updates
Git is fun!

SSH into our Virtual Machine like we did in the VM intro then enter:
$ sudo apt-get install git
sudoaptgetinstallgit

Yay! We have Git

Let’s run our update command just to double check we’re up to date:

$ sudo apt-get update
sudoaptgetupdate

Great let’s move on with Node!

3. Install NVM and Node

First NVM: https://github.com/creationix/nvm

NVM is a version manager for Node you can install using curl:
Enter this command to install it:
$curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

Then source your profile to add it to your commands:
$ source ~/.profile

Then check out the version to make sure it installed:
$ nvm --version

It should look like this:
nvmisntallversion

NVM is installed!
Let’s install a version of Node!
$ nvm install 5.0

Then check our version of Node:
$ node -v
nvminstallfive

Sweeeeeeet

Check out NVMs readme on the github for more commands:
https://github.com/creationix/nvm

With node comes ‘npm’ which allows us to install a whole bunch of node awesomeness. One of the more popular packages is express a minimalist web framework, we’ll install this to start coding away.

4. Code and Install Express

We’ll be following along “Express’s” introduction if you get lost/have more questions about express.
http://expressjs.com/en/starter/installing.html

First let’s create our a directory, cd into it and initialize our app using nom.

$ mkdir myapp
$ cd myapp
$ npm init

After entering npm init we’ll be walked through a configuration step for our app. The only one that matters for now is (index.js) which will be the entry point for our app everything else can be the default for now.

If you were actually going to submit/share this code you’d want to accurately fill out this info.

After the initialization step we’ll add express and list it as a dependency:
$ npm install express --save

Here’s what those steps look like:
mkdirmyapp

Weeee now have express and an app ready for your code!

Lets open nano and put the helloworld sample into index.js

$ sudo nano index.js

sudonanohelloworld

Now lets run our app!
$ node index.js
nodeindexjs

Now that its running lets visit it by entering the IP address and port number into our browser.
In my case the URL is: http://13.88.180.170:3000/
ipaddressandport

Neat!

6. Use forever to keep it alive
Unfortunately, if we close our Terminal/SSH Connection our project will stop running.
To solve this, we use another NPM package called forever.
Here’s the link to the repository with clear instructions.

In short we install it globally:
$ sudo npm install forever -g

Then start it:
$ forever start app.js

And stop it:
$ forever stop app.js

That’s it for now!

Now clone one of your node projects and run them in the cloud!
Happy Hacking!

When the Male Roommates are home alone...
When the Male Roommates are home alone…

Intro to Ubuntu Virtual Machines on Azure

When I search:
Node JS Server Azure, Ubuntu, JavaScript, Mongo, Postgres, Flask, VM
I turn up with all sorts of unhelpful results.
So I dedicated a couple days to creating a couple guides for common Cloud Stacks on Azure VMs to make it as simple as possible to start deploying your code to the cloud.

This is the introduction and at the bottom of this blog post you’ll see other workflows fill in.

So, Here’s a guide to deploying an Ubuntu VM on Azure:
1. Gather Materials
2. Create VM
3. Check VM using SSH

1. Gather Materials
Here’s what you’ll need:
An Azure Account
An SSH Client perhaps putty… or even Bash On Windows?

2. Create VM

Head into the Azure Portal: portal.azure.com

And Select Virtual Machines -> Then ‘Add’
selectVirtualmachines

You’ll then see a page like this:
selectubuntu

Select Ubuntu Server 14.04.

There are lots of configurable deployments available if you feel like exploring.

Then select Create, but make sure the deployment model is Resource Manager as its more future ready then the classic model:
createvm

We’ll then get to the basic configuration tab, fill out the info and pick a User name and Password that you’ll remember because you’ll need it later!

configurationbasics

If you’re not familiar with Resource Groups check out THIS ARTICLE

I’ve named my resource group: ResourceGroupOne

Hit Okay to go to the next configuration pane

Select the Size of your VM. To see all the options select ‘View All’
selectvmsize

We’re going to go with the cheapest option A1 Standard:
SelectAOne

Hit Okay to take us to our final configuration Pane, “Settings”.

settingstwo

There are a number of different settings presented here.

First up is Storage:
This will configure what we want to name the storage account for our vm. I’ve changed mine to ‘resourcegrouponestorage’, but I could have selected any of my previous storage account in the same region, in this case westus.

Second is Network:
We can configure a Virtual Network to allow our virtual machines to connect to other resource on our network by default. We can also change this later. So in this case I’m creating the default virtual network.

Again, I could have selected a previously created Virtual Network Called ‘Databases’ which is in the same region.
virtualnetworkdefault

Third is Extensions:
We won’t add any extensions

Fourth is Monitoring:
Which we’ll disable for simplicity sake, but is a very powerful tool one you start needing to make scaling decisions.

Fifth and finally is Availability:
We won’t use an availability set, until we need to scale out our app.

Here’s what the lower portion of our settings pane looks like:
settingstwoend

And we’ll select OK to finish with our settings. This will take us to the summary page so we can do a one more check on our machine, don’t get to anxious about making mistakes because we can always tear this one down and spin up another if we messed something up!
vmsummary

Hit Okay one last time!

You’ll then be taken to your dashboard where you’ll see a nice loading tile:
loadingdashboard

It’ll take ~5 minutes to spin up and then we’ll be ready to take on the world!

Once ready it’ll look like this:
clickthetile

Click the tile to hit the landing page for our VM:
vmnumberonelandingpage

See that public IP address?
We’ll use that to SSH into our machine.

In my case: 13.88.180.170 !

3. Check VM using SSH

Let’s SSH into our box.

Pull out your preferred SSH client. Here’s bash on Windows and Putty Side by Side:
sshintomachine

Notice ‘Timothy’ Triple underlined?
That’s the User Name we set during basic configuration and is paired with the password that we also set in Azure.

When you connect you might have to accept the ras2key fingerprint. It’ll look like this when using putty. Or it’ll be in the terminal using bash. Type ‘yes’ or Select Yes to continue.
sayyestowarning

Then type in your password and marvel and your creation:
typeinyourpassword

Let’s test our vm by installing updates! Yay Updates!

$ sudo apt-get update
sudoaptgetupdate

Now that you have a VM ready let’s put it to work!

Host a Node Server
Host a Python Flask Server

Pradeep Cruising on National Donut Day
Pradeep Cruising on National Donut Day

Python with Ubuntu on Windows

Now that bash is on Windows, I wanted to try and make all the other guides I’d writen for Python on Windows irrelevant.

So here’s how to setup an effective environment for Python on Ubuntu on Windows.

1. Install Bash on Windows
2. Check for updates
3. Check out the REPL
4. Install Pip
5. Install VirtualEnv
6. Install VirtualEnvWrapper
7. Create your first virtualenv
8. Configure bashrc to keep it working
9. Install some packages
10. Test Flask

1. Install Bash on Windows:
Here’s the announcement blog for context.
How to Geek has a good breakdown of making it happen.

Make sure you remember your password.

Now that its installed try opening a command prompt and typing bash.
The prompt should change like this:
bashtomnt

Notice that path?
/mnt/c/Users/TimReilly

That’s your user directory for windows where your OneDrive, Documents, Desktop, etc. exist.

You can go in there now and run python scripts that might already exist, but your probably won’t have all the necessary packages installed.

Before we move forward we want to make sure Ubuntu is up to date.

2. Check for updates
From another command prompt:
lxrun /update

And inside bash
sudo apt-get update

Thanks reddit for the tips!

3. Check out the REPL

Now run python!
$ python

Should look like this:
pythonrepl

4. Install Pip

Now we’ll install Pip:
sudo apt-get install python-pip

If you have permission issues try starting an elevated prompt:
$ sudo -i
$ apt-get install python-pip
$ exit

Use exit to return to the regular prompt.
Should look like this:
sudoi
Yay we’ve got pip!
Try pip list to see what comes standard.

5. Install VirtualEnv
Now we’re basically following along with the guide presented at hitchhikersguidetopython.com

Again, you might need to start an elevated prompt to install virtualenv.

$ sudo -i
$ pip install virtualenv
$ exit
$ cd my_project_folder
$ virtualenv venv

Then to use the VirtualEnvironment

$ source venv/bin/activate

You should now see a little (venv) before your prompt.
Like this:
virtualenvfolder

Now you’ve created a virtualenv inside of your my_project_folder directory. Which is cool, but can be confusing with git, sharing code, and testing package versions.
So we use VirtualEnvWrapper to keep our virtualenvs in the same place.

Before we move on make sure you deactivate your env
deactivate

6. Install VirtualEnvWrapper

http://virtualenvwrapper.readthedocs.io/en/latest/index.html


$ pip install virtualenvwrapper
$ export WORKON_HOME=~/Envs
$ source /usr/local/bin/virtualenvwrapper.sh

$ export WORKON_HOME=~/
Can be customized to whichever directory you’d like to place your virtualenvs

7. Create virtualenv using virtualenvwrapper

$ mkvirtualenv venv
$ workon venv
$ deactivate

Here’s an example of what it looks like to remove our venv directory and instead use venvv which will be stored in the directory underlined in red.

venvv

8. Configure bashrc to keep it working

This might not happen to you, but when I opened a new bash terminal I had to re-source my virtualenvwrapper.sh and WORKON_HOME.

So instead I added those lines to my bashrc script.

$ sudo nano ~/.bashrc
-- type in password --

This is what it looks like in nano for me.
Ctrl+X to exit and y-enter to save.
bashrc

Then either:

Source ~/.bashrc

Or start a new command prompt->bash and try “workon” or “lsvirtualenv”

See the next image for a simple workflow.

9. Install some packages

Now lets install ‘requests’ into our newly created virtualenv:
pipinstallrequests

Isn’t that nice!

10. Test Flask
Finally we’re going to test this with flask.
First we install the required files using pip into our activated ‘venv’
Then runserver -> navigate to the designated address -> and see our site.

Here’s what it looks like:
flaskrunning

Have fun building with Python, on Ubuntu, on Windows!

Bike with pizza tied to the back
Sometimes you gotta tie a pizza to your bike.

W10 Core IoT Workshop

IoT and Windows are Better than ever with the new IoT Core for Raspberry Pi.

In this workshop we’ll have deploy Universal Windows Platform Code to a Raspberry Pi and begin communicating with the cloud and cloud services in the form of an Azure IoT Hub.

The steps include:
1. Gathering the materials
2. Preparing the Raspberry Pi
3. Installing our software
4. Connecting our LED and PushButton
5. Connecting to our raspberry pi
6. Deploying our push button app
7. Connecting our app to IoT Hub
8. Connecting our app to weather data

1. Gathering the materials

For this workshop you’ll need about $55 worth of hardware, but all the software is free.

Hardware:
1 Raspberry Pi 3 (It has built in Wifi!)
1 Micro USB to USB Cable
1 Breadboard
4 Female/Male Jumper Wires
1 Push Button Switch
1 led
1 200 ohm resistor for said led
1 Monitor with HDMI out

Software:
Windows 10 Machine version 10.0.10240 or better.
Visual Studio 2015 Update 2
The Windows 10 IoT Core Dashboard
Git

Here's my little setup
Here’s my little setup

2. Preparing Our Pi

The windows developer site has very clear instructions for setting up your device with the proper operating system so lets hop over there.

developer.microsoft.com

If you follow these instructions all the way to Step 4 of 4 you’re ready for step 5 on our workshop. So skip ahead if you followed along there.

I’m working with a raspberry pi three so my selection screen looks like this:

selection

3. Install the dashboard and Flash the OS
Next we’ll download the dashboard as prompted by the site

Then we’ll download the ISO of the raspberry pi image we want to use, then click through installer.

Once installed we can use the IoT Dashboard to flash the image onto our SD card in the form of a .ffu

Then we’ll connect the device to the network by selecting configure device.

Really though the instructions are super clear RIGHT HERE

4. Install/Update Visual Studio

We need Visual studio Update 2 to build our IoT Application, so make sure you’re up to date!

Or go here to install it: https://www.visualstudio.com/vs-2015-product-editions

Seriously though, they did an awesome job with the documentation.
If you followed along to their step 4 you’re ready for our step 5.

5. Connecting our LED and PushButton

Now that we have our pi configured and Visual Studio up to date, let’s plug in our neat hardware!

Here’s an overview of the pin layout for the raspberry pi 3:
gpiopins

And the wiring diagram for the led + push button looks like this:

wiringdiagram

Sweet, lets light it up!

6. Connecting to our raspberry pi

We need our raspberry pi’s IP address before we try to deploy our code.
Power it up with a micro USB cord and connect it to a monitor with HDMI and see the landing page for your machine.

With the Windows IOT Core Come a super helpful web portal that allows you to configure your machine through a browser.

Navigate to that IP:
http://you.have.an.ip:8080/
https://192.168.1.145:8080/ is the IP address of my machine when I tried this

You’ll be prompted with a login panel.
The default user name is:
Administrator
The default password is:
p@ssw0rd

Here’s what you should see in the portal:
coreportal

From here you can configure the name/password, get network info like the MAC address under Networking, and even test out some samples.

Sweet! This is one of my favorite Window IoT Features.

7. Deploying our push button app

The pi is setup, our computer is updated with the newest build tools, now its time to deploy some code!

Go here and clone this repo to a dev directory:
https://github.com/timmyreilly/RaspberryPiWorkshop

And setup visual studio debugging by right clicking on PushButton project like this:
properties

Then under debug set the remote machine ip to the ip you collect from the IoT Dashboard or from the raspberry pi itself by plugging in a monitor.
findip
You will then need to rebuild your solution, and restore nuget packages.

Poke around for a minute, put a break point in the buttonPin_ValueChanged method and step around to see what’s going on with the push button.

8. Connecting our app to IoT Hub

Next we’re going to turn on the IoT Hub Connection.
Go into the azure portal and create a new IoT Hub like this:
iothubone
Then create a new device called MyDevice in the IoT Hub.

More information about the IoT Hub can be found RIGHT HERE.

Then we’ll want to add our connecting strings to the app at the very bottom of MainPage.xaml.cs


static string iotHubUri = "YOURHUB.azure-devices.net";
static string deviceKey = "TOKENasQOPUesD1BmSOMETHINGCOMPLICATED";
static string deviceId = "MyDevice"; // your device name

Next we’ll uncomment this line of code on line 78:

SendDeviceToCloudMessagesAsync();

To see what’s happening in the event hub there is a small console application that we’ll run alongside to see what’s making into the cloud.

You can find that code here:
https://github.com/timmyreilly/IoTHubConsoleReader
Open that in visual studio and replace the connection string with the one provided in the Azure Portal.


string connectionString = "HostName=YOURHUBNAME.azure-devices.net;SharedAccessKeyName=iothubowner;SharedAccessKey=YOURSECRETOKENqf"

Sweet, now run both those apps at the same time, push the button, and see the glory that is Internet of things.

9. Connecting our app to weather data

Now that we’ve got it talking to the cloud, lets listen to what the clouds have to say!

We’re going to use forecast.io to provide weather data to our app, then use Speech. Synthesis to read it out over a the audio jack.

Navigate to forecast.io and signup register an account, then copy the complicated token highlighted here:

forecast

And replace what you see at line 168:

private const string FORECAST_URL = "https://api.forecast.io/forecast/YOURSECRETOKEN/";

Then if you want to be more specific about where you’re getting weather data replace the string on line 76.

var words = await GetWeatherString("37.8267,-122.423")

Make sure that the code in lines 72 through 81 are uncommented.

Deploy the app, press the button, and listen to the weather like never before!

It’s all very simple code and ready to be spun into lots of fun projects.
Here’s a list of all the ones that me and my friends could thing of:
Tap into the band app cloud
Morse code
Dance party
Send a random act of kindness
Tap into yammer
Time to finish breast feeding start and stop button
Random stats button
Gives you weather, or distance walked
Morse code each other
Send bro to someone random – twilio
Launch a middle
Listener recognition and ignore
Competitive button clicking
Obscure metadata
Best reflexes tester

Hope you had fun getting started with Windows IoT!

This workshop wouldn’t be possible without the help provided by the community. Here are some of the helpful posts that help me learn:
Windows 10 IoT Core Speech Recognition
Windows 10 IoT Core Speech Synthesis
All The ms-iot samples

Feel free to ask me questions in the comments or on twitter @timmyreilly

TOMATOES IN PROGRESS
TOMATOES IN PROGRESS

Python, Pip, virtualenv installation on Windows

No more struggles Windows Python development! I’ve found this is the best way to configure your dev environment.
This has made things much easier to get started and less of a headache overall.

We use Virtual Environment so we can test python code in encapsulated environments and to also avoid filling our base Python installation with a bunch of libraries we might use for only one project.

But Virtual Environments can be tricky if you don’t establish a good workflow. I’ll show you how to setup your python environment from Scratch and then do a very simple workflow using Flask.

SETUP
4 Steps:
Install Python
Install Pip
Install VirtualEnv
Install VirtualEnvWrapper-win

Install Python:

First Go to the Python Downloads Site.

As of March 2015 the download you want for a standard windows machine is Windows x86-64 MSI installer (The other download is for servers). Its circled here:

Download

Run the installer!
You’ll come across this page in the installer:

PythonInstaller

You’ll want to scroll down and add it to the path. If you don’t that’s okay. You can add it later.
Adding Python to the PATH will allow you to call if from the command line.

After the installation is complete double check to make sure you see python in your PATH. You can find your path by opening your control panel -> System and Security -> System -> Advanced System Settings -> Environment Variables -> Selecting Path -> Edit ->

Now you’re looking at your Path. Be Careful, if you delete or add to the path accidently you may break other programs.

You need to confirm that C:\Python27; and C:\Python27\Scripts; is part of your path.

If you do not see it in your path you can simply add it at the beginning or end of the variable value box. As you can see in the image below.

AdvancedSettings

Install Pip:

As of Python Version 2.7.9 Pip is installed automatically and will be available in your Scripts folder.

If you install a later version of Python I would recommend installing it according to this helpful stackoverflow post.

Pip is a Package manager for python which we will use to load in modules/libraries into our environments.

An example of one of these libraries is VirtualEnv which will help us keep our environments clean from other Libraries. This sounds really confusing but as you start using it you’ll begin to understand how valuable this encapsulation of modules/libraries can be.

To test that Pip is installed open a command prompt (win+r->’cmd’->Enter) and try ‘pip help’

You should see a list of available commands including install, which we’ll use for the next part:

Install virtualenv:

Now that you have pip installed and a command prompt open installing virtualenv to our root Python installation is as easy as typing ‘pip install virtualenv’
Like so:

pipinstallvirtualenv

Now we have virtualenv installed which will make it possible to create individual environments to test our code in. But managing all these environments can become cumbersome. So we’ll pip install another helpful package…

Install virtualenvwrapper-win:

This is the kit and caboodle of this guide.

Just as before we’ll use pip to install virtualenvwrapper-win. ‘pip install virtualenvwrapper-win’
Like so:

virtualenvwrapper-win

Excellent! Now we have everything we need to start building software using python! Now I’ll show you how buttery smooth it is to use these awesome tools!

USAGE
7 Steps:
Make a Virtual Environment
Connect our project with our Environment
Set Project Directory
Deactivate
Workon
Pip Install
Flask!

Make a Virtual Environemt:

Lets call it HelloWold. All we do in a command prompt is enter ‘mkvirtualenv HelloWold’
This will create a folder with python.exe, pip, and setuptools all ready to go in its own little environment. It will also activate the Virtual Environment which is indicated with the (HelloWold) on the left side of the prompt.

mkvirtualenv

Anything we install now will be specific to this project. And available to the projects we connect to this environment.

Connect our project with our Environment:

Now we want our code to use this environment to install packages and run/test code.

First lets create a directory with the same name as our virtual environment in our preferred development folder. In this case mine is ‘dev’

See here:

mkdir

HelloWold will be the root folder of our first project!

Set Project Directory:

Now to bind our virtualenv with our current working directory we simply enter ‘setprojectdir .’
Like so:

setprojectdir

Now next time we activate this environment we will automatically move into this directory!
Buttery smooth.

Deactivate:

Let say you’re content with the work you’ve contributed to this project and you want to move onto something else in the command line. Simply type ‘deactivate’ to deactivate your environment.
Like so:

deactivate

Notice how the parenthesis disappear.
You don’t have to deactivate your environment. Closing your command prompt will deactivate it for you. As long as the parenthesis are not there you will not be affecting your environment. But you will be able to impact your root python installation.

Workon:

Now you’ve got some work to do. Open up the command prompt and type ‘workon HelloWold’ to activate the environment and move into your root project folder.

Like so:

workon

Pretty sweet! Lets get working.

Pip Install:

To use flask we need to install the packages and to do that we can use pip to install it into our HelloWold virtual environment.

Make sure (HelloWold) is to the left of your prompt and enter ‘pip install flask’
Like so:

pipinstallflask

This will bring in all the tools required to write your first web server!

Flask:

Now that you have flask installed in your virtual environment you can start coding!

Open up your favorite text editor and create a new file called hello.py and save it in your HelloWold directory.

I’ve simply taken the sample code from Flask’s website to create a very basic ‘Hello World!’ server.

I’ve named the file hello.py.

Once the code is in place I can start the server using ‘python hello.py’ this will run the python instance from your virtual environment that has flask.

See here:

webserver

You can now navigate with your browser to http://127.0.0.1:5000/ and see your new site!

Sweet. You have everything you need to start working through tutorials on Flask without worrying about gunking up your Python installations.

Let me know if you have any questions! Happy Developing!

Art Deco From Afar
Art Deco From Afar

Getting Django Models into SQLite3 DB with VS

I ran into some troubles migrating/configuring my tables for a new app in my Django project.

I’ve been following this excellent tutorial, and ran into a bump I thought needed some clarification/update. As I’m not sure if the guide is up to date with the current version of Django.

Things I searched:
no module named models
manage.py sqlall
django not creating db
models are not being created in sqlite3 Django
sqlite3 not creating table django
No migrations to apply
django sqlite3 unable to create tables
manage.py shell
sqlite3 python package

Do these correlate with what you’re having issues with?
If so this was my solution.

First Install SQLite3 and add it too your Environment Variables -> Path
Install Page — Select: Source Code -> Zip for windows machines
I extracted it to C:/.
Now I have SQLite.exe in my root directory.
This is what the end of my Path looks like:
C:\Program Files\Microsoft\Web Platform Installer\;C:\SQLITE3.EXE\;

Sweet, now we can use SQLite in Powershell.

Configuration of Visual Studio:
Create a new app by right clicking on your Project file.
Then “Add” -> Select “Django App”
In this case my app is named book.

DjangoApp Solution Explorer

Sweet, now we have another Python app.
Go into your settings file and add it to the INSTALLED_APPS tuple.
eg. ‘book’,

Okay, now we’re configured make sure you’re SQLiteDB is properly configured as well.

eg:
‘ENGINE’: ‘django.db.backends.sqlite3’,
‘NAME’: path.join(PROJECT_ROOT, ‘db.sqlite3’),
‘USER’: ”,
‘PASSWORD’: ”,
‘HOST’: ”,
‘PORT’: ”,

Sweet, db all locked and loaded.

Next we’ll create a model.
Following along with the tutorial.
We go into: book -> models.py and create our models.
Eg:
class Publisher(models.Model):
name = models.CharField(max_length=30)
address = models.CharField(max_length=50)
city = models.CharField(max_length=60)
state_province = models.CharField(max_length=30)
country = models.CharField(max_length=50)
website = models.URLField()

Sweet. Model made. Let’s get it into our SQLite DB.

Alright now in DjangoProject1Hack (Where ‘ls’ will show db.sqlite3 among others)
We’ll be doing the migration.

1. Validate:
Run- C:\Python27\python.exe manage.py validate
2. makemigrations
Run- C:\Python27\python.exe manage.py makemigrations
Output:
Migrations for ‘book’:
0001_initial.py:
– Create model Author
– Create model Book
– Create model Publisher
– Add field publisher to book
3. Sync (This just makes sure we add what’s missing)
Run- C:\Python27\python.exe manage.py syncdb
Output:
Operations to perform:
Apply all migrations: book
Running migrations:
Applying book.0001_initial… OK

Sweeeeeeet!

Okay now we manage the db:
Run- C:\Python27\python.exe manage.py shell

Sample workflow in Shell:

>>> from book.models import Publisher
>>> p1 = Publisher(name=’Apress’, address=’2855 Telegraph ave’, city=’berkely’, state_province=’CA’, country=’USA’, website=
‘http://www.apress.com/’)
>>> p1.save()
>>> p2 = Publisher(name=”o’reilly”, address=’10 Fawcett St.’, city=’Cambridge’, state_province=’MA’, country=’USA’, website=
‘http://www.oreilly.com/’)
>>> p2.save()
>>> publisher_list = Publisher.objects.all()
>>> publisher_list
Publisher: Publisher object, Publisher: Publisher object

Yeehaa, let me know if you have any other questions!

What is it?
If you can guess what pun this represents, I’ll venmo you a dollar.

Python and Visual Studio in 5 minutes

Python is an excellent teaching programming language. It has all the tools to inspire students out of the box with plenty to grow on.

Development requires a basic understanding of computer science  but will teach essentials for large scale software development, object oriented design, polymorphism, and development environments.

I like python. The Zen is magnificent. It inspires me every time I practice and learn.

Microsoft arrives in the form of PTVS (Python Tools for Visual Studio) a powerful extension for Visual Studio that can be installed in all Versions of VS.

PTVS turns Visual Studio into a Python Dev Environment. Complete with Debugging, in window REPL (with autocomplete assistance), IntelliSense, configurable environments and virtual environments.

Its an extremely powerful tool.
While getting into PTVS I would recommend watching these two videos:


The second one especially will help you get a grip on how to configure development environments in Python, one of the most crucial parts of taking development to the next level.

Also, configuration of PIP, Setuptools, and virtualenv is all handled for you from there. Its freakin sweet. You can do all of this for free with Visual Studio Express.

Other helpful resources:
Python the Hard Way
Scott Hanselman’s Blog about PTVS
Pluralsight Subscribers
Python Tools for Visual Studio
Somasegar’s Post!

Let me know if you have any other questions!

9 Frisbees on Thumbtacks
We’ve started a Frisbee wall! FUNctional storage.