jacques.io

Rapid Outdoor Map App Prototype with OutSystems

August 19, 2020

Background

I like to explore my surroundings, and here are a few examples of what I mean.

  1. I enjoy walking around my neighborhood and discovering interesting places. For example, I noticed the house of Kintaro Hattori on a walk one day. I later found that it sold a few years ago for almost 300 million dollars.

Kintaroo Hattori's house

Another example of somewhere that piqued my interest is a large house with massive beautiful windows enveloped in towering camphor trees and a classic 190 SL Mercedes parked outside. It looks that no one has lived there in over a decade, but the gardening is always well kept. My imagination has me wondering what Tokyo used to be like when someone lived there. I can imagine that car driving in an old black and white photograph of Ginza.

  1. Up on mountain ridges, sometimes I encounter interesting features, and I’d like to be able to pinpoint them later, looking at a map. These wouldn’t be on most maps, and it’d be interesting to record where they are.

Kengamine ridge

  1. In a kayak, I see on land things on land that it could be difficult to get to by foot, and I want to do some research later.

Aokiko

App Idea

Before my vacation one Friday afternoon in July, I got an idea for an app. The night before, I was looking at the Omori Aobeka Canoe Club’s map of Tokyo Bay.

Map of Tokyo Bay

The idea of making an app to map out Lake Aoki, where we were going to camp, from my Kayak came to me. When paddling around the lake, the points of interest aren’t registered in map applications. If they are by some chance, it’s hard to know where you were precisely you were, so I wanted to tag them on the map with a single tap. I also wanted to easily attach photos of signs in the area to the points of interest.

App Concept Sketch

My idea, composed of three screens, would contain the following functionality:

  • Access the edit screen from a list of locations or pins on a map.
  • Add a new location using the current GPS location using this forge component.
  • Attach photos to a location.
  • Build a native app to scale down the photos on the device instead of on the server due to limited bandwidth in remote locations. I browsed the OutSystems Forge in a rush and decided to use the popular open Image Resizer Plugin.

I considered storing the photos in a bucket on S3 (there are great forge components for that too), but I kept things and the data model simple for the first pass. I leveraged OutSystems built-in user authentication and only needed locations with a 1:n relationship with pictures because I might take a few.

Data Model

The Result

I was able to build an app with three screens in about 90 minutes to tag and save various locations and attach photos using OutSystems. This app leverages my phone’s GPS, integrates with google maps, stores photos, and much more. Thirty minutes per screen to build an app is fast. If I made the same app using Firebase and React Native, I estimate that it would have taken me at least eight hours, and I’m not confident that it would have been at the right quality level to use on vacation.

GeoMap App

Summary & Next Steps

Loop Around the Lake

During my vacation, I made several loops around the lake, where I explored little nooks and crannies around the lake. With my sons, we encountered our first freshwater eel too.

Freshwater Eel in Lake Aoki

The basic functionality worked great. There are a few features that I’d like to add:

  1. Curation of points of interest into collections.
  2. Offline mode to ensure functionality in remote areas (mountain ridges) and reduce bandwidth loading photos.
  3. Share functionality (data is bound to an authenticated user and not shareable outside of the map).
  4. Select icons (danger, information, interesting, etc.) for points of interest to make better maps.
  5. Use S3 for media to avoid bloating the database.

All of these features will be easy with OutSystems.