Virtual Aquarium

Multiple high definition displays showcase the Virtual Aquarium world, where users can interact with the live-streaming presenter, create a custom avatar fish and swim it around in the aquarium world, watch videos, and play games / activities.  Users interact via provided built-in tablets or by using their own mobile device.  The live presenter can also see and hear users at different locations, allowing real-time conversations and interaction!

Virtual Nile

According to an ancient Egyptian story, party guests would float a lotus flower with a burning candle placed carefully in the middle.

Each person would share a dream hidden in their heart before releasing the lotus flower down the famous Nile river.

It was believed that if the flame continued to burn for the duration of the meal their dream would eventually come true.

Now you can float your own lotus candle down the Nile without going to Egypt.

Portland OR’s Baba’s Mediterranean Grill recently installed a 4-screen “Virtual Nile” in their new Cascade Station location, which officially opened January 6th, 2018.  With the Virtual Nile web app, customers can create a dream and immediately float their very own lotus flower down the Virtual Nile.

Tech Stack:

  • Cloud: AWS API Gateway, Lambda, Dynamo DB, PostgresSQL DB, AWS IoT
  • “Big Screen”: AWS IoT, Adobe AIR, Starling, Feathers
  • Web App: ReactJS, SCSS, Ramda, Axios

Trends: Mobile Web vs Mobile App

From the August 2017 comScore study slides:

  • users spend 87% of their time in apps, 13% in mobile web, however… (slide 5)
  • across age segments, users’ top 10 apps account for 96-97% of their app time (slide 9) – i.e. Facebook, YouTube, Google Search, etc.
  • mobile web gets 2.2x more unique users per month than apps (slide 6)

From this data, it seems that the casual customer would be more likely to visit a mobile website than download and install an app.

A quote from a recent Morgan Stanley analysis:

‘As a crude generalization, the browser is for more casual audiences and apps are for more frequent and loyal customers.’

 
So both mobile web and mobile apps have their place.

React.js

React.js is a JavaScript library created and maintained by Facebook for building user interfaces.  React maintains a virtual “DOM” in memory and makes updates to the real DOM only as needed.

React Native applies the same principles to cross-platform UI development for iOS and Android.

React.js components are typically written in JSX, a JavaScript extension syntax that allows inlining HTML with code, among other features.  JSX is optional and not required to use React.

Thoughts?  I really like how UI elements and state are componentized and non-global.  I don’t like how there are now two DOMs – the real one and the React-managed one.

The React tutorial is a Tic Tac Toe game; here’s my completed version.

JavaScript Array.map() and arrow functions

In newer versions of JavaScript (ECMAScript 5 +) we have the wonderful Array.map() method, and in even newer versions (ECMAScript 6+ aka ECMAScript 2015) we have the new arrow function expressions.

This allows for concise and powerful code like the following:

// an Array of integers
var array1 = [1, 4, 9, 16];

// create a new Array from the original Array using a function
const map1 = array1.map(x => x * 2);

// display; expected output: Array [2, 8, 18, 32]
console.log(map1);

NoSQL and DynamoDB

Today I will look at the NoSQL concept and specifically Amazon’s DynamoDB.

NoSQL stands for “No SQL”, which means you don’t use SQL (Structured Query Language) to manage the database.  Data is not arranged into relational tables (with relational indices that point to other tables), but is arranged in a variety of data models, including document, graph, key-value, and columnar.

NoSQL was born because of the need for scalability and performance.  In the early 2000s it was discovered that relational databases do not scale well at a reasonable cost.

Continue reading “NoSQL and DynamoDB”

Captain McFinn’s Swim & Play

An early-childhood education and entertainment game, including original videos, music, artwork, animations, interactive activities, and a live host! That’s a lot to pack into one app!
Implemented with Adobe AIR; available for iOS and Android.

img_0540 img_0543 img_0544

Download_on_the_App_Store_Badge_US-UK_135x40en_badge_web_generic