Make bar hopping easier with AWS Amplify and React Native
With the easing of lockdown restrictions in Germany, people finally can visit bars, restaurants, barbershops, etc. Nevertheless, the government keeps an eye on the situation and has introduced some obligatory rules while visiting those places. Among them, restaurants must register their visitors. In case some visitors get Infection, the restaurant will inform others about the potential risks.
What happens now, visitors need to write their contact data manually on paper at every new place, also, whenever revisiting those places. After a third manually filled form, probably many of us thought that there might be a way to automate that.
And it’s not only about hygienic reasons but about privacy as well. After a few years of GDPR, where you know about every single Cookie file in your browser, I had an odd feeling that you must give your sensible data everywhere and to everyone. And you have no idea how the data will be stored, handled in case owners need to read them all (oh year, my excellent handwriting) and when will it be deleted. That was a point when I thought about the following flow:
I’m glad that they’re already some services that offer a similar kind of automatization, for example, 2FDZ. Nonetheless, I decided to implement it on my own and to play around with some new tools.
So, what do I need:
- An app that can scan QR codes and send them to a backend
- Backend with a Database and its Infrastructure
- Static website to generate personal QR code
An app
Thanks to the Expo tools and create-react-native-app, I crafted my first app to scan and recognize QR codes within a few hours 🚀. Expo provides an easy way to test and debug your app not only in the Emulator but also on an actual device. It’s only needed to download an expo app from Google or App Store and run “npm start” at the root of your project. That’s it! You’re ready to launch your new app on your device. Moreover, for Android devices, it’s also possible to share an app with everyone. You can try my prototype here: https://expo.io/@alexzelenuyk/co-collect-app .
Unfortunately, due to some limitations from Apple, sharing your apps for IOS devices is not possible. You can run your own projects only. More about it here. Alternatively, it’s possible to use Apple Testflight, but that will require a manual invitation.
Backend
When you have your app ready, you already start thinking about having a backend with a database, authentication/authorization, infrastructure (as code), etc. It seems to be a routing for a backend developer. That’s why I was pleased to discover an Amplify service from AWS. Even though it was released in late 2018, this service was actively pitched on the last AWS Summit Online this year. What is it about?
After installing the amplify-CLI tool, you can interactively set up different web-related backend components like ordering a modular kitchen: I want a Role Base Authentication with Cognito and a GraphQL API (APP Sync) with DynamoDB and … an Elasticsearch, please. Ah, I almost forget, I need a separate environment with continuous deployment.
Under the neath, amplify will generate necessary files for you, like some Cloudformation stacks, Graphql schema, etc. Here is my example.
In the end, you pay “only” for the build duration and the hosting storage, more about pricing here.
Static website
Another create-X-app project will save you some time for preparing a new React project. After a static page is ready, another question popped up: how to make it publicly available in a cost-efficient way? One obvious solution would be to use AWS S3 with static website hosting (+ Cloudfront CDN). And again, amplify can be very helpful with that. Thanks to its hosting category, just with a few commands, your website will be up and running, and your infrastructure for it will be in your code.
That would be it. With efficient tools, like Expo and AWS Amplify and just combining some small pieces of software that are as complex as “Hello world,” you can build a Product that can potentially make our day-to-day life a little bit more comfortable.
I hope it can inspire someone to try out their own ideas asap. And if you wish to contribute to my prototype, drop me a line. Probably we can hack it together!
