-
Notifications
You must be signed in to change notification settings - Fork 3
2. Tools
The site is currently being hosted on Rackspace's cloud servers at IP address 104.130.5.247, which can be translated by accessing URL http://api2k15.me. Ubuntu 14.04 is the operating system running on this server instance and one gig of RAM is allocated for the VM. Please contact Joshua Tiras if needing access to the cloud’s control panel or server instance. (If Josh is unavailable, then contact Brandon Gottesman.) Servers can only be accessed via SSH with a predefined user name and public key.
Bootstrap and AngularJS are rendering the front-end of the site, while Python 3.4 and MySQL are handling the back-end. The HTTP microframework Flask is serving the overall application.
Github is hosting the repository for the application at https://github.com/jrpeden/cs373-idb. The structure of the overall application is as so:
- cs373-idb
- .gitignore // Handles git file control
- .travis.yml // Handles continuous integration
- api_handlers.py // Methods that handle accessing database
- apiary.apib // Apiary documentation
- assets/
- images/ // Contains static images
- javascript/
- app.js // AngularJS app loader
- controllers/ // Contains AngularJS controllers
- factories/ // Contains AngularJS factories
- stylesheets/ // Contains CSS sylesheet
- templates/
- about/ // Contains about page html files.
- games/ // Contains games' pages html files.
- home.html // Contains home page html files.
- players/ // Contains players' pages html files.
- shared/ // Contains html files for universally used elements.
- teams/ // Contains teams' pages html files.
- config.py // Configures the database
- createDB.py // Initializes the database
- data/ // Contains scraping files and resulting .json files.
- db/
- __init__.py // Initializes database
- models.py // Models pages
- populateDB.py // Populates database
- IDB.log // Log of commits
- index.html // Bootstraps AngularJS application along with other front-end technologies
- init_db.sh // Creates user 'api2k15' who is granted all permissions allowing the user full access
- __init__.py // Initializes the application and handles routes served by Flask
- makefile // Defines the make scripts
- meta/
- sources.txt // sources used
- UML.txt // text input of UML model
- models.html // Descriptions of the 5 models and their attributes and types
- models.py // Defines the data models and their attributes
- models_tests.py // Defines the data models and their attributes for tests.py
- __pycache__ // Python byte code.
- README.md // Git readme
- requirements.txt // Used to set up the requirements for the database
- tests.py/ // Contains compiled python byte code
- UML.pdf // PDF of UML model
- utils/ // Refreshes database
- vendors // Imports allowing for use of AngularJS
Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.
Our tables are implemented using Angular UI Grid. UI-Grid 3.0 (formerly ng-grid), is a 100% angular grid written with no dependencies other than AngularJS. It is designed around a core grid module and features are layered on as angular modules and directives. This keeps the core small and focused while executing very complex features only when you need them.
In the core module, you get:
- Virtualized rows and columns - only the rows and columns visible in the viewport (+ some extra margin) are actually rendered
- Bind cells to complex properties and functions
- Column sorting with three states: Asc, Desc, None
- Column filtering
- Ability to change header and cell contents with custom templates
- i18nService allows label translations
For Phase 1, the static example data is stored within the controller for the tables themselves. Going forward, the database that we implement will provide more extensive data.
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.
Check out the sample app: Sample
We use Slack for communication within our project group. Slack is ideal because we can have dedicated channels for specific use cases. This way we never have too much unnecessary information in one place, keeping our discussions focused on specific topics. We have a general channel for communication and issues we found that were relevant to the whole team, a dev channel so we could see a list of all commits made by the entire team as well as issues people opened and closed, and a random channel for any off-topic conversations. Slack also has direct messaging so that when we need to talk to a specific person, we can directly message that team member. Slack also makes it easy to send files and code between team members.
For the player info data, we scraped from:
From the ESPN site, we obtained general statistics for each player. We started with teams and scraped every player from each team roster. For each player, we also included several highlights of their basketball career that we scraped from YouTube. And finally, we scraped Twitter to get links to the players' Twitter profiles. For xmlstats, there is an already created API and we used it to obtain the information for games.
The scraping was done using Python. We used beautifulSoup, which is a library that allowed us to analyze the DOM of a particular page. We started from the NBA teams page, went to each player's roster page, and scraped the data. At the same time, we also scraped Youtube and Twitter links from the player pages. We then added that information to a map and ended up mapping player names to their statistics, as represented by the map in a general all_players map. One issue that we found was that on the roster page, there are some people that were just recently drafted and weren't on the 2014-2015 NBA season roster. To fix this, we found out that the players that are not on the most recent season's roster also don't have a headshot in team uniform. Using this information, we were able to detect whether someone had a headshot, and if he didn't, they were a new draft and were not on the roster for the 2014-2015 NBA season. In other words, any player that lacked a headshot was excluded from our data set.