Duration 30:27
16+
Play
Video

Add Firebase to your cross-platform React Native or Flutter app

Kat Fang
Software Engineer at Google
+ 1 speaker
  • Video
  • Table of contents
  • Video
2018 Google I/O
May 10, 2018, Mountain View, USA
2018 Google I/O
Video
Add Firebase to your cross-platform React Native or Flutter app
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
14.71 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speakers

Kat Fang
Software Engineer at Google
Kiana McNellis
Engineer at Google

Kat is a software engineer for Firebase focused on the intersection with Google Cloud, previously working on Cloud Storage for Firebase and the Realtime Database. Kat graduated from MIT with a bachelor's and master's degree in Electrical Engineering and Computer Science. When she's unplugged, she spends her time dancing, figure skating, and puzzling.

View the profile

Kiana is a developer programs engineer on the Firebase team. In this role, she coordinates the free support program for developers, with a focus on improving the developer experience. Kiana has a masters and bachelor's degree in Computer Science from Rensselaer Polytechnic Institute, where she graduated from in 2017.

View the profile

About the talk

Cross-platform frameworks like React Native and Flutter are great for getting up and running on multiple platforms quickly. But once you've launched your app, you still need to grow your user base and improve your app experience. In this session, you'll learn how to integrate Firebase products like Analytics, Remote Config, and Firebase Cloud Messaging into your React Native and Flutter apps.

Share

Hi everyone. I hope you've enjoyed the past three days and already for just one last talk before we all have to leave Google IO this year. My name is cat. I'm a software engineer on the Firebase team and I'm Kianna from Firebase developer relations. We as developers never have enough time and we're always looking for new tools to help us build faster. So today we're going to take apps that we have built on cross-platform Frameworks and add Firebase to them to take them to the next level. So over the past couple weeks, I've been building this app. I think it's pretty cool. It's a photo

scavenger hunt where you have a different category each time and it gives you a couple options. So for this one up here on the screen, we have tech gadgets to maybe we'll get an option between a phone and a laptop to take a picture of anything about this is actually written on flutter, which is a cross-platform framework that uses Dart a modern reactive language and then it compiles down to Native interfaces so we can still get featured on either the iOS or Android app stores. And since I come from a web background, I've felt the same app using react native

react native is another cross-platform framework, but instead of writing and art I can use a JavaScript which I'm more comfortable with. There are a lot of different cross-platform apps. You might have hurt cross-platform Frameworks. You might have heard of his Amarin or ionic today. We're focused on flutter and react native all of these allowed to develop in one code base, but Target multiple platforms and we can choose the one which were most familiar with the language and the pulling around it so long as we don't need down to the metal performance. This can save us a lot of time if we

develop this wedding. So before we get too much further, let's check out a demo of the app we have built. So this is the flutter app that Kiana has been building we have this nice tutorial which tells us will be taking pictures and along the way we'll get some trophies. Here's our progress screen. We can see the different levels. We've already completed and let's go ahead and check out the next level here will need to upload a picture of a hat. nice hat I just goes to server verifies. It's actually hat and tells her app that we can continue

and here we want our first trophy. Awesome. So let's go back to our sleds. So I think we built a pretty nice out front you but unfortunately, this is our user base right now me you and a couple friends tomorrow office. How can we make our user base look like this with users from all over the world engaged and actively using it. Unfortunately right now are you serious is actually more looking like this the people who we have gotten to use it don't have a great experience and they're not even getting to the second

level. So how do we increase our user engagement? We tried adding some as I've done some sharing with friends, but what's next this is where Firebase can help us Firebase like the Frameworks we've been building in is also cross-platform. So it's a good fit. Flutter in react native allow us to build power app looks and its functionality effectively acting as a front-end code. Well Firebase provides tools and services that are apps can connect to giving us the power we would normally get by running our own bakit to do this. We views Integrations that already exists to

