This project uses the Houndify Android SDK and React Native to create an Android tablet app that can be used as an interface for a smart mirror. This is built on the Android Houndify SDK Sample Project v0.2.17.
- OK Hound Phrase Spotting
- Native Weather Cards
- Able to turn a lamp on or off
- Shows top news headlines of the day
- Speaks and displays answers to various questions
- JDK 7+
- Android SDK (I recommend downloading Android 5.1 and 6.0, but download whatever your device needs)
- NodeJS v0.12+
- npm (v3.0+ preferably)
- Clone the project.
- Install node modules.
npm install
- Download and install Genymotion. Then, setup a Genymotion Emulator. I set up a Custom Tablet running Android 5.1.0 on API 22.
First, you need to set your Houndify CLIENT_ID and CLIENT_KEY values in the Constants.java file inside the src directory. You can get these by registering a client on Houndify.
After running npm install, navigate to the root directory and start the React Native Packager:
cd /path/to/react-native-houndify
react-native start
After completing all the steps above, open up your Genymotion emulator and build the application using Android Studio.
Since we are using React Native, we can develop locally without recompiling the app when we are working on the user interface.
Note that the React Native Packager always has to be running. Refer to the React Native Setup section above for details.
- Open the root folder in a code editor of your choice. I use Sublime Text or Atom.
- Edit any of the JavaScript files.
index.android.jsis the main Android View file. - Once you save, the emulator should automatically Reload JS and apply changes.
- If it doesn't, press Cmd+M on the emulator, open the menu, and click "Reload JS".
Obviously, if you make any changes on the Java side, you will have to recompile and run your app again.
To run on device:
- Android Studio > Build > Build APK
- This will generate an APK inside build/outputs/apk
- cd /path/to/app/build/outputs/apk
- adb install --abi armeabi-v7a -r houndify-smart-mirror-1-debug.apk
- Now the app should be installed on the tablet as "Houndify Sample". But when you open the app, you will get some React Native error.
- Make sure React Native Packager is running, and your laptop is on the same network as the tablet.
- Then run adb reverse tcp:8081 tcp:8081
- Run Reload JS
- Now the Mirror should be working on the tablet.
Ping Asif or Tilo with any questions.
If you run into any issues during these steps, you can try out Stack Overflow or refer to my blog post where I have some fixes for common React Native issues.