Telerik AppBuilder Presentation for TelerikNEXT Conference

AppBuilder in 45 Minutes
Jen Looper

Jen Looper
Developer Advocate, Telerik
@jenlooper

So, you want to create mobile apps too.

Stop the madness!
Use your web skills to create a cross-platform hybrid mobile app

Telerik AppBuilder can help!
Why you'll love Hybrid
• True single Codebase for all platforms
• Ease of HTM5/CSS/JavaScript
• Access to Native APIs
• App Store presence & monetization
• Users cannot tell the difference

AppBuilder under the covers
• Uses Apache Cordova
• JavaScript proxies to native APIs

AppBuilder is…
Cross-Platform Mobile Development, simplified!
• Developer freedom!
• End-to-End tooling
• All the backend services you need

Your Coding Environment – up to you!

Visual Studio Extension
Use your favorite IDE to build
Sublime Text Plugin

Windows Desktop Client
Rich Desktop Options

The Telerik Platform: platform.telerik.com
In-Browser client

Create an app using the in-browser AppBuilder Platform in 4
easy steps
1. Create an account at https://platform.telerik.com and sign in

easy steps
2. Create an app project

easy steps
3. Create a blank app

easy steps
4. Add elements to your hybrid project

Let’s come back later to the in-browser experience

A different workflow
1. Start building your app
with the CLI
2. Push to github
3. End up in-browser with
code pulled from github

Get started with the AppBuilder CLI
$appbuilder create hybrid MySampleApp --appid
com.ladeezfirstmedia.myKendoSample
$cd MySampleApp
$appbuilder simulate
Creates a basic tabstrip app

Try sample apps via the CLI
$appbuilder sample clone facebook-api
$cd facebook-api
Creates a sample facebook-powered app

Simulate like crazy
Check out your app on all kinds of phones and tablets

Really nice tooling!
Ensure responsiveness

Debug in the browser, track local storage, test connectivity
behavior, mock geolocation
Leverage Chrome devtools –
use what you already know!

Test your app in a native emulator
$appbuilder emulate ios
Or
$appbuilder emulate android
Or
$appbuilder emulate wp8
Get a closer idea of how your
app will behave on various
platforms

Test your app on device
$appbuilder build ios –companion
Creates a QR code locally for you to test on your
phone using the installed Companion App
It’s on my
iPhone!

Test outside the companion app
First, get your provisioning sorted out
$appbuilder certificate import
$appbuilder provision import
Then, build for device using your app’s provisioning
profile:
$appbuilder build ios –my-apps-provisioning-profile
Apps in progress

Magic stuff: livesync for fast debugging
Livesync three ways:
1. On AppBuilder Companion
App (3 finger gesture)
2. On built app on device
(same)
3. In Simulator (automatically!)
Make changes and view quickly
without needing to rebuild

One more thing…
Make apps the way you want.

Let’s create a TriviaCrack Clone using Telerik AppBuilder

Requirements for “QuizSlam”:
1. Integration with content – we’ll use Quizlet
2. Ability to choose quiz from Quizlet
3. Game Loop – spin to get random number, show 1 question and 4
possible answers, handle correct/incorrect, scorekeeping
4. Navigation – 5 sections
5. Chat (chat button) - TBD
6. Lists of friends with scores (friends button) - TBD
7. Saving Scores (scores button) – entails login and backend integration

Disclaimer!
This is just one way to build an app in AppBuilder. Do what works for you!

1. Start with the secret sauce!
Seed code with:
• styles set to my liking
• colors ready
• fonts installed,
• two sample navigation strategies,
• optional login code available
• modularized code using require.js
Tabstrip navigation
Drawer navigation available
https://github.com/jlooper/Kendo-Seed

2. Adjust colors and set navigation
MaterialPalettte.com
Tabs
Drawer

Navigation code
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#new"><div class="icon home"></div></a>
<a href="#chat"><div class="icon message"></div></a>
<a href="#friends"><div class="icon users"></div></a>
<a href="#scores"><div class="icon trophy"></div></a>
<a href="#menu" data-rel="drawer"><div class="icon menu"></div></a>
</div>
</div>
</footer>
We’re going to
tackle these 2 bits

3. Override icons and import .woff files to project
Icomoon.io app

4a. Code structure – index.html
<script src="bower_components/requirejs/require.js" data-main="main.js"></script>
Include require.js

4b. Code structure – main.js
require.config({
paths: {
'text': 'bower_components/requirejs-text/text'
}
});
define([
'app'
], function (app) {
…
app.init();
}
});
Configure require.js

4c. Code structure – app.js
define([
'views/New/New',
'views/Spin/Spin',
'views/Home/Home',
'views/Scores/Scores',
'views/Auth/Auth’
], function () {
var app = window.app = window.app || {};
var init = function () {
app.instance = new kendo.mobile.Application(
document.body,
{ skin: 'flat', loading:

4d. Code structure – views
All views included in /views:

5. Animation
Animate.css CSS Animations FTW

6. Quizlet integration
In New.js (start screen):
• set initial quiz id in localStorage
• grab content of quiz from Quizlet
• parse it into Q/A pairs:
Data!!

7. Game Loop Time!!!
• Spin wheel
• pick a random number from quiz set
• show that question and 4 possible answers
• handle correct/incorrect.
• Correct = allow to spin again, Incorrect = show error, stop from continuing.
The fun stuff!

8. Add Backend
1. Add Everlive .min.js to index.html:
<script
src="bower_components/everlive/min/everlive.all.
min.js"></script>
2. Add Login routine, show forms if token not set,
otherwise show scores saved in backend
3. In platform.telerik.com, create a Backend
Services project associated to your current
project
4. Enable Cloud Services and User Management
5. Grab your Api keys and store them locally
6. Create an account and get a token! Now you’re
logged in and can pass data around

Login/Registration/Forgot Password
Works with email services automatically triggered
to handle common user administration tasks
(forgot password, welcome registration) in
backend – all customizable in backend

9. Add Scorekeeping capability
Save accuracy scores to backend when user clicks
‘done’
Create a datatype in the backend
called ‘Scores’ with a field called
‘Score’ to store the data
var Scores = new kendo.data.DataSource({
type:

Start posting scores!
sendScore:function(e){
var score = localStorage.getItem(

Display your scores
var data = el.data('Scores');
data.get()
.then(function(data){
$(

Voila!
This content type is public, so you
see everyone’s scores. You can
change this by setting it to private

10. One more thing! Add a Plugin
A sample AdMob ad setup
Let’s add an AdMob ad
1. Set up an ad in AdMob
2. Add the AdMob Plugin from plugins.telerik.com
3. Add the ad to your view

Add plugin via CLI
$ appbuilder plugin add "AdMob"
…or in browser

Deploy time!
Let’s move to the in-browser toolset. Migrate your codebase either by:
• Committing it from your local to Github and bringing it into the Platform
• Zipping your files and importing to Platform

View your app in companion app

Or in a built app
Load up your provisioning profiles for iOS here

Manage icons and splash screens

Install on your device
Here’s that
ad

Finally, we have an app ready for production!
Publish from AppBuilder – send your app to the various stores

There is so much more in AppBuilder!
• Ask Developer Relations
• Ping me! @jenlooper
• Read more on TDN (developer.telerik.com)
• Visit the blogs (blogs.telerik.com)
• Follow us on Twitter @Telerik
• Sign up for an account at platform.telerik.com
It’s like an awesome smorgasbord!

Thank you! Now roll up your sleeves and start building!
Jen Looper
@jenlooper
Developer Advocate
Telerik Developer Relations Team
Evaluation: http://bit.ly/next-looper-1
No
pressure!

Telerik AppBuilder Presentation for TelerikNEXT Conference

Recommended

More Related Content

What's hot (17)

Similar to Telerik AppBuilder Presentation for TelerikNEXT Conference (20)

More from Jen Looper (20)

Recently uploaded (20)

Telerik AppBuilder Presentation for TelerikNEXT Conference

Please wait...