Illini Spatio

Project Documentation

Team Space Avengers

Yuk Yin Maurice Lam

Wei Chen

Shogo Kimura

Shengchao Huangfu

Litin Chowdary Tripuraneni

Smit Shah

Joshua Harris

Jordan Arrieta

Gurneet Sandhu

1 /39

<Team members removed for privacy>

Preface

This documentation contains a system overview and all relevant technical details of Illini

Spatio. This is designed to be a reference materials, which means you should read the first

couple pages to get an idea of the project, and then go through the code, and then refer to the

documentation to look for something. Therefore, this document is designed to augment the

code and comments, not replacing them. Please refer to both of them when trying to

understand the project.

The most useful reference materials are REST API documentation and Code

Components if you are reverse engineering.

Otherwise System Architecture and Interface Design will give you in-depth

understanding of the philosophy of our software.

The UML class diagrams and sequence diagrams will also give you an overview of the

project in a visual way.

The Appendix contains Installation Instructions that has step-by-step instructions to set

up the project in a fresh Amazon EC2 instance.

29 April, 2013

2 /39

Table of Contents

Preface

Table of Contents

Development process

Goal / Project Overview

Architecture

Interface design

RESTful API

Object format

Technology Stack

Coding style

Class diagrams

Sequence diagrams

Code components

Build process

Tests

Generated API docs

Technology Stack

Class diagrams

Code components

Tests

Future Plans

Personal Reflections:

Installation

Frontend setup

Backend setup

Usage

3 /39

Development process

Our team follows a modified version of Extreme Programming (XP) software development

process. This process composes of three main parts. The first part is test driven programming,

where a software developer will write test cases first before starting to develop the actual

implementation. The second part is pair programming, in which two programmers will work

together on the same piece of code. This means one programmer will do the actual coding,

while the other programmer catches mistakes, write additional tests and write

documentation. The third part is refactoring. Refactoring refers to the “disciplined technique

for restructuring an existing body of code, altering its internal structure without changing its

external behavior." Through refactoring, XP encourages the developer to first focus on getting

a feature to work, and only after then make the code readable and maintainable through

refactoring. One modification we made to XP is instead of doing pair programming by having

two programmers physically in the same room, we create change logs and send them to

another programmer for review.

4 /39

Goal / Project Overview

Create a website with which a user can search a study space in UIUC based on his/her

preferences. A user can then filter our database of study spaces on campus by approximate

area, date and time range, availability of food or drink, silent or chatter, availability of

resources such as computer and books, etc. Our project allows students to find the most ideal

study space at any time of the day, and it is better than just going to places that they usually

use.

Motivation

We thought this project must be very interesting and helpful for students enrolled in UIUC

because students can use our project to find places they can go for studying based on their

preferences. For example, some students want to study with coffee, other students need to

study where computers are provided, etc. Furthermore, sometimes students want to study at a

silent place to study before exams, but other times they may want a place in which they can

talk when they need to discuss their team projects. Many students find their favorite study

spaces accidentally or through their friends, but it is kind of a big loss that they do not know

that there are much better places or simply more options from which they can use. We also

want such a tool for ourselves, so we believe it is good to be chosen as our project throughout

this semester.

Use Cases

● When a user accesses the top page, he/she can see a campus map and a study space

list.

● A user sees a list of study spaces including their locations, which are also displayed on a

map with detailed space information. User may select a study space based on the

information provided.

● A user can see small images right beside each item on the study space list so that they

can get general idea of how each space looks like.

● When a user chooses a study spot, the website will show detailed information of the

5 /39

study space (open hours, available properties, etc.)

● Each study spot is shown as a marker on Google Map.

● If a user zooms out Google Map, markers on the same building will be gathered up

together. When a user clicks the marker, a small bubble shows up and the user can

select one specific spot.

● When a user clicks a button on the bottom right corner on Google Map , the center

location of Google map will be back to user's current location.

● When a user clicks "Show in map" button in a study spot detail page, the map will

focus on the selected spot.

● If a user zooms in Google Map enough, each study spot on the same building will be

separately shown up.

