This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use an Android library in NativeScript for Angular using Java apis

    Nathan WalkerNathan Walker

    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.

    nativescriptNativeScript
    angularAngular
    ^2.0.0
    androidAndroid
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss