Nine Knights of Azure: #1 Web App – Tesco Grocery Look Up

Background

I want to learn more Azure and C#, and I want to learn by doing. The other day I listened to the .NET Rocks podcast talking with Adam Cogan about his Nine Knights of Azure talk. The talk lists nine Azure services to learn first. I’m going to follow that framework while building a project.

The Project

Here’s the vision for the project. I use the Tesco online shopping site for most of our household shopping.  I dislike the user interface. What I really want is a touch screen display in the kitchen that allows me to add on items to restock the moment we use up the last one.

Knight #1: Computing: App Services

The first Azure Knight is “Computing: App Services”. To exercise these services I will make a simple web app and host it on the Azure App Services. The app will do only one thing: accept the name of a product and list the resulting hits back from the Tesco groceries web site.

Covering All the Bases

While the app functionality is simple I do want to cover all the steps that I would take on a more complicated product:

  1. Design documentation
  2. Automated functional testing
  3. Automated unit testing
  4. Continuous integration/deployment

Development Flow

The flow of development I like to follow is:

  • Write just enough documentation to be clear what you are building and why
  • Create the list of high-level tests that if they all pass then you will go live
  • For each test:
    • Write up the tests; automate the tests were possible (“functional testing”)
    • Implement the code to pass the test using test driven development (“unit testing”)
    • Refactor the code to make sure that it is clean
    • Push to source control and make sure continuous integration tests all pass
    • Automatically deploy to testing environment
  • Once all the code is built and automated tests are passing complete any manual testing
  • Push to production

Building the Pipeline

I want to learn the Azure DevOps  services so I’m going to build my development pipeline with these tools.

Setting Up the Repo

I’ve created a public Azure DevOps project here: https://dev.azure.com/davegoopot/tesco_home_automation

Project Documentation

I’ve set up the project wiki to use mark down files under the “docs” folder in the git repo. See: https://dev.azure.com/davegoopot/tesco_home_automation/_wiki/wikis/Tesco%20Home%20Automation .

Glitch and GitHub Workflow

I’m helping @mickfuzz on https://github.com/webgameclubs/edlab-gamemakers-club. Right now I’m trying to map out how we can manage the development of educational materials on GitHub and have that delivered using Glitch. This post is an illustrative example.

1. Start From GitHub

Once you’ve decided that you want to contribute then head over to the GitHub repository https://github.com/webgameclubs/ and find the repo of the game you want to contribute to. If you are contributing a new game then raise an issue in the main site repo asking for a new game to be added.

2. Fork the Game’s GitHub Repo

You won’t be able to edit the game code in the main repo directly. Rather you need to “fork” the game into your own user repo.  In this example I’ll fork “simple-game-to-edit”.

Once forked you need to note the name of the repo. Mine is “davegoopot/simple-game-to-edit”.

2018-09-15 10_54_55-davegoopot_simple-game-to-edit_ Basic game staring point for coding session.

3. Load Into Your Glitch Project

Open and existing or create a new project on Glitch. Keep in mind that if you are using an existing Glitch project then its contents are just about to be overwritten.

With the Glitch project open, find the “Advanced Options” section…

2018-09-15 10_23_36-README.md – flannel-church

…and pick “Import From GitHub”

2018-09-15 10_25_11-README.md – flannel-church

The first time ever you do this you will need to enter your username and password into GitHub. Once you are set up the first time you will not need to do this again.

Glitch then asks you to confirm the name of the repository you want to import. Here I enter “davegoopot/simple-game-to-edit”. Press “OK”. Wait a moment or two and hey presto your Glitch project has all the contents from GtiHub.

4. Make Changes Using Glitch

Go ahead and edit your code in Glitch. Keep making changes until you are happy with the result.

5. Export Your Code Back to GitHub

When you are ready to push your code back up to GitHub the in Glitch choose “Advanced Options” and then “Export to GitHub”. Make sure the name of your personal repo is still correct and press “OK” to send your changes to GitHub.

Once the export has completed, go back to your personal GitHub repo page and you should see that the changes have arrived in a new “Glitch” branch. Press the “Compare & pull request” button to merge in your changes to the mainline of your code.

2018-09-15 11_04_44-davegoopot_simple-game-to-edit_ Basic game staring point for coding session.

6. Create Pull Request Into Main Repository

The the code successfully merged into your repository you can now create a pull request to have your changed merged into the main webgamesclub repository. Press the “New pull request button”…

2018-09-15 11_23_27-davegoopot_simple-game-to-edit_ Basic game staring point for coding session.

