ReactJS is one of the best and most popular frontend frameworks available for app builders. The barriers to entry in terms of understanding how to develop an app with ReactJS are very low, which is why many JavaScript developers choose the ReactJS library for web or mobile applications. It also works very well with a large number of data providers. Therefore, today we are beginning a series of articles about “How to use Backendless with ReactJS”. In this series, we will familiarize you with a number of Backendless features, show you how to use our real-time database with React-Redux store, show you how to deploy your app to Backendless File Storage, and demonstrate how to easily inject the JS-SDK into your ReactJS application.
If you have experience with AngularJS and would like to learn how to build an app with Backendless using that language, you can check out our previous series of articles:
- How to create a Web App using Angular and Backendless
- How to use the Backendless real-time database in your Angular app
- How to monitor real-time connections in an Angular app
In this article, as was the case with our Angular series, we will start by creating a new Backendless App and building a simple React app. Our demo app will be an Address Book app, so to get started we will show how to load and display some data from the server. In the future, we will modernize the application by adding more functionality.
Let’s get started!
Some Backendless users choose to use REST APIs in their JavaScript projects. While many can simply use our pre-packaged JS-SDK, that SDK may not always be able to achieve the result the user is seeking. Today we’re going to show you how to build a custom and very light API client library for working with Backendless API. Some time ago, we created a simple NPM module named “backendless-request” for sending CRUD requests to the server. That package is used in all our services such as DevConsole, JSCodeRunner, JS-SDK, etc.. If you would like to see the sources of the package, you can find it on Github.
For each entry in a given table, Backendless creates a unique
objectId property – this is a UUID. In some cases, you may want to have a unique ID based on a whole number. To do this, we will use Backendless Atomic Counters (you can read the documentation about Atomic Counters here). In this article, we will use JavaScript business logic to create a handler that will add a unique value before creating the object. You can then store that value in your table to provide the ID you’re looking for.
Amazon Elasticsearch Service (Amazon ES) is a service that can store a lot of data and provide a full text-based search, among other cool features. In this article, we’ll show you how to integrate Amazon ES with your Backendless project.
Save objects to Amazon ES
To save objects to the Amazon ES with Backendless you have to:
- Create an Amazon ES domain
- Create after event handlers in the Backendless console
- Download generated code
- Write JavaScript code to save objects
In one of my previous articles, I showed how to develop a custom Alexa skill using an example of a Trip Planner app (How To Build A Dialogue Custom Alexa Skill Using JavaScript (Without Lambda). In this article I will show you a more complex example of the interaction between Alexa and the user. Today will build a “Guess My Number” game where Alexa (or technically the skill) thinks of a number and the user tries to guess it while the skills suggests whether it is lower or higher. Here’s a sample dialogue a user may have with Alexa once you implement the skill:
What does “mobile-to-web cross login with a QR code” mean ? It is one of the approaches for the two-factor authentication. Suppose that a user is already authenticated in your application (in my example it would be an android app) and the user wants to use it’s actual session to perform an automatic authentication in another application (in my case it’s a web app). There are several examples of popular apps which use this approach. For example, to login into a web session with WhatsАpp, you must login on your phone and then scan a QR code in the web interface.
Backendless 5 is now released (hooray!) and it offers a bunch of new powerful capabilities. One of them is support for development of custom Amazon Alexa Skills. In this post I am going to demonstrate how easy it is to create a custom skill using JavaScript. You will learn how to control the dialogue flow between the user and Alexa using Backendless and custom Cloud Code.
An example we will build a trip planner skill, albeit a trivialized version of it, which will gather from the user the departure date, the departure and arrival cities. The collected information can be used to search available fares, hotels and make any other necessary arrangements.
What You Will Need
- An Amazon Developer Account
- A Backendless Developer Account and App
- Install SDK for Amazon Alexa from Backendless Marketplace
Today we will talk about how to monitor client’s Real-Time Connections in your Angular application. This tutorial continues the guide on how to build Angular apps with Backendless. It is recommended to check out the previous article in this series before you continue for the reason that we will use the application from the previous post as the starting point for this tutorial. Alternatively, if you just want to start working with the it right away, just download the source code from this GitHub commit.
In many cases we want to see how many application users are online or offline, for example, it might be useful in a chat application. For the demo purposes, in our application we will add a simple counter for count all connected clients. As we explore adding that functionality, you will meet with Backendless Business Logic, Backendless Counters, Codeless and keep discovering Real-Time features:
Great news, guys! Backendless 5 is now released and it’s time to show you some new features we’ve been working on. In this article we will talk about how to integrate the Backendless Real-Time Database into your Angular application. Meanwhile, you can check out the previous version of our Angular app in this post. In case you haven’t read the post and don’t have that app yet, please review the previous article, because we will use that application as a starting point for this tutorial. Or, if you just want to start working with the it right away, just download the source code from this GitHub commit.
Today we will talk about the integration of Backendless into your AngularJS/TypeScript app. You will create a simple Address Book application where all the application data will be stored in the Backendless mobile backend. The main goal of this article is to provide step-by-step instructions and to show how to create an Angular application with Backendless mBaaS.
