IoT Global Awards

The mission was clear. Build a platform for the best and brightest, the key players making a difference in the IoT space. Assemble a panel of expert judges to identify who among those are the most deserving of recognition. Spread their magnificence across the web via WKM Global’s ever-expanding network of IoT brands and partners.

• Build and configure a web server on cloud hosting.
• Set up version control using Microsoft Azure DevOps.
• Configure the Gulp toolkit to automate CSS and JS tasks.
• Ensure the user journey to enter the awards is simple and easy to digest.

This was a daunting task especially considering the volume of documentation and sources I had to consult before it all came together. In the end, I’m pretty happy with the result.

I installed a LAMP ( Linux, Apache, MySQL, PHP ) stack with NGINX as a reverse proxy on an Ubuntu OS and took many steps to secure the server.

I then installed a Let’s Encrypt SSL certificate using Certbot which automatically renews the certificate every 3 months. All data sent to or from the awards site would now be encrypted by the HTTPS protocol.

To that point I had been working solo, but the team was growing and we needed to add version control to our workflow. Enter Microsoft Azure DevOps.

Step one involved installing a self-hosted Linux agent which meant our repo would be stored on our server and we would avoid the frequently occurring commit timeout I experienced with an Azure Hosted agent.

Next, I had to configure our pipelines. We needed 2 service connections:

• The first was for git and had to be authorised by a GitHub account.
• The second required SSH settings for our server.

The pipelines include 2 main groups, namely builds and releases. I set the build pipeline to use continuous integration, triggered by the completion of a commit. The build task copies our repo files to the website folder using the SSH service connection. The release pipeline could be configured for continuous deployment and have tasks applied to it, but we did not have need of this at that time.

The last step involved all authorised users cloning the repo. To lessen the learning curve, we opted to use SourceTree, a graphical user interface for git.

Now that the team all had access to the repo they needed to install Gulp and its dependencies. Gulp automates tasks so we wouldn’t have to waste time doing them manually for every project. These tasks include decreasing the file size of CSS and JS files to help the website load as quickly as possible when viewed for the first time.

I configured the CSS task to use Autoprefixer before minifying and the JS task concatenates all JS files into one, removes debugging code and minifies ( or uglifies as the JS community calls it ). Finally, both tasks include Browsersync which watches for any changes made and updates the site without having to refresh the page. In short, Gulp keeps everyone on the same page and saves a ton of dev time.

We also needed to avoid any issues with conflicting databases. To ensure everyone was in sync, each of them had to be given rights on the server to use a SSH MySQL tunnel. The tunnel is used to connect their local WordPress installation to the remote development site database.

With all the pieces in place, I replicated the DevOps process for another project that the rest of the team had been working on and then got to work on the awards site.

I was tasked with redesigning the site and building a custom responsive WordPress theme, the database, and the AJAX entry process. Users had to be able to easily find any information they needed about the awards, but most importantly they needed to be able to enter without any confusion what so ever.

The entry process has 3 stages. The first is to register and we realised it would be easier to group all registration information into one form.

As you can see, the groups are clearly separated making sure the forms weren’t overwhelming in any way. If errors did occur we displayed them immediately using AJAX in line with their corresponding labels in red for maximum visibility.

The second stage is where the user enters all the details pertaining to their entry. They have the option to save their progress and come back later or submit their entry and continue to payment.

The third and final stage is where they enter their billing details after which they will be taken to the WKM payment gateway to enter their card details. The payment gateway is the latest project I worked on for WKM and you can read about it next.