Category: Code

I have worked for digital agencies for most of my career. I was a developer and eventually became the Director of Technology at a few of them. I have worked with web technologies since 1996 and have gone through iterations of design and build trends. From the Adobe Flash splash-screen phase to home page takeovers. From content needing to be “above the fold” to iframes to ActiveX and more! When I was working at Byte Interactive from 2003 to 2007 we were a big .NET and Flash web agency. We did some PHP and Java but most of our clients were .NET. In the 06/07 time frame we started dabbling in the Mobile design space. It wasn’t until we were bought out by Story Worldwide in 2007 when we started to get more into the mobile space. We worked on iOS and some Android and mobile web as well. I then left Story in 2010 and became the Director of Mobile Technology at Affinion Group. This is where I started to get heavy involved with the Mobile Web. From build patterns to testing on all sorts of devices. The “band” was getting back together in late 2010 (ex Byte and ex Story) to form a new company called WELD Media. I jumped in as VP of Technology and we supported web and mobile web heavily before I joined Microsoft.

Marshall St Mayhem

During all of these companies we had many types of projects. Ranging from small promotional websites to full blown eCommerce applications. We had to support IE 7 for some time as well as all of the newer mobile devices. When it came to testing we used a bunch of methods that have stood the test of time. Different browsers. Browser add-on (Firebug, YSlow, Web Developer Toolbar) we used F12 and inspect element heavily. Heck, we even set up old PC’s and Macs as a test lab. We purchased iPod Touches, iPads, Android phone and tablets. But the common denominator with all of these is you had to be near the device or using the browser to help debug. It did not matter the “tool” you used. You had to open up the website and see for yourself or try and replicate the issue. And there were issues. As a developer, you are able to keep your dev machine up to date. But not so much your clients. Especially when the IT departments lock down versions.

QA Lab – Photo Credit: Library of Congress

I remember a few of our clients were still running IE6 when IE8 and Chrome were the standard. IE6! Ugh, that was the absolute worst. Even better, they might be using the latest version of a browser but the plugins are out of date (see Flash) or not installed. There is nothing you can do when you are trying to debug that type of issue other than heading down to the clients office and see for yourself (we did this a few times).

These issues are all present today and even worse. With the explosion of connected devices accessing the web makes it even harder to debug and troubleshoot an issue. How many flavors of Android are there now? Last count – 10! Even iOS has a lot. And lets not even touch on screen resolution.

So what happens when your client calls you up after the project has launched and says “I am looking at the site on my home computer and it does not work” or “The site is not working on my mobile phone”. Aside from saying the typical developer line “it works on my phone/computer”, what do you do?

Client on phone – Photo Credit: Library of Congress

Vorlon.js

In comes Vorlon.js. The remote debug web tool. It is ideal for situations like this. A simple line of code on your website and you can inspect til your heart is content the issue on your clients device. How does this work you say? Magically! Not really. Vorlon.js is built upon some great development library standards like Node.js, Socket.IO and Express. Vorlon.js runs on it’s own server (or Node.js server) to host the dashboard and the service. The service is using Socket.IO to get a connection to the dashboard as well as the various devices that we be connecting to the site that you are debugging. The site that you are debugging contains a reference to a JavaScript file that is served by the Vorlon server which contains all of the plugins and client code to interact with the client and the dashboard.

Get Started with Vorlon.js

Lets talk about how we use it and get started.

First you need to make sure Node.js is installed. Head on over to Nodejs.org and download and install for your platform of choice.

Once installed, create a project directory somewhere on your computer and you can utilize the Node Package Manager to install Vorlon.js.

Shell

1

npmi-gvorlon

That will install Vorlon.js. The -g option with NPM installs the package globally. So you will not see the files in your project directory. You will have to navigate to the directory that global packages are installed to if you want to modify or copy the installation. On Windows you can find it at C:\Users\username\AppData\Roaming\npm\node_modules\ on a Mac /usr/local/lib/node_modules.

Once installed, you can issue the vorlon command to get the server up and running

Shell

1

vorlon

Now you have a server running on your localhost on port 1337. To get access to the dashboard, just open your favorite browser and navigate to http://localhost:1337/dashboard/.

Start using Vorlon.js

In order to start debugging you will have to add a single reference to your client project.