integrate Firebase with flutter were using the flutter fireplug Inn and integrated with react native. We use the react native Firebase module. This allows us to add all of the features of Firebase which can help us understand our users discover issues and we can so that our users love our app. So let's go back to the issue that Keanu mentions. We have lots of people giving up not a whole lot of usage people are leaving us bad reviews. It's not great. It turns out 50% of all issues that people leave bad reviews for our due to things like the app crashing or hanging due to network

issues or heavy resource usage. These are all errors that we as developers can fix and should fix when I see it in my own app locally. I can do bucket easily. But even if I know these issues exist in the wild, sometimes it can be hard to find them because I can't reproduce them locally. Firebase allows us to add observability. Google analytics for Firebase automatically gives us metrics such as revenue and week-over-week retention which versions of our apps are being used by people. But you being specific inside so we can add custom

analytics and this allows us to track things. Like what levels are people reaching which are the easiest to options in our scavenger hunt. With performance monitoring. I'll be able to measure latency out the door. We get traces for things like app start and network request, but we can add custom traces to get fine-grained measurements of latency. What's crashlytics will get a report every single time a crash happens in the wild and this is very useful for finding those issues that people aren't reporting to us with Native apps. We just drop it in and we'll get the line

of code that the crash happened on with cross-platform apps will have to capture the crashes ourselves, but then we can use the custom login functionality of crashlytics to log them to the servers. Now analytics and performance monitoring are both available on flutter and react native oil crashlytics is only available on react-native module right now. However, if you like what you see and you're using flutter, all of these are open source repositories, so feel free to contribute. To streamline our demo. We've already done a little

bit of setup. We've created our project fire hunt and inner project. We've created apps for each of our IOS and Android versions for react native and Android. react native and flutter We've been dropped in the modules will want to use it for Firebase here were using Firebase core for analytics performance for performance monitoring and crashlytics needs the fabric and crashlytics Cocopah for Android. We would be doing something similar but using Gradle and lastly we've done a little more set up with crashlytics,

which you can read the documentation for here. Okay, so set up a load of the way. Let's jump to our actual demo. What do we get? As soon as we've sent this up? We'll get an overview with analytics for our ABS, but it looks like none of our apps have very many users. The numbers aren't going to be so interesting. So let's go take a sneak peek at bingo blast which is an app that's been out in the wild a little bit longer hears our analytics dashboard. And as you can see we have our daily users in green or weekly users in purple and our monthly users in blue and we can scroll

down to get other metrics as well such as how much revenue the app is making and what versions of the app people are using and we scroll down to the bottom we can see where in the world people are using her at from so in this case. It's a lot of people are playing bingo blast in the US but also all around the world We can also take a look at the events tab. Canvas shoes at user events that are tracked in our app. We get a bunch of these for free such as app installs or after removal and session starts,

but this is also where will be able to add cuz we're will be able to see our custom analytics events such as when people level up if we check out our audiences. This is where we can segment or user base and Target different Firebase features two different segments later on. Here we've group things by purchasers and even purchasers by locality so we can have features which are targeted specifically to say people in Australia. Alright, let's actually get a look at what adding a custom analytics event looks like in code here were using react native

will be doing something similar if we were doing it this in flutter. The first thing I need to do is importar Firebase module. And here we have the image picker screen. This is the screen which allows you to pick an image and receive the verification from the server. If we have the right image, it'll call complete level and if we have the wrong image, it will call wrong image. So we want to add a custom analytics event when someone completes the level. Let's go ahead and do that. Here we give him the name of our analytics event to be level. The number that

this level is reached and we're calling Firebase data analytics. Log event in order to actually log that to the server. So let's go ahead and run or app. Skip the tutorial since we know what we're doing. Look for a cookie will use this picture of a cookie that we took before. submit that to be verified And it looks like our verification works and we wanted trophy awesome. So now let's take a look in the console. We can see that these custom analytics

