Building an enterprise mobile app using React Native and Realtime - part 3/3

  • Nov 17, 2015
  • React Native, Code Hosting, Cloud Storage

The backoffice

For managing the contents we’ve created a backoffice website. It enables users to authenticate, add, edit and remove items from the Contents, Tags and Users tables.

In the backoffice implementation we’ve used the following technologies:

Login

For the authentication we’ve created a function called auth. It make an Ajax request to the Realtime Code Hosting authentication script passing the "BackofficeApp" role and the user credentials. If it is successful it will return an authenticated token for connecting to the Realtime Cloud Storage backend database.

Login screen

function auth (user,pass,callBack) {
	$.ajax({
	    url: 'https://codehosting.realtime.co/<YOUR_APP_KEY>/authenticate?user='+user+'&password='+pass+'&role=BackofficeApp',
	    type: 'POST',
	    success: function(data) { 
	    	callBack(data);
	    }
	});
}
							

Content list

For the content list we’ve created a main view with a table. This displays the contents separated per pages. Users can add, remove or edit contents in this page.

Connecting to the Realtime Cloud Storage

After the authentication is successful we can create a storageRef to connect the current user to the Realtime Cloud Storage backend.

You can find the JavaScript code below:

var APPKEY = "YOUR_APP_KEY";
var contentsOffset = 10;
var tagOffset = 10;

function getStorageRef(token, callback){
	if (storageRef == null) {
		storageRef = Realtime.Storage.create({
			applicationKey: APPKEY,
			authenticationToken: token
		}, function success(){
			callback();
		});
	};
	
	return storageRef;
}							

Retrieving contents

Below you have a short example how to get items from the contents table and distribute them into pages.

var contentsDict = new Array();

function getItems(){
	var tableRef = storageRef.table("Contents");
	var count = 0;
	tableRef.desc().getItems(function success(itemSnapshot) {
		if (itemSnapshot != null) {

			contentsDict[count] = itemSnapshot;
			count++;

		}else
		{			
			setContenPages(1);		
		}
	});	
}

function setContentPagesIndex(page)
{
	var pages = contentsDict.length / contentsOffset;
	var pagesList = '';
	for (var i = 1; i < pages + 1; i++) {
		if (i == page) {
			pagesList += '
  • '+i+'
  • '; }else{ pagesList += '
  • '+i+'
  • '; } }; var contentsPagination1 = document.getElementById('contentsPagination1'); contentsPagination1.innerHTML = pagesList; var contentsPagination2 = document.getElementById('contentsPagination2'); contentsPagination2.innerHTML = pagesList; }

    Content management

    Adding or editing a content is achieved by filling the new/edit content form.

    The input data is saved to the Contents table using the Cloud Storage itemSet or push methods, depending whether it’s a content update or a new content.

    function saveData() {
    
    	var isNew = 0;
    
    	var tableRef = storageRef.table("Contents");
    
    	var type = $('#typesSelector').val();
    
    	var timestamp = getParameterByName('timestamp');
    
    	if (!timestamp) {
    		timestamp = String(new Date().getTime());
    		isNew = 1;
    	};
    
    	var tag = $('#tagsSelector').val();
    	if (!tag) {
    		alert('Must have a valid tag before saving data.');
    		return;
    	};
    
    	var title = $('#titleText').val();
    	var url = $('#textURL').val();
    	var img = $('#imagePreview').attr("src");
    	var textArea = $('#textDesc').val();
    	var textBody = $('#textBody').val();
    
    	if (url == '' && textBody == '') {
    		alert('Must fill field URL or field Body');
    		return;
    	};
    
    
    	var json;
    	
    	if (itemReference) {
    		if (textBody != '') {
    			json = { Tag: tag, Title: title, Body: textBody, IMG: img, Description: textArea};
    		}else
    		{
    			json = { Tag: tag, Title: title, URL: url, IMG: img, Description: textArea};
    		}
    		itemReference.set(
    			json,
    			function success(itemSnapshot) {
    				window.location='ItemList.html';
    			}, 
    			function error(data) {
    				alert('Error saving data.');
    			}
    		);
    	}else{
    		if (textBody != '') {
    			json = { Type: type, Timestamp: timestamp,  Tag: tag, Title: title, Body: textBody, IMG: img, Description: textArea};
    		}else
    		{
    			json = { Type: type, Timestamp: timestamp,  Tag: tag, Title: title, URL: url, IMG: img, Description: textArea};
    		}
    		var itemRef = tableRef.push( json, 
    			function success(itemSnapshot) {
    				window.location='ItemList.html';
    		}, function error(message) {
    				alert('Error saving data.');
    		});
    	}
    }
    							

    GitHub repository

    Final remarks

    We hope you have found this tutorial helpful. It’s only an example of the simplicity and power the React Native framework brings to the development of cross-platform mobile apps. Using it you are able to deploy a secure enterprise mobile app using a scalable backend for the database and business logic, all without managing a single server.

    Our moto is “focus on your app features and leave the infrastructure heavy-lifting to us”.

    Stop worrying about infrastructure and build better apps, faster.

    Get your free Realtime key and start building

    If you find this interesting please share: