Tag Archives: GitHub

Back to blog home page

Integrating Backand with JQuery

Posted by on Mar 28, 2017

JQuery is the most widely-deployed JavaScript library. It provides a comprehensive set of responsive tools for dynamically working with an HTML page’s DOM, and is responsible for establishing and guiding a lot of the patterns that are the standard in web development. In this article, we’ll look at how you can integrate the Back& Vanilla SDK with an app built with JQuery.

Note: The code for this article is available on CodePen.

Including and Initializing the SDK

The first step in connecting your JQuery-based web app to Backand is to include the JavaScript file containing the Backand SDK. You can either do this through a package manager, or via our CDN.

Creating the Service

Once you’ve included the SDK, you’ll have access to the functionality via the global object backand. To integrate Back& with a JQuery-based web app, we’ll make use of a global service variable that will wrap the SDK. This service will handle initialization of the sdk, and provide all of the tools necessary to work with a Backand application. We’ll start by declaring the service and initializing Backand with the following code:

This defines an object – dataService – that can be used to interact with the Backand SDK. In the data service, we define a method – init – that is used to initialize the SDK’s connection to a Backand application. Simply call dataService.init() at the approrpriate location in your app’s initialization code, and the SDK is ready to use (in the example, we do this in the $(document).ready handler, but this is not required).

This post uses a pre-built demo app, reactnativetodoexample, and its associated keys. If you wish to connect this demo to your own Backand application, simply replace appName, signUpToken, and anonymousToken with the correct values from your Backand application’s dashboard. Aside from updating the data model to include the ToDo object, the only thing you will need to do to ensure your app operates in the same way is to add the relevant custom actions when editing a ToDo item (see below).

Fetching and Manipulating the Data

Now that our app is wired up to Backand, we’ll want to start writing code to work with our Backand application’s objects. We can retrieve a list of “todo” objects from the server by adding a property to the dataService object, getList, that calls the appropriate SDK method:

This function first defines a set of filter params using helper methods in the SDK (refer to our documentation for more information). It then calls backand.object.getList() to fetch the list of objects in the SDK. The result of this call – a promise – is then passed back to the calling code. The calling code can then create its own success and failure handlers, using .then and .catch, and update internal state appropriately.

From this point onward, working with the SDK is a matter of writing wrapper methods in the dataService object for each SDK method with which you wish to interact. Backand provides interfaces for all of the common database manipulation tasks. For example, the following call defines a method – create – that creates a new entry in the database:

You can use this technique to wrap every call in the Backand SDK, providing your JQuery code with full access to the server.

Handling Responses

All Backand SDK methods return a promise, performing the tasks requested asynchronously. To handle the responses, we simply need to write the appropriate handlers for the .then and .catch calls. In the code below, for example, we write a simple set of handlers for the getList call:

As JQuery is a very flexible framework, it is hard to provide concrete guidance on exactly where SDK should take place in terms of the program’s execution. The CodePen example demonstrates one method of creating this component, but you do not need to mimic the code structure there exactly. The key component is to ensure that backand.init() is called prior to any SDK calls taking place, otherwise the calls from the SDK will fail.

Conclusion

With the above code, you now have a simple data service that you can use to update your JQuery-based app’s user interface with results from a Backand application. You can make full use of the SDK, with the capability to create, update, and delete records at will in a responsive manner, no server code required. With Backand, you can accelerate your JQuery front-end development, focusing on what makes your app unique, and leave the server side to us.

For more information, visit Backand  and check out our code samples, tutorials, and more.

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

Meet Backand’s New Serverless SDK

Posted by on Feb 14, 2017

Backand is proud to announce our new Serverless SDK. With the launch of this SDK, we offer super-easy access to all core functionality of our powerful backend-as-a-service. We also have compartmentalized our SDK to allow for easy integration on multiple major serverless app development platforms.

In this post, we’ll walk through the new Serverless SDK structure. We’ll outline the core functionality, take a look at the new platform-specific SDKs, and then provide a few examples of how to easily work with Backand in your application.

Serverless SDK Functionality

