The Story Behind Aviato

With our recent announcement about the React Native Components for activity feeds, we wanted to showcase them with a project that was not only functional but also fun to build. For those of you that haven’t seen HBO’s comedy sitcom Silicon Valley, Aviato is an application that is inspired by that of the TV series’ “angel investor” Erlich Bachman (TJ Miller). Erlich’s love for Aviato in the show is downright hilarious – it’s his baby and only entrepreneurial success, or, at least, we are lead to believe that this is the case.

💬 Pssst: Are you interested in building a chat app? If you are, make sure you check out our new React Native Chat components.

According to the interwebs, Aviato is a software aggregation program that takes all the information from social media whenever Frontier Airlines is mentioned and organizes it by region and airport, as well as lets you know which airports are hubs and which aren’t. It was also said to have been acquired in 2008 by Frontier Airlines for "a low seven figures”…

This inspired me to build a mockup app that utilized much of the same technology said to be in the app (albeit a stripped down version, for the sake of time). In the Stream version of Aviato, you’re immediately taken to a page where a paginated list of Frontier Airlines related Tweets is visible to you. The app also boasts a “like” button (in case you feel compelled to “like” a Tweet), in addition to full support for commenting your heart out and sharing your thoughts about Frontier Airlines. 😉

This tutorial assumes the following:

You have a basic understanding of Node.js, React, and JSX (with Node 10.11.0 or latest installed – brew install node) You're running macOS or can follow along on another OS (note that you'll have to run the Android emulator in this case) You have Xcode installed with Command Line Tools installed as well (https://developer.apple.com/download/more/) You have an Amazon AWS account (https://aws.amazon.com) Expo CLI installed (yarn global add expo-cli)

What You’ll Learn

In this tutorial, you’ll learn the ins and outs of building an application using our brand new React Native Components, as well as spinning up an environment on AWS (in minutes!).

The backend is powered by Serverless, a powerful cross-cloud framework that allows you to spin up a serverless API and set of workers in just a couple of minutes. For our use-case, we decided to go with Amazon Web Services (AWS).

The Config File

Throughout this of this tutorial, you’ll be required to enter values into a config.js file that is located in the root directory. Once complete, you’ll need to copy this config.js file into your serverless directory so that Lambda can pick up on the values.

Setting up a Twitter App

A Twitter app is required for this installation. Luckily, it’s rather straightforward to do.

Note that you WILL need to have a verified account in order to create an app.

To get started, head over to https://apps.twitter.com. Follow the necessary prompts and then collect the keys as required in config.js of the aviato directory.

Creating a Stream Account & App

Stream is the backbone of this application, so we’ll need to create an account and app for Aviato. Creating an account is easy, just head over to https://getstream.io and click “Sign Up” in the top right corner.

Once your account is provisioned, you’ll want to create a new app. You can do this by clicking “Create App” in the top right-hand corner. Your app name must be globally unique, so pick something interesting, and I’d recommend choosing “Development” for the environment – it makes truncating data a lot easier when getting set up.

Grab your App ID, Key, and Secret and drop it in the config.js file.

Now that you have your credentials saved, create a new “flat” feed called “timeline”. This timeline feed will store all of the Tweets that are scraped from Twitter for the @FlyFrontier handle.

Installing the AWS CLI

To get this application up and running, it’s important that you first install and configure the AWS CLI. Don’t worry, it’s an easy task. Follow the instructions below, or visit this site for detailed instructions.

Prerequisites:

Python 2 version 2.6.5+ or Python 3 version 3.3+. To check your Python version, run the following command:

https://gist.github.com/nparsons08/153019ca448a8b25a16deb3af872cf8a

To install the AWS CLI using the bundled installer:

1. Download the AWS CLI Bundled Installer

https://gist.github.com/nparsons08/ae53b6b87b158fc279ecda11f228ff45

2. Unzip the package

https://gist.github.com/nparsons08/7dbf0f719b012c8ee98529eea2960b95

3. Run the install executable

https://gist.github.com/nparsons08/b7fd6b6f1664aa176bd99041443d2ed0

Once the AWS CLI is installed, you can run aws configure in your terminal and you’ll be prompted with several questions. Be sure to have your AWS Key and AWS Secret available.

Note: You will also want to make sure that you have AdministratorAccess permissions under your IAM profile.

Now that everything is set up, Serverless will be able to successfully deploy to AWS without any hiccups. If you run into issues, double check that the AWS CLI was set up properly, that your credentials are correct, and that you have the correct AdministratorAccess permissions under your IAM profile.

Cloning the Aviato Repo from GitHub

As with any repository on git, we’ll use the git clone command to pull down the code. I’d recommend cloning the code into a directory where you usually work from, such as ~/code.

https://gist.github.com/nparsons08/51b9bdded9628a855026eaf343557365