Build Blog 1: Building a Connected Mobile App

Hi everyone! Welcome to the first blog in which I'll be talking a little bit about how we're building a mobile application that'll connect to the hydroponics system.

The Need for a Mobile App

The main reason that we're building a mobile app as part of our wider hydroponics system is to enhance the user experience and provide the user with an ecosystem in which they can both control and monitor their system. With this objective in mind, we wanted to build a mobile app that would precisely have the following features:

The ability for a user to remotely control important variables in their system. Namely, the user should be able to control the following:
1. The pH of the water
2. The Electrical Conductivity (EC) of the water
3. The lighting of the system
The ability for a user to monitor their system. Namely, the user should be able to get insight into the following aspects of the system:
1. The pH of the water over time
2. The Electrical Conductivity (EC) of the water
3. The temperature and humidity of the system over time
4. The temperature of the water over time
5. A visual of the system
Guidance for the user in maintaining the system to ensure that the user is set up for a successful yield in their journey of growing plants hydroponically

Choosing the Right Framework

There are many different frameworks out there that allow a developer to build a mobile application. As a result, I researched some of the most popular frameworks out there (including ones that I had worked with in the past) to find the right framework for our project.

Framework	Advantages	Disadvantages
iOS with Swift	Easy to build an app with targeted native features for iOS Strong developer experience	Can only cater to individuals with an iOS device The language is relatively new and hence it can sometimes be hard to find best practices for development
Android with Java	Android applications have been in development for a long time and hence there's a lot of support available for developers	Can only cater to individuals with an Android device
Flutter	It is very easy to get started and the development process is fast iOS and Android applications can be built in one codebase	The framework is very new and does not have as much community support
React Native	It is very easy to get started and the development process is fast Large community support as it has become highly popular in recent years iOS and Android applications can be built in one codebase	Building an app that targets native device functionality can be difficult and relies heavily on third parties

While all four frameworks would have satisfied our needs, React Native was chosen as it had the least friction to getting started which was an important consideration given that the the timeline to complete the project is quite packed.

Learning React Native

After settling on React Native as the choice of framework, the first thing I did was to do a crash course on YouTube as I had never used React Native before. However, I had used React, which is essentially the equivalent framework for building web applications. As a result of this, picking up React Native was relatively easy as it has a very similar development style to React with some minor differences. The tutorial I followed had me build a very basic to-do list application that allowed me to get comfortable with building user interfaces with React Native. After completing this tutorial, I felt ready to start building Planter (that's what we're calling our mobile app)!

Wireframing

I also wanted to mention that at this point I had already completed the wireframes for the mobile app using Figma. If you're unfamiliar with Figma, it's an interface design tool that's highly useful for prototyping a digital product.

A screenshot of the Figma workspace where I prototyped Planter

Building Planter

I essentially just dove into building Planter. I decided to start by building out the static screens first as I already had the designs ready to go. At this point, the screens did not have any functionality but were styled according to the Figma wireframe that I had developed. Here are some of the screens that I have developed so far!