⚠️ This lesson is retired and might contain outdated information.

Use an Android library in NativeScript for Angular using Java apis

Nathan Walker
InstructorNathan Walker
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 3 weeks ago

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.

[00:00] If we view the setup instructions here on Filestack's Android SDK, we'll see an area for Gradle users here. We're going to want to use this compile line. Let's open up our internal plugin folder. Let's go into platforms, and add an Android folder. Inside here, we're going to add a file called include.gradle.

[00:21] Since we will use Gradle to include this plugin, we first want to define Android as the key, and then set up our product flavors. We can set this equal to the same name as our internal plugin. We'll set dimension equal to the same name.

[00:38] Now we can add a dependency section. This is where we'll drop that compile line. Now we're ready to build our Android API. Let's first add a file here called Filestack. This time, we'll use .android.typescript. We're going to mirror the same API that we had for iOS.

[00:56] We're going to export a class called Filestack. It will also have a constructor that will take the API key. If we look at the usage on the ReadMe, we can see the Android and Java API for this plugin. Let's take this filepicker.setKey, and we'll declare filepicker at the top. This is going to be the API key that we pass in.

[01:19] We'll go ahead and set the app name. For this, we'll call it Demo. Let's continue with our usage example. Let's grab this code for creating an intent with Android. Let's convert this. To convert this, we'll do it on the line above. We'll create a local variable for this intent.

[01:39] We're going to instantiate a new intent, but instead of relying on a static class name being available, we're going to use the fully qualified package name inside Android content. That's where our intent class resides. The example passes along a reference to this. However, we're going to pass along the context for the Android app.

[02:02] To do that, we're going to import some NativeScript modules here. We're going to import star as app from application, which is a NativeScript module. That's going to give us access to app.android.context. We can see this gives us the application's Android context, and it refers you to the official documentation.

[02:25] For the second argument here, they're using a standard that you might see in Android, but when we convert, we won't have access to that direct API like that. We'll want to use the Java language tools to grab the class by its name using the for name API. Then in here, we can pass along the fully qualified package path to that class.

[02:51] In this case, if we refer back to our Gradle, we can see it's io.filepicker. All the classes are packaged under that Java package. We can use io.filepicker. The name of the class that we want is filepicker. Now we've completed the line of creating the intent.

[03:12] Up next is starting the activity. We can use our app module again to get an instance to the Android foreground activity. We can see that this is the currently active Android activity for the app. This will give us the start activity for result API, where we can pass along the intent. Then, there's innumerable request code get file.

[03:36] However, similar to above, the fact that this class is not globally available in the namespace here, we're going to make sure that we have a proper reference to this filepicker class, which comes from the io.filepicker package. This is where the filepicker class is going to be.

[03:55] With this correct reference in place, we can get rid of this declare. To satisfy TSC, we'll declare var on the io package. With this in place, we can use this innumerable as is, and we can get rid of this now. Moving along with our example, we get to this onActivityResult event handler.

[04:13] Let's go ahead and convert this. We'll drop that in as is here. To wire up a Java-like activity result handler like this, we're going to use the app.android onEvent system. This is going to allow us to bind to an event. In this case, we have access to the app Android application.

[04:35] This gives us the activity result event. Then we can pass a callback here. It's going to hand us the arguments. You can see that request code is an argument, result code, and data, is an argument. We can access those straight from our args object that gets passed in.

[04:54] We're going to say if args.requestcode=filepicker.requestcode getFile, and then if args.resultcode -- we can see resultcode is the second argument. In this case, we're going to use a static innumerable from the activity. We can get that from android.app.activity result OK.

[05:17] We'll grab this line here, and we'll paste that above. This is going to be a reference. We'll call these filepicker files. Instead of data, we're going to use args.intent. You may see data as the last argument here, and expect data to be defined.

[05:36] When you're dealing with an intent, that actually comes in as an intent key on the arguments object here. From this intent, now we have this get passable array list extra, and we pass in the FP files extra.

[05:51] We can go ahead and loop through this to see what we have. We'll create a collection to hold these files. We'll use a standard JavaScript loop here. Instead of using the [inaudible] property, we're going to use size from the standard Java API.

[06:05] We'll reference this as raw file. This is going to use the FP files collection, get API to grab the object in the collection at that index. We'll push this raw file in. For good measure, we'll log out what this actual file looks like, that the user picked. We've now completed converting that Android activity event handler. We're now ready to build this.

[06:29] If we go back to our package build script for the plugin, we want to modify it to make sure that we get all of these Filestack related files. Then I'll make sure that the Android version is also built here.

[06:42] Instead of stats and status for our iOS app, we'll add a stat.androidscript, which is going to also build the plugin. This time, it's going to run tns run android emulator. Lastly, make sure that the package for the internal plugin specifies that Android is supported, and we'll indicate the NativeScript version. Let's give it a shot.