JavaScript

1

<script src="http://localhost:1337/vorlon.js"></script>

Done! Now when you visit the client project website on any device, information will be sent to the dashboard.

Once we start having clients connect we can identify a client and inspect their DOM, look at their debug console, check out their JavaScript objects, perform validation upon their network monitor to ensure proper files were loaded, look at device information and more. All of the aforementioned are plugins that are available to use with Vorlon.js.

Wait, we are not done yet. We can use Vorlon.js in a desktop app or we can deploy to Azure using a one-click deploy. Both of which can be found on the Vorlon.js GitHub page.

Other Tools

There are a few other interesting tools to help with Website debugging and testing.

The Remote client app is a small utility program that allows you to access Microsoft apps from the cloud. When you launch Internet Explorer from the Remote client app, a real preview version of the browser opens into a new window on your operating system, much like any other app you might have running. This version of Internet Explorer is modified to host the latest preview version of the EdgeHTML rendering engine, so you can test how your site will render in Microsoft Edge.

Remote app clients are a great solution if Microsoft browsers are not available for your operating system, or if you’d like to test the preview version of the browser without installing it directly on your machine.

In my last post we looked at getting set up to develop a Windows Phone app using the Microsoft Band SDK as well as Visual Studio Community Edition on a Windows 10 machine. We also looked at using the Web Tiles, which utilizes a web interface to build a communication tile that you install with your Microsoft Health App. In this post, we will look at getting going with Android development.

In order to start development for the Microsoft Band let’s go over some ground rules. You are not building an app for the “Band”. You are building an app for a mobile device (aka Phone) which will take advantage of all of the sensors within the Band. Think of the Band as sending and receiving information. It sends data from it’s sensors and receives data from the app that you create.

There are 2 major aspects of developing for the Band. The “app” and the “Band UI”. The app is something that you have full control over. The UI, the code, the OS (yes, we support Android, iOS and Windows development). The Band UI is more structured and starts with the Tile which is the first interaction with your app. Once the user engages with the Tile, you then can create Pages with information and actions.

Development Setup

To get started with the Microsoft Band development, we will first need to get our machine up and running. Whether you are on Windows or Mac, the steps are pretty much the same.

Once everything is downloaded and installed, you can start by creating an empty Android project.

After the project is created and before you start coding, you will need to make sure we have the Microsoft Band SDK (jar file) added to our project. In Android Studio we can drag our jar file into our lib directory. Once we do that, make sure you right click on the jar file and choose “Add as Library” so it is added to your Gradle and project.

Now you are ready to start development!

Development Process

The process of creating an app and connecting to the band is in 3 steps.

The first step in our app is to make a connection to a Band. To make a connection, the Band and the our Android device must be paired. Item to note – this will not work within the emulator, you will need a device. You can use the Band Client Manager to get a list of paired Bands, and establish a connection to one or more paired Bands.

Once we get a list of paired bands we can then start the process of subscribing to its sensors. The subscriptions are managed by the Band Sensor Manager on the Band Client. For each hardware sensor, the Sensor Manager allows the application developer to create a subscription. A subscription is essentially a platform-specific callback mechanism. It will deliver data at intervals specific to the sensor. Some sensors have dynamic intervals, such as the Accelerometer (on Android and Windows), that allow developers to specify at what rate they want data to be delivered. Other sensors deliver data only as their values change.

When we think of PHP we also think of MySQL. The perfect relationship. PHP can provide the logic and MySQL can provide the data storage. There are others like SQLite, Postgres, MariaDB, MongoDB and more. All of these provide great functionality and performance but there are a few services that Azure has that can be deployed quickly and managed really easy. We are going to look into 3 services that Azure utilizes to make deploying and building PHP apps really easy and scalable.

Using Azure Microsoft SQL Server

This is not something new. PHP has supported MS SQL for a while now but why not utilize the ability of creating a SQL DB out on Azure and using the ODBC drivers to connect to SQL. By using SQL as a Service you can build software-as-a-service (SaaS) applications that use Azure SQL Database to provide flexibility to support both explosive growth. For workloads with unpredictable database resource consumption, the elastic database model gives you the ability to pool resources to use among a group of databases. Instead of overprovisioning a virtual machine to meet peak demand, you can use an elastic database pool to let hundreds or thousands of databases use resources within a budget that you control.