● When a user types a query on a search bar, search result is dynamically shown as an

autocomplete.

● When a user inputs a query on a search bar, the system will filter the database and

give back a result list of study spaces.

● When a user types specific words about properties of study spots on a search bar, a

user can filter our database by his/her preferences (open hours, noise level, availability

of technology, etc.).

● When a user chooses a study spot from a list, photos will show up with detailed

information. A user can select photos will as if they are on a carousel.

● When users or librarians find errors or wrong descriptions on the website, they can

report problems through a contact form.

● An admin can login to admin interface and make changes on database. He/she can

add, remove, and modify study space information. Also, an admin can add/remove

photos.

● An admin can add a new admin account. Also, an admin can remove an account.

6 /39

Architecture

At the fundamental level, our application is divided into the front-end and back-end. In a

nutshell, the front-end component is responsible for displaying the information to the user

while the back-end is responsible for storing the data. Since the two components use

completely different technology stacks, there is a very well defined division of labor between

the two. The two components communicate through a RESTful API, which means that the

front end will access and change data stored in the back end by visiting a URL.

On the front end, since we are using Angular JS, we follow the Angular way. The Angular

way divides the application into modules, which are logical units. Further down each module

is divided into functional components. A directive is a component that deals with interface

manipulations and other visual components. A controller is a component which deals with

the business logic. It parses and translates the data fetched from the database into a form that

is readily usable by the views. A view is a HTML declaration of the specific presentation of

data into directives and other visual elements. The fourth type of component is service,

which are simply reusable segments of code that are general enough that can be used across

even different software applications. An example is the geo service, which provides the user's

current location to the application. In some sense it encapsulates commonly used code into a

nice, reusable package.

On the back end, we use Django. Django uses a model-view-template programming pattern.

It is similar to the well-known model-view-controller pattern, except that you call views

“templates” and call controllers “views”. Using the Django terminology, a view decides what

data goes into which template while templates control the presentation of the data. However,

as our backend communicates primarily through the RESTful API, there is not much

freedom for the presentation. So instead of making templates, we created serializers for our

models. Serializers are a core concept to the Django REST framework. Serializers turn

information in the database into the text representation which is then passed to the RESTful

API. This allows us to easily specify which data goes to the front end and which data stays

private. By following the model-view-serializer pattern, we were able to create RESTful APIs

very easily and concisely.

7 /39

Interface design

Illini Spatio is an information access tool, in that the primary goal of Spatio is to provide easily

accessible information about study spaces on campus. Therefore the philosophy for our user

interface design is to eliminate all barriers between users and the information they want to

access. We want the users to be able to get the information as easily and effectively as

possible. We think the two major use cases of Spatio are discovery and retrieval, so in

designing the user interface, we optimized for these two tasks as much as possible.

Users may use Spatio to discover new study spaces. Imagine the scenario where a user’s

favorite study space is fully occupied and he wants to find another place to study. He would

want to discover new study spaces nearby. That is why we put the map front and center in the

interface, together with a list of study spaces in the area. We also provided the user with a

“locate-me” button that will show their current location on the map. This way the user can

8 /39

quickly and easily see a list of study spaces near him and pick the ones he likes.

Users can also see details of a particular study space by clicking on a marker on the map or an

item in the list. In this view they will be able to see the facilities provided there and the

opening hours of that space. The main component of the detail window is the photo carousel,

which the user can easily flip through and see photos of the study space. We believe this is the

primary way in which users choose their study spaces. Moreover, the user can easily

recognize, through the pictures, whether they have been to that place before.

The other use case scenario is information retrieval, in which the user knows exactly which

study space they want to find, but want to check, for instance, the opening hours. That is

exactly why we have a search box that is always in the user interface. Users can simply type

in the name or relevant information into the search box and find a study space. The list of

spaces will automatically be filtered with the search term entered. The user will then be able to

see relevant results at a glance.

9 /39

RESTful API

The front end and the back end communicates through a RESTful API. The following is a list

of supported REST endpoints to our backend server, and a sample response object.

GET /studyspot/ - <spot[]> A list of all studyspots

