Developer Program

Developer Program

Everything you need to start developing apps for oalla is available here. You'll find everything from the API documentation and design guidelines, to how you can distribute your app.


CoffeeScript

Oalla apps are written in CoffeeScript. CoffeeScript is a little language that compiles into JavaScript. Before reading on, read this primer on CoffeeScript with demos that can be run in the broswer.

What's Next?

Getting A Developer Account

Send an email developers@oalla.com for an account and we'll try and get it to you in 24 hours.

Setting Up Your First App

Click "app store" button in the dashboard.

Press ESC when in the app store. "Build an app" button will appear at the bottom of the categroies. Click it.

Enter the name of your app and click "Create App". We'll go over what the "App Services" are later.

Development Environment

As an oalla developer, you have access to our in-browser development environment. You don't have to download any new software to your computer. Click through how the features are used.


Features

Save and Run Home
Upload Image Deploy
Insert Code Tweet
App Title Points

Developing Your App

Creating a div

The building block of an app looks is a div. By adding together multiple divs, you can create an app.

Line 1 creates an element and stores it in the varaible title. We store it in the variable title so that we can update properties of the element later in the program.

Line 2 says that the element will contain the text "My title".

Lines 4 and 5 describe how the title will look.

Line 6 then takes the title element and adds it to area, which is the canvas for the app. All elements that the app creates should be appended to area.

title =  $ "<div>",
    text: "My title"
.css
    fontSize: 85
    color: 'tomato'
.appendTo area

Creating an image

Images are another important building block of making digital signage applications.

Line 1 creates an image element and stores it to the variable monet.

Line 2 has the url of the image to be displayed.

Lines 4 through 6 are where the image will be placed on the area.

Line 7 appends the image element to the canvas of the application.

monet = $ '<img>',
    src: 'http://bit.ly/1y8hzjq'
.css
    position: 'absolute'
    left: 810
    top: 390
.appendTo area

Testing Your App

You can use the oalla simulator to develop apps without any hardware. There are tools to preview your app, debug, and test using SMS.


Features

Simulator Full Screen
SMS Testing console.log
Debugger Console Chrome Developer Tools

Implementing App Services

constructor

The constructor is called right after the app launches. Everything that sets up the application, such as background images and text, should go here.

constructor: (@area, @sms_id, @appinstance)->

initialize

This method is called after the constructor is finished. It get the last 100 items that are in the dashboard for the app. For example, in the corkboard application, the notes that were previously displayed are put up using this method.

initialize: (items)->
    for item in items
        console.log item

sms

This method is called when someone sends an SMS to the display.

sms: (item)->
    console.log 'Sample Oalla App:sms'
    console.log item
    message = item.data.text

mms

This method is called when someone sends a MMS to the display.

mms: (item)->
    console.log 'Sample Oalla App:sms'
    console.log item

app parameters

You can also have parameters that are editable in the dashboard that will change the behavior of the application. When you create an app, click the 'data' box under app services. Then add the names of the parameters. For example, question and fontSize. In the dashboard, there will be a question and fontSize field that the board administrator can change.

constructor: (@area, @sms_id, @appinstance)->
    #param_get param_number, default
    question = param_get 0, "What is your name?"
    fontSize = param_get 1, 20

Keyboard Shortcuts

Save and Run

Run code in the code editor with ctrl + enter.

Comment Code

Toggle comments on a line or block of code in the editor with ctrl + /.

Open Chrome Developer Tools

Windows/Linux Ctrl+Shift+J.
Mac Cmd+Opt+J.

Libraries Included

These are some libraries that are automatically included that can come in handy.

Google Fonts

Hundreds of free and high-quality fonts to use.

load_fonts ['Lato']

$ '<div>',
    text: 'Hello'
.css
    fontFamily: "Lato"
    fontSize: 100
    left: 100
    top: 100
    position: 'absolute'
.appendTo area

wait

Wait is a set of simple wrapper functions for delaying activity in JavaScript and CoffeeScript.

wait 50, ->
  # This callback will run in 50 milliseconds

repeat 50, ->
  # This callback will run every 50 milliseconds

doAndRepeat 50, ->
  # This callback will run immediately, and every 50 ms

waitUntil checkCondition, ->
  # This callback will run when `checkCondition` returns true

transit

Transit is a super-smooth CSS transitions and transformations.

box = $ '<div>'
.css
    left: 0
    top: 0
    width: 300
    height: 300
    backgroundColor: 'rgb(6, 162, 203)'
    position: 'absolute'
.appendTo area

box.transit
    x: 300
    y: 300
    scale: 1.2

moment.js

Moment.js is a lightweight library for parsing, validating, manipulating, and formatting dates.

#Format Dates
moment().format('MMMM Do YYYY, h:mm:ss a') # January 8th 2015, 11:46:26 pm

#Relative Time
moment("20111031", "YYYYMMDD").fromNow()   # 3 years ago

#Calendar Time
moment().subtract(10, 'days').calendar()   # 12/29/2014
moment().add(10, 'days').calendar()        # 01/18/2015

Example Apps

Browse these examples to see how it all fits together.

Cork Board

Start getting big ideas! Use your mobile phone to text your idea to the screen. You can even customize the prompt about what people answer.

Swirl

A yellow flyer perfect for any event. Featuring a yellow candy cane background and a tornado of words. The text is dynamically adjusted to fit the space. The text on the left and the right will automatically be formed into slab text for vertical visual rhythm. All text is dynamically sized to fit the slide.

Real Estate

A modern real estate "yard sign". Customize the slide with your text and images or use the defaults.

Distributing Your App on the App Store

Distribute your apps on the App Store and to reach displays around the world.

Deploy

Press the star button to release your app to the store. This will move your app to the App Store and take a screenshot to be used as a thumbnail in the App Store. To undeploy your app, click the star again.

Some Specifics

Let people know a little bit about the app before they try it. This data is used to categorize the app in the App Store and in the webpage that is craeted for the the app.

Categories

Add categories (comma separated) you'd like the app the be in. Use categories already in the App Store or make a new one.
Example: library,touch

Description Short

A short, less than 130 characters, description of the app. Capture the attention of the user.

Description Long

A longer description of the app. Give the details and how to use the app here.

Tweet about it

Press the Twitter button to tell people about your new app. Once you tweet about it, a webpage for your app will be created too!

Help and Contacting Us

Unfortunately, we can't always get it right or you need some extra help. If something doesn't seem to be working right for you with oalla or you can't find an answer, let us know and we'll do everything we can to help you out.