Knack Hack: Native Spanish App

Building a native application with Knack

I wanted to create an easy way to manage my Spanish vocabulary cards and have daily reminders for new words. I ended up building a native Android and iOS application using React Native, a Javascript framework for building native applications. I used Knack, a codeless cloud platform, to store my data and create users. Amazon Web Services ties my native application and Knack database together, using AWS Lambdas to automate push notifications and Knack user authentication / creation.

Knack Setup

Using Knack, I created a few objects to get going that will store the data:

• Vocab — object for flash card style information
• User Vocab — create a connection between vocab cards and users
• Accounts— users to store push notification token, email, and vocab connections.

Quickly building out a database with objects and users is easy with Knack (and requires no coding)

AWS

I used Amazon Web Services to automate push notifications and connect Knack with my native application.

I used API Gateway and Lambda in order hit an authentication endpoint and then trigger a lambda that would either create a new Knack account object or fetch the account’s vocab cards using the Knack API.

API Gateway that triggers a Lambda function connecting Knack and React Native App

I also setup a CloudWatch Event (cron running daily) that would trigger a Lambda that would create a push notification with a vocabulary card.

I used https://expo.io for rapid react native development and handling push notifications

On the react native side, I used native base for UI components, react navigation for routing, and redux for state management.

Some screenshots from the android version of the native application

I haven’t used react in a while but was happy with how easily it was to iterate on a simple idea. I’m looking forward to creating some simple UI for creating cards in the native app, adding a social element (sending to friends) and expanding on the vocabulary cards. I want to port the knack signature field to use a standard format, or build a drawing UI component to create images.

I’ve been happy with how easy it has been to iterate through an idea like this with Knack, AWS, and React Native. I’ll most likely create another article for a drawing UI component or even publishing a native app, which I have never done before. It’d also be nice to automate (maybe scrape 😈) some new vocabulary word and automate that process.

Thanks for reading and feel free to comment below with any questions or feedback : ^ )