Create your first web application with Backbeam

We are going to create a simple web application that shows products with images. We need to first create the data model.

  • Since Files is a native entity in backbeam we only need to create a Product entity. Create the entity and add at least a field named Name to it.
  • Now create a one-to-many relationship between Product and File: a Product has many Images and a File belongs to one Product
  • Our data model is ready. Now let's put some data in it. First go to the Files data browser and upload a file. You can drop it from the file browser in your Operating System
  • Now create at least one Product in the data browser and add the image you have just uploaded to it.

We have data in the database so, we now need to show it somewhere. Let's do a web application. Go to Views and Controllers and create a new Web version. Remember that thanks to this feature you are able to to work in a web version while your users see other version, just changing the "default version".

We are going to create the homepage. You need a controller that responds to GET in the root path /.

backbeam.select('product').query('join last 5 images').fetch(100, 0, function(err, products) {
    response.render('index.html', {products: products}, true)
})

Here we are fetching some products and joining their last 5 images. Then we are passing this data to the index.html template. Let's create the template right now. Go to the Views section and create a new view named index.html

<h1>Products</h1>

{% for product in products %}
    <h2>{{ product.get('name') }} ({{ product.get('images').count }} images)</h2>
    
    {% for image in product.get('images').result %}
        <img src="/see/{{ image.id() }}/{{ image.get('version') }}">
    {% endfor %}
    
    <p><a href="/product/{{ product.id() }}">More information</a></p>
    
{% endfor %}

As you can see we are putting a kind of URL to load the images that we haven't defined yet. And it's the same with the "more information" link: the controller for that page is not defined yet. This is our next step. Create a controller that responds to GET /see/:id/:version. This controller needs the following code:

backbeam.read('file', request.params.id, function(err, obj) {
    response.sendFile(obj, {width:200})
})

This code is also shown in the documentation. Note that the second parameter in sendFile() is optional, but it is an example to illustrate that you can transform the image on the fly if you wish. There is not a builtin controller for serving files because it would make all files public and it is not convinient for some projects (e.g. having private images or files). But as you can see it is very easy to create a simple controller to serve files.

Hey, now you are ready to see the result. Open a browser tab and enter the URL to run the first controller. Something like: http://web-v1-dev-yourproject.backbeamapps.com/. You will need to enter Basic HTTP credentials. You have them in the Views and controllers section. This is done to make your webapp private until you are ready to launch it.

Now let's make the "more information" page. Create a "GET" controller with this URL pattern: GET /product/:productid. Write the following code in it:

backbeam.read('product', request.params.productid, function(err, product) {
    backbeam.select('file').query('where product is ?', product).fetch(100, 0, function(err, images) {
        response.render('product.html', {product:product, images:images})
    })
})

This code reads the product information given the productid in the URL and then it reads the images of the prduct. We are not using a join here so we have full control over the query (you could sort the images in any way for example). Finally the contorller renders the product.html template that we are going to create now: go to Views and create it with the following code:

<h1>{{ product.get('name') }}</h1>

<p>{{ product.get('description') }}</p>

{% for image in images %}
    <img src="/see/{{ image.id() }}/{{ image.get('version') }}">
{% endfor %}

Now you can go to the homepage again and browse the "more information" link. And that's it! We've seen how easy and flexible is doing web development with Backbeam :)