Build a Native Mobile App with NativeScript and Sitefinity CMS

NativeScript is a cool new open-source project from Telerik. It allows you to write cross-platform, native, mobile apps with JavaScript, CSS, and some XML. I’ve been loving it so far and it’s only in beta!

My favorite part is you can make changes to your .js.xml.css files, then just hold down your three fingers on the companion app and your changes are near instantly reflected. Basically just reloads your app with the new files. No build, no deploy, no waiting, no problem!

Sitefinity CMS is a powerful user-friendly .NET CMS also from Telerik. The great thing about Sitefinity is that it’s meticuliouly designed to not feel like a .NET CMS (You know the feel I mean…). Moveover you get to choose to develop using Pure Clean MVC, old school ASP.Net WebForms, or a patented hybrid of the two methods.

Also in the package is a license to use an awesome suite of HTML5 controls in Kendo UI on your site (among other things), so great bang for the buck.

Why do we care?

Sitefinity already contains a module which lets you expose your data into a Kendo UI Mobile, Cordova-powered hybrid app. This basically generates an entire app to just view and edit your data – set it and forget it! Here we are in 2015 though, and while hybrid apps are certainly both a popular and a valid solution, we can now consume and expose data to a native mobile UI through NativeScript…with very little code on the NativeScript side, and zero code on the Sitefinity side. Compared to a Cordova app, it’s just night and day the amount of required code.

Step 1: Define the Sitefinity Module

Step 1: Define the Sitefinity Module

Step 2: Create some tasks

Step 2: Create some Tasks

Step 3: Tell Sitefinity to sync the data to Telerik Backend Services

You can find the link under Administration->Connector for Telerik Baas, or just /Sitefinity/Administration/Telerik-backend-services

Step 3: Tell Sitefinity to Sync the data to Telerik Backend Services

You’re going to want to go ahead and select your new Tasks type, and set the sync interval. Every time the interval trips, Sitefinity will reconcile changes to and from the Telerik Backend (yes, two-way). This means that if you add new data in the Telerik Backend Services, it’ll appear in Sitefinity after the next sync. Please note that once you save the connector, you’ll get a sync button to trip it off without needing to wait for the interval.

Clicking the “Details” link at the top right (under Bandwidth) will send you right into your new backend project.

Step 4: Add the Data Project in the Telerik Platform

You’ll first be presented with a series of “Services”. Click “Add to project” on the Cloud Data service.

Step 4: Add the Data Project

You’ll now see more menu items, one being Types – if you click on that you can see all of the tasks that you made in Sitefinity! Seems almost too easy eh?

Step 4: View the Data

Step 5: Create NativeScript Project

The Telerik platform works with the concept of workspaces. Each workspace can contain one or many project types (depending on the type). So the data project we defined above is the backend data storage portion, but now we need to add a project of type “AppBuilder Native Project”.

Step 5: Create NativeScript Project

Once selected you can choose to create a blank project, load a pre-built sample, or clone a repo.

Step 5: Choose the Type

I’m choosing the “NativeScript MasterDetail” sample here because it’s a good starting point to consume a list of data. We’re just going to need to rip out the part that populates the list and replace it with our Telerik Backend code. I’m also going to change the detail page script to allow data editing\saving back to the backend.

From here you have a plethora of choices for developing (see here). Personally I prefer to use the AppBuilder Windows Client because I can just load my project from the cloud on two dev PCs and my Surface Pro, but you’re free to whichever tool you want (keeping in mind that not all features hit every client at the same time – the CLI usually gets things first).

I won’t go into detail on the full code as its a bit outside of the scope of this post, however you can view and form the demo code. Its well commented to help explain what’s going on.

Look at how little code this is, and the end result is a Native App that can run on iOS, Android, and soon Windows Universal. Please also keep in mind that there is zero code required on the Sitefinity end!

Demo Note: your Backend Services API Key should be set in app.js

Step 6: Testing the app

These screenshots below are all taken using the NativeScript companion app (get it for Android or iOS).

The Telerik NativeScript companion app is a testing utility for designers and developers who are using Telerik Platform and Telerik AppBuilder (formerly Icenium) to develop native mobile apps with Telerik NativeScript. After installing the Telerik NativeScript companion app, you will be able to use AppBuilder LiveSync to instantly view and test code changes on your device.

I just love the companion app because you can view your changes near instantly whereas a deploy can take a couple minutes. Alternatively, you could just always publish and deploy directly as a standalone app to your device or emulator, it just takes longer than holding 3 fingers on the screen and waiting a few seconds.

Here’s what the list view looks like. It instantly pulls down the tasks from the Telerik Backend so fast you’d swear it was local data (which you could also cache using the local settings module)

List view

So when we click one of the tasks, we’re now in edit mode:

Detail view

Clicking save then pushes the Description and Completion status back to the Telerik backend again using the pure JavaScript SDK. If you check the code you’ll notice that I’m even able to use things like JSON.stringify to dump out some debug data into a dialog as in the screenshot below.

Save view

Additional Notes

I should note that you don’t need to use Telerik Backend Services to consume the data, it just makes for a really cool demo and is extremely highly available. It’s blazingly fast and there’s no extra processing that needs to happen to get the data. This means that you don’t need to query the Sitefinity API or run through any .NET overhead.

The Telerik backend is just a simple, speedy NoSql database. If your site goes down for example, mobile app users can still browse and edit data; it’s really a great service to subscribe to. So when your site fires back up, Sitefinity will trigger the sync at the determined interval and then consume all of the changes from the Telerik Backend Project. However, since Sitefinity is a capable service platform, another option would be to roll your own API to deliver and update data.

Comments