The beauty of life is the journey, not the destination.

Here I share the trials and tribulations of my becoming a software engineer, coding tips and tricks, and my adventures on the rocks.


Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Getting Started with Building An App with React Native, Genymotion, and Watchman

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Some Friday nights I like to hang out with my friends. Other Friday nights I enjoy going to the movies. This particular Friday night, I wanted to learn how to build a mobile app using react native. And I’ve heard great things.

Anyway, maybe it was the slow internet at my parents’ house in CT (Bay Area high speed internet, oh how you’ve spoiled me) or the many months it’s been since I’ve done any sort of mobile app development, but just getting to the first line of React code was a process for me. I’m putting together this tutorial specifically for those who have gone to the Facebook docs to learn how to start developing an android app with react native on a Mac, but ended up jumping around back and forth in the tutorials, and hitting random errors with watchman or Genymotion, for which googling does not always turn up any answers.

Here are the steps I followed, step by step, based off the React Native documentation here, with the errors I hit and how I fixed them. This tutorial assumes basic knowledge of node/nvm, bash, brew, and Mac OS X.

– OS X
– git

Basic Setup
1. Install node.js 4.0 or newer
2. brew install watchmaninstall to avoid hitting a node file watching bug
3. brew install flow to use flow

Android Setup
This is the part that took me the longest. Unfortunately (or I guess fortunately) I just bought the new Nexus, but no USB cable that can plug it into my laptop. So, I had to install the Android SDK and an emulator so I could work on my React Native for Android on my laptop.

1. Install the latest JDK if you don’t already have it
2. brew install android-sdk
3. Define the ANDROID_HOME environment variable:
export ANDROID_HOME=/usr/local/opt/android-sdk
Add the above to your ~/.bashrc or your ~/.bash_profile, keeping in mind that if you do add it to your ~/.bashrc make sure you’ve added source ~/.bashrc to your ~/.bash_profile. Once you do this, you’ll need to restart your Terminal before the environment variables will be applied. (What is all this?)
4. Start a new shell and run android. The Android SDK Manager should open.
5. Install the following:
– Android SDK Tools
– Android SDK Platform-tools
– Android SDK Build-tools
– SDK PLatform
– Intel x86 Atom_64 System Image
– Intel x86 Atom System Image
– Android Support Repository
6. Click “Install packages…” and a pop up will show up. On the left list of “Packages” click through each one and check the ‘Accept’ box on the right. Once all have been checked, click “Install.” Go grab a hot chocolate. This will take a while. While that’s installing, feel free to do the next step (initializing your project).
7. Once that is done, go back and check that all the packages have installed. When I did this, not all of them ended up installing so I had to check them again and re-install those.

Initialize Your React Project
1. Run npm install -g react-native-cli
2. In the directory where you want your project, run react-native init MyReactNativeProject

Install Genymotion
I decided to set up Genymotion instead of a stock Google emulator, but I may end up switching anyway since it’s free only for personal use.

1. Download Genymotion here. You’ll have to make an account. Remember your username and password as you’ll need it later.
2. Open Genymotion. If you don’t have VirtualBox it may ask you to install it (I already had it).
3. Click the plus sign “Add” to add a device. (You’ll have to sign in).








4. Select a device and wait for it to be retrieved and deployed.
5. Finally, back in the screen that lists “Your Virtual Devices” select the device you’ve just installed, and click “Start” in the top left corner. Your device should pop up and look something like this:
Screen Shot 2015-12-20 at 4.52.53 PM






Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.






Run Your Project
This is where I hit several issues.

1. cd MyReactNativeProject
2. react-native run-android --stacktrace. The stacktrace part is optional, but helpful.
This step should open up another terminal window.

Error 1:
SDK location not found. Define location with sdk.dir in the file or with an ANDROID_HOME environment variable.
Solution: Make sure your bashrc is configured correctly with the environment variable in Android Setup Step 3, and that you source it in your bash_profile. If that still doesn’t work, another alternative is to go into the android directory, create a file called and in it add sdk.dir = {Path of your android SDK}.

Error 2:
Screen Shot 2015-12-19 at 12.35.03 AM










I got the above error when I tried step 2 again, and when I reloaded the JS I got a slightly different but equally useless error. However, I checked the newly opened terminal window for any errors and I got something like this:
launchctl: Couldn't stat facebook.watchman.plist: No such file or directory

brew uninstall watchman
launchctl unload ~/Library/LaunchAgents/com.github.facebook.watchman.plist
rm ~/Library/LaunchAgents/com.github.facebook.watchman.plist
brew install --HEAD watchman
react-native run-android

Error 3:
Finally I got another error that looked like:
ERROR connect ECONNREFUSED /usr/local/Cellar/watchman/HEAD/var/run/watchman/amira-state/sock
Error: connect ECONNREFUSED /usr/local/Cellar/watchman/HEAD/var/run/watchman/amira-state/sock

