TeamParrot is an app that reads your Slack scrollback out loud so you can listen to your coworkers while doing awesome stuff.
Because I work in a distributed company and have coworkers all around the globe, every day I wake up to a full wall of scrollback to go through. Some of it is actionable, some of it is just chatter, but its good to at least have a vague notion of what is going on.
I also value efficiency and not wasting time, so I came up with TeamParrot.
Having an app in the app store was on my Bucketlist for some time, so I jumped on this simple idea like an angry Twitter user on a chance to humiliate someone.
These days, I usually work with React and React Native seems like an ingenious way to get my feet wet in the pool of app development
Before we even start, I assume you read the official docs – they are pretty decent these days.
Starting a React Native project
Starting an RN project was pretty easy and as many projects these days, starts with a generator.
You have to install RN as a global npm module and then you generete a project, as noted here:
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
You just provide a name and then the tool creates a project for you.
The project builds in XCode and Android SDK.
Few notes about Android sdk:
- You DONT need Android studio and it is a terrible piece of software
- Android SDK is a set of command-line tools
- These tools install their own libraries, device images, etc. There are multiple versions and each of the files is surprisingly huge. That is one of the reasons that Android development is such a hassle. I would really love some cloud build system
- Emulating is also a hassle. Genymotion was good solution for me, but you need to point it at the same image files you use to build your software
Renaming a React Native project
Of course I provided a bad name and then had to rename my project. Read about it here:
Using external APIs
Your app needs to connect to an external Oauth? We got you covered!
Using libraries / internal APIs
As you may have heard, React Native does not use WebView like many other JavaScript mobile app technologies ( Cordova for example ).
In RN, higher-order native components ( sometimes big pieces of an app ) are used to piece together you interface. These components have JavaScript wrappers and you can use them as you would any React component. Because these components are pure native, the app behaves just as fast as native. Many components are already wrapped by Facebook in the official repo, even more have sprouted as npm modules. I needed Text-to-speech library for TeamParrot and I found a few.
If you are using a component/library that adds some native code, you need to link it.That means adding the native code parts to the build process of your app. Usually, the automatic tool `rnpm` will do that for you, so when you type
or
You should be done.
Sometimes it involves few manual steps – putting imports here and there in the native code.
Adding flair
Few pieces like that require fiddling with the native code are Icons and Fonts:
https://piszek.com/2017/02/01/react-native-vector-icons-fontawesome-and-others/
Files structure and isomorphic code
By default, you will have `index.ios.js` and `index.android.js` and as you can imagine – one is an entry point for your app in iOS, the other is the entry point for you Android code.
By default, your codebases are separate, but don’t be discouraged! There is one weird trick that programmers will hate you for!
Just put this both in `index.ios.js` and `index.android.js` :
import Main from ‘./main’;
AppRegistry.registerComponent( ‘YourApp’, () => Main );
That way, both of your entry points use the same main component.
My folder structure of choice is
- android
- app.js – main logic
- assets
- components – these are dumb components
- config
- index.android.js
- index.ios.js
- index.web.js
- ios
- lib
- login.js
- node_modules
- package.json
What is “index.web.js” you ask? Well, this app builds in web too! That means that I can develop my UI in chrome devtools !
Release
Is your App ready for the big day? Not so fast! You have to submit it to the review.
Releasing in App Store
- Get Apple developer account
- Register yourself in itunesconnect
- Create your provisioning keys in XCode
- Create a bundle
- Sign it
- Upload to App store
- If you want to invite beta testers, you still need to submit it for a review
You want to update your app post release? Dont forget to configure CodePush!
Maketing
That is an entry even in itself and maybe a post for later!
But with these steps you should be able to make most of the simple apps out there.
Some other valuable links
React Native Isomorphic app over the weekend
This article is part of my “React Native Isomorphic app over the weekend” series. It shares the problems I encountered during development of TeamParrot and Headstart Journal.
[display-posts tag=”React-Native-Weekend” wrapper=”ul”]
