Tag Archives: JSON

Back to blog home page

Upgrade Your Apps to Work with Our New Serverless SDK

Posted by on Mar 02, 2017

This post is a quick guide to upgrading your existing Backand-powered applications to work with the new Backand Serverless SDK we announced a couple of weeks ago. We’ll cover the changes made in the SDK, and explore the steps you need to take to get your Backand application up and running with the new API.

What’s changed?

We’ve made a number of changes in our new SDK that make developing against Backand faster than ever. Here’s a brief overview of what changed:

  • Streamlined authentication, making it easier for you to authenticate your users.
  • Improved the process for registering with – and signing in via – social media providers with the addition of new SDK methods.
  • Greatly improved the method in which you interact with Backand objects. Gone are the days of needing to manually construct a URL – simply specify the object name as part of a clearly-named function call to the API, and we handle the complexity for you.
  • We have also streamlined our response data, allowing you to work with the results of calls to your Backand back-end in a more straightforward manner.

And on top of all this, we continue to offer the same secure, scalable, and responsive backend-as-a-service that we always have!

Converting old app code to the Serverless SDK

Next, let’s look at what steps are needed to change a Backand application to work with the new SDK. For reference, we are basing this code off of our base Ionic starter app – see it on the Ionic marketplace at https://market.ionic.io/starters/backand-simple.

Step 1: Add new SDK to bower.json

First, you’ll need to add the new SDK to your bower file.

Step 2: Update Script includes in index.html to include the new SDK.

Start with removing the old SDK by commenting out – or deleting – the following line:

Then, replace it with the new SDK links:

Or, use the CDN files:

Note: You may want to check your dependencies directory for any lingering versions of the old Backand SDK – this can cause cache issues due to competing HTTP Interceptors. Simply remove the old folder from the appropriate directory in your project.

Step 3: Update the user authentication method

User authentication is largely unchanged, with a few notes below:

  • If you have previously disabled anonymous auth in your app, you can re-enable it using Backand.useAnonymousAuth(). This value defaults to true, so if you do not modify the default value you do not need to make any changes.
  • We’ve added new social media authentication functions: socialSignin, and socialSignup. Please note that while some of the examples in our github repos – and some of our documentation – used socialSignUp to refer to the specified function in the Backand SDK, this is no longer valid – the “up” will not be capitalized in the new SDK.

Step 4: Update the method used to detect unauthorized users

The getToken() method has been expanded, to use a promise. Originally this method would return undefined when a user was unauthorized, but this functionality can now be managed via the promise method. In the new SDK, the getToken() method is not as prominent as it was in previous versions, and you are likely to not need it as you work on your app.

Step 5: Change $http usage to use the Backand SDK REST methods:

The Serverless SDK features wrapper methods that can be used in place of the direct HTTP calls used in the previous method. Here’s a quick comparison of the old SDK’s HTTP communications, as compared to the new function-based Serverless SDK:

Step 6: Update data result usage

The old SDK would use code similar to the following when handling responses from Back& API calls:

The new SDK does not store the results in a nested data member, but rather in a root data element. The old SDK stored the response contents in a root property, meaning that the actual data was a subset of this data property – hence the use of result.data.data in the old SDK. With the new SDK, you no longer need the extra level of disambiguation, and can store the data in your application’s object with the following code:

Conclusion

In this post, we covered the Backand Serverless SDK. We touched briefly on the features the new SDK has to offer and walked through the process necessary to convert an existing Backand-powered app to the new API. Most importantly, though, is that we built this SDK based on your feedback, and we want more! Connect with us via social media (Twitter, Facebook), or on StackOverflow, or even directly via comments on our Git repos and contacting customer support – we’d love to incorporate your thoughts and suggestions into the next version.

Don’t have a Backand account? You can get one for free

Back to blog home page

Zero Effort Angular App with a Database, RESTful API & Security

Posted by on May 26, 2015

Recently, we at Back& released a tutorial on the Backand Github page that shows off a lot of the features available by default in a Backand-powered application. After completing the tutorial, you’ll have a simple ToDo list application with full support for user and role-based security. Below we’ll discuss each of the features demonstrated in the tutorial, and cover any items remaining that are necessary for a full deployment.

RESTful API Out-of-the-Box

One of the first things we do in the tutorial, after actually creating the application with Backand, is create a new database using our JSON-based schema language. This powerful tool allows you to quickly build a database and the associated tables and objects without having a client installed. More importantly, once the database has been created, Backand automatically creates a RESTful API based on your underlying database schema. This allows you to have immediate access to your database via a series of REST API calls that create, retrieve, update, and delete records at whim. With some simple JavaScript, you can quickly build out a data layer that would take months in a stand-alone project! Furthermore, the moment you make a change to your schema, Backand will detect the change and update the API endpoints accordingly. This automated updating greatly eases the process of migrating database schema changes, and takes some of the load of server programming off your shoulders, allowing you to focus on your application’s functionality.
Security Roles

While the RESTful API is indeed a powerful tool, the main goal of this tutorial is to explore user- and role-based security. Through Backand’s dashboard you are granted a powerful array of tools that you can leverage to secure your underlying application. You can assign user-specific security settings for each object in your app, including everything from table update calls to custom triggers and actions.