Add export TMPDIR=/tmp to my .bashrc file.

The above took me a few hours what with all the installation and trying to figure out all of the steps I needed to do, and a decent amount of time googling the errors I kept hitting, which were not easily findable (and sometimes I had to do things in a certain order before it’d work). If you come across this blog post and find other issues, please post them and their solutions and I’ll add it to this list!

Until then, have fun building your app!! Next up for my blog, cool tips/tricks I discover as I build in React Native!

FitRPG: The Gamification of Fitness

An RPG mobile app like no other – get fit and turn your fitness data into skills, experience points, and HP to engage in battles against your friends

Fitness trackers like Fitbit, Nike FuelBand, and Jawbone all work to solve a common problem– motivating users to get fit and stay fit. When I first started using Fitbit, I was inspired by seeing my data every single day. My dashboard was either a blunt reminder that I was not moving very much, or a beautiful screen filled with all the goals I’d accomplished that day. I felt rewarded when I received a badge or passed a fellow Fitbit friend in the rankings. But after a while, the badges were all the same, and I lost motivation to try to surpass my friends.

Screen Shot 2014-06-09 at 12.20.15 PM

Why? Because a fitness tracker is just that–it tracks your fitness, but it doesn’t add any additional features or rewards for motivation. That’s where FitRPG comes in, a mobile app that uses the data from Fitbit and turns it into a fun game that constantly inspires the user to walk more, sleep more, and work out more.

Our team (Amira Anuar, Conor Fennel, and Matt Gutierrez) worked for 2.5 weeks on this Hack Reactor group project. We created an app that allows you to sync your Fitbit and see your steps, sleep, logged workouts, and more become transformed into strength, endurance, HP, dexterity, and other attributes your character can use to battle your friends or go on quests.

   screen1 screen2




















Sleep to revitalize your HP. Log workouts to increase your strength and dexterity. Increase your steps to improve your experience and endurance.  Battle your Fitbit friends to steal their gold. See how you rank against other players in the leaderboard and increase your ranking by battling bosses and leveling up. Go on timed solo quests, which range from walking 5,000 steps to running a marathon. Win gold and experience if you succeed.

To get started, just download the app from the Google Play Store and log in with your Fitbit account. For any further questions, you can view the FAQ here or email our team at iOS version coming soon.

Take fitness to another level, literally.

Mobile Authentication in Ionic with OAuth Through External APIs: Fitbit Pt 2 (Client)

In this post I talk about how to hook up the server to the client side so a user can open your app on their phone and log in through their Fitbit account. If you haven’t read the post on setting up server for mobile OAuth, I recommend you start with that first.

Client-Side (Requirements: angular.js and ionic)

Step 1: Create the Login Service 

First, you will want to create the login service, in which you inject localStorageService, which you would need to install from here and then require in your index.html. Once you’ve done that, this is what your service should look like:

Screen Shot 2014-06-15 at 8.47.54 PM

 The url is what the server url you have that redirects a user to be logged in.  Line 9 will open an in-app browser with no toolbar or url displayed. Line 10 adds a listener called ‘loadstart’ which is called every time a new url is being loaded in the in-app browser. When this in-app browser opens, the view should look something like this:

Screen Shot 2014-06-15 at 8.53.23 PM
















Once the user logs in, he/she is redirected, as per the server. The url will change, as per the server. The rest of the code basically listens for the url that will eventually have the oauth_token that we want, as well as the user id. This particular code also listens for the JSON web token. Once you receive the token/information you want, via the URL from the server, you use localStorageService, which is basically a caching service, to store the tokens locally.

Step 2: Authenticate the User

We then want to have a controller that checks for the locally stored tokens, and if they’re there, we can direct the user to the authenticated view (line 7), and if not, we let the scope know that the user is not authenticated (line 11). All line 6 is doing is retrieving the user information from the database, using the userId to make that query.Screen Shot 2014-06-15 at 8.59.05 PM

On line 14, we have the function for logging out, which simply clears the localStorageService of all saved information, and essentially resets the ‘session.’ Line 16 basically refreshes the page, which would be unauthenticated, and line 11 would be true, and the user would be redirected to the login page, where they will be given access to something to click that will run line 21.

Step 3: Putting It All Together

Finally, we just need to hook up the views and the controllers.

Screen Shot 2014-06-15 at 9.02.49 PM

Line 4 is where we can insert our views for the app, and no user can see them unless they are authenticated. If there is no user saved to local storage, then lines 7 to 18 would show, which would be your splash screen with a button allowing the user to log in, such as our app shows below:

Screen Shot 2014-06-15 at 9.07.07 PM










And there you have it! Shameless plug: If you have a Fitbit and want to make fitness more fun, check out my app in the Google Play Store!