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!
Screen Builder is available by default in your installation of AppBuilder CLI. Make sure that you have AppBuilder properly installed by following these instructions.
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:
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:
App_Resourcesfolder 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.
datathere is a file that includes information needed to connect to Backend Services, including your API Key.
progressfolder is included with a script that can be used to connect to Progress data sources.
styles, find the scaffolded CSS file. You can edit this as you like to make your app reflect your styling preferences.
contactsfolder) 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.
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 simulatefrom 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:
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:
The navigation looks like this:
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!
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:
Then add validation and build out the "submit" function in addContact/index.js. The entire file will look like this:
You can see the data type start to be populated as you add email addresses.
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:
The simulator reloads, and a list is built as you specified, pulling data from your Contacts data type:
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
Images: The Cartoon Scrapbook
Jen Looper is a Developer Advocate for Telerik products at Progress. She is a web and mobile developer and founder of Ladeez First Media which is a small indie mobile development studio. In her spare time, she is a dancer, teacher and multiculturalist who is always learning.
Subscribe to be the first to get our expert-written articles and tutorials for developers!