shefska.com

Category: AngularJS

  • GymNear – AngularJS Project Update

    Two months ago I posted about an AngularJS side project that I had planned to begin working on. Over the past 8 weeks I have broken ground and launched an initial 1.0 app. I have gained an understanding of AngularJS, built a website that I am proud of, and had fun along the way.

    GymNear.com is a simple to use and effective app that helps users find a gym or fitness center near them. Users enter in a location and the app responds back with a list of gyms nearby.

    In my original post I wrote about how difficult it was to find a gym when google searching. I went as far as to say, “Scouring Google search results for ‘gyms near Reston, VA’ always proves a waste of time.”.

    Which is ironic, because I am now entirely relying on the Google Places API to serve content.

    I ditched the idea of scraping the internet to create my own database of gyms and fitness centers. Instead I went with Google’s API. Google has a fantastic database with more information then I would have ever been able to successfully pull together. The issue Google faces is when it comes to displaying that information to the end user.

    A google search of “Gyms near Reston, VA” will still be a waste of time. Intermixed with the good results are advertisements and unrelated content. With GymNear.com the user is presented with 20 of the closest gyms, that is it.

    Essentially, all I have done is made a simplified Google. It works, it is easy to use, and it provides immediate value, I am really happy with where it stands.

    Design

    I decided on a minimalist design for GymNear. When looking at competitors I thought there was a great opportunity to differentiate GymNear with clean, simple design.

    Other websites that offer the same functionality look like they are from 2002…

    With GymNear I knew I wanted something that looked both modern and simple.

    Functionality

    In the spirit of not having to make the user think (thank you Steve Krug), I have limited GymNear’s functionality. The only thing a user can do on the site is enter a location and click on a link.

    Initially I wanted to include reviews, ratings, directions and any other information that I could find when returning results. I decided against this, at least for now in an attempt to make GymNear as easy to use as possible.

    By providing bare-bones functionality the user gets exactly what they expect, while also leaving the window open for future features to be added.

    Tech

    Creating GymNear with Google’s API has allowed me to bypass nearly all “back-end” development. The entire application is built in Angular, and I have not yet set up a node server on the back-end.

    Currently GymNear works by sending an API call to the Google Maps Place Service with the user entered location. It returns an array of objects which I then display on the page. When a user clicks on more info I pass that specific gyms place_id to Google’s Place Details API which returns another object with a ton of relevant information.

    Essentially, what I have made is a website that makes a ton of requests to Google.

    I have yet to set up a Node server, but that is a top priority. GymNear serves an entire JavaScript page to the browser which makes conventional SEO impossible. Prerender allows for AJAX heavy websites to be crawled effectively by search engines. Prerender runs on Node, and I have no experience setting up either.

    In addition to configuring Prerender I am also planning on implementing UI Router. I would like to create 50 or so pages that serve content for specific locations. For example, gymnear.com/boston, or gymnear.com/atlanta. I think creating webpages like these would work well and help Gymnear rank higher for specific search terms.

    Hopefully between Prerender and Angular UI Router GymNear will be able to get picked up by search engines.

    Moving Forward

    Building version 1.0 of GymNear has been a blast. I will continue to post updates as more people use the application, and as new features and technical updates are made. If you are going to teach yourself a language or framework, this is the way to do it. Find a project and simply plug away.

  • Starting to Develop An AngularJS Side Project

    I have been urged by my peers to learn AngularJS in recent weeks. At work our in house application uses Angular and the other developers would like for me to be able to help maintain it.

    With this in mind I have recently begun programming a new side project to learn and practice AngularJS.

    The idea

    The idea for this project was entirely inspired by a problem I frequently run into. When I am at home I religiously go to the gym. When I am away from home (on vacation, visiting family, etc) I never go to the gym.

    I always plan on finding a fitness center near the hotel I am staying at. Unfortunately, that never happens. Scouring Google search results for “gyms near Reston, VA” always proves a waste of time. Google finds a few gyms near-by, but does a poor job helping me sign up for a one week membership.

    Having repeatedly not been able to find a suitable gym with a reasonable one week pass I have decided to create GymFinder (the name is not set in stone).

    Users open GymFinder in their browser and put in the zip-code they will be travelling to. GymFinder searches through a massive database of fitness center across the world and returns those that are within a specified radius.

    Results also contain meta-data, such as the size of the gym, the equipment available, and the price for a one week pass. GymFinder helps people find the right gym when they go on trips. And if it doesn’t do that, then at least it will help me find a gym when I go on vacation!

    The tech

    After consulting with other developers at work I have decided to use a fairly simple stack to create this application.

    As mentioned above AngularJS will control nearly all of the application. Ajax requests will be done with Angular and a simple PHP server side script will call data from our mySQL database.

    The GymFinder app will be a single page and take full advantage of AngularJS routing. There will be no user login or storing of data. Rather the application will be quite simple and only spit out results. This is simply for practice at the moment, more features will come down the line once I have a more complete understanding of Angular.

    The data

    The most difficult aspect of this project is collecting, verifying, and storing enough data to make this project useful. After looking into using the Google Places API it became clear to me that creating an independent database of fitness centers was the best option.

    The plan is to write some sort of script that will crawl the web and write to a csv file. A few websites such as FitLink, Directoryfitness, and Gymnearme seem to have all the data GymFinder would need (those websites have user interfaces that make then nearly impossible to use).

    Two options are being considered for the crawling script. Option one would be to use an open source PHP script, while option two would be to write a simple bash script.

    I am leaning towards writing a bash script. Bash scripting is fun, interesting, and has many practical applications at my work. Utilizing someone else’s PHP code does not seem like as much fun.

    Updates

    I will mostly be working on GymFinder during the weekend. As progress is made I will be writing updates and sharing code.