Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps

69 minutes

NativeScript has the ability to write Objective C, Swift and Java apis directly from JavaScript and TypeScript.

In this course, we will learn how to code directly against these native api’s with NativeScript for Angular. Many libraries are written and published in these languages. With NativeScript you are no longer limited to just JavaScript based libs, but have direct access to these api’s right from JavaScript/TypeScript. Let’s look at how to include these native libraries internally to your project as well as build public plugins to share with the community.

We will cover some considerations with Objective C and Swift based libraries as well as Java/Android libraries. You can think of CocoaPod, Gradle, and Android Arsenal like npm for native libs. iOS libraries can be found via CocoaPods, Android libraries can be found via Gradle or Android Arsenal.

Let’s also cover how to write custom view components based on native libs since there are considerations for both iOS and Android. Lastly we will learn how to best handle cases where a plugin/library only supports 1 platform.

pro-course-rss-logo

PRO RSS Feed

Prepare for native iOS and Android api intellisense with NativeScript

P

Use an Objective C library in NativeScript for Angular iOS app

P

Use Objective C Delegates in NativeScript for Angular iOS apps

P

Generate metadata TypeScript declarations for Objective C/Swift libraries on iOS

P

Use an Android library in NativeScript for Angular using Java apis

P

Translate common Java/Android APIs into NativeScript for Angular Android apps

P

Develop a consistent plugin api across your Android and iOS NativeScript app

P

Convert a Swift library to NativeScript for Angular iOS apps

P

Build a custom NativeScript view component for iOS

P

Build a custom NativeScript view component for Android

P

Develop a public NativeScript plugin using the nativescript-plugin-seed

P

Conditionally require a NativeScript plugin when only a single platform is supported

P
angular2 tutorial about Prepare for native iOS and Android api intellisense with NativeScript

Prepare for native iOS and Android api intellisense with NativeScript

1:44 angular2 PRO

To prepare your development environment to code against native apis such as Objective C, Swift and Java, let's learn how to install tns-platform-declarations to provide rich intellisense support for all the native iOS and Android api’s. This lesson will cover how to modify your tsconfig.json and references.d.ts properly to ensure working with native api’s is smooth and as helpful as possible.

angular2 tutorial about Use an Objective C library in NativeScript for Angular iOS app

Use an Objective C library in NativeScript for Angular iOS app

9:57 angular2 PRO

We will learn how to install an Objective C library distributed via a CocoaPod into our project and expose its native api to our app. Specifically, we will cover how to immediately start working with the library even when a NativeScript plugin does not exist for it. Take for example Filestack, a really powerful file uploading api that provides an SDK written in JavaScript for the web, but also offers native SDK's for iOS and Android. Let's take a look at how to code right against this native iOS SDK.

angular2 tutorial about Use Objective C Delegates in NativeScript for Angular iOS apps

Use Objective C Delegates in NativeScript for Angular iOS apps

7:06 angular2 PRO

Objective C is a very interesting programming language which offers a lot of power as well as interesting paradigms. Let’s look at some Objective C api’s and how they translate to NativeScript. In particular, let’s learn how to wire up iOS delegates using Filestack's FSPickerDelegate as an example. We will also look at handling WeakRef’s and iterating an NSArray.

angular2 tutorial about Generate metadata TypeScript declarations for Objective C/Swift libraries on iOS

Generate metadata TypeScript declarations for Objective C/Swift libraries on iOS

1:22 angular2 PRO

Learn how to generate TypeScript declaration files for all native api’s for iOS, including any 3rd party Objective C/Swift libraries included in your project via Cocoapods or other means. This will allow you to view all the metadata for included iOS libraries to see what classes and apis are exposed to NativeScript.

angular2 tutorial about Use an Android library in NativeScript for Angular using Java apis

Use an Android library in NativeScript for Angular using Java apis

7:26 angular2 PRO

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at Filestack’s Android SDK built with Gradle. Specifically, we will cover how to immediately start working with the library even when a NativeScript plugin does not exist for it.

angular2 tutorial about Translate common Java/Android APIs into NativeScript for Angular Android apps

