Swipe Left for NativeScript
Download as PPT, PDF0 likes11 views
This document discusses building a Tinder-style NativeScript app that uses data from the 23AndMe DNA testing service. NativeScript allows building native mobile apps using JavaScript that has direct access to device APIs. The proposed app would authenticate with 23AndMe, analyze the user's DNA data, and use adaptive learning to find matches for users based on the DNA profiles of people they like. It provides code examples for implementing card swiping, authentication with 23AndMe's API, retrieving and displaying a user's DNA relatives and ancestry data, and building the app interface.
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: [email protected] – 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
- #7: 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!"
- #8: 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".
- #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