User Testing Findings

User Experience Design

AJAX calls and external APIs

This week I added code to pull data from NYC’s Department of Parks and Recreation. They publish their Events Calendar via NYC Open Data. To get the XML data into a format I could work with in NodeJS, I used the xml2js library which converts XML to a JavaScript object which I then convert to JSON.

For now, my /nycdata route does the data crunching and adds the events from ‘today’ to my database.

I also added a modal window with the event’s data that’s loaded via an AJAX call to the database. To do this, I created another API route to return just one event by it’s ID.

You can checkout the live version in progress here: betherenyc.herokuapp.com
And follow the code on GitHub: github.com/michelleboisson/betherenyc

To do:
– either have /nycdata called once via a cron job at the beginning of the day
– check to see if today’s data has already been added to avoid duplicates.
– add a visual indicator that shows that data is being loaded via AJAX

Dynamic Web Dev/HTML5

ajax/api/betherenyc

JSON API for betherenyc.com

This week, I learned how to create a JSON API for the betherenyc data using ‘response.json(‘jsonData’)’ in NodeJS. Here’s the feed: http://betherenyc.herokuapp.com/api/allevents/

You can follow the code for the whole project on GitHub: https://github.com/michelleboisson/betherenyc

// return all event entries in json format
app.get('/api/allevents', function(request, response){</code>

// defining the fields I want to include in the json data
includeFields = ['name','desc','urlslug','date','time','place'];

// query for all events
queryConditions = {}; //empty conditions - return everything
var query = Event.find( queryConditions, includeFields);

query.sort('date',-1); //sort by most recent
query.exec(function (err, eventPosts) {

jsonData = {
'status' : 'OK',
'events' : eventPosts
}
response.json(jsonData);
});
});

Betherenyc Databases with MongoDB

This week, I connected a database to my betherenyc project. I’m using the noSQL database MongoDB, through Heroku, which will give me more flexibility with the data and its structure as opposed to a traditional SQL database. I’m using the MongooseJS library to interface with the database.

So far the fields my data schema for events is as follows:
var Event = new Schema({ name : String , urlslug : String , desc : String , date : { type: Date} , time : String , place : String });

See the progress of this project at betherenyc.herokuapp.com
See the code at github.com/michelleboisson/betherenyc

I’m also building an online game that we’re calling ITPville for my Big Games class. It’s a multiplayer game in the likes of CityVille. More info on this coming soon.

betherenyc/heroku/mongodb/nodejs

Node modules – organizing with frameworks and templates

This week I began building templates for betherenyc nodejs and ejs and playing with data, saving it to the server through javascript. Next week databases. You can add an event through the form, view a single event page that is dynamically generated, plus the new event will be added to the homepage.

betherenyc in progress.

Follow the code on Git.

betherenyc/heroku/nodejs

Core Idea and Wireframes

This week’s assignment is about focusing on the Core Experience. We were to develop a simple, single concept idea such as thistothat.com or cuteroulette.com. Develop a web homepage schematic or key screen of an app for our idea. The key is to state a clear value proposition and then represent it schematically using the tools in Balsamiq.

For my project betherenyc the core idea is:
to find events that are happening around you and now.

Here are some wireframes I came up with on the desktop and mobile versions.

User Experience Design

CSS3

Building on my mockup for betherenyc. Here is the latest. I played with gradients, rounded corners, custom fonts, and opacity.

Here’s the latest.

And here’s another I’m toying with.

HTML5

First Heroku App

We are using Heroku for deploying our apps in class. Heroku is a service to host your web application in the ‘cloud’. Their tools allow us to easily increase the number of servers, database and performance of your web site if you have an unexpected wave of traffic.

I got everything installed and launched this simple app to prove it:
http://bethere-heroku.herokuapp.com/

I will be building on this throughout the semester.

Basic HTML

This week’s assignment was to practice HTML4 and CSS2. So I started building the layout for the homepage of betherenyc. Here is what is might start to look like. I wanted to practice working with fluid layouts so everything scales as you resize the window. Later I will be adding media-queries to create a responsive layout. When this is done, the goal is for betherenyc to look great on whatever size display (desktop, mobile, tablet, whatever).

Here’s the progress.

HTML5

Dynamic Javascript

Our assignment this week was to get comfortable with Javascript. We had to create a simple form to collect data and use javascript to manipulate the html elements. I decided to start create creating a form that will be used to get event data for betherenyc. On submit, a new event is added to the “Recently Added” list on the side. You can also click on the titles on this list and get more information about each event.

View the page here.