Hercules React Native to XRE - Initial XRE implementation

Key Information

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 piece 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.


We have run a challenge previously to prove out accessing React Native messages over websockets.  This challenge will wire in a few specific XRE messages that can be tested with an existing XRE receiver that will be provided in the forum.


The goal of this challenge is to implement a proof of concept with these simple requirements:

1.  The proof of concept will be implemented in React Native and deployed on Heroku
2.  The server will accept a web socket connection from the client
3.  The client will send a JSON formatted message to the server (onConnect)
4.  The server will reply back with some basic XRE to open the connection and draw a gray rectagle with the text "Click me", in white, over the top of the rectangle / view.
5.  The XRE receiver will draw the text and view
6.  The user can then click the "Click me" text and a message will be sent to the server for the click.
7.  The server will respond back with updates to change the "Click me" text to a green colour and update the text to "Clicked!"
8.  The XRE receiver will draw the updates


The server side "screens" will be implemented in React Native, using React classes.  Please pick reasonable matches for XRE to map, like View and Text.  You will need to map the functionality of React to XRE.

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.


In the forum is the XRE specification.  It has a section called "Establishing the XRE Connection" that should be followed for the connection flow.  In addition, you can use Charles to see the messages sent back and forth between the HTML XRE Receiver provided and the remote server to get an idea of the flow as well.


Your submission should just be the codebase with a README documenting:

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

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





Final Submission Guidelines

Please see above


2017 TopCoder(R) Open


Final Review:

Community Review Board


User Sign-Off


ID: 30056474