Tag Archives: JavaScript

Back to blog home page

Integrating Backand with Ionic Creator

Posted by on Mar 14, 2017

Ionic Creator is an online IDE for Ionic apps that can greatly speed the development of your cross-platform mobile and web application. However, like any IDE, it can pose problems when integrating with some external service providers like Backand. Below, we’ll look at the steps needed to get your Ionic Creator app up and running with the Backand SDK, allowing you to implement serverless apps in the Ionic framework with ease.

Configuring the Connection to Backand

To Enable Back with, you’ll need to update your Ionic Creator app’s “Other JS” section to include a new file name – bkndconfig.js. In this file, replace the entire contents with the following code:

Once the code has been modified, replace the values above with the appropriate values from your Backand application:

  • BACKAND_APP_NAME – This is your app’s name in Backand
  • BACKAND_API_SIGNUP_TOKEN – This is your app’s signup token. It is available in the ‘Security & Auth -> Social & Keys’ section.
  • BACKAND_ANONYMOUS_ACCESS_TOKEN – This is your app’s anonymous access token. It is available in ‘Security & Auth -> Configuration’.

Once these changes have been made, you’ll need to update your application’s code settings.

Code Settings

Next, we’ll update the app’s Code Settings to import the Backand SDK. In ‘Code Settings’, under the ‘External JS’ tab, add these two script URLs:

Once you’ve finished, the External JS tab will have the following content:

Next, under ‘Angular Modules’, add ‘backand’ and ‘app.config’. The end result will have the following content:

Working with the Backand Provider

Now that the external code has been configured, you can start working with the Backand provider in your service class. For example, you can use the following code to pull rows from an ‘items’ object in a Backand application:

Next, we’ll add this function call into a page for display.

Updating the Page Controller

To access this data, we’ll update the page controller to call our ItemsModel and return the relevant rows. To do so, use the following JavaScript to define a getAll() function and store the results in $scope:

Now, we’ll need to update the page’s design to display the new information. To show a list of all the items you’ve obtained:

  • Drag a “List Item” element onto your UI
  • In the page list pane (upper left hand corner), click on ‘List’
  • On the right side of the pane, click on ‘Angular Directives’ and add a new directive with the following details:
    Directive: ng-repeat
    Value: object in data
  • Finally, click on the ‘list-item’ element and change the content to {{object.name}}

And with that, your Ionic Creator app is now connected to Backand!

Learning More

At this point, you have the full power of the Backand SDK available in your Ionic Creator app. You can use the SDK to add more services to your app, providing CRUD functionality, real-time communications, server-side code execution, and more! Simply head over to our documentation to get started.

Back to blog home page

Deep Dive Series: Integrating Backand with Ionic Creator, Mandrill & More

Posted by on Mar 14, 2017

Over the next several days, we’ll be running a set of deep-dive blog posts. Each post will cover a different topic in-depth, providing a deeper look at integrating Backand into a number of different application development scenarios. The posts will cover three differing topics, showing a range of functionality that can be implemented into a serverless app. A brief overview of each topic is provided below, to serve as a reading guide.

Integrating Backand with Ionic Creator

Ionic Creator is a powerful online development environment for Ionic apps. While it provides a convenient, UI-focused means for implementing a multi-platform application, it can make some tasks – such as integrating with a third-party service provider like Backand – challenging. In the article on integrating with Ionic Creator, we’ll cover the steps necessary to get Ionic Creator working with our new SDK. By following the steps in this article, you’ll be able to make your apps truly portable through the use of our serverless platform and Ionic’s core offering of cross-platform capable and consistent user interfaces.
Read more

Sending Email Attachments with Mandrill

While we can easily send email messages over MailChimp’s Mandrill API with simple HTTP calls, any message that includes an attachment needs to be created on the server side. In the Mandrill Attachments article, we’ll cover the process for creating a Node.JS Server-Side JavaScript action that can add an attachment to a transactional email sent via Mandrill. We’ll cover the JavaScript code you need to fetch a file from the web, convert it to a format Mandrill can accept, and then initiate the message send.
Read more

Batch and Bulk Processing in Backand

Backand’s automated REST API generation provides developers with a significant amount of functionality right off the bat, allowing your app to quickly begin working with the objects represented in your application’s database. However, these APIs are limited to working with a single record or retrieving a list of records. If you wish to create multiple records at once or update several objects across multiple database tables in a single API call, then you’ll want to make use of our bulk processing API. We’ll provide all of the details you need to create bulk processing requests, allowing you to easily update large numbers of records in your application’s Backand database.

