>> On this week, Xamarin Show,.I have my friend, Brandon,.on to show us how to integrate.push notifications in.a minute into your Xamarin.applications. So, tune in..>> Welcome back everyone.to the Xamarin Show..I'm your host James Montemagno..Today, I have.a good friend Brandon.in from San Francisco still?.>> That's right..>> Of course, you can.tell by the hair..Looks very dapper, very lovely..Thanks for coming.all the way up here..>> I like to embrace.San Francisco..So, let's just go full.\"San Franciscan,\".the San Francisco treat,.they call me sometimes..>> The last time you.were on this show,.you're talking about storage,.some CosmosDB, a whole.bunch of cool Azure stuff..But today, you're going to.want to mix it up and talk.about Push Notifications,.am I correct?.>> Yeah, that's right..Because we have.a tool called App Center Push,.and what it does it.allows you to Add.Push Notification in.your app and then also.manage them through.a nice online portal..>> Cool. Yeah. I've done push.notifications in the past..You've got to configure.it over here,.you get a configured over here,.you got to configure.this back end, you got to do.this whole thing, is.that the case still?.>> So, that's what's.really great about this.because you're right..The first time I was.working on an app,.you have to add.just a bunch of code..Because I figured,.every app has push.notifications, right?.This should be easy..>> Should be easy..Every single app.that I use has push, yeah..>> But it's not..>> Yeah..>> So, what the App.Center team has done,.they have a App Center Push STK,.we just added into our project..You still have to write.a couple of lines of code..But now, we're talking.about two lines.of code instead of 200..>> Okay..>> Or 20..>> Yeah. Very nice..That is awesome..You've used it personally.and we've talked about.App Center as.a suite of services..It does build, and tasks,.and analysts, and.crash reporting..So, I assume, Push is.just another service that.you can use optional..>> Yeah, exactly..That's one of the cool things.with App Center..We'll walk through creating.a new app in App Center,.so we can see it today..>> Okay..>> Every piece of App Center can.be used independently or.it can be used together..>> Nice..>> Yeah. It has build.CI/CD pipeline..You can run automated.UI tests in it..But maybe, you already have.enough CI/CD pipeline..You just want push..>> Oh, yeah..>> You can just do push..>> Very cool. That's nice..Hey, you want to show us.where to get started?.>> Yeah, let's check it out..>> So, here we are. There we go..So, this is the App.Center homepage..What I'm going to do,.is just say \"Add New.App\" and let's call it.the \"Xamarin Show.\".>> That's a great name for now..>> I'll select \"Xamarin.Android\" here, and.just so you know,.you can also do the same with.Xamarin IOS, Xamarin forms..Same, same. So, we'll.go ahead and create.these Xamarin Android.app and down here,.we have \"App Center Push.\".>> So, those are.all the services on.the left hand side over there?.>> Yeah. That's right..So, if you wanted to do.\"Build,\" add it to.your CI/CD pipeline,.you can have it automatically.kick off a build never.commit to Github,.VSTS or there's UI testing,.distribution to share.your beta testers,.analytics and diagnostics.for crash reporting,.error tracking, user tracking,.see how your users.are using the app..>> Oh, cool..>> But today, we're.just focusing on Push..>> Push..>> Look, that's easy as one,.two, three. I don't believe it..>> Well let's find out. So, we'll.just follow the instructions.here on the screen..Then, the first thing to do it.says \"Add in these.Using Statements\"..So, we'll go ahead and add those.in and let's jump.back to the code..This is just a file.new Xamarin Forms App..I haven't written.any code to this..This is just the.template, and we can.see it running here.in the background..So, let's go and head in \"Add.in These Using Statements\"..Let's pass in \"App Center.Start\" into our on.start method here..>> Okay..>> We just need to add in also.the App Center Push.NuGet package..So, let's add that into.our .Net standard library..There we go, and add that.into the Android project..>> So, we're going to have this.into both the Android project,.the .NET standard project.so we have that API..I'm assuming that if you.have iOS or Windows,.you add them wherever you're.looking to implement it, correct?.>> Yeah exactly. We can add it to.the iOS App if we.were going to do that.today but we'll just focus on.Android for today's Xamarin Show..So, looks like.everything's working,.we have AppCenter.Start here..So, let's see what step is next..>> That's pretty easy..Like, you just added.a package, add start..>> Not too bad, right?.One line of code..>> One line of code..>> So, the next step,.we have to have a.Firebase cloud messaging..So, we have some steps here.to help us get that set up..On the right of the screen,.we have.council.firebase.google.com..>> So, what is Firebase at a.high-low for cloud messaging..Why do I need Firebase?.>> Yeah. Good question..So, when you send.a push notification to actually.both on iOS and Android,.you don't send it.directly to the phone..For Android, you actually send it.to Google and in.this case, Firebase..If you were doing iOS,.you actually sent it to Apple..>> Okay..>> Then, they queue up.those notifications.for us, the developer..So that way, we don't.have to worry if.that notification.actually arrived,.was the user's phone on,.maybe they are in.an airplane mode?.Google and Apple take.care of that for us,.and the way we do it for.Android is through Firebase..>> Got it, and the App Center.sits in the middle then?.It's like handling.that authentication.between Firebase and your phone,.and use it as a developer..You talk to App.Center, App Center.are handles the business..>> Right. Yeah, we could spin.up our own service where.we send a push notification.message to Firebase,.and tell Firebase do.it on our behalf..But there's also a lot of.code you have to do to.manage the devices,.you have to keep track of.how many users you have,.and App Center Push is going.to do that all for us..>> Got it. Okay. Cool..>> So, the first thing.we want to create.a new project on.the Firebase council,.so let's go ahead.and do that here..>> I'll put all the links.in the show net.for everything that.we're doing here..>> Perfect. We'll call this.the Xamarin Show as well..>> So, it's like your Firebase..It's like you just.created a project over.an App Center,.Firebase equivalent..Just like you're going to.use the push notification,.perhaps either you're going.to use push notification.cloud messaging in Firebase..>> Exactly..>> Got it..>> Cool. So, now that.the app's created,.the next step is to press.on the \"Android\" logo,.\"Create an Application.Matching your Packaging.\".>> All right..>> So, let's do it..So, our package name.we can find that in.our Android Manifest..>> Okay..>> So, here's the Android.Manifest and I'm just going to.copy this because you.know how I am with typos..>> Yeah..>> We'll paste this in here.and we can give it a nickname..So, let's call it.the Xamarin Show App. Why not?.Lets go ahead and.say register App..We can add a little bit.more information here..Like it says on.the screen, if we wanted.to do dynamic links,.Google sign in, we're not.going that crazy today..So, we'll just register the app..And then the next step, Firebase.gives us a JSON file. So.this is kind of cool..What Google does, they put all.of our secrets in.this JSON file, and.then the good secrets..Nothing crazy, but API keys,.how this app is going.to communicate with.the Firebrace backend and.the way we can add that into.our app is just by.downloading this file.and adding it as a resource.to our Android app..>> Okay..>> So kind of cool..It says here that we want to.download the Google.services JSON file..Got it. And then copied.into the Android project..So let's jump back.and say, add files..And we'll go to our downloads.and there's our.google-services.json,.copy it in, close and.reopen your solution..>> Okay..>> Now that the JSON.files been added,.when I close and reopen,.it will automatically.recognize it..So let's go ahead and.close that solution,.of course we want to.save the changes..Open the backup and now,.we right click. We have.google-services.json..>> Got it. Okay. So.a little bit of config there..>> We'll go ahead and.search google-service.json.and essentially.what this does is,.it tells the compiler.how to handle it..And it's going to basically.do everything for us..It's going to inject.those API keys so.that we don't need a hard code.anywhere in our code,.which is really nice..Okay. So we selected.the build action, done..And then it says, edit.the Android Manifest.and essentially just copy and.paste couple of lines of code..>> Very cool..>> So, I can do that..The only catch here is you'll.notice these each to go inside.of the application tag..>> Very important..>> Don't make that mistake..I've been there and.then you wonder why.nothing's working..So let's go ahead and copy.this and we'll jump.back to the manifest source code.and there is our application tag..>> Okay..>> So, paste that in,.give a little bit of formatting..>> Beautiful..>> And it looks amazing..Great. So that's.the end of step two..Step three, we just need.to add the server keys..So this is what's going to link.App Center Push to Firebase..>> Got it..>> So, we're done.getting the app set up..So, I'll close this.out in Firebase..And what this says is go to.the project settings and.then under cloud messaging,.copy your server key..So, here's my project and.if I drill down into,.we can see the project settings..And then under cloud messaging,.copy the server key..>> Very, very good direction..It's a very good. I like that..>> Paste that in and we're done..>> Very cool..>> So now, we have added.the code to our app..We've connected Firebase.with App Center Push..So now App Center Push will.manage all the devices..It'll send out those Push.Notifications for us,.via Firebase and all.we have left to do.is launch the app..>> Now, is there anything else in.the SDK that allows me to,.because you didn't add any code.like handle notifications,.like is there a way.to get notified.when a notification.happens in anyway?.>> Yeah. That's.a good point. So maybe you.want to handle that push.notification when it comes in..You can actually add.a couple of lines.of code and essentially.intercept it and essentially.it's like an event handler..>> Okay..>> So we can just add in that App.Center Push event handler to say,.let me know in this app when.this push notification.comes into my app..>> Got it..>> Then we can execute some code,.if and when that happens..>> Got it. But right now out.of the box what we should.expect is at least a.notification to appear,.the system notification. Right?.>> That's right..>> Got it..>> When this app launches,.it's going to register.itself automatically.with App Center Push..We don't have to do.anything about that.and once it's done that,.we can close the app, we can send.a push notification and we'll.see it appear right here..All right. So now the app.has launched on the phone..>> Looks beautiful..Looks the same..>> It looks exactly the same..The only difference now is.it's introduced itself to.App Center Push.and it essentially.registered for push.notifications..So if we go to.the App Center Push portal,.now I can click.this button right here.to send a notification..>> Oh. Very cool..>> So let's see..This is- we'll call.this campaign the Xamarin Show,.there we go with typos, Campaign..We can name it whatever we want..Okay. So the title for.the push notification,.let's call it, \"Welcome to.the Xamarin Show. This week,.App Center Push.\".>> Cool..>> And when we click.\"Next,\" what we could do,.we can actually.customize who we send.this push notification to..Which is kind of cool..So if we go to the audience.we can say only send it to.users in a specific.location or country..But since we only have.the one device to send.it to all of them..Why not? So let's say like, next..So, let's like send notification.and now it's doing the rest..That push notification is sent.and we should see.it on the device..>> So, this all happened as.this is now sending it to.Firebase Cloud Messaging.which is then sending it.to any registered devices.that occurred..>> That's right..>> That's the entire.idea. So it's.going to take.a little bit of time.because it's queuing up.that entire system basically..>> Yeah..That's something with.push notifications.that's kind of funny is,.they don't actually necessarily.go out right away every time,.because Google and Apple.both act as that middleman.and they want to.queue it up and they want to make.sure they're not chewing.up your battery life..>> Yeah..>> So they want to send push.notifications in batches..>> Got it..>> So, sometimes it takes.a minute or so before.that push notification.shows up but.because we're going.through Firebase,.we know it will be there..>> Got it. Okay..>> So here's the phone and lets.give a minute and we'll wait for.that push notification to.appear and there it is..So, it's just a couple.of lines of code..Couple of easy steps to.follow via the App.Center Push portal..We have push notifications.working on our App..>> It's beautiful as the push.notification came in,.you tap on it launches.the app, boom..>> There we go..>> Awesome. I was actually really.simple or very surprised at.how minimal code it actually.took to get the push.notifications in there..>> Yeah. Me too..Huge shout out to the App.center Push team. Great job..>> Very cool. Brandon, thank.you for even coming on,.showing off all this.awesome integration.for push notifications..Now anyone truly can add.Push Notification to.their Apps. That's right..>> Yeah..>> Well awesome. Well this.has been another episode.of The Xamarin Show..Don't forget to rate,.subscribe and ding.that bell become part of.the notification squad..Get that Xamarin Show in.your inbox each and every week..So next time, I'm James.Montemagno. Thanks for watching..