However, doing this for every user that signs up for your application would be incredibly tedious. Luckily, Backand provides User Roles that you can assign to the users in your application. Roles set a basic template for interacting with your application’s API, allowing you to restrict all users with that role to only specific actions in your application. These roles can also be overridden at an endpoint level, allowing you to grant roles specific access to resources while still maintaining their general security profile.

After the tutorial has been completed, you will have three roles for your users – administrators who have full control, users who can view all records in the application (but only update or delete those that they create themselves), and read-only users that are only able to view the ToDo items in your application.

Login and Anonymous Access

In addition to security roles, this tutorial will introduce you to the user access functionality available in Backand. You’ll implement a mechanism for inviting users to register for your application, and enable two-step verification for your application’s users, and all of the complexity will be managed by Backand! Furthermore, you’ll learn how to enable anonymous access to your application through a few simple administrative dashboard settings. After the tutorial has been completed, you will have a fully secure application that allows you to invite users to the system, automatically assign them a security role, and even enable anonymous access to your ToDo list should you wish to do so.

Remaining Items

While the tutorial will walk you through the entire application – from inception to completion – there will still be a few tasks remaining before you can show off your new Backand-powered ToDo list app. The first section of the tutorial focuses on setting up a local application development environment, which allows you to develop and run the code on your local machine. However, once you’ve implemented the code and are ready to show it off, you still need to track down a web server to use for deployment. Luckily this web server does not need to be particularly robust, as your application requires zero server-side customization – simply deploy the application code to a publicly-accessible folder and you are set!

Once you’ve published your application on a web server, you have a few more steps remaining in order to fully deploy the application. As a part of the tutorial you set several internal sign-up and authentication URLs that point at your local development instance. Obviously these will no longer function once you have deployed the code! Simply change the appropriate user security settings in your application’s Backand dashboard, and your application will be ready to show the world!

Conclusion

This tutorial gives you a quick look at the power offered by Backand’s back end tools and APIs. You’ll explore creating a database and implementing a RESTful API for that data with zero effort. You’ll customize your application’s security and learn how to restrict users based on role and based on endpoint. You’ll even spend some time working with custom server-side actions that execute on-demand. By the time you have finished the tutorial, you will have implemented a secure ToDo list application with user authentication – and all with minimal effort!

Click here to start the Backand ToDo tutorial. And be sure to sign up for free and start creating your app today.

Back to blog home page

How to Reduce Risk in Web Development

Posted by on Apr 07, 2015

Web development can be an inherently risky endeavor. While the costs to get up and running with a development environment are almost non-existent, every choice you make as you build your application has long-term effects on your technology stack, your application’s performance, and the expertise available to you as you build a development team. Below we’ll look at a few strategies for reducing the risk inherent in web development. Applying these strategies may add some additional effort up front, but in the long run will reduce the total cost of ownership of your application and provide you a lot of flexibility when it comes to finding solutions to development and deployment issues.

Continue reading

Back to blog home page

5 Things To Know Before You Get Started With AngularJS

Posted by on Sep 23, 2014

Navigating the AngularJS landscape can be a daunting experience. While the library itself is fairly robust, choices early in the adoption process can have drastic long-term effects on your software development process. Below we present five things that you should know about AngularJS. This information won’t solve every problem you’ll have with the library, but it can help you get off on the right foot.

Continue reading

Back to blog home page

Part I: ng-grid and a Simple REST API

Posted by on Sep 11, 2014

A Quick Note – with version 3, NG Grid changed its name to UI Grid. As such, we will refer to the library as UI Grid in the following text.

UI Grid is pure AngularJS and it comes with excellent documentation. It has pagination, sorting, filtering, and local data model binding/editing built-in, allowing for quick and easy integration with any AngularJS application. In this post we will demonstrate how to perform each of these tasks in an Angular application by using a RESTful API to interact with a remote data model over HTTP.

Before we get started, you will need the following packages installed:

Client side:

  • angular.js, version 1.4.3
  • angular-touch.js, version 1.4.3
  • angular-animate.js, version 1.4.3
  • ui-grid.js, latest version
  • ui-grid.css, latest version

Server side:

  • A REST API for a data model. This API must have the following actions:
    • a GET action with paging, filtering, and sorting
    • a PUT action for updating an object

In this article, we’ll be using Backand’s back end service. This provides a quick-and-easy REST API for any data model you desire, and meets all the requirements for server-side interactions.

There are 6 steps in this project, each with a jsFiddle example:

  1. Basic grid bonded to a local data model – edit in jsFiddle
  2. Connect to REST API – edit in jsFiddle
  3. Add paging – edit in jsFiddle
  4. Add sorting – edit in jsFiddle
  5. Add filtering – edit in jsFiddle
  6. Add editing – edit in jsFiddle

We will cover each step in more detail below.

Basic grid   edit in jsFiddle

This section details how to bind UI Grid to a local data model. It should be fairly straight-forward, and will allow us to bind the model to the REST API quickly. To set up the basic UI Grid, add the following into the indicated portions of your application:

HTML (for rendering the grid):

JavaScript (for binding the grid to your data model):

Connect to REST API   edit in jsFiddle

Next, we’ll build an Angular data service that performs all of the relevant REST API work. This allows us to have a clean controller that handles the display of the data. Add the following JavaScript code to your application to create the data service:

The above service provides full CRUD capability for your data model, but in this example we will primarily focus on the ‘readAll’ and ‘update’ functions. This functionality is handled through Backand’s REST API service, and ties directly into a Backand application.

Now that we have the data service, let’s change the controller to integrate the service with our local data model. Add the following JavaScript into your application:

Notice that the above code service uses Angular’s asynchronous $http, which returns a promise to sync the response. Building off this patterning, we use the promise callback to bind the response data. And with that, we have a controller that pulls its data from our ProductsService, and ties it to the variable gridOptions in $scope. From here on out, we will be using the gridOptions property for grid binding and display, we will be able to quickly update the UI Grid with the latest server data.

Paging   edit in jsFiddle

UI Grid’s built in pagination works with a local object. Since we are using a remote data model, we need to provide the pagination parameters to the REST API. To do so we will build our own simple pagination object and UI, and we will set the UI Grid’s enablePaginationControls property to false. By doing this, we will override UI Grid’s local pagination in favor of our server-based approach.

Start by adding the following JavaScript to your application:

Next, add the following HTML elements for the pagination UI:

With the above entered, all that is left is to add pageSize and pageNumber to the data service class. The service will then add these values to the REST API via HTTP query string parameters. To accomplish this, we modify the readAll function in the data service as follows (note: the highlighted code represents changes from the original):

Sort   edit in jsFiddle

UI Grid’s sorting functionality, by default, works with the local app data model. As we are using custom pagination to load the data model, the sorting functionality will thus only sort the portion of the data that has been loaded locally, which is obviously not desirable. To fix this, we need to use a server side sort that ties in with our pagination, allowing us to return the correct data with respect to the entire data set. To do this, we’ll set UI Grid’s useExternalSorting property to true, then add an array of fields with a sort direction (either ascending or descending) to provide to the REST API as a query string parameter. Finally, to populate this array we will register for the sortChanged event on the grid, using the event to call our custom data service.

First, add the following JavaScript to your application:

Next, we modify the data service to accommodate the new ‘sort’ parameters. Once again, the highlighted code represents the changes to the existing data service code:

Filter edit in jsFiddle

UI Grid’s built-in filter functionality has the same restrictions as the Sort functionality above – it only operates on the local dataset, which is not particularly useful with our REST-based data service. To fix this, we’ll use the same general process – enable external filtering on UI Grid, then send the filter parameters through as URL query parameters from our data service. To do this, we set UI Grid’s useExternalFiltering property to true and the enableFiltering property to true. This allows us to use UI Grid’s filtering interface, but not the local filtering itself.

A quick note: Filtering can be very sophisticated, and highly app-dependent. Below, we intentionally use some very simple filtering in order to demonstrate the functionality. Our purpose is to build a basic remote filtering infrastructure, which you can later build upon to add additional complexity as necessary.

Similar to the Sort functionality above, we’ll subscribe to the filterChanged event of the UI Grid. We’ll use this handler to populate a set of filter fields, as well as the operators and the specific filter values. As this functionality is API-dependent, you’ll want to make sure you understand the filtering functionality available on your REST API service. You can find the full REST API documentation for Backand’s REST API Service here. To tie in with this functionality, we will set all of the text field operators to ‘contains,’ the id field’s operator to ‘equals,’ and the pricing field’s operator to ‘greaterThanOrEqualsTo’.

Use the following JavaScript to register for the filterChanged event:

Now, we modify the data service again with the highlighted code:

Edit   edit in jsFiddle

With pagination, sorting, and filtering added, it’s finally time to handle editing. Below we will implement basic cell editing, but you can easily add dialog-based and row-based editing on your own. First, enable editing of the individual cells by adding the ui-grid-edit attribute to the UI Grid element. Once this is completed we’ll register for the afterCellEdit event and use the event handler to call the update function of our data service. Finally, we reload the entire grid in the edit event’s callback promise. This is done in case editing the cell on the server results in additional changes to the data (such as those that might be triggered by a customer server-side action in your Backand application, or any calculated values that appear in the grid that might depend upon the cell). The code below also uses Backand’s __metadata.id field to obtain the ID needed for the update function. This is advised for cases when the ID field is changeable, and allows you to quickly reference the original row’s ID instead of having to save it off before modifying the existing value. You can leave this as-is, or choose to use rowEntityId and make the associated code changes in your project.

To make these changes, we perform all of the relevant tasks in UI Grid’s afterCellEdit event handler:

Summary

With the above completed, we now have a UI grid that has paging, sorting, filtering, and editing – all tied in to a remote database. While this operates on a fairly basic data set, you can quickly add new elements and functionality to handle more complex use-cases by following the same patterns used above. In any case, the above should serve as an excellent template for constructing a dynamic UI Grid based upon server-side REST APIs.

You can find more information on each of the components below at the provided URLs: