QuickStart: Fuse and Data Storage

Get going with some fast hands on examples.

Introduction

This QuickStart shows you how to create, save and load objects from AppStax collections in Fuse. Download the examples and follow along with the code below. This example is found in examples/quickstart-datastorage/

To run the code you need to install Fuse and open the project in examples/quickstart-datastorage/ with Fuse and preview it on a physical iOS or Android device.

Loading objects

The loadMessages() function loads all objects from an AppStax collection and updates the messages Observable, which is in turn exported to the MainView.

var messages = Observable();

function loadMessages() {
    appstax.findAll("messages").then(function(objects) {
        messages.replaceAll(objects);
    });
}

module.exports = {
    messages: messages
};

MainView displays a list of messages by iterating over the messages Observable:

<Each Items="{messages}">
    <Panel Padding="20">
        <Text Value="{text}" TextWrapping="Wrap"/>
    </Panel>
</Each>

Adding new objects

The addMessage() function is triggered by the button in MainView. It creates a new AppStax objects, sets its .text property and saves it to the collection.

function addMessage() {
    var message = appstax.object("messages");
    message.text = "Hello Fuse! " + Date().toString();
    message.save();
}

Try changing the value assigned to the .text property to save different values.

Complete app

<App>
    <JavaScript File="appstax.js" ux:Global="appstax" />
    <JavaScript File="MainView.js" />
    <ScrollView>
        <StackPanel Padding="10,40">
            <Panel Padding="20">
                <Button Clicked="{addMessage}">
                    <Panel Color="#09F" Padding="20">
                        <Text Value="Add message" Color="White" TextAlignment="Center" />
                    </Panel>
                </Button>
            </Panel>
            <Each Items="{messages}">
                <Panel Padding="20">
                    <Text Value="{text}" TextWrapping="Wrap"/>
                </Panel>
            </Each>
        </StackPanel>
    </ScrollView>
</App>
var Observable = require("FuseJS/Observable");
var appstax = require("appstax");
appstax.init("NkxXMTRibGhEWHBLcg==");

var messages = Observable();

loadMessages();

function loadMessages() {
    appstax.findAll("messages").then(function(objects) {
        messages.replaceAll(objects);
    });
}

function addMessage() {
    var message = appstax.object("messages");
    message.text = "Hello Fuse! " + Date().toString();
    message.save().then(loadMessages);
}

module.exports = {
    messages: messages,
    addMessage: addMessage
};

Note: This QuickStart uses a shared app key for everyone viewing these examples, so don't be suprised when data appears that you didn't add yourself. Sign up for a free trial to get your own app key to use instead.

What's next?

More QuickStart Guides

Set up your own app project on your computer