Other topics

We’re always looking to help developers understand how to better work with the Backand platform. Our goal is to make developing your app easier, and we’d love to hear from you if you have an idea that would help us achieve that goal. Simply contact us via social media, or using our contact form to start a conversation!

Back to blog home page

Integrating Backand with Vue.js

Posted by on Mar 07, 2017

Vue.js is a progressive framework designed to provide an intuitive means by which a front-end developer can build their application. It is designed to be incrementally adaptable, allowing you to use it as often as you like, and provides a lightweight set of tools for adding dynamic functionality to a web app. By providing dynamic backing to the view model, you can easily make a Vue.js-based application into a large and feature-rich web app. In this post, we’ll look at how we can use Backand’s Vanilla SDK in a Vue.js-based application to provide the backing for that data service.

Note: This example is also available on Codepen. If you don’t yet have a Backand account, you can get on for free, here.

Including and Initializing the SDK

The first step in connecting your Vue.js app to Backand is to import the JavaScript file containing the Backand SDK. You can either do this through a package manager, or via our CDN.

Once you’ve included the SDK, you’ll have access to the functionality via the global object backand. You’ll next use this to initialize our connection to Backand in the constructor for your app’s Vue instance. We recommend putting the initialization in the beforeMount lifecycle hook, but any location or hook that initializes the SDK before it is used should be sufficient:

 

With that, the Backand SDK is initialized. 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).

Loading the object data

Next, you need to define a global method that knows how to load the object data from your Backand application. To do this, first define an empty data member to store the future results from the API:

This data member will hold the list of ToDo items obtained from the server. Next, we’ll define a global method to populate this data member:

This function first clears out the todos data member, then defines a set of filter params using helper methods in the SDK (refer to our documentation for more information). Then, it calls backand.user.getUserDetails() to determine if the list should be restricted to the currently logged-in user. Finally, the method calls backand.object.getList() to fetch the list of objects in the SDK, and then updates the todos data container in the promise resolution block.

Now, you simply need to call fetchTodos() in the appropriate location in the Vue lifecycle. To load the data when mounting is complete, you can add it to the “mounted” handler like so:

Creating, Editing, and Deleting Objects

Once you’ve got the basic display up and running, you’ll want to add methods to create, update, and delete the ToDo items based on user actions. The following code is a handler for an x-template component titled todo-form, which is used to create a new ToDo entry in the application:

Following a similar pattern to the initial load, this code first checks for a user context. If a user is not logged in, this call will have a value of null. Otherwise, we can use the userId of the active user to assign ownership of the new ToDo item. The code then calls backand.object.create() to create the record in your Backand application.

You can follow a similar pattern when updating an object:

This function demonstrates how to update a ToDo item’s completion date using backand.object.update() – simply provide the object name, the object ID, and the collection of changes to be made. The above method also provides deletion functionality with the remove method. Simply provide the object name and the ID of the ToDo item to delete the entry from your database.

Keeping the app up-to-date

While you now have a fully-functional CRUD interface for the “todo” object, you have not yet built a way for your application to receive – and respond to – updates. You can accomplish this using Backand’s Realtime Communications capability. First, create the appropriate Custom JavaScript actions in your Backand app’s dashboard, and have them emit an event titled “update_todos” as follows:

Once that’s done, we need to set the SDK to enable socket mode:

Finally, you need to add an event handler. Update your mounted handler to include the event handler function as follows:

This function handles all update_todos events the same way – by reloading the entire list from the server. You can use a similar technique to write different handlers for each database operation, or to perform other types of logic based on your application’s needs.

Conclusion

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

Back to blog home page

New Feature: Facebook Graph API Support

Posted by on Dec 06, 2016

We’re pleased to announce Backand support for the Facebook Graph API. The Graph API gives your application access to user’s Facebook profiles (with their permission, of course). With it, you can retrieve data such as birthdays, friends list and profile photos and enrich the data of your app running on the Backand, backend-as-a-service (BaaS).

Retrieving data from Facebook using the Graph API

To retrieve data from Facebook using the Graph API, get the Facebook user ID after the user signed up to your Backand app. Once you have the Facebook user ID, use the Facebook graph API to retrieve data or perform other actions.