events are coming through in the de bug View. And this will give us a good idea of how our analytics will be coming in as we add them to our app. So here we can see we have a bunch of screen views a bunch of clicks with user engagement. And finally we can also see that level 3 has in fact been reached. All right. So while we're still in the console, let's take a look at what we get from performance monitoring out the gate. I've added no custom code. The only thing I did was add the cocoa pod to my iOS version

or my Gradle dependency in my Android app and here we can already see the source of traces we can get I've got no major issues. But I do have a minor issue with app start it sticking almost 600 milliseconds. That's probably the slow enough start that unless I give someone my progress screen. Am I turn them off from my app we can also take a look at the network request. And from this we can see that all of our requests are not weird requests are in fact successful, but there's this one here, which is taking 2 seconds. That's kind of slow. Let's

begin to it. This is the end point that verifies our image and it's probably slow because we have to upload a large image on occasion that depends on whatever our user provides. So maybe an optimization we can make is making our image smaller or somehow speeding up our machine learning algorithm on the back end. However is a problem for my back himself tomorrow or the day afterwards. Okay. So what about crashlytics by was a good overview of performance monitoring? Let's go back to the code and see how we can add crashlytics to pick up the

crashes that are happening. If we go see rap and check out the trophies tab will see that there's a crash this was reported to me by Kiana thankfully a couple hours ago and we can use this to see how crashlytics actually works. So again, we're in our trophy screen. The first thing we're going to do is import Firebase. And when we get an error will use the global Handler to capture it and log it to crashlytics. Here, we'll grab the stack Trace log that and record the error. So now if we read it will be able to capture

the crashes. Yep, and that's just not working. So let's go to the console and see what that actually produced. We can go into our first issue here. And our sentries here looks like a whole bunch of native mumbo-jumbo not very useful if what I'm actually developing is a react native app, but we can take a look at the logs. And we can see that this was due to actually let's go to the previous spectres if you hit the arrow. Yeah, that one will give us this might start race, which tells us

the inner truth. Escreen. We've typed in render tropes. Looks like a typo to me. So let's go ahead and fix that. All right. We'll just add two more letters Runner app again. And I will actually be able to see the trophies that we have rightfully earned. So now that we've fixed all of the issues in our app, what else can we do? Sophie go back to the side. The next step and what we want to do is try to start experimenting with our user base by adding Cloud messaging and

remote config into our app. We can start experimenting with different engagement strategies run test two subsets of our users and analytics. We just add it snow vacations in t wrap it works across IOS and Android just like flutter and rack setup. We can instantly send a push notification to all our users plus if we add a little bit of extra card we can actually take that notification put it into our app and then run some custom code to do an interaction based off of that. We can even Target or messages based off things like Locale and people's experience with our app. How does it work?

Send a notification up to our server or you can actually run your own API server that does things programmatically or Cloud messenger. It'll send a notification out to all our users who have registered notification tokens with Firebase. Let's switch back to the cabin and see if it works. Here we have our flutter pubs bekah M and we're just going to start out by adding our Firebase messaging plugin. We run packages and it gets our new values. Then we're going to go ahead

and the star mean content screen and we're just going to import our new package. And of course it didn't cuz there is pretty awesome and create that variable and then initialize it. You can see that we were Quest a notification for Mission and this is mainly for iOS. It'll pop up a question to make Studio, but you can also say that we get the token here and if you save that to your database you can actually Target that specific user for a custom notification later. We are going to add some extra configuration code and this will

allow us to handle the notification right in our at the first two on launch and on resume our if our user hits the notification and we're not currently in the app it'll send that data on to us and then we'll do things like navigate to the right page. So we go ahead and show the alert and then handle that code. so the final thing we want to do is go over to our androidmanifest and we're going to register custom intent Handler just so we make sure that flutter sends that notification right to our app lets friend that and wallet set running. Let's go ahead tour

