When building a mobile application, as a rule you will need to implement two parts: a backend and a frontend. Of course, we can confine ourselves to only the client-side (frontend), but when we have some data that should be stored on the server, we need to have the capability to capture it.
Today, we will create a simple native mobile application with both parts, and we will be doing so with no coding whatsoever. Backendless will handle our backend; it gives us everything that we need from the server-side. For development of the client side, we will use a service called Dropsource. In case if you aren’t familiar with this service, you can read more about it on their official site. In the end, we will have a simple native mobile application with a Sign Up/Sign In screen, ToDo List screen, and Add New ToDo Item screen. The app we will be building today will be native for iOS.
Let’s do it.
Recently we published an article titled “How to Enable Push Notifications Using Backendless in a React Native App (Android)”. Now we are going to continue demonstrating how to enable push notifications, this time for iOS devices. If you missed that article, we recommend you to read it first as there we implemented a basic React Native setup and configured a Backendless App. All the code what we used in the previous article can be found on this github repo. In the repo, there are several commits to separate the main steps. We will use this commit as an entry point for today’s article.
In this article, we are going to continue developing our ReactJS web application using Backendless for the backend. This is part 4 of our series, so be sure you’ve read through parts 1-3, linked below:
- Basic project setup and render Persons List
- Create, update and delete Persons
- Enable Real-Time database
If you have already read those then read on. Otherwise, we recommend you either read read all of the previous articles and build the app step-by-step, or you can clone the app from this github repository and use this commit as a starting point. Today we will build our app for the first time and deploy it to Backendless Files.
This is the third part of our series on using Backendless with a ReactJS frontend app. You can catch up on the previous articles here: Part 1 and Part 2. If you’d like to jump in now, you can simply create a new Backendless app, clone our previous progress from our Github.com repository, and use this commit as an entry point for today’s article.
Our goal for today is to showcase integration with our Real-Time (we call it RT) database for delivering changes in your data table from the server to the client. We have previously written about implementation of RT in an Angular app (“How to Use the Backendless Real-Time Database in Your Angular App”). If you’re interested in Angular or you just want to see difference between the usage of RT with React and Angular, we’d recommend you give that article a read.
In the previous article in this series, we started working on a single-page application which is based on combination of ReactJS and Redux, with Backendless for the backend. If you missed that article, we recommend you to start there. If you already have a Backendless account and you are already familiar with a React/Redux stack, you can just clone our previous progress from this commit, create a new Backendless app and use it as an entry point for today’s article. Let me describe the main goal for this article and what we plan to cover:
- Create a separate component for our persons list,
- Add a PersonsEditor for creating and updating persons,
- And add an ability to delete Persons.
The lion’s share of JavaScript developers prefer to use TypeScript in their projects as it helps avoid some problems at the assembly stage while still including many valuable features. Today we are going to share with you how to use the Backendless JS-SDK in conjunction with TypeScript in a project with a Node.js backend. Backendless JS-SDK is a fully isomorphic library and it can be used in both a browser environment and a NodeJS backend environment and in most cases it also works well in other environments like React Native, Appcelerator, etc. The JS-SDK has been designed as a plain JavaScript library, but a few years ago we added types definitions for all methods and classes, so you can use the JS-SDK in your TypeScript projects without additional settings.
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.
React Native helps you build a real native mobile application using JavaScript (for more information about React Native, you can check out the documentation on Github here). The Backendless JavaScript SDK (JS-SDK) already has full compatibility with React Native – just install it from NPM, require in your code, and go. But since the release of Backendless 5.2.x, having only the JS-SDK is not enough to access all the Backendless features; in some cases, we need to have access to native modules for working with certain features such as Push Notifications. We’ve therefore decided to create another module on JS for using exactly in a React Native environment. It’s a patch of sorts for JS-SDK.
In this article series, I’m going to show you how to use this additional JS module. There are will be a total of 3 articles:
- How to enable Push Notifications using Backendless in a React Native App (Android)
- How to enable Push Notifications using Backendless in a React Native App (iOS) (coming soon)
- How to customize Push Notifications using Backendless (coming soon)
Today, we get started with creating a simple Android application on React Native for receiving Push Notifications. Alright, let’s do it.
One of the most powerful features that Backendless 5 has available is the capability for you to implement your own License Manager for creating and checking licenses for your product/customers. In this article, we will touch on some Backendless services such as data management and Business Logic and we will use one of the Backendless Client SDKs.