The Backand Serverless SDK offers quick and easy access to core Backand app functionality:

  • Authentication and Security – The SDK provides easy-to-use functions that wrap all of the functionality necessary to authenticate users with your application, whether via a custom user structure, or by leveraging social media providers for authentication.
  • Object Manipulation – The Backand Serverless SDK offers intuitive and flexible methods that you can use to interact with objects in your Backand application. These are available in the SDK under the ‘object’ property – simply provide the name of the object you wish to work with, and you’re ready to go!
  • Custom Actions and Queries – The SDK offers quick and easy ways to access the custom actions you have defined in your Back& application, again via the ‘object’ interface. We also offer a ‘query’ object, which allows you to easily leverage custom SQL queries built for your application’s specific database needs.
  • File Management for Node.JS Actions – This release makes working with custom server-side Node.JS JavaScript actions a snap. Simply access the ‘file’ property of the Backand SDK, and you can easily add or remove files from your server-side Node.JS action.
  • Quick and Easy Real-time Functionality – Through our integration with Socket.io, you can easily add real-time communication features to your application. Simply make use of the “.on” event handler to subscribe to broadcast events, and you are ready to go!

New SDK Structure

The original SDK was fully built out for each platform on which it was offered. This led to a lot of duplication in functionality. Recognizing this, we’ve chosen a new approach that lets developers more easily work with the SDK on their chosen platform. Below is a quick list of the available SDKs that comprise our Serverless SDK, and how they work together:

  • https://github.com/backand/vanilla-sdk – This is our plain vanilla JavaScript SDK. It can be used with any web application via simple includes. All other SDKs wrap this project and depend upon this project.
  • https://github.com/backand/angular1-sdk – This is our Angular 1 wrapper SDK. This wraps the Vanilla SDK, providing objects and services for Angular 1-based apps that make the SDK a snap to integrate.
  • https://github.com/backand/angular2-sdk – This is our Angular 2 wrapper SDK. Similar to the Angular 1 SDK, it wraps the Vanilla SDK’s functionality with several useful Angular 2 objects, encapsulating all of the functionality into an easy-to-use service provider object.
  • https://github.com/backand/redux-sdk – This is our Redux/ReactJS wrapper SDK. It offers tools to construct all of the Actions, Reducers, and Types necessary to work with the underlying Vanilla SDK, making it very easy to integrate Back& with your Redux application.

Improvements over the previous SDK

In addition to refactoring the code to more closely match how it is used by developers, we’ve made several changes that make working with Back& easier than ever:

  • No more $http – The original SDKs were built around web requests sent with the $http object. All of this has been encapsulated within the SDK, allowing you to replace complex and obtuse JavaScript dedicated to constructing a request with a simple, one-line function call.
  • Promises – The new SDK returns objects as promises, allowing you to more easily handle the responses from your app’s backend in an asynchronous manner. Simply define your callbacks and provide them to the SDK using the ‘.then()’ and ‘.catch()’ functions.
  • Easy Social Sign-On – The new SDK provides quick and easy integration with social media providers, handling all of the back-end complexity of user management and authentication so that you can focus on what makes your app unique.
  • Token Management – Gone are the days of having to manually construct headers – the SDK handles authentication and authorization tokens on your behalf. Simply tell the SDK when someone has signed in or signed out, or even enable anonymous authentication – all with easy-to-use function calls.

Conclusion

Our goal at Backand is to help developers and organizations more easily achieve their application development goals. With the release of our Serverless SDK, we’ve made huge strides in usability and availability of our SDK. You can read more in our documentation, take a look at our Vanilla SDK for an overview of the API, or begin working with the examples on our Github page. With Back&’s new Serverless SDK, you’ll find that creating a cross-platform and cohesive Progressive Web App experience is easier than ever.

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

Back to blog home page

Source Control Branching

Posted by on Aug 12, 2015

Branching for Success

Source control is a massive benefit to any development – or single developer – working on a non-trivial project. It allows you to manage multiple simultaneous contributions from developers, scroll back time to any previous point, and provides a handy backup in case something goes wrong with a local copy of the code. Any tool that offers so much benefit, however, typically introduces its own complexities into the process. Below we’ll look at one of those complexities – branching schemes. We will focus on Git fairly heavily, but the general concepts should apply to any source control product featuring branch functionality.

Continue reading

Back to blog home page

How to Build a GitHub Webhook with node.js

Posted by on Nov 18, 2014

GitHub Webhooks

Every GitHub repository can easily communicate with a web server whenever the repository is pushed. This communication is called a webhook.  Webhooks are used for many reasons, including updating an external issue tracker, creating a backup mirror or triggering a continuous integration build.

Continue reading

Back to blog home page

How to Build Dynamic Forms in Angular Directive with a Backend

Posted by on Oct 02, 2014

In this blog we will demonstrate how to build dynamic forms in Angular with a backend, that in the end will return the configuration and data.  This code was created for anyone who needs to build a complex project with many forms.  To demonstrate the server side we will use Backand’s REST API in addition to referencing the full code in GitHub.

Continue reading