You are also removing virtually all infrastructure maintenance with SQL Database, which provides automatic software patching as part of the service. Meanwhile, built-in system replicas using the quorum writes technique help deliver inherent data protection, database uptime, and system stability, which means fewer hassles for developers and architects. System replicas are automatically moved to new computers, which are provisioned on the fly as old ones fail.

Now you do not have to focus on the “database server” you can just put your focus on your business and technology.

Using Azure App (Mobile) Services

Azure App Service is the only cloud service that integrates everything you need to quickly and easily build web and mobile apps for any platform and any device. Built for developers, App Service is a fully managed platform with powerful capabilities such as built-in DevOps, continuous integration with Visual Studio Online and GitHub, staging and production support, and automatic patching. Using Mobile Apps in Azure App Service, it offers a highly scalable, globally available mobile application development platform for Enterprise Developers and System Integrators that brings a rich set of capabilities to mobile developers.

Why Mobile Apps?

Mobile Apps in Azure App Service offers a highly scalable, globally available mobile application development platform for Enterprise Developers and System Integrators that brings a rich set of capabilities to mobile developers. With Mobile Apps you can create API’s in minutes. Customize those API’s to include push notifications, authentication and more.

Here is an example on how to set up a Mobile app as well as integrating the service with a PHP application. There is a Azure JavaScript Library that you can import and use for your app.

Using Azure PHP SDK

The other way to utilize manage storage is via Azure Storage (blobs, files, tables). Azure Storage is massively scalable, so you can store and process hundreds of terabytes of data to support the big data scenarios required by scientific, financial analysis, and media applications. Or you can store the small amounts of data required for a small business website. Wherever your needs fall, you pay only for the data you’re storing. Azure Storage currently stores tens of trillions of unique customer objects, and handles millions of requests per second on average.

Azure Storage is elastic, so you can design applications for a large global audience, and scale those applications as needed – both in terms of the amount of data stored and the number of requests made against it. You pay only for what you use, and only when you use it.

Azure Marketplace is a great place to start your search for a Virtual Machine to start building your app or infrastructure on. However, these VM’s are sometimes vanilla and will need to be configured to your liking. Let’s use Rails as an example. In order to get a Rails app on a Virtual Machine there are a bunch of steps you will need to perform. First, create the operating system VM, Linux. Make sure that is up to date (sudo apt-update). Then you need to install Rails, Nginx, Unicorn, some sort of database like Postgres and dont forget permissions and users.

Having a custom install is cool but sometimes the situation does not call for that. There is MS Open Tech for that.

Microsoft Open Technologies, Inc., (MS Open Tech) is a wholly owned subsidiary of Microsoft Corporation to advance Microsoft’s investment in openness including interoperability, open standards and open source.

At MS Open Tech, we focus on providing our customers with even greater choice and opportunity to bridge Microsoft and non-Microsoft technologies together in heterogeneous environments. We believe that openness is good for our customers, good for the community and good for our business.

We’re a diverse team of engineers, standards professionals and technical evangelists who are experienced and passionate in working with an equally diverse set of technologies from Microsoft and others.

Every day, we are powering interoperability and opportunity across developers, partners, customers and competitors.

Our team works closely across Microsoft business groups to support our customers’ journey in a mobile first, cloud first world.

As a result, you can do more and achieve more with the openness of the Microsoft platform.

You can build with the tool of your choice.

You can work across platforms.

You can collaborate through code.

There are Projects that MS Open Tech builds, HTML5 Labs that contributes to the Edge platform and VM Depot where a community managed repository of Linux and FreeBSD virtual machine images for easy deployment to Microsoft Azure reside.

You can search for a open source product or platform and most likely there is an image that is ready to go and deploy. Let’s use WordPress as an example.

Search for WordPress and you will see a listing of results.

Choose the result that best fits your need.

Click on Create Virtual Machine (or if you are familiar with PowerShell you can get a deployment script)

Login to the MS Open Tech website using one of the 3 Authentication methods.

You can fill out the minimum to create an account on the MS Open Tech site.

Accept the T&C and Click Save

The next step is to link your Azure account with MS Open Tech to create the deployment. If you have your publication file you can upload it, otherwise you can click the Azure Publish Settings link within the copy and it will download one for you (as long as you are currently logged into the Azure portal).

