React, especially React Native has been a major library that contributed to the development of Web platforms in the recent years. As interest in it grows, it is becoming more apparent that we need a better platform to help newcomer to start tinkering with react technologies, how its lifecycle works, what its available components, etc. Unfortunately, setting up React Native development environment isn't necessarily an easy task, all the more so for a beginner. This is even more true in our home country, Indonesia, and generally for any developing country where access to laptops and PCs are limited. Based on this, we are excited to build AppSense, a mobile app that helps beginner to enjoy their first step on learning React Native without being hassled by the difficult parts.

What it does

AppSense helps developer to learn the workings of React Native without delving too much into the hard part: its development environment setup, functional reactive programming concepts, and even an actual code! Users can instantly create buttons, switches, and text labels with just the click of a button, and impart the logic afterwards using logic blocks, abstracting the actual react native code layer below it. Users then can run the app directly, again only with the click of a button. After all the work, users can share the running app with others using a sharable link to show off their creation!

How we built it

We built AppSense using React Native. We use blockly, a client-side JavaScript library for creating visual block programming languages as the interface for the logic blocks. In templating to render our structure data into an actual react native code, we used Mustache. To speed up the development, we use exponent as the react native app platform to build our app. We also utilize Expo Snack API for publishing and sharing created app.

Challenges we ran into

  • Creating our own custom block in Blockly for generating React Native code
  • Create a structure data to store information from drag-and-drop input user interface
  • Generating states & component from our own stored structure data
  • Integrate expo snack from generated React Native code

Accomplishments that we're proud of

  • Instant react native app running using zero code by the click of a button in a mobile app
  • First app that integrates Blockly to React Native

What we learned

  • Blockly can be extended to practically all languages. Our job was made easier as we extended the existing JavaScript generator
  • We can run react-native inside react-native! We dynamically generate components and inject the event listeners according to user-defined code that is generated by Blockly

What's next for AppSense

  • More supported components
  • More action handler for each supported components
  • Support more complicated states (arrays, objects)
  • Tutorial module
  • Share raw app so that it is modifiable by other people
  • Save project

Built With

Share this project: