MT Women’s Wellness Resource: A Web App

While I had the best of intentions to get a blog post out on a weekly or biweekly basis, it obviously hasn’t happened. I have excuses, but I’ll spare you. I did want to update you though since we just finished our first official coding project for Montana Code School and presented it publically. So for this post, I want to share a few things I learned about the process as well as give you a look at what we created.

The Project

In late June we spent a weekend generating ideas and thinking about the technologies and functionality that we wanted in our web app. Harold Shinsato, one of the founders of the Montana Code School and a local Open Space facilitator, led us through an interesting process of brainstorming and pitching different ideas and project possibilities. After several rounds of discussion, I teamed up with three other women intent on creating a “Montana Women’s Wellness Resource” web app. The idea had been one that a few of us had talked about in the weeks leading up to the project-brainstorming weekend. We agreed initially on one thing: to put together an app that would have a socially-useful function and that wouldn’t be simply a business, finance or retail services app. While we knew that much of the information we wanted for our app would already be available elsewhere on the web, we envisioned a “one-stop-shop” that would meet the needs of women in Montana searching for information about local health and wellness resources.

During our brainstorming weekend, we developed a long list of “like to have” features: a database of local pharmacies, clinics, doctors, counselors, women’s gyms, political and social organizations, a chatbot that could help women navigate the site, a list of emergency telephone numbers, a discussion forum, a way to check on medical symptoms. We wanted to make a mobile app, or if that wasn’t possible, at least to make a mobile-responsive website. We wanted it to be accessible to women across Montana of different ages, locations, and personal circumstances. Needless to say, we fell short of our initial goals in this first version of the project. What we did create, however, has given us a lot of insight not only into how to create a web app, but into the whole process of development, from generating initial ideas, doing the coding and markup necessary to turn the ideas into a real thing, and then polishing and deploying the app.

Lessons Learned: Mobile First, React, APIs

Leading up to our work on this project we’d been introduced to and had some play time with different aspects of web development, but hadn’t yet had the opportunity to really get our hands dirty. This project gave us that opportunity. We scrapped the smartphone app idea early on simply because we didn’t have any experience even creating a web app. But we hoped to at least make our website mobile-responsive. And so we spent a lot of time learning about responsive and dynamic styling. We ended up styling many of the elements on the app’s web pages using Bootstrap and Flexbox. Bootstrap is an HTML, CSS and JavaScript framework for helping create responsive, mobile-first websites. Flexbox is a layout mode in CSS (Cascading Style Sheets) that also helps align elements properly on a web page to make it easier to accommodate different screen sizes and device displays. We didn’t fully wireframe different versions of our web app at the beginning of our design process, so we ended up with a site that is partially responsive, but not as mobile friendly as we set out to make. Were we to do it over or to move on to a second version of the app, we’d start with a “mobile first” philosophy—that is, build the mobile version of the site first, and then build it out for the larger screen sizes.

We also got pretty familiar with React, a JavaScript library built by Facebook for use in creating web apps. Using HTML alone is fine for building simple, one or two-page web sites, but if you are building anything larger React is very useful. React allows you to build a modular system of JavaScript functions and JSX components to create a website that can easily scale. (JSX is a syntax extension of JavaScript. Since it’s not good practice to combine JavaScript code with HTML markup, JSX makes it possible to write a component solely in JavaScript but have it render on the page just as if you had been using HTML). React, however, has its own conventions that take some getting used to. While we struggled a bit to think in React—that is, how to conceptualize the modular way in which React works and passes unique information through its reusable components—we eventually got it down. We even got a handle on using React Router to route to the different pages within our site. It might not sound like much, but it was a big win for us!

One of our goals for Montana Women’s Wellness Resource was to take advantage of health information that has already been compiled elsewhere and make it available to the users of our app. Learning to work with web APIs was another big accomplishment for us. Web APIs allow web programmers to take advantage of the functionality of software developed by other parties. Basically, an API allows one software program to communicate with another software program. Google provides an API for many of its software services, such as Google Maps. When a website like Yelp allows you to see Google Map information within its smartphone app, it’s because developers at Yelp worked with the Google Maps API. When you enter an address for a restaurant in Yelp, it communicates with the Google Maps service through the API to generate a map of that location. Unfortunately, the architecture of APIs has changed and is often specific to the software or database with which a programmer is trying to set up communication, so there’s no standard way of getting an API to work. We tried at first to set up a connection to the MedLinePlus web API built by the NIH. We quickly realized that the health data in the MedLinePlus API is in XML format. Before starting the project, we’d had at least a little experience accessing data in JSON format, but we’d never worked with XML before. As a result, we initially spent a lot of time just figuring out how to access the health topic data. While we made some progress, we ended up scrapping the MedLinePlus API and moving on to a Symptom Checker API from ApiMedic with data in JSON format. With more documentation to guide our implementation, the Symptom Checker API ended up being a better initial foray into API-land for our team. With that experience under our belt, we set off to try our hand at the Google APIs, specifically Google Maps API and Google Places API. It took us some work getting our HTTP request set up to access the Google Places service, but once we accessed the data it was pretty easy to move through. Thanks to some other developers who had coded the HTTP request to the Google Maps API, we didn’t have to struggle as much with that and could just use the pre-built code in our application. One of the great lessons I drew from this project was to make use of as much pre-written code as possible. NPM (Node Package Manager) was a great help in pointing us to JavaScript code modules that we could import, both to cut down on the code we actually had to write ourselves and to extend the functionality of our web app.

Given that it was our first project and that we had just over a month to complete it, I think the app looks great. It still has a few issues: the map information and list of doctors and pharmacies are slow to load and the navigation buttons don’t work on the symptom checker page. Oh, and the symptom checker doesn’t work right now. It is currently only the sandbox version used for testing and development and the access token times out after a couple of hours. Hopefully we’ll have a chance to come back and work on it some more at a later date. In the meantime, you can view the app here:

Montana Women’s Wellness Resource

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s