GET /studyspot/<id> <int> id - The id for the spotto retrieve

<spot> A study spot object

GET /attributes/ - <string[]> A list of allavailable keys for attributes

GET /features/ - <string[]> A list of allavailable features

POST /sendreport/ <String> userName name of the user

Data in form encodedformat

<String> location the location related to thereport

<String> description description of the problem

<String> email (optional) Email address of the user

10 /39

Object format

Study spot

{

"id": 2,

"spot_name": "Second Floor",

"spot_type": "Library", // Should be things like "Library", "Cafe", "Dorm" etc

"location": {

"id": 1,

"building_name": "ACES Library",

"longitude": "-88.22514",

"latitude": "40.10280",

// address is currently not used or displayed anywhere

"address": "1101 South Goodwin Avenue Urbana IL",

"floor": "Second Floor"

},

"images": [

// A list of image URLs. Usable directly by appending to the server host.

"/static/spot_images/photo_1.JPG"

],

"features": [

// A list of strings indicating what is available in this spot.

"Comfortable Seating",

"Air conditioned",

...

],

"attributes": [

{

// Key value pair for displaying in the details pane

"id": 3,

"name": "Accessibility",

"value": "Fully accessible. Except when it's not.",

// Currently supported types are "Text" and "URL"

"datatype": "Text",

// Metadata for extensibility. This tag will be interpreted as a JSON

// string on the front end

"metadata": ""

},

...

],

"spot_hours": {

"monday": [

// Open midnight until 5 am and 6 am until 10pm

["00:00", "05:00"],

["06:00", "22:00"]

],

"tuesday": [

["03:00", "22:00"]

],

"wednesday": [

["07:00", "22:00"]

],

... (and the rest of the week) ...

11 /39

}

}

12 /39

Frontend

13 /39

Technology Stack

Name Website Description

Angular JS angularjs.org The main web framework.

jQuery jquery.com DOM manipulation library. jQuery is usedby Angular JS, and most use of jQueryshould happen inside a directive.

Grunt gruntjs.com Javascript task runner, like make or bashscripts. See Build Process section.

Bower bower.io Package manager for Javascript. Managesthe Javascript components insideapp/components.

SCSS + compass sass-lang.comcompass-style.org

CSS precompiler and authoring framework.Provides better CSS structures, likevariables, mixins and others.

Bootstrap twitter.github.io/bootstrap Stylesheet for scaffolding. Provides HTMLclasses for positioning and consistent styles.

Yeoman yeoman.io A workflow tool that generates boilerplatetemplates for HTML, JS, CSS, Grunt andBower.

14 /39

Coding style

