The Future is NOW for Screen Builder and the CLI

One of the best retro cartoons, "The Jetsons," epitomized the enticing idea of "the future" as envisioned during the space age era of the '60s, complete with video conferencing, flying cars with individualized modular transport, robots doing the mundane chores, and, best of all, the push-button house that would make doing housework a breeze.


 
The concept of the push-button house has become a little closer to reality with the advent of the Nest and smart LED lighting. So I was really excited to give the new Screen Builder commands in the Telerik AppBuilder command line interface (CLI) tool a spin, because it brings a little of that future-facing magic into the domain of mobile apps development. Just push buttons, type a bit, push some more buttons, and your app is scaffolded! It's so futuristic!

Installation

Screen Builder is available by default in your installation of AppBuilder CLI. Make sure that you have AppBuilder properly installed by following these instructions.

Scaffolding an App

Once you have AppBuilder CLI up and running, you're ready to scaffold an app. In your terminal window at the prompt, type appbuilder screenbuilder. A help window pops up, showing all the Screen Builder commands available. Change to the directory where you want your new app folder and codebase to reside:

$ cd ~/Documents

or if you are using Windows

> cd %homepath%\Documents

Now create a new hybrid mobile app using Screen Builder:

$ appbuilder create screenbuilder myApp

A folder is created at the path you specified above and a series of questions starts to be listed in the prompt. You are asked to pick a layout, navigation, transitions and a theme, and the app is started. Answer by using the arrow or return keys: 

The AppBuilder simulator starts and you see your new, fresh app! It's a lot like ordering eggs over easy with toast, light on the jam, from the push-button kitchen.

The commands above generate a basic app with a list:

A generated tabbed app with a flat theme looks like this:

An app with a drawer navigation (opened in this case) and a native skin looks like this:

What is Created?

The scaffolding process creates a bunch of files, and it's useful to know what is included so you know where and when to make edits. You can edit your code in your favorite IDE or text editor. The file structure of a scaffolded hybrid mobile app looks like this:

myApp
--App_Resources
--bower_components
--data
--lib
--styles
--home

• In the App_Resources folder you'll find images required by each platform, in particular icons and splash screens. You can change these any time to reflect your app and your own branding.
• In bower_components the various JavaScript files, included via the scaffolding process by means of bower. When you add data services, for example, Screen Builder includes a folder and scripts for Everlive, another name for Telerik Backend Services.
• In data there is a file that includes information needed to connect to Backend Services, including your API Key.
• In lib, a progress folder is included with a script that can be used to connect to Progress data sources.
• In styles, find the scaffolded CSS file. You can edit this as you like to make your app reflect your styling preferences.
• As you add pages to your app, a new folder is created (such as a contacts folder) with an .html and a .js file containing the code needed by that page. This reflects the best practice in developing a mobile app codebase, in that the code is nicely modularized.

Behind the scenes, the Screen Builder CLI relies on a Yeoman generator to handle the actual building of the pages of your app, and delivers the prompts to the CLI to which you are responding.

Making Changes

Let's say I have scaffolded a basic app with a drawer navigation using the flat skin. Now it's time to add some more elements to this app. For example, it's easy to add a datasource to leverage the power of Telerik Backend Services:

Before starting, make sure that you have set up a Backend Services project in Telerik Platform. Make a note of your project's API Key:

Tip: As you make changes, the simulator should automatically refresh. If it doesn't, close the simulator and stop the processes in the terminal if you need to by typing ctrl/c. To see your changes in place, reopen the simulator by typing appbuilder simulate from the root of your project. Alternately, reload the simulator.

Making sure that you are working from within the folder you created, add the data provider:

$ appbuilder add-dataprovider

The scaffolding starts up again, and you are asked to input the type of backend service you want to integrate, your API key, and, if you are using Telerik Backend Services, whether you want to make this service functional offline.

After you add data services, you are ready to use it by adding authentication routines.

$ appbuilder add-authentication

You are prompted to create the SignIn and Registration forms for your app. After having added these, I found it helpful to add a landing page as well:

$ appbuilder add-view

Here, I added a new view that will be the landing page for my app after the user either signs in or logs on. I called it contacts, as I'm going to create a list of contacts that will be pulled into this screen from the backend. I then went into my generated code and edited the home/index.js file to ensure that after login and registration, my contacts page is the first thing that I see:

mode = 'signin',
        registerRedirect = 'contacts',
        signinRedirect = 'contacts',

