Exercise (Video): Social Sharing

Loading...

Do curso por The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

81 classificações

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

81 classificações

Curso 4 de 5 em Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing truly cross-platform, native iOS and Android apps using NativeScript (Ver 3.x). The framework uses Angular, TypeScript or modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with NativeScript UI and layout support and access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your Angular, TypeScript and Javascript skills, and (c) Use various features of the NativeScript framework to build truly cross-platform mobile applications

Na lição

Accessing Native Capabilities of Devices: NativeScript Plugins

In this module you will explore NativeScript Plugins that enable you to access the native capabilities of the mobile devices. You will use a few plugins in order to understand the general concepts and the patterns for using these plugins within your NativeScript application

Social Sharing3:40

Exercise (Video): Sending Email10:45

Exercise (Video): Social Sharing7:52

Conheça os instrutores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

As you normally do when you acquire a new mobile device,

you configure your social media accounts immediately on the device.

Now, if we have a Nativescript application,

can we leverage the social media accounts that are

already configured on your device in order to

share information to your social media accounts from within our Nativescript application?

This is where the Nativescript Social Share plugin comes to our aid.

Using this plugin, we can configure

our application to be able to share information through

the already configured social media accounts on

the mobile device from within our NativeScript Application.

So let's see how we can make use of the social share plugin.

As always, to get started,

let's first configure the social share plugin.

So add the prompt type DNS plugin and nativescript-social-share,

and let the plugin get installed.

And once the plugin is installed,

let's update our application.

Going to our application,

we're going to configure our 'dishdetail' component in order for us to enable

that user to share the details of

a specific dish that they like to their social media sites.

So going into the dishdetail component.ts file,

let me import *

as SocialShare from nativescript-social-share,

which we have already installed.

Now in addition, in order to get access to images,

I need to import the ImageSource function and

fromURL function from 'image-source'.

This is part of the core modules.

Now that we have configured this,

let's go in and implement a new function in our code called as SocialShare.

So this function will be used for enabling social sharing.

We will share the image of the dish to our social media accounts.

So let me say, let image: ImageSource.

As we realize,

the image is being obtained from the URL from the server side.

So, this is what we will configure using the fromURL meta that we

have just imported and we'll say (this.BaseURL + this.dish.image).

So that's how we are able to acquire the image from our servers.

And this then will return a promise.

So inside the promise,

I'm going to get

the ImageSource as the parameter for the resolve of my promise.

And in there, we'll say image = img,

and then will simply say SocialShare share image.

As you can see, you have two options;

you can share an image or you can share some text.

Now in this case I'm going to share an image.

You can also configure the SocialShare Plugin to share

a text message to your social media accounts.

So I'm going to share the image and we'll say,

'How would you like to share this image?'

This message will be shown when your device gives you the option of

selecting the appropriate social media account to which you want to share the image.

Also, they will do a "catch"

in case there is an error with the resolution.

And then in this case,

I'll just say console.log('Error loading image').

So here, my fromURL is unable to obtain the image.

So that's why we want to inform the user that this could not be done.

So this function now will enable us to share the image to our social media accounts.

So, how do we invoke this function?

Fortunately, we already have the action dialog that we have

configured as part of your second assignment.

So going into the action dialog,

now in the actions,

I'm going to also include along with the Add-to-favorites and add comments,

I will say "Social Sharing" as the third option there.

And then, going into the action options,

we will add an else if (result === Social Sharing).

Then we will invoke 'SocialShare' function on the spot.

That's it. Lets save the changes and then go and take a look at our application.

Going to our application on the device,

where the application starts.

Let's go to the Menu and to a specific dish here.

And in that dish,

now we can invoke the action dialog,

and you'll see that the social sharing option is available there.

Let's click on that.

And that should bring up

the various social sharing options that are available on my device.

So let me select tweet.

And this should bring up a pre-configured message with the image included in there,

and I can type in my own comment,

and then tweet this information to my Twitter account.

Similarly, let me discard this.

I can also invoke social sharing again and then select Facebook and this will

come up with a preconfigured Facebook post where I can

type in the information and then share it in my Facebook account.

With this, we complete this exercise.

In this exercise, we have seen how we can use the Nativescript Social Share to

share information from within our application using

the social media accounts configured on the device.

This is a good time for you to do it and get covered with the message social share.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play