Translate common Java/Android APIs into NativeScript for Angular Android apps

6:20 angular2 PRO

Java has been around a long time and when it comes to Android, you will encounter some structures that may throw you for a loop on how to code against with NativeScript. Let’s examine a few common Java/Android api constructs you may encounter and how to translate them to NativeScript. Learn how to get references to local files in your app using the ‘file-system’ module as well as how to take advantage of NativeScript’s Observable class to send notification events from one class to another. Lastly, look at considerations with Angular’s NgZone when handling your native libraries data events to update component view bindings.

angular2 tutorial about Develop a consistent plugin api across your Android and iOS NativeScript app

Develop a consistent plugin api across your Android and iOS NativeScript app

9:44 angular2 PRO

One of the exciting benefits you have with NativeScript is the ability to write native code (Java and Objective C) directly in JavaScript/TypeScript allowing you to create a consistent high level api over top of both underlying iOS Objective C/Swift and Android Java apis. In this lesson, we will look at how to design a consistent api that taps into the appropriate native api’s on the target platforms using underlying native libraries.

angular2 tutorial about Convert a Swift library to NativeScript for Angular iOS apps

Convert a Swift library to NativeScript for Angular iOS apps

6:33 angular2 PRO

Swift is an exciting and intuitive programming language developed by Apple to be easier to learn than Objective C. It's syntax also more closely resembles JavaScript. Some native libraries you could work with may have been developed with Swift. Let’s look at a couple cases you could run into when trying to work with a Swift based iOS library. In particular, we will be implementing this Swift 3.0 CocoaPod. Also learn how to write files to your app’s document folder using NativeScript’s ‘file-system’ module.

angular2 tutorial about Build a custom NativeScript view component for iOS

Build a custom NativeScript view component for iOS

8:26 angular2 PRO

Building a custom NativeScript XML view component for iOS entails several interesting notes, like overriding the onLoaded method of the base NativeScript View class. Let’s look at how to properly build a custom component based on an underlying native view widget with NativeScript XML which may come from a CocoaPod. We will learn several important aspects regarding Objective C properties and methods you will need to consider. In particular, we will implement this Objective C view component

angular2 tutorial about Build a custom NativeScript view component for Android

Build a custom NativeScript view component for Android

4:36 angular2 PRO

Building a custom NativeScript XML view component for Android is uniquely different than it’s iOS counterpart because of the Android Context which must be considered. Let’s look at how to properly build a custom view component based on an underlying native view widget. We will also look at what happens when our include.gradle file is not setup properly including handling problems with minimum sdk targets with plugins. Specifically, we will implement this Android widget representing the Google I/O 2016 clock. Learn how to create a custom AndroidManifest.xml inside your plugin to merge with your app's manifest to override certain characteristics. Read detailed documentation about the Android app manifest file.

angular2 tutorial about Develop a public NativeScript plugin using the nativescript-plugin-seed

Develop a public NativeScript plugin using the nativescript-plugin-seed

4:16 angular2 PRO

Learn how to use the nativescript-plugin-seed to kick start your NativeScript plugin development rapidly. Let’s examine best practices when developing a plugin api for public consumption, project organization, and how to publish it to npm. It will also show up within 1 day on the Offical Source for NativeScript Plugins.

angular2 tutorial about Conditionally require a NativeScript plugin when only a single platform is supported

Conditionally require a NativeScript plugin when only a single platform is supported

2:05 angular2 PRO

Sometimes a NativeScript plugin may only support 1 platform (iOS or Android). In these cases, we will want to conditionally require the plugin to ensure we don’t crash the other unsupported platform. Let’s consider view and service level implications for how best to handle these scenarios.

Presented by:

Nathan Walker

Nathan Ross Walker has enjoyed the opportunity to work in the web/mobile app development arena for over 15 years. His varied background rooted in the world of design and the arts provides him a unique approach to problem solving. Spending several years working across multiple industries including entertainment, audio/video production, manufacturing, b2b marketing, communications, and technology helped establish a focused sensibility with client needs.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?