Once downloaded, you can now upload it to the site.

Once that is connected, you now can configure some of the VM settings. DNS Name, Username/Password as well as region, storage accounts and endpoints.

Once you are happy with your configuration, click I agree and Create VM. It should take a few minutes and your new VM will show up in your Azure portal.

One thing to note. If you choose a VM with configured software you might need to read the README to find out usernames and passwords to certain products.

I am embarking on a series on Developing for the Microsoft Band. If you are not familiar with the Band it is a product that is in its second iteration. With 11 sensors ranging from accelerometer and gyroscope to heart rate and skin sensor, the Band is a great device.

The first part of the series we will be looking at Web Tiles. Microsoft Band Web Tiles make it extremely simple to deliver relevant information to the Band from virtually any data source accessible through the web. Developers only have to write web tile code once to support multiple mobile platforms (iOS, Android and Windows) since the Microsoft Health app takes responsibility for doing the rest – installing the web tile to the Band, accessing web resources for content, extracting and formatting the content, and delivering that content to the associated web tile on the Band.

A web tile, fully described by a “web tile package”, contains a variety of information including tile metadata, information needed to fetch data from the web and format it for the tile, and other resources associated with creation and updates of the tile.

Then we will dive into the SDK.

We are going to look into the Microsoft Band SDK which will allow third-party application developers to harness the power of Microsoft Band. The SDK gives developers access to the sensors available on the Band, as well as the ability to create Tiles on the Band and to send notifications to these Tiles from their applications. Through the SDK, you, as an application developer, will be able to enhance and extend the experience of your application to your customers’ wrists. This opens up a whole new dimension of interaction and enables new, richer scenarios for your applications that make use of the capabilities of the Band.

Applications that work with Microsoft Band make use of the Microsoft Band SDK to communicate with the Band. The application logic runs on the host OS (iPhone, Android, Windows), and remotely controls the UI of the Band as well as receives contextual information and sensor data from the Band.

The features offered by the Microsoft Band SDK are as follows: 

Multi-platform support 

Sensor data subscriptions 

Tile creation and management 

Tile notifications 

Custom layouts 

Haptic notifications 

Band theme personalization

The SDK is also supported on a wide range of platforms. They include Windows Phone 8.1 and later, Windows 8.1 and later (Store Apps) iOS 7 and later, Android 4.2 (API 17) and later.

Channel 9 Video

What is DreamSpark?

DreamSpark is a Microsoft Program that supports technical education by providing access to Microsoft software for learning, teaching and research purposes.

DreamSpark is simple: it’s all about giving students Microsoft professional-level developer and designer tools at no cost so that students can chase their dreams and create the next big breakthrough in technology – or just get a head start on their career.

DreamSpark helps educators teach the latest technologies and experiment in research. Microsoft knows that to make learning more motivating, relevant, and engaging for today’s students requires a diverse set of resources. DreamSpark gives educators the resources to ensure their classrooms always have the latest technologies to challenge, motivate, and keep students engaged in new ways.

DreamSpark is also a subscription for Academic Institutions: it provides a cost-effective way to put Microsoft developer tools, platforms and servers in labs and classrooms, and on their students’ and faculty’s computers for learning and research purposes. It reduces lab costs and teaching budgets.

How do I get it?

As a Student: simply create an account, verify your student status and download software through this website at no cost. If your school/university has a subscription, you can also get access to more software titles.

Make sure you have a Microsoft Account first and sign in to create your DreamSpark account.

Once logged in, you can now create your DreamSpark account profile. Click ‘Continue to Verify’ to get to the verification option screen.

The verification option screen provides several methods to verify that you are a student. Using your student email address (john.doe@college.edu), your School DreamSpark account (My College Name), Student Identity Card, Verification Code or documentation you can supply.

Once you enter your verification method, click verify.

If you are verified you can click continue to get to the “congratulations” screen.

Click continue to access the DreamSpark main page. From here you will be able to get to the store and Download Software.

You will now be presented with all of the software and service options within DreamSpark. Click on Azure to activate your Azure Subscription.

You will now be prompted to start the Azure account activation process.

