—
files: contained within ttours/ (equivalent to monum/history-tour-client), references to MONUM files in monum/history-tour-server
url: hosted locally
window: terminal
—
T-tours Public History Tour App, City of Boston Mayor’s Office of New Urban Mechanics, Google Summer of Code 2023
Developed by Sebastian Orozco & Sarah Agarrat, mentored by Maddie Webster
Goal: Implement a mobile website where Bostonians can listen to user-submitted stories while riding public transportation
T-tours is the fruition of Maddie’s vision, who described her inspiration for this project as follows: “Tim Murphy is an MBTA conductor who combines his hobby with his job, narrating local history for his passengers through the loudspeaker along with which T stops they’re approaching. I have sat in the audience for Mr. Murphy’s tours several times on the green line, to my delight, and it turns out other passengers also appreciate the unexpected addition to their commutes. As a 2019 article declared, ‘Murphy is definitely the talk of the MBTA and has earned rave reviews from passengers on social media.’” Inspired by Mr. Murphy, Maddie proposed the creation of a set of audio tours in partnership with the MBTA, accessible via a free mobile application, known as T-tours.
That’s where Sarah and I came in. Through Google Summer of Code, we were matched with Maddie at the City of Boston Mayor’s Office of New Urban Mechanics to make T-tours into a reality. Over the course of the summer, we programmed in parallel, with myself primarily focusing on the frontend, and Sarah on the backend. Ultimately, we were able to create a functional prototype of the app which currently hosts one tour, though it has the capacity for future tours to be added.
Before being able to properly run this web application, please be sure to download all program files while maintaining their relative locations to each other. For instance, .html files remain in a templates folder and .py files are in the root folder. Please note that this repository only contains the files associated with the frontend of the application; for backend files, please visit monum/history-tour-server. The frontend and backend have yet to be fully linked; see “Next Steps” for more information.
Start Flask's built-in web server (within ttours/):
$ flask run
Visit the URL outputted by flask to try out our code yourself. Now, you can access the site and listen to audio tours as you explore Boston!
Upon opening app.py, you’ll notice various imports, which are mostly necessary libraries needed for our code to function properly. Also imported are a few helper functions, which we will discuss later.
Then, you’ll see a dictionary, routes. The routes dictionary encompasses various sample routes that are part of the Massachusetts Bay Transportation Authority’s bus network. For the purposes of this prototype, the only accessible tour is the one associated with route 45 from Franklin Park to Ruggles Station.
Afterwards, scrolling down app.py you'll see @app.route’s. These routes accept both GET and POST request methods, such that it either renders a template, redirecting the user to a new page of the site.
Note that, as of this writing, app.py contains minimal processing of user input and data, as those tasks are delegated to the backend found at monum/history-tour-server, though these have yet to be fully connected.
Within static/ is contained:
icons/, which contains the T-tours logo in white and gray, and another icon used as a divider;
audio/, which contains sample audio for a potential sites along a tour;
maps/, which contains an image of the map for a sample route;
script.js, which is a JavaScript file that supports various interactive features across the site;
styles.css, containing all stylistic elements.
First is index.html. This template serves as the welcome page for users, and prompts them with a user-friendly and simple button design, such that users can choose to find an audio tour either by using their location or searching for it manually. If the user selects to search for tours by location, this directs them to...
search.html, which displays the closest bus stop to the user’s location and a list of nearby tours. If instead the user had selected to search for tours manually, this would have directed them to...
msearch.html, which displays a search bar allowing the user to search for a specific stop or route. After submitting their search, they will be redirected to msearch.html, a nearly identical page save for results appearing below the “Closest matches” header. When the user clicks on these results, found in either search.html or mresults.html, they will then be redirected to...
routeinfo.html, where users can view an “About” section offering a description of the route and a “Preview” section where they can get a quick glimpse of the tour. At the bottom is a “Start tour” button, which when clicked, redirects users to...
routemap.html, which is the core page of the site. Here, users are now on following the tour they selected, and can toggle between different sites on the tour, listen to various audios and learn more about Boston. Each site of interest has an accompanying picture, audio, and text description. Below are two buttons: 1) “Learn more,” which redirects users to an external website where they can gain more information, and 2) “Share your story,” which directs users to…
share.html, where users can submit a form to add their own story related to some point of interest along a particular route. Lastly, users can use the top navigation bar from any of the above sites to click on “About”, leading them to...
about.html, a simple page just to explain what the T-tours site is.
The design of T-tours is simple, user-friendly, and inviting. T-tours evokes a “retro” feel which is achieved by utilizing a vintage image of Boston from an old postcard on the landing page, a “retro” font for the T-tours logo in the navigation bar present on every page, the color scheme, especially the not-quite-bronze (#B26251) which is heavily featured, and small details like the classic divider between buttons on routeinfo.html. Together, this makes the user “time-travel” as they step into the past through this design. Furthermore, it was essential to still maintain an atmosphere of transit, which was done in many ways: 1) using green buttons to traverse the site, as green is often featured in way-finding apps, 2) sans-serif fonts for text throughout the site, which is easier to read and increases accessibility, 3) showcasing the iconic black and white route numbers for each tour, drawing a direct parallel with the MBTA, and 4) including a map on routemap.html, again emulating way-finding apps. Finally, the pages are designed to follow linearly from each other, creating an easy user experience.
The tasks that remain to be completed are as follows:
Fully link the frontend to the backend - most of this can be accomplished by copy and pasting some links, thanks to Sarah’s APIs, but will have to be tinkered with a bit. Various templates and app.py must reflect the functionality of Sarah’s backend such that the functions she wrote will operate as demoed in the frontend; for example, routemap.html must automatically switch between sites of interest depending on the user’s location, and while location data is able to be received on the frontend and manipulated on the backend, the final connection between these two processes is yet to be implemented.
Add functionality to share.html - this page currently exists to model what it might look like, but is not able to accept and save user-submitted data in its current state
Refine traversing between site pages and sending/receiving data - app.py currently accepts ‘GET’ and ‘POST’ methods for every page, but this is somewhat inaccurate, as some pages should only be accessible via ‘POST’ requests, meaning that the user submitted data in some way. Moreover, the ways that some data is sent/ received should be fixed, such that data can be correctly passed to and from the server and be processed. For instance, a current bug is that when the user manually searches for a route, their query is returned to the app.py but is unable to be processed, subsequently causing mresults.html to not be able to display the user’s query as a placeholder in the search bar (a value of “route 45,” the demoed tour, is present instead).