Setup, develop and deploy your ASP.NET MVC Umbraco website on Azure

To run Umbraco on Azure you can choose to use the build in Azure template.

pic1

 

For simple websites this could do the job but if you want to extend the portal with your own code or if you want to version control your site you’re better of starting with a blank MVC website.

 

Umbraco development lifecycle

Managing the lifecycle of an Umbraco application is somewhat challenging as Umbraco is one platform made out of several components (code/DB/content) and it’s not always clear what you need to deploy to promote content or features.  Especially deploying database changes can be cumbersome.  I personally chooses to avoid to have to stage DB changes by running all my environments (local/integration/production…) on a single DB hosted on Azure.

Because Umbraco already has a notion of staging you can for most cases work safely on the production database from your local machine without fearing to impact production.   Nevertheless when I need to make risky changes to my application or when I need to test a major Umbraco upgrade then I setup a clone of my production DB and do the development and testing on the clone.

For most of the changes my development cycle goes as follow:

  1. All my changes are made locally through the local umbraco portal (running on my local machine) or for Extensions through Visual Studio.
  2. When new content is added to the site I make sure these are included in my local Visual Studio project.
  3. I make sure that everything run nice locally.
  4. I check-in all the changes
  5. Publish the changes to Azure through the publish wizard.
  6. Test that everything runs fine in production.
  7. Promote the content once everything is tested

Umbraco first deployment

In this part I explain the steps to take to deploy the skeleton of an empty ASP.NET MVC Umbraco website.

Through the Azure portal:

  • Create a SQL server DB, don’t forget to note your password!
  • Create a new web app

Open VS: Start new project, Web, Asp.Net web application

Manage Nuget packages, umbracoCms

 

pic2

 

Click RUN in VisualStudio and launch the website locally.

Enter you Name, email & password and click Customize.

As Database type choose Microsoft SQL Azure.

You can find your connection details from the Azure portal (via old portal): select your DB, dashboard, Show Connection strings.
Use the ADO.NET connectionstring, copy each relevant part in the textboxes, for the server you need to provide the “server” part but without the leading “tcp”.
Click next.

Before publishing your website to Azure you first need to include files/folders to your project:

  • App_browsers
  • App_Plugins
  • umbraco
  • umbraco_client
  • config\splashes
  • css
  • js
  • media
  • scripts
    If you used a template also include the cshtml files under the Views folder.

 

pic3

Also set the build actions of the following web.config files to “none”.

– \umbraco\install\web.config

– \umbraco\Xslt\Web.config

 

pic4

Now publish the website: right-click your web project, choose publish.
Select your Azure Web App, the connectionstring should be retrieved by VS from your project.

 

If you followed everything in the exact order you should see your website running on Azure!

Links to learn Kodu

Here a couple of links in dutch, french and English with info on how to learn Kodu to kids:

In het Nederlands:

http://www.bs-windekind.be/Computerhuisje/Afbeeldingen_downloads/Programmeren%20met%20KODU.pdf

Vidéos

Les1: Basis

https://www.youtube.com/watch?v=NpY6-qIJMUg

Les2: Uitgebreid

https://www.youtube.com/watch?v=qCFxZU-1dqo

Les3: Vijand

https://www.youtube.com/watch?v=ZRF7cgOQHwM

Les4: Padden

https://www.youtube.com/watch?v=qe8pEuvKKEo

Les5 : Race Game

https://www.youtube.com/watch?v=gwQG-BcWZhs

Getting started with Kodu Game Lab

http://www.cs.unb.ca/~wdu/gamecamp/kodu-manual-2010.pdf

Tutorial pdf:

http://resources.hkedcity.net/downloadResource.php?rid=1356004239&pid=1142185599

Videos

Basics :

https://www.youtube.com/watch?v=XXhJ1_ijE7k

Football :

https://www.youtube.com/watch?v=zRZp27K6dUc

Racing Game :

https://www.youtube.com/watch?v=eRJuEm0-vSA

Kodu en français

Installer : http://jdolle.simdif.com/programmation_jeux.html

Initiation :

http://edutechwiki.unige.ch/fr/Kodu

Vidéos

Leçon 1:

https://www.youtube.com/watch?v=xdxztxjJu98

Partie2 :

https://www.youtube.com/watch?v=gfePm7VpK4A

Partie3 :