Once you click on Register Now you will be in the Azure Account creation funnel. Fill out the appropriate information and make sure you are verified before you click sign up.

The Azure account creation takes a couple of minutes. In the mean time you can view a video of Azure or sit and wait until you get the all done message.

You can now start managing your service and access the Azure Portal.

You can jump right in and start creating Web Apps!

Unfortunately some features are not active with the Student DreamSpark subscription, such as Virtual Machines. But that is ok. There is a lot you still can do within Azure.

One of the cool features of Azure is the ability to have a “deployment slot” for your web app. Web app content and configurations elements can be swapped between two deployment slots, including the production slot. Deploying your application to a deployment slot has the following benefits:

You can validate web app changes in a staging deployment slot before swapping it with the production slot.

Deploying a web app to a slot first and swapping it into production ensures that all instances of the slot are warmed up before being swapped into production. This eliminates downtime when you deploy your web app. The traffic redirection is seamless, and no requests are dropped as a result of swap operations. This entire workflow can be automated by configuring Auto Swap when pre-swap validation is not needed.

After a swap, the slot with previously staged web app now has the previous production web app. If the changes swapped into the production slot are not as you expected, you can perform the same swap immediately to get your “last known good site” back.

As a web developer, this makes your life easy. Production and Staging can be exactly the same. How many times have you used a staging environment that was a different OS version than production. “It works on staging but not on production” is the common quote.

When I’m told that my code is broken in production

Setting up deployment slots are pretty straightforward. You can read more about them on this Azure post. However, how do you handle the environment variables for each slot? I need my production code to access my production database.

There are 3 ways that this can be accomplished.

1. The RCP Way

The RCP Way stands for Rename, Copy and Paste. You would rename your connection string or variable file to connstring.stage or connstring.prod and then copy and paste the appropriate values in them. Works fine. However, when deploying from Git or some version tracker can get a bit tricky.

2. The If Then Way

IF “Production” THEN production values ELSE staging values. You can either get the ip address, domain name, server name or even a boolean value that if it signals that you are on production you load in the production values. This works fine but now your one file has 2 or more sets of variables that will need to be maintained.

3. Environment Variables

This is part of Azure which makes deployment slots work so well. I configure my values within Azure per environment. This way my code does nto have to have any usernames or passwords just the variables to store them in.

I am going to show a quick example of how to set up your WordPress Blog using the connection string variables within Azure. This can be applied to any application but I will use WordPress as the default.

Step 1. Create your web app.

I am not going into detail on how to create a wordpress web app but you can follow this tutorial to get that up and running.

Step 2. Find your connection string

This can vary. You might have a Virtual Machine that is custom hosting your database or you might use the default database within Azure. Either way finding your connection string can be done by determining the Username for the DB. the Password for the DB. The data source and DB name. You can also get this info from the wp-config.php file within your root of your WordPress website. You might want to look in there since we will be modding that file in a moment.

Step 3. Build your string

Once you have those 4 parts you can build together your connection string. Your string can look like this.

Go into your web app and choose All Settings then Application Settings.

The Application Settings blade will appear. Scroll down a bit until you see the section called “Connection Strings”.

There are 4 form elements that you can configure.

Name: This is your name of your connection string. MyClientDB or AnalyticsDB as examples. Whatever you name it, Azure will add a prefix to it that I will explain in a moment.

Value: This is your value. You connection string. See step 3.

Type: You can choose Custom, SQL Server, SQL DB or MySQL. When you choose any of these Azure appends the following text to the front of your “name”

SQL Server: SQLCONNSTR_

MySQL: MYSQLCONNSTR_

SQL Database: SQLAZURECONNSTR_

Custom: CUSTOMCONNSTR_

Note:

For .NET apps, these connection strings are be injected into your .NET configuration connectionStrings settings at runtime, overriding existing entries where the key equals the linked database name.

For PHP, Python, Java and Node applications, these settings will be available as environment variables at runtime, prefixed with the connection type.

Now if I need to access my MySql connection string called MyClientDB, it would be accessed through the environment variable MYSQLCONNSTR_MyClientDB.

I then can create a deployment slot with the same connection string “name” but different values and my code will use those values to connect to staging or production data.

You can see how this would be valuable when you are moving from dev to test to prod. You can also use App Settings to store “app specific” data in there as well per environment.

