Persist data in React Native with Firebase REST API
For our demo React Native application, we want to persist some notes about Github users. To make that quick and easy, we are going to take advantage of FireBase's REST API to have data persistence in minutes.
[00:00] In order to persist data, we are going to use firebase. If you're following along, go over to firebase.com and sign up for an account. Once you do that, you will be taking to this dashboard page. You can go ahead here and create a new app, so we can just call it GitHub saver.
[00:17] If I create this new app, I can go to it, and I notice firebase will give me this URL.
[00:23] Firebase is known for their two-way data binding with angular, and also their web socket-y stuff were everything is up-to-date, and it's really, really convenient.
[00:31] The bad thing about that is with react native it doesn't support website, so we are going to use firebase as restful API, which is still really, really convenient.
[00:41] Let's head over to our API file with me earlier, and we are going to create two units. The first one is going to be called GetNotes. What it's going to do is, it's going to accept a username, trim it up a bit.
[00:58] Once we do that, our URL is going to be the firebase URL that we got from firebase, and then we're going to append to it the username we got that was passed and when we invoke to the function, as well as .JSON on the end.
[01:16] Then what we can do is, we're going to use Fetch again. We're going to fetch data from that URL, hold that there, get a response, and then return another promise, which is parsing our jSON. It looks very similar, that's because it's pretty much the same as the repository get we made earlier.
[01:39] The last one we are going to make is called AddNote. This will allow us to add a new note up to firebase, so we're going to take in a username, and we're going to take in a note. Then we're going to clean our username up.
[01:54] After that, what we'll do is let's make another URL, it's going to be very similar to this one. Then what we're going to do is make a post request with Fetch.
[02:04] What's nice about Fetch is API, it's almost the exact same thing. We're going to pass on a URL now, we are also going to pass in the subject as the second argument. The method is going to be post. The body of that post request is going to be, we're going to stringify the note.
[02:25] Then as always, Fetch will return us a promise, which we can add that on to. Then we're going to return the response.JSON. There we go. There's our way we make post requests through firebase, and there's our way we'll make get requests to firebase.
[02:44] Now, whenever we invoke these methods, we'll either get the data that's stored at this firebase location, or we'll add a new item to that database.
[02:54] The biggest thing to remember here is that when you have your URL, the URL is the exact same URL you got from firebase. We're appending a username to it, so what we'll eventually see is something like this, where we will have the username, and then the value will be some note.
[03:13] Now, notice if I go to this URL, githubsaver.com/TylerMcGuinness, you can see all of Tyler McGuinness' notes. So, firebase is really, really convenient and if you want to use the rest API all you can do is append .JSON on the end of it.