https://www.youtube.com/watch?v=71GDXPp8Ez4

Learning Arduino for kids (or beginners)

ArduinosKids

Through this link you can download my course for Arduino beginners. This course is one of the many I use to entertain kids during our coding-dojos sessions.  Yesterday it was the first time in Brussels we gave an Arduino session. We got kids going from 10 to 14 years. The session was a success. Despite the fact that none of them had any electronic or c-like programming background most of them managed to build one or several projects and present it to their colleagues.

Each project is intended to be built in two steps.  First the students can simply follow the schematic and can copy/paste the code they’ll find by following the provided link.  Then they need to complete a simple assignment consisting in extending what they build in the first step.  To complete the second step they need to make simple changes on the board and in the code.  Hints are provided to help them, so no real coding or electronic know-how is required.

The first project is simply making a led blink, the students should all start with this one.  Once the first assignment done they can choose between three different projects: a love-o-meter, music instrument and a lazer-tag.

Download link

Setting up continuous deployment for a Web app on Azure with a Visual Studio Online build

 

In this post I’ll create a continuous integration build with Visual Studio Online that deploys a Web App on an Azure Website.

Inside your VSO project click on the Build menu.

Click on plus sign and choose Visual Studio.

step1

 

Here we’ll configure our build to  produce and save the Web Deploy Package package file inside the staging directory.  This package will be used to deploy our Web App inside an Azure WebSite.

Copy paste the  following MSBuild arguments into the MSBuild Arguments:
/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation=”$(build.stagingDirectory)”

step2

Now we’ll add a “Azure Web App Deployment” step.  Click “Add, build step” and choose in the category “Deploy” => “Azure Web Site Deployment”, click “Add”

step3

If you don’t have a Subscription configured click on: manage

step4

Click on: Configure service endpoint

step5

Choose certificate and click on publishsettings xml file

step55

Once your settings downloaded, open the file with notepad and copy the: Subscription id, Subscription name and certificate.

step6

Click OK.

Go back to the Azure build and click on refresh.

step7

Provide the “Web App Name” of your Azure Web App.

Choose your region.

Under “Web Deploy Package” you need to provide the path of your Web Deploy Package .This relates to the package location provided as an MSBuild argument in your build step (see here above).  As we published the package under the staging directory and because the package is a zip file, the following search path will do the work:
$(build.stagingDirectory)\**\*.zip

step8

Click on Save and provide a name for your new build.

You can now test your build by right-clicking on it and choose “queue build”.

step9

step10

If you want your build to become a continuous deployment build (runs at every check-in or after some time after the check-in): Edit you build definition and look for Triggers:

step11

 

 

 

 

 

 

 

 

 

 

 

 

Automate infrastructure setup through Azure Resource Group Deployment from your Visual Studio Online build

In this post I demonstrate how you can create and update your Azure infrastructure as part of a build in Visual Studio Online (VSO).  This enable to deliver and test your code and your infrastructure continuously.

Under your VSO project, choose build, and right click your build and choose “edit”, add an Azure Resource Group Deployment.

step1

To be able to provision the infrastructure from your VSO build your Resource Group Deployment need to have the permission to add or modify resources in your Azure subscription.  Therefore you can use a Service Principal that has the proper access rights in your subscription.  This msdn article details how you can create a service principal and use it during your deployment.

Watch out: if you’ve several subscriptions, chances are that you run under the wrong subscription, this will result in the following error: “The provided information does not map to an AD object id”.  You’ll need to select the proper subscription, just after the step: “Add Azure Account” use the following command:
Select-AzureSubscription -SubscriptionId <subscription-id>

The remaining steps are obvious:

step2

 

Select your Azure Subscription, provide a name to your resource group, select the ARM template inside your VS solution and the parameter file you want to use for this deployment.

Now you can include this step inside your continuous integration build or create a specific build for your infrastructure setup that you can trigger at will.

How To: Use Azure Resource Manager with Visual Studio for creating Web Apps

automatisation-de-votre-application-azure-13-638

Here we want to create our Azure Web App from within visual studio.  The goal is to be able to recreate the infrastructure at will and host a web app on it.  We do this by including an Azure Resource Group project inside our solution. This bundle the code of our website with the definition of the infrastructure that is needed to host the website. The Azure Resource Group project contains the description of your infrastructure inside an ARM(Azure Resource Manager) template and one or many parameter files. With this project you make sure that your configurations can be consistently repeated, tested, shared and promoted across different environments. This concept is called “infrastructure as code”.