Step 5. Update our WordPress

Remember I said we are going to need that wp-config.php, well if it is open great, if not please open it in your favorite code editor, mine is Visual Studio Code, a free download and works great.

The first couple of lines are comments but then there are a few “define” constants that the application will use.

PHP

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// ** MySQL settings - You can get this info from your web host ** //

/** The name of the database for WordPress */

define('DB_NAME','database_name_here');

/** MySQL database username */

define('DB_USER','username_here');

/** MySQL database password */

define('DB_PASSWORD','password_here');

/** MySQL hostname */

define('DB_HOST','localhost');

/** Database Charset to use in creating database tables. */

define('DB_CHARSET','utf8');

/** The Database Collate type. Don't change this if in doubt. */

define('DB_COLLATE','');

Your file might have actual data in your file but that is fine. We will be replacing that with the values from our environment variable that we just created in Azure. To access it’s data you can call the get_env function to retrieve it.

PHP

1

$azureConnectionString=getenv("MYSQLCONNSTR_MyClientDB");

At this point you have your connection string and you can $echo it out to see what comes back. To make it a bit easier to get each element of the connection string you can add this function to the top of the wp-config.php file.

PHP

1

2

3

4

5

6

7

8

9

functionconnStrToArray($connStr){

$connArray=array();

$stringParts=explode(";",$connStr);

foreach($stringPartsas$part){

$temp=explode("=",$part);

$connArray[$temp[0]]=$temp[1];

}

return$connArray;

}

This is a handy little function that coverts a string into an array with a predefined delimiter.

You can var_dump the returned value to see what is returned.

Then you can replace the 4 defined constants with the following:

PHP

1

2

3

4

5

6

7

8

9

10

11

12

// ** MySQL settings - You can get this info from your web host ** //

/** The name of the database for WordPress */

define('DB_NAME',$dbConn["Database"]);

/** MySQL database username */

define('DB_USER',$dbConn["User Id"]);

/** MySQL database password */

define('DB_PASSWORD',$dbConn["Password"]);

/** MySQL hostname */

define('DB_HOST',$dbConn["Data Source"]);

Done!

Now you can deploy stage and prod and have your WordPress blog access different databases very easily.

In part one we did the setup. Part two we did the coding. Now we will continue some of the coding but also start looking at some configuration options.

Step 1: More Services

Lets finish up the rest of the services. We are basically mimicking what we just did for the Occasions API call for the Results and Details. If we look at the API we find the endpoint to get all drinks by occasion is /drinks/for/occasion_id. We have a route that mimics that /drinks/:filter/:id We can use this route, controller and service over and over again by changing the filter based on what we want returned. Read more “Building Cross Platform Apps with Visual Studio – Part 3”

Lets reset a bit on our project. We are starting to look at building an app that will be able to run on iOS, Android and Windows. There are a couple of ways to doing this, natively or cross platform approach. If we were to build a native app for 3 platforms we would have to code in 3 different languages and use 3 different IDE’s. (Not counting a tool like Xamarin). We are also looking at the multiple stack developer who has a lot of “web” knowledge. They know how to build web apps and their skills can translate well to this cross platform development. We will be using HTML and JavaScript to build this app. Most importantly, we will be using Visual Studio to create our cross platform app.

The app can be anything, but in this example it is a drink recipe app. Categories -> Results -> Details. That is the flow of our app. We will be using a theme from Bootstrap to make it look pretty and responsive for multiple screen sizes. AngularJS will be our JavaScript MVC Framework for the back-end. We left off with a basic “barebones” app structure that we will build upon.

Lets Begin

If you don’t know it already, mobile apps are all the rage. From social networking to pictures and videos to gaming, the app ecosystem is where you want to be. But what if you are a “one-stack” developer? What if you only know HTML/JavaScript? What if your expertise lies in Web Development? Well, they all have their challenges but over the next few articles I will try to demystify the mobile development process especially when it comes to cross platform development. The “one-stack” developer has is a bit easier. They know what the hardware will be. They know the screen size and capabilities of the device. They can reuse code over and over again and create some high quality apps. The “multiple-stack” developer has an advantage as well. They know how to code for multiple platforms. They know what may or may not be possible for each of the platforms. Lets look at the “stacks” and define them a bit.