I plan to create a web interface similar to the Otto BlueTooth App

[sfranzyshen]

This isn't a issue ... more of a question

I plan to create a web interface similar to the Otto BlueTooth App and I'm considering the possibility of reusing the react-native components from within a react web environment ... is this feasible or a waste of time? any input would be appreciated

[cparrapa]

Hi @sfranzyshen

Very valid and feasible now i do not have experience with react web but its is worth a shot if we work together. ;)

[chico]

Hi @sfranzyshen, this would be great!

I think you have two options:

1. Use https://github.com/necolas/react-native-web to wrap the OttoDIYApp react native code to have it running in a web browser. The disadvantage of react-native-web is the complexity in getting it setup & working, and the advantage is having one code base delivering both for web and mobile (native iOS and android).
2. Build a web app (i.e. in React) & use the OttoDIYApp code as reference and clone any useful code.

Regardless of which option you go with, it's best to first check the feasibility of controlling the Otto via Bluetooth using a web browser.

/cc @cparrapa

[sfranzyshen]

Regardless of which option you go with, it's best to first check the feasibility of controlling the Otto via Bluetooth using a web browser.

Excellent point ! I have two approaches in mind ... both using the esp8266.

The first method would be to replace the bluetooth module with a esp-01 micro-controller. This would not change (nano) the rest of the project's design. The esp-01 would be programmed with a firmware to serve up the wifi connectivity and web interface ... then accept websocket commands ... that would be sent back out to the nano the same way the bluetooth module would over serial.

the second method would be to completely replace the nano with a esp8266 based board (NodeMCU) and expand on the projects base code to accommodate the necessary changes for wifi and web ...

I would like to accomplish both approaches ... but I need to start somewhere ... so I am leaning toward the first method ...

I also was looking into react-native-web ... but not being familiar with either react or react-native ... I am a bit lost. while reusing the UI components within a react environment and reusing/modifying the client code for communication ... seemed a little more doable ... yet still out of reach for me right now ... but i'm working on it :)

any insight ?

@cparrapa
@chico

[chico]

@sfranzyshen as a start I would get a simple web app (react if that's easiest) with a few buttons to test it with the Otto and websockets.

Once that's working then it makes sense to have a look at this OttoDIYApp codebase, https://github.com/OttoDIY/OttoDIYApp/tree/master/App/Modules/Play/Player and https://github.com/OttoDIY/OttoDIYApp/blob/master/App/Services/Client/Otto/index.js are probably good places to start. The react-native-web library is complicated to setup so I would leave it for now. Good luck!

/cc @cparrapa