1) Define the infrastructure

First we need to add an Azure Resource Group project to our visual studio solution.

Right-click Add, new project.

If you didn’t have downloaded the Azure SDK, you first need to install it. Choose “Get Microsoft Azure SDK for .Net” from the Cloud category and complete the installation steps.

pic1

Once the Azure SDK installed, reload your solution, right click on your solution, add, new project and select Cloud, “Azure Resource Group”, provide a name to your project and click OK.

pic2

 

Here we’ll setup a simple website.

pic3

Then we’ll need to fill in the parameters.  You can do this via the deploy wizard or directly inside the “Website.param.dev.json” file. The file is located under your ARM project in the folder Templates.

The siteName and hostingPlanName are up to you, you can fill in what you like or provide the name of an existing one.  For siteLocation you’ve to choose between one of the Azure datacenter regions, you find the list under: https://azure.microsoft.com/en-gb/regions/

Just copy the name of the region that is appropriate to you.

pic4

2) Deploy your infrastructure

Right click your ARM project and choose Deploy, New Deployment.

pic5

Click on Deploy.

Once completed you should see your Azure website listed in the portal.

3) Publish your app to your website

Now you can publish your web app through Visual Studio to the Web App you created in Step1.

Right Click your web project, choose publish and select “Microsoft Azure Web App”.

pic6

Select your web app.

pic7

Click, “OK” and then “Publish”.

Once completed you should see your browser should open showing your freshly published website.

 

 

How-to create a build with Visual Studio Online

This is the first in a series of How-to’s dedicated to continuous deployment with Azure.

Here I explain how to automate a simple build through visual studio online.
Before you start you should have at least one Visual Studio solution into the repository..

  1. Connect to your Visual Studio online project.
  2. Select Build, click + sign in the left column.
  3. Choose Visual Studio build as your build template

builds

  1. Click on the Save button and provide a name and description for your build definition
  2. Test your first build by queuing a new build, right-click your build step and choose queue new build

buildAgent

  1. During the build you can follows all the steps through the console inside the page.

Build your Arduino Robot and program it with Javascript

In this post I explain step by step how I build an Arduino based Robot. This can be a handy if you want to build your own. I explain which design choices I made, which frameworks and technologies I used and how I program and configured the robot. Here you can find a video of the end result.

What is needed?

The robot is based on a RoverV2 + Bluetooth Arduino robotic kit sold by Robotshop.  This kit contains:

  • A compatible Arduino board including:
    • Dual H-bridge and onboard voltage regulator
    • An onboard charger
  • A Bluetooth module
  • An aluminum frame
  • Tamiya Twin-Motor Gear Box
  • Tamiya Track and Wheel Set
  • Lithium Polymer Battery Cell – 3.7V 1000mAh

robotshop

The kit is complete and well documented but if you want to go hard core and start with a classic Arduino board, you can obtain the same result with following components:

  • An Arduino compatible board
  • An Arduino motor shield
  • A pair of two 5v motors and 4 Wheels & frame
  • A Bluetooth module
  • 4xAA battery & holder

The goal of this article is to set the basic building blocks to build a robotic platform that you can extend to finally build an autonomous robot.  Therefore, to enable the robot to sense his environment we extend the base platform with:

3 x ultrasonic sensors HC-SR04

ultrasonic

1x Accelerometer MMA7361.

accelerometer

1x Compass HMC5883L

compass

You can find all these components, including the wheels & frames in shops selling Arduino compatible boards online like SainSmart or Robotshop.

 

Design

For the design I choosed to remotely control the robot from a server (a laptop or pc).  This design overcomes the limited processing & storage of the Arduino board but it comes at the expense of autonomy. My robot will not be able to evolve without be connected by Bluetooth to his server.  This is a concession I’ve to make but it provides me quasi infinitely processing power and makes my robot accessible through the internet.

The Arduino board plays the role of central nervous system and the PC is the brain. Another advantage that offers this design is that the robot can be controlled from anywhere in the world as it is exposed through http by a node.js application.