console. And we'll go down to our Cloud messaging Tab and here we can create a new notification. Let's do something like check out our new levels and we'll just give it a label and Target are Android users for this phone. anime And then back in our Android app, we want to add Advance Auto. Yes, just to handle it inside of a wrap at some custom Fields the first picture from text for are in-app notification. And then the location want to go just the progress and then our

special intent Handler for Android. Now we'll go back and send the app. Over to RN in the notification center there. We should have an app pop up. It stopped running. Sorry. Just send that again. Was just resend that notification sure and the bad thing is you can actually just duplicate it and send it right again. Still looks good. And let's go back to the app. I can see it right here on the podium. School and we already clicked it and it's at the progress screen. Nice. So

let's switch raccoon bites and talk about real concert real quick. So far they smoked on site allows us to try out different features inside of our app experiences for different users and different user groups and changed me. Why based on things like a new feature flag. How does it work? Well, you have a hard-coded option in your half right now and it does the same experience to everyone but we want to change that. So it was Private remote conseguiste thicken a new variable and it stretches from the server the dynamic value for that and then I update you I

accordingly So let's try that up. So back in our pups back. We're just going to add the remote-com to plug in. and again packages. Get Then in our content screen we're going to import that package once again and create a new variable. And then we'll go ahead and initialize. So this time we're going to do an asynchronous call and then using other wait. We're just going to wait for that response back to say hit. Yes. We have a remote config setup. And if we do go ahead and hit do a configure settings and this will make sure that we set

some default settings in this case were in a debug mode. So we're going to leave the debug flag on and then we're going to set some sensible defaults that we already have in our app next. We're going to fetch the new remote config from the server. And then update the app accordingly and we call set State here is because that's how dark newest update for UI. Finally, we're going to replace the get config function. Just so are out nose to check remote config first before we use our default. Let's run that.

If we go over to our fine screen. We can say we currently have two options. We want to change it to 3 or 4 and make it a little bit easier for our users. So let's go into the remote config of dashboard outer Force parameter here, which is going to be fine number options and that will set it up to four. And then add the parameter and finally the last thing is hit publish to send it out to users. Then in a couple seconds, it'll reach are out and we'll just restart it to make sure it's such as those new variables since in this case. We only wanted to start on

Startup cuz otherwise this experience would change our users. And it just takes a moment to load here. Well, this is letting let's go and add another thing in a remote counseling. Sure. So the cool thing is we can actually add parameters specifically for certain versions of our user base and of our app so if we Define a new condition say is iOS Then we apply if they're using our IOS app. Can we create the condition then we can add a specific variable just for those iOS users say only three because our iOS users are going to have a little bit harder time finding

those items and then we publish the changes. And then if we go back to her. Let's see what that find skin looks like. Cool, and I got to for unfortunately conference Wi-Fi took a little bit of time to get there, but it came through and I didn't switch to 3 cuz it knows this isn't that IOS app and without any code changes we were able to update that value dynamically. So those are all manual tasks for let's switch back to the slide to learn about some automatic ones. So the smarts predictions a b testing and

a b testing for Cloud messaging allow it to add some machine magic to automate those tasks. We were just doing our using Firebase predictions. We take Google Cloud ML and actually integrated right into our analytics data predict actions that are used Bass will take like money or we can even have it predicted custom analytics event. Like are they ever going to reach the third level then with a B test we can go ahead and automate AR test and interpret the results automatically so we can run tests with just the

same sample of our users or we can do it just with a certain audience or one of those prediction events, then we can see if it made an impact on the metrics we care about and then roll it out to a larger population if it works. So this is what it might look like. So half of our user base might get can you beat her latest Challenge and the other half get new levels just released, but it'll do that all for us and we won't have to choose which does which School, so this is our predictions currently a pretty high chair number

