Firebase tips(Database:javascript 1)

# Firebase with javascript on Chrome.

## 1. Connect and push data.
```html:push
<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase.js"></script>
<script>
  var config = {
    apiKey: 'XXXXXXXXX',
    authDomain: 'XXXXXXX.firebaseapp.com',
    databaseURL: 'https://XXXXXXXX.firebaseio.com/',
    storageBucket: 'XXXXXX.appspot.com',
    messagingSenderId: 'XXXXXXXX',
  };
  firebase.initializeApp(config);
  var database = firebase.database();

  database.ref('coffeeandcode-japan/').push(
    {
      id: 1,
      name: 'coffee'
    }
  );
</script>
```
`result`
![dbpush.png](https://qiita-image-store.s3.amazonaws.com/0/199460/e90ef33a-73be-541d-0e7e-163a9bb19513.png)

## 2. Set data.
```js:set
  database.ref('coffeeandcode-japan/'+ 'coffee').set(
    {
      id: 1,
      name: 'coffee'
    }
  );

```
`result`
![setdata.png](https://qiita-image-store.s3.amazonaws.com/0/199460/c13eb228-afe5-f0e8-82ef-c413bf402dea.png)

## 3. Update data.
```js:update
  database.ref('coffeeandcode-japan/'+ 'coffee').update(
    {
      id: 2,
      name: 'latte'
    }
  );
```
`result`
![update.png](https://qiita-image-store.s3.amazonaws.com/0/199460/aabb8566-91bb-60bf-745d-1458e663ea94.png)



## 4. Remove data.
```js:remove
  database.ref('coffeeandcode-japan/'+ 'coffee').remove();
```



## 5. Retrieve single data once.
```js:retrive.once
  database.ref('/coffeeandcode-japan/coffee').once('value').then(
    (snapshot) => {
      console.log('id:' + snapshot.val().id);
      console.log('name:' + snapshot.val().name);
    }
  );
```
`result`
![retrive_once.png](https://qiita-image-store.s3.amazonaws.com/0/199460/9d5f297c-43aa-5d1e-74af-7f9b954ed839.png)

## 6. Retrieve multiple data once.
```js:retrive.multiple.once
  database.ref('/coffeeandcode-japan').once('value').then(
    (snapshot) => {
      snapshot.forEach((data)=> {
        console.log("id: " + data.val().id + " name: " + data.val().name);
      });
    }
  );
```
`result`
![retrive_multi_once.png](https://qiita-image-store.s3.amazonaws.com/0/199460/b415abe2-d756-fbf2-620e-75682d651807.png)

## 7. Retrieve single data when adding a new record.
```json:new.record
"coffee4" {
  "id": 4,
  "name": "test"
}
```

```js:on.child_add.event
  database.ref('/coffeeandcode-japan').on('child_added', (snapshot) => {
    console.log('id:' + snapshot.val().id);
    console.log('name:' + snapshot.val().name);
  });
```
`result`
![add_child.png](https://qiita-image-store.s3.amazonaws.com/0/199460/7a619eb3-8ace-c6cd-5394-b048d82dd8b0.png)

## 8. Retrieve single data when removing a record.

remove coffee4 data.

```js:remove.record
  database.ref('/coffeeandcode-japan').on('child_removed', (snapshot) => {
    console.log('id:' + snapshot.val().id);
    console.log('name:' + snapshot.val().name);
  });
```
`result`
![remove_child.png](https://qiita-image-store.s3.amazonaws.com/0/199460/38cf19be-a420-e4dc-667e-3f8b96f4ecce.png)

## 9. Retrieve single data when changing a record.

change coffee1's name.

```js:change.record
  database.ref('/coffeeandcode-japan').on('child_changed', (snapshot) => {
    console.log('id:' + snapshot.val().id);
    console.log('name:' + snapshot.val().name);
  });
```
`result`
![change_child.png](https://qiita-image-store.s3.amazonaws.com/0/199460/4444a44e-1891-11e5-2afd-a8321a810440.png)