. . .

TypeScript Quickstart

TaskManager tutorial as ts-node script

In this tutorial you will learn how to:

  • set up a App-Backend with the custom class “Task”

  • deploy the App-Backend

  • create a simple TypeScript project with the generated SDK

  • set up the connection to the App-Backend and create a user

  • have a look at the data in your App-Backend

  • create Task objects in TypeScript and store it within the App-Backend

  • query data from the App-Backend

  • using the transpiling helper

1. Sign Up or log in with your existing account here to start using Backend as a Service.
images/download/attachments/27724728/LogIn.png

2. Now enter a unique name for your application e.g. “YourNameTaskManager”. Since we plan to give developers the opportunity to share projects, application names in the system must be unique. You do not need any of the predefined modules in this tutorial.
images/download/attachments/27724728/taskManager_newBackend.png

3. Create a new module by going to the Module Market and clicking on "New Module" in the submenu. Choose a name and description and click "CREATE".

images/download/attachments/27724728/newNmModule.png

4. Go to the „Class Editor“- Tab to create a class in our App-Backend. You will be asked for a class name after entering the tab. Just name the first class "Task". Scroll down to the attributes and add a String “description”, a Number “done” and a Date “untilDate”.
images/download/attachments/27724728/task_addClassAttributes.png

5. Compile your Module by click on "..." and "compile" for your TaskModule in the Module-Menu.

6. Go to SDK Tab and download the TypeScript SDK by clicking the „Download SDK“ button. You will get a zip file with your generated classes and all necessary libraries.
images/download/thumbnails/27724728/SDKs.png

7. Go to your favorite IDE/Editor and start a new TypeScript project.

8. Create a new empty TypeScript file "taskManagerScript.ts".

9. To run this ts file in your console, you need to install typescript und ts-node globally:

TypeScript
// you maybe need root permissions (sudo)
npm install -g ts-node
npm install -g typescript
 
// to run the script:
ts-node taskManagerScript.ts

10. Unzip the downloaded SDK and put the com folder in your project.

11. Now we are ready to go. We will create a simple example script where a User will be logged in or created, create a few new tasks and get all created tasks.

First of all, we’ll configure the Datastore and the user within the function ‘signup’.

Add the user credentials by replacing _username_ and _password_ with your own.

Pleas note, that we need an async function start() which will be the entrypoint of the script.

TypeScript
import Datastore from "./com/apiomat/frontend/Datastore";
import User from "./com/apiomat/frontend/basics/User";
 
start();
 
async function start(){
await signup();
}
 
async function signup() {
var user = new User();
user.userName = "_username_";
user.password = "_password_";
Datastore.Instance.configureWithCredentials(user);
 
 
try {
await user.loadMe();
console.log("Succefully logged in \n");
} catch (error) {
console.log("No user there. Will create new one...");
await user.save();
console.log("Saved user successfully \n");
}
}

12. Your App-Backend and your connection are working now. Run the application and take a look in the data tab of your dashboard to see the created user in your App-Backend.

13. Now we will create an async function to create new tasks and add the import for the task class:

TypeScript
import Task from "./com/apiomat/frontend/taskmodule/Task";
 
//...
 
async function addNewTask(description: string, done: boolean) {
/* create a new task object */
var task = new Task();
task.description = "A new task";
task.done = done ? 1 : 0;
/* save the task object and on callback add to html table */
try {
await task.save();
console.log("new Task created:");
printTask(task);
} catch (error) {
console.log("Some error occured. " + error.statusCode + " --> " + error.message);
}
}
 
// for simple printing on console line
function printTask(task: Task) {
console.log("Description: " + task.description + " || Is done: " + (task.done == 0 ? "false": "true"));
}

13. If you added the above lines, you’ll have new items in your table and on the server.

But how do we get a list of task objects back from the server to show this list after every successful login?

You can get a list of objects by calling the class function ‘Task.getTasks()’.

To find out how we do this within the function ‘loadTasks()’, check out the code snippet below.

TypeScript
async function loadTasks(done: boolean = false) {
const tasks = await Task.getTasks('done==' + ( done ? 1 : 0));
console.log((done ? "Done" : "TODO") + " Tasks:");
tasks.forEach((task: Task) => {
printTask(task);
});
}

This function also uses a query to filter those tasks by their done states. If you want to load and print all tasks which aren't done yet, you simply need to call 'loadTasks(false)'. Use "true" to load and print all done tasks.

The complete example will look like this:

TypeScript
import Datastore from "./com/apiomat/frontend/Datastore";
import User from "./com/apiomat/frontend/basics/User";
import Task from "./com/apiomat/frontend/taskmodule/Task";
 
 
// execute the start function and run the example code
start();
 
async function start(){
await signup();
// add example tasks
await addNewTask("Clean bathroom", true);
await addNewTask("Clean kitchen", false);
// load done tasks
await loadTasks(true);
// load todo tasks
await loadTasks(false);
}
 
/* Helper Function */
 
/**
* will load or create a user
*/
async function signup() {
var user = new User();
user.userName = "_username_";
user.password = "_password_";
Datastore.Instance.configureWithCredentials(user);
 
try {
await user.loadMe();
console.log("Succefully logged in \n");
} catch (error) {
console.log("No user there. Will create new one...");
await user.save();
console.log("Saved user successfully \n");
}
}
 
/**
* creates a new task and saves it
* @param description task description
* @param done the done state of the task
*/
async function addNewTask(description: string, done: boolean) {
/* create a new task object */
var task = new Task();
task.description = "A new task";
task.done = done ? 1 : 0;
/* save the task object and on callback add to html table */
try {
await task.save();
console.log("new Task created:");
printTask(task);
} catch (error) {
console.log("Some error occured. " + error.statusCode + " --> " + error.message);
}
}
 
/**
* simply print the tasks details to command line
* @param task the task to print
*/
function printTask(task: Task) {
console.log("Description: " + task.description + " || Is done: " + (task.done == 0 ? "false": "true"));
}
 
/**
* load and print existent tasks
* @param done true to load done tasks, false for todo tasks
*/
async function loadTasks(done: boolean = false) {
const tasks = await Task.getTasks('done==' + ( done ? 1 : 0));
console.log((done ? "Done" : "TODO") + " Tasks:");
tasks.forEach((task: Task) => {
printTask(task);
});
}

Using the transpiling helper

With the transpiling helper you can transpile the typescript SDK to a ES5 or ES6 SDK.

1. navigate into the folder com/apiomat/transpilingHelper and run the following commands

TypeScript
npm install -g gulp
npm install
 
// to build the ES5 SDK
npm run build-es5
 
// to build the ES6 SDK
npm run build-es6

This will create the folder structure com/apiomat/frontendES5 or for ES6: com/apiomat/frontendES6. This folder will contain the ES5/ES6 SDK files.

2. If you have transpiled the ES5 SDK the com/apiomat/frontendES5 folder will contain a bundled JavaScript file `apiomat.js` and a minified file `apiomat.min.js`. The ES6 SDK will simply contain all classes as .js files.