To get the Facebook user ID (FUID) in Backand, follow these steps:

  1. Open Security & Auth >> Security actions menu and Edit “beforeSocialSignup” action
  2. Change the Where Condition to true (bottom of the page)
  3. Uncomment the code that saves the Facebook user id:userInput.fuid = parameters.socialProfile.additionalValues.id;
  4. Save the Action

Next you need to add the fuid field in the users object:

  1. Open the model page under objects menu
  2. Add new Field in the users object named fuid
  3. Click Validate & Update and Ok in the dialog

Now, when a user signs up to your app using Facebook as a social login provider, you will see the users’s FUID in the users object.

Getting Facebook data in Backand code

Once you have the Facebook user ID, use the Graph API to access any available Facebook data.

  1. The FB Graph API docs
  2. You also would need access token of your app, use this FB tool to get it.
  3. More FB tools
  4. For example, to get a user’s friends use the following JavaScript action code:

Getting a Facebook profile image

To get the Facebook profile image you just need to point to the following URL with a correct FUID:

http://graph.facebook.com/{fuid}/picture

or

http://graph.facebook .com/10209560720107355/picture?type=large

You can also review Facebook’s docs on how to use the Graph API.

​Don’t have a Backand backend-as-a-service account? Why not get one now?  Get Free Backand Account.

Back to blog home page

Integrating an AngularJS App on Backand with Amazon S3

Posted by on Oct 30, 2015

Expanding Available Functionality

Amazon Web Services, or AWS, offer a lot of useful functionality for web developers: from hosting, to distributed computing, to data storage, and much more. We at Backand leverage AWS in several ways and in this post we’ll look at Amazon S3, and how you can integrate the object storage service into a Backand-powered application.
Continue reading

Back to blog home page

Using CoffeeScript with AngularJS

Posted by on Sep 09, 2015

JavaScript is an incredibly flexible language, allowing for nearly any imaginable programming style to be used. JavaScript allows you to approach programming from any of a number of paradigms, including procedural programming, object-oriented programming, declarative programming like that used in AngularJS, and even functional programming. However, many newer languages like Ruby, Haskell, and Python have introduced programming idioms that have proven particularly useful as these languages have evolved. Many developers lamented that this kind of functionality was not available in JavaScript, and consigned themselves to sometimes complicated work-arounds. Below we’ll look at CoffeeScript, which allows developers to use many of these new features in a JavaScript-like language which can later be compiled into a form that the application can use.

Continue reading

Back to blog home page

Functional Testing with Mocha & Chai

Posted by on Aug 26, 2015

Full Stack JavaScript Code

In full stack JavaScript development involving JavaScript on either or both the client-side and the server-side, we would like to test function input-output behavior. In its simplest form, function input-output behavior specifies the output of the function in terms of its input.

Continue reading

Back to blog home page

MVVM Deep Dive

Posted by on Jun 24, 2015

One of the key advantages of AngularJS’ implementation of two-way data binding is that it enables a true implementation of the Model-View-ViewModel (MVVM) pattern. The MVVM pattern originated as an architectural approach for Microsoft’s WPF framework, but has since evolved into a more common web-development paradigm driven by the proliferation of JavaScript frameworks. As it is focused on truly separating the user interface from the underlying data and logic, it is in many ways similar to the MVC architecture we have already discussed. However, there are a few crucial differences that make the MVVM architecture a unique selling point of frameworks like AngularJS. Below we’ll look deep into the thought process behind MVVM, and see what AngularJS provides us for implementing this architecture in a web application.

Continue reading

Back to blog home page

Model-View-Controller (MVC) Deep Dive

Posted by on Jun 16, 2015

An Introduction to MVC

The Model-View-Controller (MVC) pattern is a web application architectural pattern that focuses on one thing – separation of concerns. The goal is to separate data handling from display logic, and separate the presentation of the data from its underlying representation and tied-in application logic. MVC is a very common and very popular architectural structure for website design and development. Below we’ll dive deeper into the MVC pattern. We’ll explore each of the components, their intended use, and how they are typically used in a web application. Finally, we’ll tie it all back into AngularJS, and see how we can use the MVC pattern to greatly ease application development.

Continue reading

Back to blog home page

How to Build an Angular App with Server Side Logic

Posted by on May 26, 2015

Overview

Actions are a powerful tool that allow you to perform customized tasks when a number of different types of events occur within your application. They provide a great alternative to server-side custom code, and can add a lot of flexibility to how your application interacts with outside services. Below we’re going to look at the types of actions that Backand offers application developers, and how they can easily be used.

Continue reading