Telerik AppBuilder Presentation for TelerikNEXT Conference
Download as PPTX, PDF•1 like•885 views
The document introduces Telerik AppBuilder, a tool designed for creating cross-platform hybrid mobile apps using web skills with a single codebase. It outlines the steps for building an app, including using the in-browser appbuilder, the command-line interface (CLI), and integrating backend services. The tutorial also covers debugging, app testing, and how to enhance apps with features like score tracking and ads, paving the way for developers to easily launch their applications on various platforms.
![4b. Code structure – main.js
require.config({
paths: {
'text': 'bower_components/requirejs-text/text'
}
});
define([
'app'
], function (app) {
…
app.init();
}
});
Configure require.js](https://image.slidesharecdn.com/rwtl6xhstf6vevimcimh-signature-c1f0ac6e63421d32efcf7a07788e96e22bdaf2d6a7344c1003e73f2efcc75e7c-poli-150511174906-lva1-app6891/85/Telerik-AppBuilder-Presentation-for-TelerikNEXT-Conference-42-320.jpg)
![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: "<h1>Please wait...</h1>" }
);
};
return {
init: init
};
});
Define required elements](https://image.slidesharecdn.com/rwtl6xhstf6vevimcimh-signature-c1f0ac6e63421d32efcf7a07788e96e22bdaf2d6a7344c1003e73f2efcc75e7c-poli-150511174906-lva1-app6891/85/Telerik-AppBuilder-Presentation-for-TelerikNEXT-Conference-43-320.jpg)
Telerik AppBuilder Presentation for TelerikNEXT Conference
- 1. AppBuilder in 45 Minutes Jen Looper
- 2. Jen Looper Developer Advocate, Telerik @jenlooper
- 3. I <3 mobile apps
- 4. So, you want to create mobile apps too.
- 5. Stop the madness! Use your web skills to create a cross-platform hybrid mobile app
- 7. 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
- 8. AppBuilder under the covers • Uses Apache Cordova • JavaScript proxies to native APIs
- 9. AppBuilder is… Cross-Platform Mobile Development, simplified! • Developer freedom! • End-to-End tooling • All the backend services you need
- 10. Your Coding Environment – up to you!
- 11. Visual Studio Extension Use your favorite IDE to build Sublime Text Plugin
- 12. Windows Desktop Client Rich Desktop Options
- 13. The Telerik Platform: platform.telerik.com In-Browser client
- 14. CLI
- 15. 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
- 16. Create an app using the in-browser AppBuilder Platform in 4 easy steps 2. Create an app project
- 17. Create an app using the in-browser AppBuilder Platform in 4 easy steps 3. Create a blank app
- 18. Create an app using the in-browser AppBuilder Platform in 4 easy steps 4. Add elements to your hybrid project
- 19. You’re ready to roll!
- 20. Let’s come back later to the in-browser experience
- 21. 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
- 22. Get started with the AppBuilder CLI $appbuilder create hybrid MySampleApp --appid com.ladeezfirstmedia.myKendoSample $cd MySampleApp $appbuilder simulate Creates a basic tabstrip app
- 23. Try sample apps via the CLI $appbuilder sample clone facebook-api $cd facebook-api $appbuilder simulate Creates a sample facebook-powered app
- 24. Simulate like crazy $appbuilder simulate Check out your app on all kinds of phones and tablets
- 25. Really nice tooling! $appbuilder simulate Ensure responsiveness
- 26. Debug in the browser, track local storage, test connectivity behavior, mock geolocation $appbuilder simulate Leverage Chrome devtools – use what you already know!
- 27. 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
- 28. 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!
- 29. 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
- 30. 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
- 31. One more thing… Make apps the way you want.
- 33. Let’s create a TriviaCrack Clone using Telerik AppBuilder
- 34. 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
- 35. Sketch a GUI:
- 36. Disclaimer! This is just one way to build an app in AppBuilder. Do what works for you!
- 37. 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
- 38. 2. Adjust colors and set navigation MaterialPalettte.com Tabs Drawer
- 39. 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
- 40. 3. Override icons and import .woff files to project Icomoon.io app
- 41. 4a. Code structure – index.html <script src="bower_components/requirejs/require.js" data-main="main.js"></script> Include require.js
- 42. 4b. Code structure – main.js require.config({ paths: { 'text': 'bower_components/requirejs-text/text' } }); define([ 'app' ], function (app) { … app.init(); } }); Configure require.js
- 43. 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: "<h1>Please wait...</h1>" } ); }; return { init: init }; }); Define required elements
- 44. 4d. Code structure – views All views included in /views:
- 45. 5. Animation Animate.css CSS Animations FTW
- 46. 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!!
- 47. 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!
- 48. Pick – Spin - Quiz
- 49. Demo!
- 50. 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
- 51. 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
- 52. 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: "everlive", transport: { typeName: "Scores" } }); var apiKey = localStorage.getItem("apiKey"); var token = localStorage.getItem("token"); var el = new Everlive({ apiKey: apiKey, url: '//api.everlive.com/v1/', scheme: 'https', token: token }); Prep your code to pass the data
- 53. Start posting scores! sendScore:function(e){ var score = localStorage.getItem("numCorrect")/localStorage.getItem("numAttempts") //send to backend var data = el.data('Scores'); data.get() .then(function(data){ var data = el.data('Scores'); data.create({ 'Score': score}, function(data){ alert("Score saved!") }, function(error){ alert(JSON.stringify(error)); }); }); } It’s my score
- 54. Display your scores var data = el.data('Scores'); data.get() .then(function(data){ $("#score-list").kendoListView({ dataSource: Scores, template: kendo.template($("#score- template").html()), }); }); Grab the scores
- 55. Display your scores <ul id="score-list" data-style="inset" data-role="listview" data-template="score-template"></ul> <script id="score-template" type="text/x-kendo-template"> <li> <div style="padding:5px"> #: kendo.toString(new Date(CreatedAt),'g')# # if (typeof(Score) !== 'undefined') { # Score - #: Score*100 #% # } # </div> </li> </script> Show them on the frontend in a Kendo template
- 56. Voila! This content type is public, so you see everyone’s scores. You can change this by setting it to private
- 57. 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
- 58. Add plugin via CLI $ appbuilder plugin add "AdMob" …or in browser
- 59. 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
- 60. View your app in companion app
- 61. Or in a built app Load up your provisioning profiles for iOS here
- 62. Manage icons and splash screens
- 63. Install on your device Here’s that ad
- 64. Finally, we have an app ready for production! Publish from AppBuilder – send your app to the various stores
- 65. 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!
- 66. 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!