To help learn the backbone.js framework, I created an app that would serve as an upgrade calculator for cyclists. The app is not 100% finished, but it has a solid foundation.
The app is currently written in a single index.html file. Eventually, I would like to split it up into views/models using require.js. It utilizes the APIs mentioned in the previous post.
A live version of the app is available to view here: http://calculator.beckysiegel.com/
You can sign into a test account using the following credentials: test/password123. Feel free to play around!
The idea of the upgrade calculator is as follows:
In cycling, you race in a certain category that indicates your level. In order to move up levels, you must meet certain criteria. There is currently no good system to calculate your upgrade points (with a certain number of ‘points’ you can move to the next category). The idea of this app was to make the calculation easier, as a way to know how many upgrade points you have. This leaves the guess-work out as the rules can be somewhat complicated. The calculator currently works accurately with the exception of some of the logic around stage races.
Note that the calculator is based on the following business logic: http://www.usacycling.org/road-category-upgrade-guidelines.htm
View on github: https://github.com/rsiegel827/Upgrade-Calculator
I tried to familiarize myself with the backbone.js framework. I found a great beginner’s video and sample code from Thomas Davis (see here) on getting started with Backbone. I always understand new concepts and technologies better when I have a solid example to start with. I downloaded a copy of this code on my local machine, and tried to understand how it worked. I was a little confused, and wanted to start modifying slightly with some of my own data.
Of course, the data piece of this project was concealed, as it was accessing a restful API. Instead of focusing on the front-end, I turned my attention to the backend. If I want to learn how to use the front-end, I wanted to do it with my own data. Why not create my own API? This wasn’t something I’d done before, and decided to turn to google for some advice. I found the Slim PHP framework, which seemed like a good option.
The idea of the application is that it will calculate upgrade points for cycling races. the database will store information that users add themselves, in order to keep track of their progress. So far, it only contains Race names and Race dates, but more data will be added once the structure of the program is expanded.
The API has the following functions:
Used for populating race list
GET /races – Returns an array of race objects
GET /races/:id – Returns a single race object
POST /races – Creates a Race Object
PUT /users/:id – Updates a Race Object
View the code here: http://www.beckysiegel.com/backbone-js-upgrade-calculator-application/
Purpose: For our software projects class, we were tasked with writing a scheduler application. It would take events from multiple sources: Google Calendars, and the Oregon State University course schedule. For faculty that taught classes, they would be designated “busy” during class times. This portion of the code that I wrote is the web scraper from the OSU catalog webpages. It is a python script that uses the beautiful soup library that gets courses each term and adds them to a MySQL database. The other components of this project included getting information from the google calendar API, and then using this data to determine when people are free using a command line interface
Technologies: Python, BeautifulSoup, MySQLdb
View on github: https://github.com/rsiegel827/Course-Catalog-Web-Scraper
Purpose: To create a native mobile app that sends data to a cloud datastore and a web/cloud application that can view the data. Create an account on either the web or mobile app. On the mobile app, leave messages based on your current location. When you log onto the web application, you will see a map that contains pins with the notes left from the app. There is also a weekly cron job that sends an email to all users, updating them on how many notes they have and reminding them to log back in.
Technologies: Titanium Studio, Eclipse, Google Application Engine
Viewing data sent from mobile app
Purpose: To create a native mobile app that utilizes features specific to a native device. I chose to use the accelerometer, camera, and the shake gesture.
Press start, and then move the pink dot inside the black hole
Alert message after dot is placed in hole
This message tells you to shake the phone to bring up the camera
Selfie is displayed in the App (and also saved to users’s photo gallery)
If you want to bore your
self for 3.5 minutes, and watch me talk about the app and demo it, go right ahead:
Purpose: The goal of this assignment was to use the google application engine’s datastore to implement a contact list with both text and photos. Contacts are also editable after submission.
Purpose: To create a simple website with Mailchimp form integration.
View project here
Purpose: For my mobile/cloud development class, we had to create a responsive mobile website that would adapt to various screen sizes. There are three pages: a landing/navigation page, a photo gallery page, and a form page.
Technologies: Jquery Mobile, Jquery Validate, HTML, CSS
View the project here
Through my own work and school projects, I have created a variety of websites and applications.
School Project: Web development and Databases class
Purpose: The purpose of this project was to utilize front end and back-end technologies to create a web application that connects to a MySQL database, manages user accounts, and utilizes an API that was not taught during the class. We were also tasked with using AJAX for form validation.
Technologies: PHP, MySQL, MySQLi, HTML, CSS, Bootstrap, Google Map API, AJAX
I chose to “redesign” the USA Cycling database, in anticipation of adding on additional features that the current USA Cycling website does not have such as automatically calculating upgrade points, etc.
View the project here