Telerik blogs

After almost a year in development, I am glad to introduce to the community a new set of backend services for mobile development called Icenium Everlive ready for use today.

Icenium Projects

Icenium Everlive is a set of backend services that lets you build and manage mobile apps in a faster, easier, and more scalable way. Everlive can significantly speed up development by providing your app with:

 

  • Data storage
  • User management
  • Email notifications
  • Server-code execution

Rather than wasting time setting-up a new server, configuring a secure, scalable database, and writing TONS of server-side code to expose RESTful web services, you can just focus on your app, data, users, and schema. Everlive handles all of the hard work.

With the latest Icenium release, getting started with Everlive backend services is breeze. In this blog, you’ll learn how to get started with Icenium Everlive and integrate Everlive services in a hybrid mobile app using JavaScript.

New project template with backend services

Icenium provides a new template named Icenium Everlive Cloud Services. The template is a sample social app that uses Everlive on the backend. It features a number of Everlive features, including:

  • Automatic user management (register/login users)
  • Automatic welcome and account verification emails for new users
  • Customizable email templates
  • Secure RESTful web services to manage application data

All data is stored in the cloud, in individual backend projects are provisioned for each app and user. In the Everlive backend portal, you can explore your data in a fast, user friendly interface.

When you create a project from the template, Icenium creates a new hybrid mobile app project in your Icenium account and provisions a new backend project for your app in Everlive. The backend project contains the built-in content type named Users, and two custom content types named Activities and Comments that are required two run the social app. In Icenium, you can see all your Everlive backend projects and their structure in the new Data Navigator pane.

Icenium Data Navigator for Everlive

 

When you run your project on a device or in the Icenium simulator, the starting screen of the app invites you to register a new user or log in.

Everlive Friends AppRegister user in Everlive

 

After completing the registration form, the app prompts you that the registration is successful and you can log in. If you have provided a valid email address, you will receive two new emails from <your-project-name>@everlive.com. The first one welcomes you as a new user of the app.

Welcome email from Everlive

 

The second one invites you to confirm your email with a link to the Everlive website.

Verify account email from Everlive

 

TIP: In the Everlive backend portal, you can modify the email templates with an HTML editor or turn them off.

Portal for managing backend data

You can explore the Everlive portal by navigating to https://www.everlive.com in your browser. In Icenium, you can launch the Everlive portal from the Data Navigator pane. Open the Data Navigator pane, right-click your app and click Show Application.

The backend defines the structure of your app in terms of content types and fields, and lets you explore and manage the generated data from the mobile apps. In Everlive, you can define the following custom fields: Text, Number, DateTime, Yes/No, File, GeoPoint, single Relation, multiple Relation, and Array.

Everlive projects portal

Everlive project overview

Everlive JavaScript SDK

You can use the Everlive JavaScript SDK library for development of browser and mobile applications. It provides an abstraction layer over the services of Everlive. The library provides a simple API for CRUD operations for plain objects and integration with the Kendo UI framework.

TIP: With the Everlive JavaScript SDK, you can implement registering a new user, authenticating the user, and sending two emails with a couple of lines of code.

To add Everlive backend services to your app, start by including a script reference to the Everlive JavaScript SDK in your project in Icenium. The SDK is included in the Icenium Everlive Cloud Services template but you can also download it from the Downloads section of the Everlive portal.

<script src="path/to/everlive.all.min.js"></script>

 

Next, execute the following code:

var el = new Everlive('YOUR-API-KEY-HERE');
 
el.$.Users.register('jsmith', // username
    '111111', // password
    { // additional fields
        Email: 'john.smith@telerik.com', // email
        DispayName: 'John Smith', // display name
        Role: 'authors' // role
    },
    function (data) {
        alert(JSON.stringify(data));
    },
    function (error) {
        alert(JSON.stringify(error));
    }
);

 

You need to initialize a new instance of Everlive with an API Key. The API Key is the unique identifier of your app. Everlive issues the API key when you create your app. To obtain the API Key of an app, you can open the Data Navigator in Icenium, right-click your app, and click Properties. The Properties panel shows the API Key.

Data Navigator Everlive properties in Icenium

Alternatively, you can launch the Everlive backend portal in your browser, select your app, and open the API Keys section. From the API Keys section, you can obtain all keys related to Everlive.

API Keys in Everlive Portal

TIP: To view the code used by the Icenium sample app to register a user, navigate to main.js in Icenium. Go over the signupViewModel.signup() method that registers the user and incorporates the MVVM pattern of Kendo UI.

 

Integrating Everlive JavaScript SDK and Kendo UI

The Everlive SDK provides a predefined dialect for the Kendo UI DataSource component. It supports filtering, sorting, paging, and the DataSource CRUD operations. To use the dialect, you need to initialize the Everlive JavaScript SDK first. Below is an example on how to use the Everlive JavaScript SDK and Kendo UI DataSource for CRUD operations:

