Key Information

Register
Submit
The challenge is finished.

Challenge Overview

This challenge is part of a new project involving React Native.  The eventual goal is to have a way to build React Native apps for Hercule's embedded devices that communicate with the device over websockets, using the proprietary XRE messaging protocol.  They would like to see if we can build a React Native translator that sits on a server and communicates with clients, sending them XRE messages to draw the React Native components.

Basically, we are going to stream apps to a client and update the client based on actions that raise events from the client to the server.

This challenge will finish implementing keypress notifications and will implement Timer support

Requirements:

Basic keyboard support has been added recently to the codebase.  We need to formalize this to ensure:

* We can handle modifier keys like Shift, Ctrl, and Alt
* All keys can be sent succesfully
* The code is generic enough to handle other device keys.  The eventual apps will run on embedded devices that are controlled with TV remote controls

In addition to making sure the keyboard handling code is proper, we need a new app added that can capture keyboard input and output to the screen:

* Key code
* Modifier keys
* Any other information accessible about the key press

We'll use this test app to test the keyboard integration and also to ensure that the integration with the remote control works properly as well.  Please make sure that this all follows the XRE specification (provided in the forum).


Timers:

We need to support the React Timers and the React Timer Mixin (https://facebook.github.io/react-native/docs/timers.html).  Please provide an additional demo app that can be run in XRE that shows different options and interactions with the timer mixin.

Server-side management

Note that the server will have to keep state about the client, which is fine.  We just need to make sure that this is per session, since different users may do actions that affect the session state of the client running the XRE app.  

Native validation

To prove out the solution, we need to ensure that a native mobile build of an app matches what is displayed in XRE.  Please provide documentation on how to compile each example and run it in Android or iOS, and please also provide this information as part of your submission video.

Background

The server side "screens" will be implemented in React Native, using React classes. 
The goal is to make sure the React Native definition is generic, not custom to XRE.  The normal React Native development process will apply on the server.
 
Submission

Your submission should be a patch file in Git against commit hash 
20e77248f4e576d02ea9e75456b568d3a089adde

NOTE:  You are free to change, reorganize, and refactor the code as you see fit.  You are not required to stick to any past decisions on architecture.

Please make sure your updated README covers:

1.  How to deploy the server-side to Heroku
2.  How to configure the client XRE receiver to connect to the server and work with the different apps available
3.  What the React Native app looks like

A video is required, but it only needs to cover the validation (XRE and native), not the setup.  Having the setup details only in the README is fine.

Links:


https://facebook.github.io/react-native/���
https://www.youtube.com/watch?v=hDviGU-57lU
 


Final Submission Guidelines

Please see above

ELIGIBLE EVENTS:

2017 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30056776