…and this time choose to merge into the webgamesclub repo. Make sure that you give your pull request a meaningful comment so that the maintainers can understand what you’ve changed. Something like this…

2018-09-15 11_26_07-Comparing webgameclubs_master...davegoopot_master · webgameclubs_simple-game-to-

Once you submit your pull request it will be reviewed by the maintainers of the main repo and then merged into that main repo code.

Phaser Game Running From Glitch

 

Background

I’m helping https://twitter.com/mickfuzz with https://github.com/webgameclubs/edlab-gamemakers-club. One goal of the project is to allow the easy development of game building projects that educators can use in their sessions. We’re looking to cover off these two constraints:

  1. The educator should be presented with an online coding environment that is easy for novices to use and requires no installation of dev tools
  2. The coding environment should support a development workflow from git into the coding environment and ideally back into git from the coding environment.

We’ve been looking at https://codepen.io/ as a coding environment but its lack of easy git integration means we’re going to try other options.

Glitch

https://glitch.com/ is another online coding environment. It is slightly more complex for novice users than CodePen, but in return is also more capable. Glitch does have direct support for import and export from git repos: see their documentation.

…But Does Glitch Work for Phaser.js Games?

In this post I’m going to walk through setting up one of the existing Phaser.js games in Glitch and working through the code session sheet in Glitch.

Importing CodePen Into Glitch

Let’s get started with this basic game made by Mick and friends in CodePen: https://codepen.io/mrmick/pen/wXMMXR.

2018-09-07 07_24_59-Simple game to edit

CodePen lets you export a project to a zip file. From the export I’ve got an index.html file and an index.js file. I’ll import them into a new Glitch project: https://glitch.com/edit/#!/fertile-origami. One small wrinkle with Glitch is that you can’t directly add a content folder. Rather when you add a new file you include the path in the file name, i.e. to add an index.js file in the js folder you add “js/index.js”. The import worked fine and the basic game runs fine in Glitch.

Running Through the Session Steps in Glitch

The next steps is to run through the tutorial steps in the Glitch environment. The tutorial has these parts:

  1. Make some code edits
  2. Update the assets

How Easy Are the Code Edits?

Edits are really easy in Glitch. The layout of the interface differs from CodePen in that it doesn’t try to squash the output window into the same screen as the editor. Rather Glitch has a “️Show Live” button that then opens the output in a new browser window. This is a trade off:

  • CodePen gives faster feedback as the changes are visible as you are typing
  • Glitch gives much more room to edit code but the changes are in a separate window

Despite being in a separate window the changes are instantaneous. Change the value of game.stage.backgroundColor = '#81dafa'; and the game window changes colour almost as soon as you have stopped typing.

How Easy Is It To Use Assets in Glitch?

Using assets, e.g. image files, is not seamless in Glitch. The way that Glitch wants this to work is for you to add media files to their “assets” section. When you add the asset it is added to the Glitch content delivery network (“CDN”) and assigned a unique identify. This means that rather than referencing say,

var sprite = "assets/player.png";

…instead your code would need to be along the lines of,

var sprite = "//cdn.glitch.com/bab20fc1-f1c8-4cea-be3a-ba6b02b4e63f%2Fplayer.png?1536480377832";

Beyond the obvious complexity of the code this has a couple of downsides.

How Do You Update Assets in Glitch?

If you take the simple approach of updating your player.png image and dropping it back in Glitch then you get a whole new web address. This means that you update a new image in the assets folder but the image doesn’t change in your application. To get your application to change you have to go into your application and change the web address in every place your new image is used. This is going to be really confusing for new coders.

What Happens to Assets When You Export a Project to GitHub?