On the Arduino board runs a small program named “Firmata”.  This program enables you to control the Arduino board remotely through the Firmata protocol.  You’ll send commands from the server to the robot through a serial connection.  On the server side you’ll program your robot with Javascript using the johnny-five node library.  This library provides an abstraction over the Firmata protocol and enable us to interact with the Arduino board and a lot of the Arduinos compatible electronic devices like sensors and motors.

The robot can be remotely controlled and followed through a web interface dashboard.  The dashboard is a single page application built with angular.js   .  The html, images, css and javascript resources are served by express.js.  Express.js is the default web application framework for node.  Express.js is also used to expose a rest based API.   Through this REST interface, the radar and accelerometer data can be retrieved and commands can be send to the motor.  This allow you to program and control the robot via any device using the programming language of your choice.

To enable real time communication in both directions between the server and the robot I’ve used socket.io.

design

 

 Assemble and configure your robot.

To assemble the DFRobotshop RoverV2 you can follow this video.  As I’m a Lego fan and that with two little boys in house I’ve a lot of little bricks, I’d no difficulties to find all pieces I needed to build a Lego frame where I could mount the ultrasonic sensors, the accelerometer and the compass on it. Here you can find a picture of the end result.

robot

It’s up to you to decide to copy the design or make your own as long as you use the same core components and follow the schematics provided here beneath the code will be compatible with your robot.

Scematics

Here you can find the schematics for your robot:

Johnny5-Radar_bb

 

Accelerometer

As the accelerometer MMA7361 can vary slightly between manufacturers and models I provide an alternative schematic only for the accelerometer:

schematicsaccel

Configure your Robot

Prerequisites:

Before you start make sure you’ve setup the following tools on your box:

– Git : https://git-scm.com/

– Node 0.10.40 for x86 : https://nodejs.org/dist/v0.10.40/

– Python 2.7.x : https://www.python.org/downloads/release/python-2710/

If you’re on windows make sure you’ve configure your PATH correctly for all of these tools, therefore I suggest you use Chocolatey to install all of these components.

 Download the code

Create your working folder:
c:\Dev>mkdir arduino
cd arduino

Clone the repository:
c:\Dev\arduino> git clone https://github.com/geobarteam/johnny5.git

Install the packages:

c:\Dev\arduino\johnny5> npm install

You could receive some warnings here, don’t panic it should still be working fine.

Flashing your Arduino board

Because the onboard bluetooth ship is limited to 9600 baud I’hd to patch the firmate protocol. This patched version can be found on the root folder.

  1. Open the Arduino IDE
  2. Connect your Robot to your PC through the usb cable and temporarly remove the bluetooth module from your Arduino board
  3. In the IDE select the correct com port
  4. Choose, File, open and select the “firmate_pulse_9600B_patch.ino” file located under: ..\johnny5\firmate_pulse_9600B_patch
  5. Push the upload button
  6. Reconnect your bluetooth module

 

Connect to your Arduino board through Bluetooth

You should go to your Bluetooth settings and associate your Bluetooth with a COM port.  On resent versions of windows you should click on the Bluetooth icon, choose “Add Bluetooth devices”.  You should see “Bluetooth_Bee_V3” click on it and enter the secret code: 1234.

You need to know which COM port windows as configured to your outgoing connections to you robot.  Therefore open the Bluetooth settings, select the COM ports tab and note which COM port is associated with your Bluetooth_Bee_V3 outgoing connection.

comports

Configure and start the server

With your preferred IDE modify the variable “comport” in the “app.js” file with the COM port you connected the Arduino with.

On the Johnny5 folder, start the program => “node app.js”

console1

console2

Start your preferred browser on http://localhost:3000 , you should now be able to control your robot through the interface:

dashboard

 

Enjoy!

Leren programmeren in Minecraft met Javascript

 

Hier kun je een link vinden naar een cursus in het Nederlands van hoe je met Scriptcraft Minecraft kunt programmeren:

NL: https://onedrive.live.com/redir?resid=244FC18CC902B228!50980&authkey=!AFoI5pEKOhDSO3A&ithint=file%2codt

Learn Javascript with Minecraft and ScriptCraft.

Here you can find a course with exercices and tutorials about how to program Minecraft with Scriptcraft:

EN: https://onedrive.live.com/redir?resid=244FC18CC902B228!50979&authkey=!ACqnHUTi3FGFxEo&ithint=file%2codt