Swipe Left for NativeScript
•Download as PPT, PDF•
0 likes•3 views
2016 talk on building mobile apps with NativeScript. This is an ignite style talk!
Recommended
Recommended
More Related Content
Similar to Swipe Left for NativeScript
Similar to Swipe Left for NativeScript (20)
More from Jen Looper
More from Jen Looper (20)
Recently uploaded
Recently uploaded (20)
Swipe Left for NativeScript
- 1. Swipe Right for NativeScript Use Big Data from 23AndMe in a Tinder-style NativeScript app = find your TRUE MATCH
- 2. What is NativeScript? • A runtime for building and running native iOS, Android, and (soon) Windows Phone apps with a single, JavaScript code base
- 3. What’s the difference? No cross compilation != Direct access to native APIs in JS No DOM != !=
- 4. 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!
- 8. How does this even? NativeScript runs JavaScript on a JavaScript VM •JavaScriptCore on iOS •V8 on Android
- 11. Module Example
- 12. But how do I turn this into an app?
- 13. Try it and see! NativeScript Getting Started Guide: http://docs.nativescript.org/ getting-started
- 14. Let’s talk about data
- 15. 23AndMe API + {N} • Big data to small data – human genome to Tinder • Adaptive learning to determine what you are attracted to • Use a subset of the data returned to discover matches
- 16. Recipe for an app • Card interface with swiping • Authentication with 23AndMe API • Analyze subset of 23AndMe data • “Teach the app” user’s likes to narrow future results • Create: Tinder for 23AndMe – find Neanderthal love!
- 17. aaa Show me my DNA relatives with Neanderthal ancestry
- 18. 2 API calls: Get my DNA relatives https://api.23andme.com/1/relatives/c44 3434949302/ Get a relative’s Neanderthal Ancestry https://api.23andme.com/1/neanderthal/ d343ie9939405r/ Show me the photo!
- 19. Teach the app { "id": "7ad467ea509080fb" "neanderthal": { "proportion": 0.0310, "ancestry": "East Asian", "average": 0.028, "percentile": 20 } } Track which proportion I tend to swipe right, find me better matches
- 20. Build an interface <Page loaded="loaded"> <Page.actionBar> <ActionBar title="Hello!" id="verdict"></ActionBar> </Page.actionBar> <StackLayout id="card" class="card”></StackLayout> </Page> --- card.on(gestures.GestureTypes.swipe, function (args) { … card.animate({ translate: { x: 1000, y: 100 } }) .then(function () { return card.animate({ translate: { x: 0, y: -2000 } }); }) .then(function () { return card.animate({ translate: { x: 0, y: 0 } }); })…
- 22. Time’s Up! • About your speaker: – Name: Jen Looper – Company: Developer Advocate, Telerik – Twitter: @jenlooper – Email: jen.looper@telerik.com – http://www.ladeezfirstmedia.com – Quick bio: Jen Looper has over 13 years' experience as a web and mobile developer, specializing in creating cross-platform family- oriented mobile apps. Also hardware! ThingLearn.com!
Editor's Notes
- 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!"
- 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".
- Big data? Small data? All data! A mobile app can consume big data via an API, but it has to be presented in bite-sized pieces. Let’s use the big data of 23AndMe (DNA mapping) in a little bitty mobile app