Treeline allows you to build your backend app visually in your web browser. As you work on your app, you can see it change instantly in the cloud via our hosted preview
Start clicking stuff, experiment, don't worry about making mistakes and most of all have some fun!
Let's get oriented.
There are a few main components to Treeline. The first is the account overview page where you can see a dashboard displaying high-level information about your current apps and machinepacks (components that you can share between apps). From here you can update your profile information, navigate to your individual apps and machinepacks, or view the docs.
Let's get started building an app!
Routes are simply URLs in your Treeline app (like "/login" or "/user/123") that trigger certain actions when users visit them. Over the course of this example, we'll create a route
called /signup
that will store information in a model
named User. The route
will accept the following parameters:
From the Treeline Dashboard, select Apps from the left-hand navigation.
Next, click the New App
button to create a new app and name it myFirstApp
.
Select Model from the left hand navigation.
Create a new model called user
. The updated Model Dashboard is displayed.
Click on the attributes
icon .
Add an attribute by clicking on the New Attribute
button.
For the example type your name. Treeline will infer the type
of the attribute by the example--in this case a string.
Add another attribute email
using any email address as an example (e.g. [email protected]). Then add one more attribute, password
and for the example type abc321
.
POST /signup
routeNow click on routes
from the left-hand navigation panel.
Add a new route -- POST /signup
.
You'll be transported into the Circuit Editor.
This is where we'll tell Treeline what to do when folks hit POST /signup
. First, let's encrypt the password. For that we'll use a machine.
What is a machine? A machine is an open standard for Javascript functions. Each machine has a single, clear purpose—whether it be sending an email, translating a text file, or fetching a web page. More on machines can be found at node-machine.org.
Encrypt password
machine to the routeOn the right-hand side of the circuit editor
you'll see a list of Parts.
These are just collections of machines
grouped by what they do (we call them "machinepacks"). For example, click on the Passwords machinepack and you'll find two machines
-- Check password
and Encrypt password
.
Drag Encrypt password
over to the middle of the screen and let 'er go.
Highlight the Encrypt password
part and click on the editor icon.
You'll be prompted for the password to encrypt.
Let's grab the password from a route parameter by typing ctrl
-i
. This will display a popup where you can select or create dynamic values to use in your inputs.
Make sure the "parameter" section is selected, then type password
in the field and then enter. You'll see the new route parameter appear in the input as an orange bubble. Click save to update and close the Encrypt password
machine.
Create User
machineGo back to the right-hand side of the circuit editor
and click on your app's machinepack (in our case, "myFirstApp (project)").
Select the Create User
part and drag it onto the success exit of the Encrypt Password
part.
The success exit is the blue dot below the
Encrypt Password
part.
Your circuit editor
should look something like this:
Highlight the Create User part
and click on the editor icon.
Select the name
attribute field and type ctrl
-i
to bring up the dynamic value editor.
Type name
in the field and then enter.
Do the same for the email
attribute.
Finally, select the password
attribute field. Type ctrl
-i
but this time select variable.
You should see blue Encrypt password
bubble. This is the result of our Encrypt password part
. Click on it. Then click save.
POST /signup
Head back to the Main Treeline Panel by selecting the name of the app from the breadcrumb navigation.
To view your running app, you can download it as a Sails.js project and run it on your computer. First, make sure Node is installed. Then open up a terminal and type:
$ sudo npm install -g treeline
on Mac OS X, or just
$ npm install -g treeline
on Windows.
Create a new project by typing: treeline new myFirstApp
$ treeline new myFirstApp
Navigate into the folder:
$ cd myFirstApp
Then connect the local app to your app on Treeline using treeline preview
$ treeline preview
You'll be prompted to select the app on Treeline.io.
Select the app and press enter.
You can now access the app via localhost:1337
. Any changes you make on Treeline.io will be synched with this app in real time!
Next, open up your favorite route tester (ours is POSTMAN) and make a request to POST /signup
of your hosted app URL adding some attributes. Something like:
And you’re off to the races! Have fun!