Scan a QR code with your mobile camera and see what' inside the box.
Create a box, add a list of the things stored inside the box, print the QR code and stick it on the box, and never open box after box again to search for something.
This is a test app I made to learn how to implement an agumented-reality-like functionality. The idea is based on some tweets from WesBos.
I used Python for backend with the Django framework:
- I created tests for the backend.
- I developed views for creating, deleting and editing boxes/containers; and for printing QR codes.
- I explosed a JSON view as an endpoint for getting boxes data.
- I added a signal to create the QR code after creating a box.
I used vanilla Javascript for the "QR scanner" client:
- I implemented localStorage as a cache to prevent fetching the backend each time a QR is read.
- I used getUserMedia() to access the camera.
- I'm using browser built-in BarcodeDetector feature.
- I used fetch to make HTTP requests.
Client: Vanilla Javascript
Server: Python, Django
- Clone this repo
- Create a Python 3 virtual environment
- Install the dependencies:
$ pip install -r requirements.txt- Run the Django local server:
$ python manage.py runserver- If you want to test it with your mobile device you has to share your local Django server with a tool like ngrok:
$ ngrok http 8000- Create a .env file inside the backend directory and set the BACKEND_URL environment variable with the hostname ngrok gave you. This will setup the ALLOWED_HOSTS and CORS_ORIGIN_WHITELIST settings:
BACKEND_URL='https://425e-190-92-102-253.sa.ngrok.io'