Glitch has some nice GitHub integration (see their video: https://youtu.be/aWvTqHNDi_Q). So what happens to the assets hosted on the Glitch CDN when you export your code to GitHub? After some experimentation it turns out that your assets aren’t saved to GitHub. Rather a .glitch-assets file is saved to GitHub. The assets file is a look up of asset names to CDN web addresses. Here’s an example snippet:

"name":"player.png","date":"2018-09-09T08:06:17.832Z","url":"https://cdn.glitch.com/bab20f

Does This Mean Glitch.com Is Unusable for the EdLab Game Making Club?

It’s not perfect but it will do. Mick has some good advice on GitHub. It’ll do for a beginner, just need to get the GitHub pipeline working.

Programmatically Creating a CodePen

Background

I’m helping https://twitter.com/mickfuzz with https://github.com/webgameclubs/edlab-gamemakers-club . I’m trying to find a way to create https://codepen.io/ environments automatically from the GitHub repo.

How Can I Create a New Pen Using Code?

There is an API documented here: https://blog.codepen.io/documentation/api/prefill/

I’d like to test it. Can I do that on CodePen itself? Here’s a work in progress: https://codepen.io/davepottssoftware/pen/XBvLjW?editors=0011

Initial Attempts with JavaScript Fetch

If you follow the link to the CodePen above you’ll see that I can run the sample HTML form to create the pen just fine. I can’t seem to make that work with a JavaScript Fetch request.

The way that CodePen responds to a call to its API is to send an HTTP 302 redirect to load a new Pen with the values set up as per the API parameters. It seems to use the “codepen_session” cookie to then know what details to load in the resulting Pen. This new Pen is not saved at this point. It needs user interaction to be able to save the resulting Pen.

Hypothesis for How To Create Pens From GitHub

I’m going to try to create a button in the readme.md file shown on GitHub that will take the contents of the files in the repository folder and create a new CodePen Pen from them.

CodePen.io Won’t Allow Python Files – Use Glitch.com

I’ve started experimenting with Brython, the project that allows you to use Python code in your browser. The first problem I’ve hit is that CodePen.io doesn’t let you edit Python files in projects.

We need an online coding environment for the Manchester CoderDojo so I’ve switched to Glitch. That works just fine. See: https://glitch.com/edit/#!/mcr-coderdojo-jul2018

Brython: Python for Scripting Webpages

I’ve just discovered Brython a project that let me script webpages using Python instead of JavaScript.

Getting started is really easy:

  1. Import the brython.js library
  2. Add an onload handler to your <body> tag to boot Brython
  3. Write your code inside <script type=”text\python”> tags

Here’s how to use the translate function code from my previous post.

Note that the translation won’t work unless you set up your own account key on the Google Translate API. Drop me a line if you’d like an IP white-listed.

I’m sure there will be gotchas using Brython. I will spend some time investigating further.

Google Translate Whispers Game – Calling the API

Objective

For the next Manchester CoderDojo #3 son and I plan to run a HTML/CSS/JavaScript sessions for the attendees to build their own game. The game idea is to use multiple iterations against the Google Translate API to mangle an English phrase and see whether the players can guess what it was. As this is aimed at notice coders we’d like it to be:

  1. Friction-free to get started – no installing stuff
  2. As little boiler-plate typing as possible – fill in the blanks and tweak rather than staring on a blank page and typing

Starting Point

We know what we’re going to use for the web page stuff:

  1. Hosting the web pages we’ll use CodePen – simple interface and easy sharing
  2. Writing HTML and CSS we’ll use the editor from HTML CheatSheets as a way to get started editing snippets of web code without needing so much typing

What Next?

The next thing to sort out is how to make the basic call to the Google Translate API. We need something that hides the complexity of the API and leaves an interface something like:

translateFromTo("This original text", "english", "french");

Calling the Google Translate API

Google needs a few details to be covered off before you can actually use their translation API.

Google Cloud Account and API Key

You can’t just call the translate end point. You need to have a Google Cloud account set up and create an API key to access the translation service. You end up being on the hook for usage of the API key. The problem from the CoderDojo perspective is that all the attendees are going to need know the key, even if buried in a library, to be able to make translations. Here’s the plan:

  1. Lock the API usage down to specific IP addresses. All attendees are likely to be using the site wifi so presenting to Google as the same IP address. These are settings Google Cloud Console lets you change
  2. Put a reminder in my calendar to turn off the API once the dojo is over

Implementing the Library Function

Blocking Network Calls

Modern JavaScript is all about asynchronous event-based programming. While this is great for building responsive user interfaces it is a terrible model for new coders. It’s just too conceptually difficult. I want the translateFromTo() function to block the program execution until it synchronously returns a value. For synchronous HTTP requests out of the browser you need to turn to the old-school XMLHttpRequest and turn off the async flag when constructing a request with open().

Using the Google API Key

The other wrinkle to be aware of when implementing code that calls Google APIs is to pick the correct method for authenticating to the API service. The Google documentation tacitly makes the assumption that you’ll be using the OAuth service to get your users to authenticate through to Google before being allowed to use the API. This is not what we want for the CoderDojo. Rather, as described above, we want to use the simple API key. The use of the API key involves adding a key= parameter to the request URL. The Google documentation for how to use the API in this mode is here.

The Code

Here’s the full code for the function:

Deploying Into CodePen

The final step it to load this code into a CodePen.io pen. This requires clicking on the settings cog of the JavaScript panel and adding in the file as an external resource. To host the resource from GitHub I’ll use the RawGit CDN Service.

You can see the CodePen for yourself here: https://codepen.io/davepottssoftware/pen/dKNXaK