Download to read offline
Uploaded byJen Looper
Game On With NativeScript
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.
More Related Content
Similar to Game On With NativeScript
Game On With NativeScript
- 1. GAME ON! WITH NATIVESCRIPT J EN 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
- 3.
- 4. A RUNTIME FORBUILDING 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? • Skillsreuse • 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!
- 8.
- 10.
- 11.
- 13. HOW DOES THISWORK?
- 14. NATIVESCRIPT AND JSVMS NativeScript runs JavaScript on a JavaScript VM •JavaScriptCore on iOS •V8 on Android
- 16. • Runs onJavaScriptCore • Runs on V8
- 19. NATIVESCRIPT MODULES • NativeScript-providedmodules 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).
- 20.
- 21.
- 22.
- 23.
- 24. BUT HOW DOI TURN THIS INTO AN APP?
- 25. 2 WAYS TOUSE NATIVESCRIPT 1) 2)
- 26. • Backend-as-a-service – Pushnotifications, 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 StudioExtension •Sublime Text Package •Command-Line Interface TELERIK APPBUILDER IDE OPTIONS
- 29.
- 30. NATIVESCRIPT CLI •Free andopen 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 GettingStarted Guide: http://docs.nativescript.org/getting-started
- 33. STARTING A NEWPROJECT
- 34.
- 35.
- 36. DEVELOPER HELPS! 1. Livesync! 2.Sublime Text Settings to build 3. Deploy to device Cmd + B
- 37.
- 38.
- 39. PAGES • XML markupstructure • Elements (e.g. <Page>, <Label>) are NativeScript modules
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. A GAME INSPIREDBY… • Show picture of llama or duck • Very quickly timeout • Show high scores
- 47. LET’S USE THECLARIFAI 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.
- 49. THISORTHAT: A GAME OFWORDS AND TAGS
- 50. O P EN 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’sbuilt-in animation library
- 58. THISORTHAT: IMAGES • Content-scaledimages • 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 ANDNPM MODULES • fancyAlert (YCTutorialBox) • email-validator (generic npm module) • Nativescript-toast (nativescript-based npm modules)
- 61.
- 62. H M U! Jen Looper @jenlooper jen.looper@telerik.co 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