Native App for urban farming

This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (summer term 2021).

Abstract

We developed core functionalities of a native mobile application to support the local startup Urbanhive, which designs smart solutions for urban inhouse farming. Our expertise complemented the startup’s domain knowledge of web technology, system architecture, and overall project setup. We used React Native, a sibling technology of the popular web framework, to simultaneously develop the Android and iOS systems.

Mobile App development proves a complex challenge since it combines growing and ever-changing technological demands with solutions that attempt to provide maintainability, accessibility, and an adequate toolset.

Urbanhive, which already found some popularity due to some early-stage funding and media coverage, heavily relies on its smart technology to control home gardening via an application. This App is supposed to monitor and control the watering, status, and health of the fruits and vegetables growing in the smart flowerpots. How to build a native application that fits the firm’s style, proves accessible for ideally both major phone architectures, and serves the desired functionality? This challenge, combined with the inherently small team size of a young firm, proves to be the main obstacle to overcome for the team.

Initially, our project team of 5 developers of different backgrounds later shrunk to an effective team size of two, who were generally new to web development. We chose React Native as the framework to provide the solution to the challenges mentioned above. This framework allows developers to utilize standard front-end technologies from the web development realm of the most popular framework (React) adopted for native web development. The same technology used to translate HTML, CSS, and JS code to the machine’s Java (Android) and Swift (Apple’s iOS language) lies beyond this summary.

We structure the project in close collaboration with the Startup CTO in a typical agile software development structure. Weekly meetings with flexible goals allowed for a productive yet accountable working environment. React’s component-oriented software structure allowed the development of distinct features simultaneously, which became a crucial time-saver for our team due to its size already being short on time.

We eventually finalized a prototype for the user dashboard side, overviewing a user’s urban farms and readily styled views of possible recipes and the plants growing.

Basic authentication functionalities and back-end communication with dummy data fetched from a cloud back-end via Google’s Firestore database include the asynchronous inclusion of data — a complex challenge to overcome for many front-end applications.

We were able to build and extend the knowledge of our track by utilizing HTML-ish structures styled with CSS properties in a React-like logic to display all this information in Android and iOS emulators provided by Android studio.

To have the front-end methods communicate with a virtual machine, the technology setup, mimicking a smartphone on the computer proved to be one of the first major hurdles to overcome. After all, web development proves to be a gateway, not the most common solution for hybrid app development. To maximize communication efficiency, we worked closely together, communicating via external (Urbanhive included) and internal (just the project team) Slack channels.

Other challenges were the communication between front-end and back-end, during which Urbanhive’s CTO offered valuable insights and App wider or local state management. React offers built-in tools for managing state (the general point you are in an app, impacting the data and often design you can see and access as a user). Compared to other major frameworks for web development, most notably Angular and Vue.js, React leaves many leeways to adjust technological decisions — it is often described as more native JavaScript development than the other more opinionated frameworks. The downside is though those decisions are the developer’s responsibility on how to, for example, manage the state. More complex applications leverage Redux, a state-managing library, which offers clear action patterns for component communication. We decided, for the small scope of the primary user features — -so far, the state only handled a logged-in Boolean value as well as some fetched data from the back-end — -to work with React’s context API. Here, components communicate with a single point of truth but without the in-built design patterns of a Redux store. Consulting the React documentation and in-depth discussions within the project team proved to be a significant support to weigh the pros and cons.

To wrap up this summary, we would like to thank Michael Dunsche from Urbanhive, who has proven invaluable for the productive and fun development experience. We thank Richard, Jan-Eric and Yvonne for being helpful mentors regarding questions to our front-end web development track and developing the Urbanhive app. Towards the end, only Romeo and Marc of the original techie’s team 2 remained as developers. Romeo mainly handled the plant and recipe overviews, while Marc addressed the user’s dashboard and state management issues. Unfortunately, the startup’s repo is not openly shareable, but for more in-depth questions, feel free to contact Marc at: https://www.linkedin.com/in/marc-luettecke/ or Romeo at https://www.linkedin.com/romeowitzel.

Some screenshots of the current version:

The team

Marc Lüttecke Web Development

Romeo Witzel Web Development

Mentor

Richard Menning