Baqend Cloud - Developer Dashboard

Learn how it works.

Start with the quickstart below. Click the chat window to get immediate support.

Building a Website?

Baqend stores your files and data. Add Baqend to your Web App.

Use a starter kit.

No need to build everything from scratch. Use the Baqend + Angular starter project.

  1. Watch our starter video or start the web project in step 2.

  2. Download Boilerplate Web Project

    We'll start with this empty HTML5 Bootstrap project (or configure a custom one). Unzip it, to get the following folder structure:

    index.html          <-- here we will put some HTML to accept input data
    js
        main.js         <-- your application logic hooked up to Baqend
        vendor          <-- JavaScript libraries
    css
        main.css        <-- our style
        bootstrap.css   <-- Bootstrap style
    img, fonts          <-- assets
    

    In a few steps your app will look like this:

  3. Install Baqend

    To install Baqend to the application (alreay included in the zip you downloaded), just add the CDN-hosted Baqend SDK at the end of the <body> section of the index.html using your favourite IDE (e.g. WebStorm) or text editor (e.g. Sublime):

    <script src="https://www.baqend.com/js-sdk/latest/baqend.min.js"></script>
    

    Other installation methods (e.g. npm) are explained on Github.

  4. Connect to the Cloud

    In the main.js, add the following lines to connect to Baqend Cloud:

    DB.connect("{{connect}}", function() {
      showMessages();
    });
    

    The callback is invoked when the connection is established. We will use that to display the message wall in showMessages, but first we need some data.

  5. Define the Data Model

    In the dashboard enter your App and add a new class named Message in the Data menu on the left. In the schema tab that is now open, add three attributes:

    Attribute Name Type
    name String
    message String
    date DateTime

    Now go to the Data tab and click Add to insert a dummy message to the database.

    To learn more about data modeling in Baqend, see the Schema and Types documentation.

  6. Save Data

    Now, let's enhance the index.html with an input for name and message as well as post button. Replace all the code starting before <div class="jumbotron"> just until the <hr> with this:

    <div class="jumbotron">
      <form onsubmit="leaveMessage(this.name.value, this.message.value);
    this.reset(); return false;" class="form-inline text-center container">
        <input class="form-control" name="name" placeholder="Name">
        <input class="form-control" name="message" placeholder="Message">
        <button type="submit" class="btn btn-primary">Leave Message</button>
      </form>
    </div>
    <div class="container">
      <div class="row" id="messages"></div>
    

    So when hitting enter or the button, our leaveMessage function is called. Let's add it to main.js:

    function leaveMessage(name, message) {
      //Create new message object
      var msg = new DB.Message();
      //Set the properties
      msg.name = name;
      msg.message = message;
      msg.date = new Date();
      //Insert it to the database
      msg.insert().then(showMessages);
    }
    

    So now we insert a new message, whenever the HTML form is submitted.

    See the Create Read Update Delete documentation to learn more about saving and loading data.

  7. Query Data

    Now, let's display the stored data. To show the 30 newest messages, ordered by time stamp perform a simple query:

    function showMessages() {
      DB.Message.find()
        .descending("date")
        .limit(30)
        .resultList()
        .then(function(result) {
          var html = "";
          result.forEach(function(msg) {
            html += '<div class="col-md-4"><h2>';
            html += msg.name + '</h2><p>' + msg.message + '</p></div>';
          });
          document.getElementById("messages").innerHTML = html;
        });
    }
    

    At this point the application is fully working. Just open the index.html in the browser to use your app. If something is not working, press F12 to see any error messages.

    Queries allow you do complex filtering and sorting, see the Query Docs. All data loaded from Baqend Cloud is served with low latency from a global CDN.

  8. Protect Your Data

    By default, public access to the Message table is allowed. Let's restrict that to only allow inserts, reads and queries but disallow any updates and deletes. Go to the ACL (Access Control Lists) tab in the dashboard and revoke delete and update rights from the Public role.

    Access rights can be granted and denied both at table level and at object level. This is explained in detail in the User, Roles and Permissions documentation.

    Baqend has full SSL support. If you want the Baqend connection to be SSL-encrypted by default, add true as the second parameter of the DB.connect call.

  9. Add User Registration and Login

    If you would like your users to login into your application, that's easy. Your app has a predefined User table and the Baqend SDK comes with built-in ways to register and log in users:

    DB.User.register('john.doe@example.com', 'pwd').then(function() {
      //Now we are logged in
      console.log(DB.User.me.username); //'john.doe@example.com'
    });
    //When coming back, just log in:
    DB.User.login('john.doe@example.com', 'pwd').then(...)
    

    You can enable and customize email verification in the settings page of the dashboard. To support OAuth logins (e.g. "Login with Facebook"), setup OAuth as described in the User docs, then you can simply call DB.User.loginWithFacebook.

  10. Install the Baqend CLI and Deploy

    Install the Baqend CLI globally with (node.js and npm is required):

    $ npm install -g baqend
    

    Deploy your first app version by typing:

    $ baqend deploy --file-dir . {{appName}}
    

    View it online by visiting your app domain {{appName}}.app.baqend.com.

  11. Start Building

    You can use the app you just created as a baseline for a real app. To explore Baqend's other features: