Game On With NativeScript
Download as PPTX, PDF0 likes21 views
This document provides an overview of NativeScript, an open source framework for building native mobile apps using JavaScript. NativeScript allows developers to write mobile apps in JavaScript and share code across iOS and Android platforms. It provides direct access to native mobile APIs and allows apps to use native UI elements and components. The document demonstrates building a sample game app with NativeScript called ThisOrThat and discusses key NativeScript features like data binding, platform-specific code, and integrating with third party APIs.
Game On With NativeScript
- 1. GAME ON! WITH NATIVESCRIPT J E N L O O P E R | D E V R E L @ T E L E R I K @ J E N L O O P E R
- 2. $ WHOAMI • Ph.D. … in Medieval French (13th century prose romance FTW) • Retrained! • Worked in startup, nonprofit, big corporate 14 yrs+ • A lot of side projects – ladeezfirstmedia.com • Now DevRel@Telerik
- 4. A RUNTIME FOR BUILDING AND RUNNING NATIVE IOS, ANDROID, AND (SOON) WINDOWS PHONE APPS WITH A SINGLE, JAVASCRIPT CODE BASE
- 6. • No cross compilation ! = ! = • Direct access to native APIs in JS ! = • No DOM
- 7. WHY NATIVESCRIPT? • Skills reuse • Standards-based JavaScript, CSS, optionally TypeScript • Code reuse • npm modules, 3rd-party iOS and Android libraries • Easily use native APIs • No wrappers to access native APIs • Use native UI elements • Open source!
- 13. HOW DOES THIS WORK?
- 14. NATIVESCRIPT AND JS VMS NativeScript runs JavaScript on a JavaScript VM •JavaScriptCore on iOS •V8 on Android
- 16. • Runs on JavaScriptCore • Runs on V8
- 19. NATIVESCRIPT MODULES • NativeScript-provided modules that provide cross-platform functionality. • There are dozens of them and they’re easy to write yourself. • NativeScript modules follow Node module’s conventions (CommonJS).
- 24. BUT HOW DO I TURN THIS INTO AN APP?
- 25. 2 WAYS TO USE NATIVESCRIPT 1) 2)
- 26. • Backend-as-a-service – Push notifications, cloud data, file storage, etc • Analytics • AppBuilder – Cloud builds (build iOS apps on Windows, Windows Phone apps on a Mac) – NativeScript debugging and tooling • Screen Builder (app scaffolding) • And more! http://telerik.com/platform
- 27. •In-Browser Client •Visual Studio Extension •Sublime Text Package •Command-Line Interface TELERIK APPBUILDER IDE OPTIONS
- 30. NATIVESCRIPT CLI •Free and open source •https://github.com/nativescript/nativescri pt-cli
- 31. NATIVESCRIPT CLI REQUIREMENTS https://github.com/nativescript/nativescript- cli#system-requirements • Xcode, Xcode CLI tools, iOS SDK • JDK, Apache Ant, Android SDK
- 32. LEARN MORE! NativeScript Getting Started Guide: http://docs.nativescript.org/getting-started
- 33. STARTING A NEW PROJECT
- 34. RUNNING ON IOS
- 36. DEVELOPER HELPS! 1. Livesync! 2. Sublime Text Settings to build 3. Deploy to device Cmd + B
- 37. APP STRUCTURE
- 38. APP.JS
- 39. PAGES • XML markup structure • Elements (e.g. <Page>, <Label>) are NativeScript modules
- 41. DATA BINDING
- 44. CSS
- 46. A GAME INSPIRED BY… • Show picture of llama or duck • Very quickly timeout • Show high scores
- 47. LET’S USE THE CLARIFAI API TOO! A souped-up Llama vs. Duck with educational ++ • Pick 2 images • Query Clarifai to get 2 sets of tags • Create game loop to let user choose This or That • Localize the tags using Clarifai’s translations (20 languages!) (Settings area) • Timeout after 5 seconds • Show high scores (Telerik Platform integration) • Show my scores (also Telerik Platform)
- 48. PRESENTING…
- 49. THISORTHAT: A GAME OF WORDS AND TAGS
- 50. O P E N S O U R C E ! Android download https://github.co m/jlooper/thisort hat-app iOS download
- 51. THISORTHAT: CODE WALKTHROUGH • Basic structure • API integration • Authentication • View models • Shared code • Animation • Platform-specific code • Cocoapods and Toast plugin • Npm module – email- validator
- 52. THISORTHAT: BASIC CODE STRUCTURE • Quick code structure rundown
- 53. THISORTHAT: API INTEGRATION • Shared/config.js • Data persistence
- 54. THISORTHAT: AUTHENTICATION • Login • Password • Register
- 55. THISORTHAT: VIEW MODELS • Shared/view-models/game-view-model.js • Shared/view-models/user-view-model.js
- 56. THISORTHAT: SHARED CODE • Shared/navigation.js • Shared/utils/form-util.js
- 57. THISORTHAT: ANIMATION • Nativescript’s built-in animation library
- 58. THISORTHAT: IMAGES • Content-scaled images • Non-content-scaled images
- 59. THISORTHAT: PLATFORM-SPECIFIC CODE • CSS • Utils/action-bar-util.js • Utils/form-util.js • Inline: login/login.js
- 60. THISORTHAT: COCOAPODS AND NPM MODULES • fancyAlert (YCTutorialBox) • email-validator (generic npm module) • Nativescript-toast (nativescript-based npm modules)
- 61. LET’S PLAY!
- 62. H M U ! Jen Looper @jenlooper [email protected] m Learn more about NativeScript at the Telerik booth and at nativescript.org
Editor's Notes
- #11: this JavaScript code instantiates a Java android.text.format.Time() object, calls its set() method, then logs the return value of its format() method, which is the string "01/01/15".
- #12: This JavaScript code instantiates an Objective-C UIAlertView class, sets its message property, and then calls its addButtonWithTitle() and show() methods. When you run a NativeScript iOS app with this code you'll see the alert "hello world!"
- #13: Use native classes which you can find in the native documentation to craft your nativescript code
- #15: NativeScript is a runtime that leverages platform-specific JavaScript engines (javascriptcore and V8)
- #21: this filesystem module allows you to pass through a path that you define as a parameter. On Android a new file will be created at that location, and on iOS we instantiate the NSFileManager as the default manager and tell it to create the file on that path. All with one require and one line of javascript.
- #22: the http module allows you to make http calls and return json results.
- #30: free 30 day trial
- #37: Do this live – show livesync Show sublime build script Preferences > Browse Packages > User/nativescript.sublime-build
- #42: Use the load function to bind data to an xml element
- #43: Or use the observable module to take care of it – mvvm people will feel comfortable.
- #47: Played by pewdiepie and became popular
- #48: http://clarifai.com/#demo