var dataSource = new kendo.data.DataSource({
    type: 'everlive',
    transport: {
        typeName: 'Activities'
    },
    schema: {
        model: { id: Everlive.idField }
    }
});
// retrieve the data from Everlive
dataSource.fetch(function () {
    // add a new item
    var itemToAdd = {
        'Text': 'Harper Lee'
    };
    dataSource.add(itemToAdd);
    // update the first item
    var itemToUpdate = dataSource.at(0);
    itemToUpdate.set('Text', 'Updated Sample Text');
    // delete the second item
    var itemToDelete = dataSource.at(1);
    dataSource.remove(itemToDelete);
    // send the changes to Everlive
    dataSource.sync();});

 

Set the 'type' configuration option to 'everlive' to switch to the Everlive dialect, then set the 'transport.typeName' to the name of the content type (this is a configuration option specific to the Everlive dialect), and set the 'schema.model' option (more details about it - here). Note that the 'transport.typeName' and 'schema.model' are mandatory for the Everlive dialect to work.

Cloud code execution

Using Icenium Everlive, you can execute JavaScript code before and after a CRUD operation based on a content type that you have defined as part of your app. To edit the cloud code for a specific type, open the Data Navigator, select your app, right-click a content type, and click Edit Cloud Code.

 

Cloud code execution

Icenium will open a JavaScript file that contains all possible events for which you can subscribe and write custom logic similar to this:

Everlive.Events.beforeRead(function (request, context, done) {
    //Custom code here
 
    //Call done after finished to continue processing
    done();
});
 
Everlive.Events.afterRead(function (request, response, context, done) {
 
    done();
});

 

Once you open the cloud code, you can subscribe to a number of events located in Everlive.Events. With the Everlive.Events API, you can execute custom business logic, validate the incoming requests, modify the response of a service, make requests over HTTP, send SMS using Twilio, or send emails based on Email Templates.

Validating user email and returning an error

Using the pre-processing events, you can easily validate your request for any custom logic. To facilitate you with this process, Everlive Cloud Code supports a number of built-in validators that help you check common regular expressions. Below is an example on how to validate user email and return an error:

Everlive.Events.beforeCreate(function (request, context, done) {
    var email = request.data.Email;
    var isValid = email && Everlive.Validation.validateEmail(email);
    //check whether the email is not null and whether it is valid
    if (!isValid) {
        Everlive.Response.setErrorResult('The "Email" field must be a valid email address.', 131, 500);
    }
    done();
});

 

Sending emails from cloud code

The cloud code functionality also allows you to send emails in very convenient way. All emails are based on Email Templates that you can define using the Email Templates screen in Everlive. You can also use a mustache syntax to replace variables passed by the call in your Email Template, so that you can include contextual information in the actual email.

Everlive.Events.beforeRead(function (request, context, done) {
    var templateName = "WelcomeEmail";
    var recipients = ['newuser@telerik.com'];
    var emailContext = {
        CustomSubject: "Email sent from cloud code.",
        IntValue: 222
    };
 
    Everlive.Email.sendEmailFromTemplate(templateName, recipients, emailContext, function (err, result) {
        //some other logic here...
        done();
    });
});

 

Sending SMS using Twilio

Everlive also offers integration with Twilio. You can use it to send SMSs to your users by making external calls to the API from the cloud code.

Everlive.Events.afterCreate(function (request, response, context, done) {
    //Instantiate Everlive Twilio API
    var accountId = '${TwilioAccountId}';
    var authToken = '${TwilioAuthToken}';
    var twilio = new Everlive.Integration.Twilio(accountId, authToken);
 
    //Send SMS to a specific phone number
    var fromNumber = '+165********'; //One of the numbers in your Twilio account
    var toNumber = '+3598********';
    var message = 'This is automatic SMS from the Friends application.';
    twilio.sendSms(fromNumber, toNumber, message, function (result) {
        //some other logic here...
        done();
    });
});

 

Documentation

To go over the comprehensive documentation of Icenium Everlive, you need to log into the backend portal of Icenium Everlive which is located at https://www.everlive.com , select an existing app, and click on the Documentation section. Note that the Icenium Everlive documentation is contextual for each app and you can easily copy/paste code snippets from it to your code.

Stay tuned for more updates coming out from the Icenium May release and don't forget about the Icenium May release keynote coming up on May 29th where you will be able to learn a ton of cool stuff pushing the industry forward.

Rob Lauer

About the Author
Hristo Borisov is currently a product manager in Telerik focusing on backend as a service and cloud technologies after spending more than 5 years with the company. A passionate advocate of applying lean startup practices to existing organizations, Hristo is on the quest for discovering scalable and sustainable business models through product and customer development using tools like MVPs, Pivots, and Lean Business Model Canvases.


Comments

Comments are disabled in preview mode.