The MAC Scanner Project (Part 1) – The interface

OK, so maybe this is  an opportunity just to show off my latest project, but it’s more about me sharing the new programming techniques I learnt on the way to creating this project.

So the plan for this project was to have an program that scanned the building for all connected MAC Addresses, check them against a database of ‘registered addresses’ (this is so didn’t face issues with 1 person having more then 1 internet enabled device) and display who was in on the MK Maker Space website

At first, when I started this project, I had no intention of creating a web-app for this scenario, mainly because I had done very little ‘web development’ (not counting WordPress) and thought it would just be easier if I made a native app that would be run on the same PC/server as the daemon (at that point I hadn’t even thought to use a database, but planned to transfer the data via a json file)

So without hesitation, I dived straight into python and tkinter (my most familiar interface creator) and before long I had a usable interface.

At this point I thought: ‘Great, all done!’ and while it didn’t have an awful lot of functionality, it did get the job done.

A few days later, I started to think a little more about what I just created. Sure, it was usable, but was it practical? I had programmed it so it had to run on the same server as the daemon. What if the server wasn’t connected to a monitor? As well as this it was a desktop only application, there was no mobile application.

It was at this point when I started to think whether there might not have been a better way to implement this idea. So I stated looking into making a web-app.

I chose Flask, purely because of its  simplicity. It seemed logical and straight forward, which was what I wanted. I didn’t want to spend 2 months learning a framework before I could use it. Who’s got the time for that nowadays? ;p

I decided to write the whole program from scratch. This time I would include some sort of database, so I could implement and expand it in different ways:

1. I could have a much cleaner data transfer between the client and the daemon.
2. Users would be able to make their own account and manage their data from a control panel.

I first stated of in Bootstrap Studio, a great tool if you don’t want to spend hours on designing webpages (like me)

I created a login view first, which was literary just a default template with a different icon (yes, maybe I am lazy!). I did the same for the account registering page.

After this, I made the home page by adding a navigation menu, and some and information placeholders (to show stats like who’s been to the shed most etc.)

I then made the Add MAC Address page, which users use to add their mac address to the system. I then loaded all the pages in to a flask project and started work on the ‘fun’ part.

After some consideration, I decided to use stormpath to manage the user accounts. essentially it manages auth and register parts of an app. Since I started using it, it has become my favorite way of implementing user authentication.

So, I started writing the code. Since I have never used flask, it was a bit of a learning curve. I found a set of tutorials that I found very helpful (available here). After much time had elapsed, I had a presentable flask app that could be used for this project.

All the code is available from my GitHub repository here. Mind you though, its nowhere near finished 😉 Because of this I haven’t gone into detail about the back-end of the app because its likely to change (Dan, another member, is making a completely independent program that scans the network and communicates with my web app via a database), but when everything is finished, I’ll try and document and explain it all in detail.