I'm also going to add a view that will host a form to add contacts, so I'm following the same practice as above to add this second view.

At this point, my app looks like this before I log in:



and after:

 
 
The navigation looks like this:

Debugging

What if you made a mistake in typing something into the Screen Builder commands? Fear not, you have access to all the code generated, and mistakes are easy to discover. The first line of defense is to see what's going on in the simulator's Developer Tools. From the simulator, open up the DevTools window.

In the console, I found that I had mistyped my API Key when adding my data provider. By digging into the generated code, I can fix the issue, correct the URL, successfully test my Registration form and watch my registration appear in Telerik Backend. The backend is even set up to send an email to my address welcoming me to the service and initializing a verification routine.

You can of course do visual debugging; the Email helper text in the login field is too long, for example. This is easily corrected by editing the text in myApp/home/view.html where the presentation code is included.

Let the automation continue!

Digging Deeper-Add a Form

I want to be able to enter data into a form and have the names appear in a list on the contacts screen. Let's add this functionality. This is starting to feel very comfortable now!

To add a form, use the appbuilder add-form command, and to add a field to that form, use appbuilder add-field. I add a simple text field to input an email address, and it turns out like this:

To make this form do anything, we need to bind it to Backend Services. There aren't any push buttons for this, but fear not!

It's not dangerous. Just log into platform.telerik.com and go to the Backend area of your Project, similar to where you found your API Key. Click "Create Data Type" and create the type 'Contacts' with a field called Email. We're going to populate this area from our Add Contact form.

You'll need to do two edits:

In addContact/view.html, edit the html markup:

<input data-bind="value: contactForm.email" placeholder="myemail@myemail.com" type="email">

Then add validation and build out the "submit" function in addContact/index.js. The entire file will look like this:

'use strict';
 
app.addContact = kendo.observable({
    onShow: function() {}
});
(function(parent) {
    var provider = app.data.myDataProvider;
    var contactForm = kendo.observable({
        fields: {
            email: '',
        },
        validateData: function(data) {
                if (!data.email) {
                    alert('Missing email');
                    return false;
                }                
                return true;
            },
        submit: function() {
                var model = contactForm,
                    email = model.email.toLowerCase();
 
                if (!model.validateData(model)) {
                    return false;
                }
                var data = provider.data('Contacts')
                data.create({ 'Email' : email },
                    function(data){
                        alert("Email added!");
                    },
                    function(error){
                        alert("Sorry, there was a problem with adding this email address.");
                    });
            },
 
        cancel: function() {}
    });
 
    parent.set('contactForm', contactForm);
})(app.addContact);

You can see the data type start to be populated as you add email addresses.

Digging Deeper-Add a List

Now we want to see those emails in the Contacts data type populate a list on the Contacts page. Let's build that. Back to the command line! Screen Builder handles this very well. Type appbuilder add-list and you are guided through several prompts that connect your list to a data provider, add an icon and more:

LOOPERMAC-2:myApp Looper$ appbuilder add-list
Please, wait while Screen Builder and its dependencies are being configured.
 
? How do you want to name your list? contactList
 
? To which view do you want to add the list? Contacts
 
? To which data provider do you want to bind the list? Data Provider
 
? What is the name of your data collection? Contacts
 
? Do you want to add an icon to every item? Yes
 
? Which field of the data collection do you want to use as image? Email
 
? Which field of the data collection do you want to use as heading text? Email
 
? Which field of the data collection do you want to use as subheading text? Email Address
 
? Which field from the data source do you want to use for filtering? Leave empty to omit. 
 
? Which field from the data source do you want to use for grouping? Leave empty to omit. 
 
? Do you want to enable a master-detail interface? No
 
? Do you want to enable pull-to-refresh functionality? Yes
 
? Do you want to enable endless scrolling? Yes

The simulator reloads, and a list is built as you specified, pulling data from your Contacts data type:

What's Next?

I've demonstrated how you can use Screen Builder via the command line to easily and quickly scaffold a hybrid mobile app with some good functionality, including authentication and reading and writing data to and from a data service. At this point, you will want to really dig into the codebase to understand how the pieces fit together and optimize the app, making it your own. You can change the CSS in styles/main.css to manage the colors, change icons and splash screens, and add more screens either using Screen Builder or hand-coding the html and JavaScript. I encourage you to take a look at Screen Builder using the AppBuilder CLI. With these tools at your fingertips, the future is NOW!



Images: The Cartoon Scrapbook