Hello, my name is Ben Vanpoucke and I study New Media and Communication Technology at Howest in Kortrijk, Belgium. As an assignment for school, we needed to make an IoT-device. Renting accommodations through Airbnb, I got the idea of opening an apartment, house, room... with a virtual key (QR code) instead of a real key. I gave my device the name 'LockChanger'. Below you can read all the steps that were necessary to make this tool. If you want to know more about me and other projects I made, check my portfolio.

Step 1: Functional Analyse

The idea became reality. Now it was time to investigate if people would like the idea. So I did some user interviews with people who are owners of accommodations that they let with Airbnb. They really liked the idea and wanted me to build it as soon as possible. So I started the rest of the process. I did some concurrence analysis and wrote down some personas. After that I made some user stories and card stories. Then I made low fidelity wire frames and did user tests on it. Based upon the feedback I received, I changed the frames.

Step 2: Collecting the Materials

Before I started designing the website and making my tool, I needed to make sure that I had all the required parts for my device. I started looking in my toolbox and wrote down what I needed to order. Here you can find the entire bill of material. These are the main parts:

1. Buzzer

2. LCD display

3. Led bicolor

4. Lock

5. Raspberry pi

6. Camera

7. Scanner

8. Wood

1NMCT4_Ben_Vanpoucke_BOM_bill-of-materials_final.xlsx
Download

Step 3: Database

After buying the materials and doing some research it was time to make things real.

I started to create a entity relationship diagram, made a database of it and inputted some data. Soon it was clear there were some mistakes so I did it again and again till I thought is was good enough. Its very dynamic so you can add, update or remove some fields.

For simplicity and better results I linked the scan tables also to users and accommodations.

I made some stored functions and stored procedures to make things easier on the website.

For creating this entity relationship diagram I used draw.io.

Attached to this step you can find my Mysql dump. So you can easy import it.

Dump20180617.sql
Download

Step 4: Design the Responsive Website

I was thinking how my responsive website must look like. Before I could do that, I had to look back to the functional analyse that I made and search for inspiration and interesting patterns.

First, I made my design in Adobe XD. In the images on top you can see that I used layout and baseline grid to position the content good.

The font I used was Robotto. The images I used were cco License from pexels.com.

The design was approved by my teachers, so I could start programming. I wrote the site in HTML - CSS - Python (Jinja2 and Flask).

Attached to this step you can find my design in web.xd.

web.xd
Download

Step 5: Fritzing Scheme

After a few weeks, my components were delivered so I could start building my device. First of all I made a scheme to make sure that I would connect everything the right way.

I used a 6 pin GPIO to connect with the display. The camera can be plugged directly into the raspberry pi. I chose to connect the barcode scanner with a level convertor to convert the 5v to 3.3v so I could set up a save serial communication with the pi. The bicolor led uses 2 gpio pins.

The transistor also needs one gpio pin. Then, I connected the 12v to the lock and trough the transistor to a common ground. Make sure you use a diode to protect your components.

The buzzer is connected with the barcode scanner. Another GPIO pin is also connected to the buzzer so I can create some sound with code. Watch good: 2 diodes are used for this.

For creating this scheme I used fritzing. You can the scheme attached to this step.

fritzingschema-breadboard.fzz
Download

Step 6: Lazer Cutting and Connecting

Together with a friend, I lasercut the woods. I choose multiplex wood of 8mm thickness. Once that was done, I pushed my components in the frame. I mounted the components without a placeholder with some screws into the back of the plate.

Then I installed the barcode scanner with a level convertor (5v to 3.3v) to connect with the raspberry pi on the TX en RX port (serial communication).

I connected the display to the raspberry pi and used a potentiometer for the intensity.

At least I installed my lock with the 12v adapter. Make sure you use a transistor and a diode when doing this.

Attached to this step you can find my laser cut scheme in Adobe illustrator

lockChanger_lasercut.ai
Download

Step 7: Writing Some Code

Now its time to make sure all components do there job. So I wrote some code in python and deployed it on raspberry pi. You can find my code on Github when my teachers make this public.

https://github.com/NMCT-S2-Project-I/project-i-Ben-Vanpoucke

For programming the code I needed to use Pycharm. The code is written in html, CSS and python (Flask and Jinja)