We follow the JSHint (http://www.jshint.com/) style of coding. JSHint is a linting tool

derived from JSLint, minus all the weird suggestions from Douglas Crockford (while retaining

all the good ones). JSHint catches stylistic problems like indentation errors, missing

semicolons and camelcase variable naming etc, but perhaps more useful is that it catches

dangerous, but valid, code blocks like the use of eval, with, type coercion comparison etc.

To facilitate the linting process, we setup linting in two places. First we individually set up

SublimeLinter (https://github.com/SublimeLinter/SublimeLinter) in our Sublime Text editors

so that it automatically highlights all problems as soon as we save. This has to be done on

each of our programmers development environment. In addition to that, we set it as part of

our code building process, so whenever you run grunt build, it will pass the code through

JSHint to check for any errors. This is set up through the version controlled grunt files and

npm package managers.

15 /39

Class diagrams

16 /39

17 /39

Sequence diagrams

18 /39

19 /39

Code components

Directives

AspectRatio - A code that watches the width of a specific element and changes its height

accordingly. This is useful in responsive design where you want to maintain the aspect

ratio of something.

Detail - Controls the detail pane of the web page. Responsible for showing details from a

specific page.

DetailItem - Formats a detail item from its JSON representation to the user readable form.

Filter - Controls the search box on the top right of the page.

LocateMeBtn - Add on to ui-map to add a locate me button to the map.

MapInfoWindow - Used in conjunction with map-markers to define the info window format

when clicked on specific markers.

MapMarkers - A directive to use in conjunction with the Angular-UI ui-map directive.

Automatically syncs with the given markers array.

Pager - Provides a similar functionality to UINavigationController in iOS SDK. Gives the

element ability to push new elements passed in and replace the current page.

Services

Geo - An Angular service that updates with the current geolocation. This is a singleton object

so data calls from different clients will update the "global" location object.

Filters

Token - Filters a list of study spaces by the search token and the query.

Markers - A filter that groups spaces by their building if needed.

Controllers

MainController - The main controller for the default page of the app. Glues other components

together.

20 /39

Build process

http://gruntjs.com/

We use Grunt JS as our task runner. If you have never used it before,

you can think of it as a version of make, or as the JavaScript version of

bash scripts. It allows us to define tasks, or macros, so that they can be

run frequently.

To install grunt from the command line, use npm. The process is detailed here

http://gruntjs.com/getting-started.

List of useful grunt commands set up in our project,

grunt server - This creates a server in port 9000 to serve the front-end project. Very

useful for development and it reloads as any of the script files changes.

grunt doc - Generates the documentation as JSDoc of the system.

grunt test - Runs the unit tests. See the test section below for more details.

grunt e2e - Runs the end-to-end tests. See the test section below for more details.

grunt build - Builds the whole system. This will run the system through all necessary tests

and then generate a production ready version in the dist directory.

grunt ­­help - Show a list of all commands available. Not all of them are useful as grunt

by default exposes all internal commands.

21 /39

Tests

Angular JS has two types of tests: unit tests and end to end tests.

Unit tests

http://docs.angularjs.org/guide/dev_guide.unit-testing

Unit testing aims to test one single method or one single piece of functionality each time. And

we are very strict about this. For example test should not try to instantiate a directive from the

HTML because it mixes the initialization with the execute of the method. Instead, we put each

directive's controller into a separate global object, so that we can truly test function by

function, method by method.

The grunt command to do unit testing is grunt test. By default it starts a new instance of

Chrome (which should be installed on your system) and run the tests in that instance. It will

then report the results in the terminal window. Configurations for the unit test can be found

in testacular.unit.js.

End to End tests

http://docs.angularjs.org/guide/dev_guide.e2e-testing

End-to-end tests are integration tests that tests from the users perspective. It executes

commands from the user's perspective, like a click, keypress or input into a search box. It then

checks for things like visibility of elements, text contents of a particular text field etc.

The grunt command to do end to end testing is grunt e2e. Alternatively you can run grunt

e2e:live to create an instance of Chrome that will not close by itself, and watch for changes

and re-runs the test. This is useful for debugging the tests. End-to-end tests are set up so that

it runs on the built version of the app, which means it will also catch errors introduced during

the build process. Moreover, that means changes to the system will not be tested by e2e until

the system is built. Configurations can be found in testacular.e2e.js.

22 /39

Jasmine

http://pivotal.github.io/jasmine/

Both type of tests has a syntax that is derived from Jasmine. For more information, please

visit the link above.

Testacular / Karma

http://karma-runner.github.io/

The tests are run by a test runner which used to be called Testacular. For some curious

reasons, the runner changed its name to Karma. For the most part, this runner will run

transparently and you won't realize that it is even there. But what it is responsible for doing is

starting Chrome (or other browsers), pulling in the required files and tell the test framework

to start.

Test coverage

The grunt file is set up to automatically generate coverage results about our tests. The output

is an HTML file found in app/coverage/unit/[Browser name]/index.html. Note

that test coverage for e2e testing is known to be inaccurate because of the way it is run. So

take it simply as a guidance and proceed with caution.

23 /39

Generated API docs

As mentioned in the Build Process section

above, we have set up an automatic process to

generate API documentations from code

comments. We are using JSDoc

(http://usejsdoc.org/) for this purpose.

However, since some of the Angular constructs are not so compatible with JSDoc

auto-detection features, we have to include annotations to make sure JSDoc picks them up.

For instance, any directive, service, filter or controller should be shown as a Class, and

therefore should have the @class annotation. Moreover, in most cases JSDoc would not be

able to pick up the methods of that Angular component (for example a function of a scope as

a method of the controller), therefore each $scope.myMethod has to be annotated with

@memberOf myController.

As mentioned, to generate the documentation, simply run grunt doc. This will create or

update the documentation in the doc folder. The output format is HTML, and can be viewed

from any web browser.

24 /39

Backend

25 /39

Technology Stack

Name Website Description

Django djangoproject.com The main python backend framework.

Django REST django-rest-framework.org Framework built on top of Django forcreating REST APIs.

Grappelli grappelliproject.com A much better looking template forDjango admin interface.

South south.aeracode.org Schema migration system. Updates theschema with minimal damage to existingdata when the model has changed.

Django CORS github.com/ottoyiu/django-cors-headers

Middleware for Django to add CORSrelated headers.

26 /39

Class diagrams

This is the sequence diagram for the API. It is used in many different user stories as it is main

way to retireve any data from database. For example:

A user sees a list of study spaces including their locations, which are also displayed on a map

with detailed space information. User may select a study space based on the information

provided.

27 /39

Code components

Serializers - It transmits the data structures and objects such as features into a format that

can be properly processed by the front-end and proceed accordingly.

InitDB - Initializes database from models

Models - Generates different models for the database. There are six different main models.

Such as:

Location: which is a general location of a set of study spots.

Open Hours: Open hours for a location.

Features: Feature list that is attached to each location.

Attribute: Generality feature for the admin to add new attributes without changing the

code

StudySpot: It is for the individual study spots around the campus..

SpotImage: Contains the information regarding the image of study spot.

Admin: It sets the permissions for the admin.

URL: Defines the URL patterns for the study spot information.

Views: Generates different views and returns list or individual locations.

Widgets: It is a widget for the input of the latitude and longitude with the Google Maps.

28 /39

Tests

Testing our API:

We can now access our API, both from the command-line, using tools like curl.

Most of the backend testing is done using the built in Django test services. The majority of the

testing is done on the Django views. The Django test service, when run, creates a new

temporary database to which the test code is executed upon. The test service can also allow us

to mock sending requests to the views and checking the response. With it we can test the API

by submitting requests to Django and checking if the page is returned properly with all the

correct information. Tests are run by typingt he command: python manage.py test

The model of the database can be tested via the Django test service by execution operations on

objects represented by the model. Additionally, Django upon creating the database validates

the Models to check for any errors in the model configuration.

29 /39

Future Plans

We are currently discussing with our client, the University Library, to host the application on

their servers and they will deploy the software to all students on campus. Depending on

further discussions with the library and the success of the project, we may continue

development of the project.

In the current version, the primary goal of searching for study spots in libraries all over UIUC

has been achieved. In addition to that, we have built an extensible system that can be

generalized easily to be used on other campuses. In the future, the University Library could

ask another team to add new features like a user login system and commenting system to this

Application. As a campus-wide project, there are a lot of work to be done data-wise: besides

libraries, information on other study spaces such as the Illini Union, open spaces in campus

buildings, and student dorms will have to be collected. Moreover, it would also be nice to

integrate directly with reservation systems of library study spaces so that users can use the

application not only for searching study spots but also for reserving a study room. Users also

can see current availabilities and conditions of each study space with the information updated

dynamically.

We hope the application will be popular among UI students and be proven very useful.

30 /39

Personal Reflections

Maurice Lam

This is a great project that allowed us to venture into the cutting edges of web development.

We used relatively new frameworks, libraries and tools, like Angular JS, Yeoman, Grunt etc.

Using new stuff is not always fun, though. A lot of these new tools lack proper documentation

and support, and the compatibility with other libraries are also not guaranteed. A lot of times

halfway through the project we end up fixing bugs or creating workarounds for the libraries

we use. Anyway, it was a great project, and I am grateful to have these team members who

are willing to learn these new stuff with me.

Wei Chen

At the very beginning I couldn’t imagine myself be in such a large group working on such a

large scale application. However now looking back, I would definitely say it’s a precious

experience that we can never get anywhere else. We chose to do it the “hard way” by

challenging ourselves with all those exciting new web technologies, which were not taught in

any courses. It really did reformed the way I looked at web applications. It was also nice to

have the chance to work with real customers. Most importantly, this could never be possible

without everyone’s dedication and devotion into this project.

Shogo Kimura

Through this project, I have learned a lot. We decided to use a lot of new technologies which

we were not familiar with at first such as AngularJS, Yeoman, Bootstrap, etc. In fact, this

project was a big challenge for me, but I am glad that the project is finally achieved. I am

really grateful to such great team members; they are all helpful and skillful. Also, it was the

first time for me to work with clients/customers. We frequently contacted to customers and

had meetings to make sure our working progress and their requirements. It was a really good

experience, and I am sure that this experience will be helpful once I get into the society for

work. Many thanks to the project, the course, and the team members!

31 /39

<edited>

<edited>

<edited>

Shengchao Huangfu

I got a very good experience from this project. We used a lot of new technology like

AngularJS, Yeoman, Twitterbootstrap to develop our project. I have learned a lot about

Angular framework and skills to set up a good environment for the front-end development.

Our team was very good, and I really enjoyed working with my teammates. They helped and

taught me a lot. Additionally, we had several meetings with our customers. This was the first

time for me to work with real customers, which would be an important experience in my

future. Anyway, really thanks to my great teammates.

Litin Chowdary Tripuraneni

By far, this is one of the best experiences I had in computer science courses. Coming from

electrical engineering, I was lacking the coding skills which are needed for a computer science

student. This project helped me in overcoming this problem. I was able to learn AngularJS,

Yeoman, Bootstrap and many web development skills. Even though my contribution to the

project code was not satisfactory due to lack of my programming skills, I was able to learn

many new things and work with really cool people. My group members helped me a lot

throughout the project and we had lots of fun through out the weekly meetings. Now, I am

pretty confident that I can work in group projects efficiently and elegantly with this

experience. I sincerely thank all my group members and course staff for this wonderful

experience.

Smit Shah

This is one of the largest group project I have worked on in Computer Science. I really

learned a lot about how to collaborate and integrate various components from each members.

I also learned about backend technologies such Django, REST framework and others. For this

project, I collaborated with different group members and learned how to work together. I

really enjoyed the whole process of how everything came back together form backend to

frontend development and worked in unison. I would like to express my gratitude towards my

team members and Caius Brindescu who have always been helpful to me throughout the

project and made it more fun and enjoyable.

32 /39

<edited>

<edited>

<edited>

Joshua Harris

This project was a great experience. I learned a lot of new skills such as the Django

framework, I got to practice working with a RESTful API implementation, and worked on

making an email service. I enjoyed the challenge that came from learning about all these new

ideas and it helped to make me a much better developer. Additionally our team had a lot of

great front end developers. And while I got limited exposure to it, I still managed to learn a lot

about design principles. Additionally working in a team of 9 really forced us to have to

communicate unlike any other class project before. While it put us all out of our comfort zone

once in awhile it made us all stronger in the end.

Jordan Arrieta

Working on this project allowed me to further develop my coding skills. I learned new

material such as working with Django. This also was the first time I worked in a group of 8+

people (our group had nine!). It was definitely hard to work together efficiently at first, but

now as I look back, I can see we worked very well as a team and were able to accomplish our

goals. Communication was essential and I feel that our team managed accordingly. I learned

a lot, but also had fun with my team and this project!

Gurneet Sandhu

This project helped me learn the basics of Django in more detail. I worked with Django and

Python before but I never implemented the REST framework. This was the first time I

worked in a large team and I learned a lot about my strengths and weaknesses from the

experience. I will certainly use this experience in the future to work on bigger projects. My

group mates did a lot of stuff where I wasn’t sure. It was definitely an enriching experience.

33 /39

<edited>

<edited>

<edited>

Appendix

34 /39

Installation

The following instructions are configuration steps for a fresh Amazon EC2 instance. For most

cases the steps will be the same on other Linux systems. More specifically we were setting this

up in a Ubuntu environment.

First we have to set up the server with the basic server setup, including Apache, MySQL,

Python and Python-Pip.

sudo apt­get install git apache2 mysql­server mysql­client python­pip

python­dev

Then we have to get a copy of the code from the github repo. Note that the repo is currently

private. To request access, please contact a team member.

git clone https://github.com/eternalcharlie/space­avengers

git checkout deploy

Frontend setup

Deploy Installation

First set up apache to serve the files from the built system with the following steps. For more

on Apache documentation, see

http://net.tutsplus.com/tutorials/apache-2-basic-configuration-on-unix-like-systems/.

Depending on different operating systems, please open corresponding config file to modify

DocumentRoot or create new VirtualHost and point to:

space­avengers/app/web/dist

35 /39

Development Installation

In order to support development, you would have to install the following additional libraries.

First install node.js. Note that we explicitly require an older version of node.js because grunt

is not compatible with the newer version yet (as of the time of writing).

sudo apt­get install npm

git clone https://github.com/joyent/node

git checkout v0.8.15

./configure

make

sudo make install

Then install the tools that we use with front-end development: namely, grunt, yeoman and

bower.

sudo npm install ­g yo grunt­cli bower

Then install ruby, and compass, which are required for compiling SASS (or SCSS) files.

wget http://production.cf.rubygems.org/rubygems/rubygems­2.0.3.tgz

tar ­xzvf rubygems­2.0.3.tgz

sudo apt­get install ruby

sudo ruby setup.rb

To make Node.js packages work in the frontend module:

cd space­avengers/web/

sudo npm install

Finally you can do a grunt build to check that the system is working.

36 /39

grunt build

To start a temporary testing server for development, use grunt server.

Backend setup

First install Django and the relevant packages. Namely django-rest, south and grappelli. We

also need to install MySQL clients and the Python connectors.

sudo easy_install ­U distribute

sudo pip install django south djangorestframework django­grappelli

pil

sudo apt­get install libmysqlclient­dev python­mysqldb

sudo aptitude install libapache2­mod­wsgi

modify space_avengers/settings.py for database setup

Finally run syncdb to setup the database schema

python manage.py syncdb

Creating new virtual server

For testing purposes, you can run python manage.py runserver. But in a production

environment, you should run it in a more robust server package like Apache. The steps below

will go through how to setup a basic virtual host for Spatio.

First, create a new virtual host in Apache configurations, a sample virtual host definition may

look like this:

37 /39

<VirtualHost *:8080>

        ServerAdmin webmaster@localhost

        DocumentRoot /PATH_TO_INSTALLATION/space­avengers

        WSGIScriptAlias /

/PATH_TO_INSTALLATION/space­avengers/space_avengers/deploy.wsgi

        <Directory />

                Options FollowSymLinks

                AllowOverride None

        </Directory>

        ScriptAlias /cgi­bin/ /usr/lib/cgi­bin/

        <Directory "/usr/lib/cgi­bin">

                AllowOverride None

                Options +ExecCGI ­MultiViews +SymLinksIfOwnerMatch

                Order allow,deny

                Allow from all

        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log

        # Possible values include: debug, info, notice, warn, error,

crit,

        # alert, emerg.

        LogLevel warn

        CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

Create deploy.wsgi inside space­avengers/space_avengers/ which will redirect all

the http requests.

38 /39

import os

import sys

path = '/PATH_TO_INSTALLATION/space­avengers'

if path not in sys.path:

    sys.path.append(path)

os.environ['DJANGO_SETTINGS_MODULE'] = 'space_avengers.settings'

import django.core.handlers.wsgi

application = django.core.handlers.wsgi.WSGIHandler()

Restart Apache server to see it work.

sudo service apache2 restart

Please note that if you wish to run frontend and backend on the same server, you might need

to run them on different ports. We would recommend running front end on Apache with port

80 and back end on Apache with other customized port.

CONNECTION

modify dist/assets/config.js to backend url

Usage

After the installation, simply navigate to the URL of the host to start using the app. No

additional requirements are needed to start using.

39 /39