cuz 7% are predicted to turn but that's a high risk tolerance at a high risk tolerance were really saying anyone who could possibly Sharon we want to make sure to Target them. But if we switch it to a lower risk tolerance, we can do like only the users that were very sure going to turn and maybe we're going to try to ring them for all the money we can get a little easier we can also set up down here a level 3 reached which is a custom analytics event

that we then took and ask Google to predict. It'll just take a couple days to go and do that prediction or we can even learn a B test and Target just the users who are predicted to turn. So next up, let's do anybody test. So takes a little while. Let them conquer experiment for notifications. And let's do something like giving everyone I am trophies. So we'll do a short message and then we'll Target are iOS users. And let's do 100% because we want every one of our users to get this one. We just want to see which one does that Ur. So will hit next and add three

variants finish the level for the phrase limited edition trophy for the next and then a special trophy for the third and then next and our goal here will be session start. Do you want people to open up our app and start using it and that's what we're going to try to optimize for. Then we hit next and go ahead and see an overview of what RAB test will look like experiment. Now this'll take a week or so to run or two weeks. If we didn't fix pyramid with remote

concept, but we actually started an experiment we could go that we can show you guys with Android. And it looks like wearing a one out so that's pretty cool and if we look down. We can see what very and I was and we can see some of the stats on it. We can see the conversion rate was 22% which is pretty good and how many people actually did that event? So nice, I switch back to the site. What are some other ways I can use all these cool features? We just started working. That's a

good question. One way is we can use predictions to find the users that will turn and give them booster packs Target that maybe they're having a hard time with the different levels so we can use booster packs to help them through those harder levels. We can use this we can use Firebase features. If we want to redesign our app, we can use a b testing see if people actually enjoy the new redesign and it will also tell us if people are experiencing more crashes with the new redesign and which case we'll just roll it back. But if we do like it we can roll it all the way to 100% We can also use

Firebase when producing you content. So I'm sure a lot of you have had that experience where you just won your users to download a new app update so that they can get the nuke on what we can roll the new content into existing app offload app updates. But hiding behind a remote config variable then on the day, we want to launch the new content. We don't have to wait for people to update their app will just flip a remote config flag and send a push notification to let everyone know that there's new content waiting for them. So we've taken our straps react-native and flutter

and added Firebase features to them. This allows us to observe and analyze using Firebase analytics crashlytics and performance monitoring to see what our users are doing and discover issues before they reach everyone we can make hypotheses as to how we can improve the experience with them using predictions to segment users. That might Turning or spending more money and we can run experiments on them using a b testing targeting remote config and messaging will be able to analyze the changes we have made what users like and repeat the cycle all over again.

Now that we've added Firebase when people all across the world come to RF they will have a smooth and enjoyable experience. Furbies can actually go beyond even this and help us develop our next features using products such as fire store, which have real-time synchronous capabilities allowing us to build things like 10 games so that people can work together to build scavenger to finish scavenger hunt or using cloud storage so that we can make sure uploads are successful even across spotting that works. But if this is the last talk here at Rio, so I encourage you all to go to YouTube check

out the other cops that have happened here these past three days and explore the Deep Dives on there as well. We want to hear from you. So please check out the website and leave us some feedback. Again, thank you for coming to our talk and I hope you've enjoyed IU.

Cackle comments for the website

Buy this talk

Access to the talk “Add Firebase to your cross-platform React Native or Flutter app”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “2018 Google I/O”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “Software development”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
159
app store, apps, development, google play, mobile, soft

Similar talks

Jumana Al Hashal
Product Leader at Google
+ 1 speaker
Todd Kerpelman
Developer Advocate at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Hiranya Jayathilaka
Software Engineer at Google
+ 1 speaker
Jen Person
Developer Advocate at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Emily Fortuna
Developer Advocate at Google
+ 1 speaker
Emily Shack
Software Engineer at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “Add Firebase to your cross-platform React Native or Flutter app”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
558 conferences
22059 speakers
8190 hours of content