Awesome native apps with NativeScript and Angular!

Developing native iOS and Android apps can be very time consuming and expensive. What if you could build native apps with one code base and web techniques? Well, you can with NativeScript! In this introduction, I’ll explain what NativeScript is and how it compares to other platforms. And in a live demo, I will show you how easy it is to get started and to make use of native capabilities.

Transcript

1. AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
2. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7
3. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 SENIOR SOFTWARE ENGINEER NATIONALE-NEDERLANDEN FREELANCE WEB AND APP DEVELOPER DOUBLE-R WEBDEVELOPMENT CURATOR NATIVESCRIPT.NL TELERIK DEVELOPER EXPERT FOR NATIVESCRIPT ROWDY RABOUW
4. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT
5. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT OPEN SOURCE FRAMEWORK FOR BUILDING TRULY NATIVE MOBILE APPS WITH JAVASCRIPT AND NATIVE CODE IF YOU WANT TOGETHER WITH MARKUP (XML/HTML) AND CSS CROSS PLATFORM : ONE CODEBASE FOR IOS AND ANDROID
6. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NOT PHONEGAP OR IONIC •NO DOM TO MANIPULATE •NOT HTML ELEMENTS STYLED LIKE NATIVE COMPONENTS •REAL NATIVE COMPONENTS
7. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NOT REACT NATIVE •NO WRITING OBJECTIVEC, SWIFT OR JAVA •{N} JAVASCRIPT HAS 100% ACCESS TO NATIVE APIS
8. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NOT XAMARIN •NO CROSS COMPILING •100% ACCESS TO NATIVE APIS WITHOUT WRITING BINDINGS •NO .NET OR C#
9. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 JAVASCRIPT
10. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 ANGULAR 2 •OPINIONATED JAVASCRIPT FRAMEWORK •OBJECT ORIENTED •CLASSES •TYPESCRIPT •FULL-FEATURED ROUTING •DEPENDENCY INJECTION •DATA BINDING •DOCUMENTATION •COMMUNITY
11. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 HOW DOES NATIVESCRIPT WORK? APPLICATION CODE NATIVESCRIPT MODULES NATIVESCRIPT RUNTIME ANDROID IOS
12. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT HISTORY JUNE 2014: NATIVESCRIPT IS ANNOUNCED BY TELERIK MAY 2015: VERSION 1.0 LAUNCHED MAY 2016: VERSION 2.0 LAUNCHED (TIGHT ANGULAR 2 INTEGRATION) MAY 2017: VERSION 3.0 LAUNCHED DECEMBER 2014: TELERIK IS ACQUIRED BY PROGRESS SOFTWARE
13. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NPM
14. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NODE PACKAGE MANAGER LOTS OF PREBUILT CODE OVER 530.000 NPM PACKAGES ANDROID ARSENAL COCOAPODS
15. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 HOW TO START? INSTALL NODE.JS INSTALL IOS AND ANDROID REQUIREMENTS (SCRIPT) > @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https:// www.nativescript.org/setup/win'))" > ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)" > npm install -g nativescript INSTALL NATIVESCRIPT CLI > tns doctor VERIFY THE SETUP
16. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT CLI > tns create HelloWorld --ng CREATING APPS > cd HelloWorld > tns run ios > tns run android RUNNING APPS
17. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 LAYOUTS & NATIVE ELEMENTS
18. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 MARKUP <ActionBar title="Mobilization7"></ActionBar> <StackLayout> <Label text="Hello ŁÓDŹ"></Label> </StackLayout>
19. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 CSS Actionbar { background-color: yellow; } Stacklayout { padding: 40; text-align: center; } Label { font-size: 20; color: red; }
20. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 STACKLAYOUT <StackLayout orientation="horizontal"> <Label text="1"></Label> <Label text="2"></Label> <Label text="3"></Label> <Label text="4"></Label> </StackLayout>
21. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 ABSOLUTELAYOUT <AbsoluteLayout> <Label left="40" top="30"></Label> <Label left="70" top="80"></Label> </AbsoluteLayout>
22. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 DOCKLAYOUT <DockLayout stretchLastChild="true"> <Label dock="top"></Label> <Label dock="bottom"></Label> <Label dock="right"></Label> <Label dock="left"></Label> </DockLayout>
23. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 GRIDLAYOUT <GridLayout columns="100, auto, *" rows="100, auto, *"> <Label text="1" row="0" col="0"></Label> <Label text="2" row="0" col="1" colSpan="2"></Label> <Label text="3" row="1" col="0" rowSpan="2"></Label> <Label text="4" row="1" col="1"></Label> <Label text="5" row="1" col="2"></Label> <Label text="6" row="2" col="1"></Label> <Label text="7" row="2" col="2"></Label> </GridLayout>
24. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 WRAPLAYOUT <WrapLayout orientation="vertical"> <Label text="1"></Label> <Label text="2"></Label> <Label text="3"></Label> <Label text="4"></Label> </WrapLayout>
25. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 FLEXBOXLAYOUT <FlexboxLayout flexDirection="row-reverse"> <Label text="1" flexGrow="1"></Label> <Label text="2" flexGrow="2"></Label> <Label text="3" flexGrow="3"></Label> <Label text="4" flexGrow="4"></Label> <Label text="5" flexGrow="5"></Label> <Label text="6" flexGrow="6"></Label> </FlexboxLayout>
26. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 LIVE CODING LAYOUTS & NATIVE ELEMENTS & NATIVE CODE
27. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 MULTILINGUAL
28. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NGX-TRANSLATE IS AN INTERNATIONALIZATION LIBRARY FOR ANGULAR 2+ DEFINE TRANSLATIONS FOR YOUR CONTENT IN DIFFERENT LANGUAGES AND SWITCH BETWEEN THEM EASILY MULTILINGUAL
29. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 MULTILINGUAL { "HOME": { "TITLE": "Mobilization7", "TAGLINE": "Whoever wins... we win!" }, "SLIDERS": { "TITLE": "Sliders", "HEADER": "Default Slider", "HEADER_CUSTOM": "Custom iOS Slider" }, "VIDEO": { "TITLE": "Video" }, "SOUNDBOARD": { "TITLE": "Soundboard" } }
30. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 MULTILINGUAL <StackLayout> <Label [text]="'HOME.TAGLINE' | translate"></Label> </StackLayout>
31. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 LIVE CODING MULTILINGUAL
32. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 PLUGINS
33. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT VIDEO PLAYER PLUGINS •ANDROID: MEDIAPLAYER •IOS: AVPLAYER <VideoPlayer src="[source]" autoplay="true" height="300" /> TNS PLUGIN ADD NATIVESCRIPT-VIDEOPLAYER
34. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 DEMO NATIVESCRIPT VIDEO PLAYER
35. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT TEXT TO SPEECH PLUGINS •ANDROID: TEXTTOSPEECH •IOS: AVSPEECHSYNTHESIZER let TTS = new TNSTextToSpeech(); let speakOptions: SpeakOptions = { text: 'Hello world!', speakRate: 0.5, // optional - default is 1.0 pitch: 1.0, // optional - default is 1.0 volume: 1.0, // optional - default is 1.0 locale: "en-GB", // optional - default is system locale, } TTS.speak(speakOptions); TNS PLUGIN ADD NATIVESCRIPT-TEXTTOSPEECH
36. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 DEMO NATIVESCRIPT TEXT TO SPEECH
37. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT AUDIO PLUGINS •ANDROID: MEDIAPLAYER / MEDIARECORDER •IOS: AVAUDIOPLAYER / AVAUDIORECORDER this._player = new TNSPlayer(); this._player.initFromFile({ audioFile: “[source]", loop: false }); this._player.play(); TNS PLUGIN ADD NATIVESCRIPT-AUDIO
38. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 DEMO NATIVESCRIPT AUDIO
39. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT FINGERPRINT AUTHENTICATION PLUGINS doVerifyFingerprint(): void { this.fingerprintAuth .verifyFingerprint({ message: "Scan your finger" // optional }) .then( () => { alert({title: "Fingerprint / passcode OK"}) }, () => { alert({title: "Fingerprint NOT OK / canceled"}) } ); } •ALSO WORKS WITH FACE ID ON IPHONE X TNS PLUGIN ADD NATIVESCRIPT-FINGERPRINT-AUTH
40. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 DEMO NATIVESCRIPT FINGERPRINT AUTHENTICATION
41. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT SPEECH RECOGNITION PLUGINS •ANDROID: SPEECHRECOGNIZER •IOS: SFSPEECHRECOGNIZER this.speechRecognition .startListening({ locale: "en-US", returnPartialResults: true, onResult: (transcription: SpeechRecognitionTranscription) => { this.zone.run(() => (this.recognizedText = transcription.text)); } }) TNS PLUGIN ADD NATIVESCRIPT-SPEECH-RECOGNITION
42. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 DEMO NATIVESCRIPT SPEECH RECOGNITION
43. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 ALIEN³ - MURPHY IN THE YEAR 7510 IF GOD'S A COMING, HE OUGHTA MAKE IT BY THEN MAYBE HE'LL LOOK AROUND HIMSELF AND SAY GUESS IT'S TIME FOR THE JUDGEMENT DAY ZAGER & EVANS IN THE YEAR 2525 (1969)
44. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT BLUETOOTH LOW ENERGY PLUGINS TNS PLUGIN ADD NATIVESCRIPT-MIP-BLE
45. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 DEMO NATIVESCRIPT BLUETOOTH LOW ENERGY
46. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 RESOURCES
47. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 FREE NATIVESCRIPT BOOK 450 PAGES, 17 CHAPTERS, AND TONS OF CODE SAMPLES RESOURCES WRITTEN BY NATIVESCRIPT EXPERTS MIKE BRANSTEIN AND NICK BRANSTEIN
48. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT.NL RESOURCES COURSES, TOOLS AND TIPS TO HELP YOU CODE AWESOME APPS
49. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT MARKETPLACE RESOURCES HIGH QUALITY PLUGINS, TEMPLATES AND TOOLS
50. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT AIR RESOURCES •IMPROVING PERFORMANCE OF A NATIVESCRIPT APP WITH STANIMIRA VLAEVA •LAYOUTING A NATIVESCRIPT APP WITH BRAD MARTIN
51. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT ANGULAR BOOK 200 PAGES RESOURCES WRITTEN BY NATIVESCRIPT EXPERTS NATHAN WALKER AND NATHANAEL ANDERSON
52. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT PLAYGROUND RESOURCES QUICKLY AND EASILY TEST YOUR NATIVESCRIPT CODE
53. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT THEME BUILDER RESOURCES LOAD AND EDIT CUSTOM COLOR SCHEMES FOR NATIVESCRIPT
54. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT SIDEKICK RESOURCES RICH STARTER TEMPLATES, VERIFIED PLUGINS, CLOUD BUILDS, AND DEBUGGING
55. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT DOCS RESOURCES NATIVESCRIPT CORE NATIVESCRIPT WITH ANGULAR API REFERENCE NATIVESCRIPT SIDEKICK NATIVESCRIPT FORUM NATIVESCRIPT SLACK CHANNEL VISUAL STUDIO CODE PLUGIN
56. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 STANDARDS •ENTRY LEVEL 15” MACBOOK PRO (INTEL I7 PROCESSOR AND 16GB RAM) @ROWDYRABOUW
57. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 STANDARDS •ENTRY LEVEL 15” MACBOOK PRO (INTEL I7 PROCESSOR AND 16GB RAM) @ROWDYRABOUW DZIĘKUJĘ CI BARDZO
58. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-BARCODESCANNER EDDY VERBRUGGEN (BULK)SCAN QR OR BARCODES PLUGINS NATIVESCRIPT-TOAST TOBIAS HENNIG CONTRIBUTIONS BY EDDY VERBRUGGEN FEEDBACK IN A SMALL POPUP
59. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-APPVERSION EDDY VERBRUGGEN RETRIEVE YOUR APP'S PACKAGE ID AND CURRENT VERSION PLUGINS
60. @ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 NATIVESCRIPT-EMAIL EDDY VERBRUGGEN CREATING DRAFT E-MAILS PLUGINS
61. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-PLUGIN-FIREBASE EDDY VERBRUGGEN ANALYTICS PLUGINS
62. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-TELERIK-UI PROGRESS LISTVIEW AND SIDEDRAWER PLUGINS
63. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-IQKEYBOARDMANAGER TJ VANTOLL CONTRIBUTIONS BY EDDY VERBRUGGEN WRAPPER FOR THE POPULAR IQKEYBOARDMANAGER IOS FRAMEWORK PLUGINS
64. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 CRYPTO-JS EVAN VOSBERG CRYPTOGRAPHY STANDARDS PLUGINS
65. @ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 LODASH LODASH TAKING THE HASSLE OUT OF WORKING WITH ARRAYS, OBJECTS, STRINGS, ETC PLUGINS