"What should I eat? Shake your phone when you can't decide what to eat!"

 

Shekit

Personal Project | Computational Media with Professor Daniel Shiffman | Dec 2016

Mobile Development | UX Design

Tools: P5.js, Toxiclibs.js, JavaScript, HTML, CSS, Cordova plugin, and Foursquare API

 

 

Synopsis

Shekit is an app that randomly recommends a close-by restaurant by one simple gesture of shaking a mobile phone. It was created for the people who can't easily decide what to eat like me. The app uses specifically food location data from Foursquare API and bases on the GPS. Once the users shake their mobile phone, small balls representing food venues bounce around the phone screen and when one venue ball hits the exact center of the phone screen, it pops up to show the detailed information about the venue. All the venue information data used are open source data from Foursquare API: name, cuisine, category, rating, distance, address, phone number. Simple and fun to use. Just shake it! 

shakitmockup.png
 

User Flow / UI Design

Step 1  : Shake

“Shake it!”

Like shooting stars in universe, venues bounce around the edges, and play sound when they hit the edges.

shakit_wireframe.png

Step 2 : Explode

If one venue hits the exact center of the phone screen, it explodes into particles.

shekitmockup2.png

Step 3: Boom!

Exploded venue’s detailed information pops up: Name (Chipotle), Cuisine (Mexican), Category (restaurant), Rating (5 star), Distance (far), Address and Phone number.

 
 

ICONS

 
Restaurant

Restaurant

Cafe

Cafe

Bar

Bar

Rating

Rating

Distance

Distance

 
 

Development Process

Brainstorming

Brainstorming

Applying physics to make balls bounce around edges

Applying physics to make balls bounce around edges

Getting venue data from Foursquare API using GPS - name

Getting venue data from Foursquare API using GPS - name

Mapping distance to the venue from current location into the size of the balls. The bigger, the closer!

Mapping distance to the venue from current location into the size of the balls. The bigger, the closer!

Testing explosion animation

Testing explosion animation

Getting name, category and address

Getting name, category and address

Getting name, cuisine, category, rating, address and number. Only distance missing!

Getting name, cuisine, category, rating, address and number. Only distance missing!

Getting distance. Need to adjust CSS to center texts

Getting distance. Need to adjust CSS to center texts

Getting all the data I need and adjusting CSS to center texts

Getting all the data I need and adjusting CSS to center texts

Demo from many different place

Demo from many different place

Balls with no icon are non-food venues

Balls with no icon are non-food venues

This universe view only displays name of the venue

This universe view only displays name of the venue

 

User Testings in Different Locations

 

Some Code

Below are screenshots of some code which I think is the main part of the front-end development; I retrieved data from Foursquare API, displayed the data and implemented some animations. 

 

HTML - index.html

Screen Shot 2018-04-10 at 12.18.04 AM.png
  • Load screens as blocks when the device is ready

JavaScript - sketch.js

Screen Shot 2018-04-10 at 12.19.53 AM.png
  • The main javascript file

  • Made variables for Foursquare API URL including first default part with api key and query; I put ITP latitude and longitude as default coordinates

  • Loaded all the media files

Screen Shot 2018-04-10 at 12.20.28 AM.png
  • Set position coordinates as latitude and longitude

  • Got JSON data from foursquare api using URL that includes position coordinates

  • Got place data and sorted by food (restaurant), cafe, and nightlife (bar)

  • Got all the data needed: name, categories, checkins counts, distance, address, phone number

  • Limited to 30 venues

JavaScript - ball.js

Screen Shot 2018-04-10 at 12.05.46 AM.png
  • Ball object has all the variables and functions needed to place, move and turn venue balls, and retrieve data from Foursquare API

  • this.move and this.turn functions make the balls bounce around inside a screen when I shake the mobile device 

 

Screen Shot 2018-04-10 at 12.07.11 AM.png
  • this.display function determines size and compositions of all the displayed data and images

  • Venue balls explode either when I click one ball or when I shake the mobile device and one ball hits the center of the screen

 

 

What's Next?

 
shekit_thumnail.png

 

  • Add map feature when clicking on the venue ball

  • Change background based on time (daytime / nighttime) 

  • Incorporate machine learning to increase chance of previously selected restaurants 

  • Add reservation / transportation feature

  • Implement social platform