[07:03] We have successfully implemented the native Android SDK for Filestack, where we could grab a file from Dropbox. We can see the file get picked here, and it prints out that it's an FP file. We could iterate through the keys of this object to see what properties are on that if we want, but we actually have a picked file.

Dave
Dave
~ 7 years ago

FYI, this line: "build.plugin": "tsc nativescript-filestack/filestack.*.ts references.d.ts... produces an error. It only builds if I change filestack.*.ts to filestack.android.ts.

Nathan Walker
Nathan Walkerinstructor
~ 7 years ago

Hi Dave thanks, yes you can also do this: tsc nativescript-filestack/filestack.{ios,android}.ts references.d.ts... to get both!

Richard Alvarez
Richard Alvarez
~ 6 years ago

Hi Nathan, great tutorial but after I install some plugins on the " nativescript-sdk-examples-ng " and I add the new folder under platforms\android\configurations\nativescript-filestack\include.gradle but I have another outside my plugins that has

android { flavorDimensions "nativescriptcamera", "nativescriptfancycalendar", "nativescriptgeolocation", "nativescriptproui", "nativescripttelephony", "tnscoremoduleswidgets" }

can you have an updated version in how to add the SDK manually in this case

in my case I get an error by the declare var io; that is undefined but IM guessing I have to run the tns plugin add nativescript-filestack .

so if you can show me how to add this my current package.json below I would appreciated.


{
  "name": "nativescript-sdk-examples-ng",
  "description": "NativeScript & Angular SDK Examples",
  "author": "Telerik <support@telerik.com>",
  "version": "0.1.0",
  "homepage": "https://github.com/NativeScript/nativescript-sdk-examples-ng",
  "repository": {
    "type": "git",
    "url": "https://github.com/NativeScript/nativescript-sdk-examples-ng"
  },
  "bugs": {
    "url": "https://github.com/NativeScript/nativescript-sdk-examples-ng/issues"
  },
  "keywords": [
    "NativeScript",
    "Angular",
    "SDK",
    "example",
    "documentation"
  ],
  "license": "Apache-2.0",
  "nativescript": {
    "id": "org.nativescript.nativescriptsdkexamplesng",
    "tns-ios": {
      "version": "3.1.0"
    },
    "tns-android": {
      "version": "3.1.1"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.2.6",
    "@angular/common": "~4.2.6",
    "@angular/compiler": "~4.2.6",
    "@angular/core": "~4.2.6",
    "@angular/forms": "~4.2.6",
    "@angular/http": "~4.2.6",
    "@angular/platform-browser": "~4.2.6",
    "@angular/router": "~4.2.6",
    "nativescript-angular": "next",
    "nativescript-camera": "~3.0.0",
    "nativescript-fancy-calendar": "^3.0.0",
    "nativescript-geolocation": "^3.0.0",
    "nativescript-intl": "~3.0.0",
    "nativescript-pro-ui": "^3.1.4",
    "nativescript-telephony": "^1.0.4",
    "nativescript-theme-core": "^1.0.4",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^5.4.0",
    "tns-core-modules": "next",
    "zone.js": "^0.8.11"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.2.6",
    "@ngtools/webpack": "~1.5.3",
    "babel-traverse": "6.11.4",
    "babel-types": "6.11.1",
    "babylon": "6.8.4",
    "codelyzer": "^3.0.1",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~2.1.0",
    "fs-extra": "^0.30.0",
    "glob": "^7.1.2",
    "lazy": "1.0.11",
    "markdown-snippet-injector": "^0.2.0",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-sass": "^1.3.2",
    "nativescript-dev-typescript": "^0.4.5",
    "nativescript-dev-webpack": "next",
    "nativescript-worker-loader": "~0.8.1",
    "opener": "^1.4.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.0.2",
    "rimraf": "^2.5.3",
    "tar.gz": "^1.0.5",
    "tns-platform-declarations": "^3.0.1",
    "tslint": "^5.4.2",
    "typescript": "~2.3.4",
    "webpack": "~2.6.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1"
  },
  "scripts": {
    "pretsc": "npm install",
    "tsc": "tsc",
    "pretslint": "npm run tsc",
    "tslint": "tslint -p tsconfig.json",
    "prebuild": "npm run tslint",
    "build": "node scripts/build.js",
    "postbuild": "npm run inject && npm run archive",
    "inject": "mdinject --root=app --docsroot=dist/code-samples --sourceext=\".ts|.css|.html\" --snippettitles=\"TypeScript|CSS|HTML\"",
    "archive": "node scripts/archive.js",
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }
}

Markdown supported.
Become a member to join the discussionEnroll Today