Start with the quickstart below. Click the chat window to get immediate support.
Baqend stores your files and data. Add Baqend to your Web App.
No need to build everything from scratch. Use the Baqend + Angular starter 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:
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.
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.
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.
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.
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.
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.
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
.
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.
You can use the app you just created as a baseline for a real app. To explore Baqend's other features: