Scout-IO Beta
The final three weeks of coding we create a thesis project. When applying for HR, I had assumed that this would be a big solo project. I was relieved to find out; it was just a longer group project. We once again had to start from nothing, but also had to write tests for our code and to try and integrate Continous Integration. My groupmates and I all self-selected into a project called Scout.IO that was based on one of my partners seeing a need for location scouts. Scouts were forced to rely on personal connections and internet searches to try and find potential sites to survey. We wanted to create a platform that would not only make this process easier for scouts but allows property owners and towns to promote certain spots as well.
Project
During our initial planning phase, we had hoped to build both a web and mobile application. After scoping out the project, though, we assumed we would be hard pressed to produce both given our knowledge and time constraints. Instead, we decided to focus on building an excellent web application. For the first week, we spent way too long trying to decide on a framework. We wanted to use a Yeoman Generator to try and save ourselves some time but found an issue with each one we tried. After meeting with an HR Tech Mentor, we realized we had to choose one and customize it to do what we wanted. With that solved I once again started working on the backend.
One of my classmates and I decided we were going to try and use an SQL database. Despite the rise of Non-SQL databases, we felt our data would be very relational. We had some initial issues connecting to the databases, but after solving that we were able to duplicate easily the API endpoints the generator had already provided. We then needed to fix authentication. It appeared that some of the pre-written code referenced different oAuth methods than Facebook and Google were currently using. I was able to rewrite them, once I understood how exactly the app sent data. With the backend’s initial setup complete, I started working on improving the signup/login process.
The generator provided a login and signup page that both relied on Bootstrap. We had already decided though that we wanted to use Angular Material, and we also wanted to have Dialog Box Login instead of login on a separate page. I had assumed these boxes would also be called modals similar to Bootstrap. After searching through the Angular Material documentation, I discovered what I was searching for was called mdDialog. Once that was added, I was, at least, able to get a popup box. I then had to work on rewriting the Javascript based on the Dialog’s inputs. That turned out to be quite easy and soon we had a working Login Box. The final issue was getting the box to close upon submission. Looking at the dialog box’s bower component code, it suggested I needed to tell the bottom sheet to close. I tried that but it did not accomplish anything, and instead I realized I just needed to close the mdDialog. With that fixed I turned my attention to the landing page.
We never had a solid plan for how our landing page should work. I tried to create some designs in Sketch, but unfortunately, my Sketch kept crashing. Someone had already added some photos that I tried to rearrange to provide a better flow for the landing page. These worked on desktops but not on mobile I believe due to their resolution. We also managed to have some nice Icons on Desktop; that would not appear for mobile users. We had to utilize Angular Material’s flex layout to restrict certain items based on the device’s width. For smaller devices we had to rely on the traditional hamburger menu to make sure everything was displayed. The final result kept most of the original navbar ideas but changed the landing page based on better designs we found online.
From the beginning of Scout-IO’s development, we knew we were going to need a way for users to access their saved photos. I proposed doing something similar to Google Drive; however, we did not know technically how to implement a file traversal. I researched online and discovered a library called JS Tree that would roughly accomplish what we wanted. I decided to look through the issues and found someone had created Ng JS Tree, which I assumed would integrate nicely with Angular.
Upon integration, it broke our app because of the way our Grunt File minified everything for production. I then had to ignore the repo’s direction and modify ngJSTree’s demo code. This kind of work but the very little styling was carrying through. I made the decision to eliminate extra JS Tree packages, and this allowed the tree to display correctly. I then wrote a few promise functions that would scan a user’s projects then build a tree accordingly. For demo purposes, I also developed a simple Folder Insertion styled with Angular Material.
The final deployment issue was once again JS Tree’s disappearing styling when we deployed to Heroku. We realized a problem we had first noticed with Google Maps repeated with JS Tree. The code recognized there were references to JS Tree, but couldn’t find them in the minified code. To solve both of these, we manually copied the five file references into our distribution folder’s index file. This transfer resolved the issue and allowed our team to have a working tree traversal.
Result
Our final app allows users to search for photos and save them to their Project Folder. We also enable users to save comments on a photo.
Problem
Scout-IO is still not past Beta stages because interacting with the database proved tough. I am currently working on giving users the ability to add Folders to the Database. My partners want to add more features to the Map view.
Our site is available at http://scoutio.herokuapp.com/
