Native App for urban farming
This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (summer term 2021).
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.
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:
Marc Lüttecke Web Development
Romeo Witzel Web Development