{"id":2017,"date":"2022-08-17T15:18:28","date_gmt":"2022-08-17T08:18:28","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=2017"},"modified":"2023-03-05T13:52:44","modified_gmt":"2023-03-05T06:52:44","slug":"sembilan-operasi-dasar-firestore-firebase-di-react-native","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/","title":{"rendered":"9 Commands Cheat sheet Firestore Firebase"},"content":{"rendered":"\r\n\r\nHere are the basic commands or cheat sheets for <strong>Firestore<\/strong> on <strong>Firebase<\/strong> for <strong>React Native<\/strong>, these are made to make it easier as a reference for coding and teaching training.\r\n\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#1_Add_firebase_library_di_project_yarn_firebase\" >1. Add firebase library di project : yarn firebase<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#2_Configure_Firebase_configjs\" >2. Configure Firebase config.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#3_Create_a_user_with_email_and_password_and_save_it_in_the_users_collection\" >3. Create a user with email and password and save it in the users collection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#4_Example_login_using_email_and_password\" >4. Example login using email and password<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#5_Check_the_status_of_the_logged_in_user_using_onAuthStateChanged\" >5. Check the status of the logged in user using onAuthStateChanged<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#6_Filtering_data_by_userID_and_sorting_the_createdAt_column\" >6. Filtering data by userID and sorting the createdAt column<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#7_Save_data_with_server_time\" >7. Save data with server time<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#8_Delete_row\" >8. Delete row<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#9_Update_data\" >9. Update data<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#a_Update_all_fields\" >a. Update all fields<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.bagi2info.com\/en\/nine-commands-cheat-sheet-firestore-firebase\/#b_Update_certain_field\" >b. Update certain field&nbsp;<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Add_firebase_library_di_project_yarn_firebase\"><\/span>1. Add firebase library di project : yarn firebase<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-bash\" lang=\"bash\">yarn firebase<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Configure_Firebase_configjs\"><\/span>2. Configure Firebase config.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nGo to the firebase <a href=\"https:\/\/firebase.google.com\/\">website<\/a>, and create a new account.\r\n\r\nOnce logged in, create a new project in the Firebase Console.\r\n\r\nEnable <strong>Email &amp; Password<\/strong> authentication method\r\n\r\nCreate a new web type application with the name <strong>com.testing.app<\/strong>\r\n\r\nCopy the <strong>Firebase JSON<\/strong> configuration and place it in firebaseConfig in the following config.js file\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">import * as firebase from 'firebase';\r\nimport '@firebase\/auth';\r\nimport '@firebase\/firestore';\r\n\r\nconst firebaseConfig = {\r\n  apiKey: '',\r\n  authDomain: '',\r\n  databaseURL: '',\r\n  projectId: '',\r\n  storageBucket: '',\r\n  messagingSenderId: '',\r\n  appId: '',\r\n};\r\n\r\nif (!firebase.apps.length) {\r\n    firebase.initializeApp(firebaseConfig);\r\n}\r\n\r\nexport { firebase };<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Create_a_user_with_email_and_password_and_save_it_in_the_users_collection\"><\/span>3. Create a user with email and password and save it in the users collection<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">    const onRegisterPress = () =&gt; {\r\n        if (password !== confirmPassword) {\r\n            alert(\"Passwords don't match.\")\r\n            return\r\n        }\r\n    \r\n        firebase\r\n            .auth()\r\n            .createUserWithEmailAndPassword(email, password)\r\n            .then((response) =&gt; {\r\n                const uid = response.user.uid\r\n                const data = {\r\n                    id: uid,\r\n                    email,\r\n                    fullName,\r\n                };\r\n                const usersRef = firebase.firestore().collection('users')\r\n                usersRef\r\n                    .doc(uid)\r\n                    .set(data)\r\n                    .then(() =&gt; {\r\n                        navigation.navigate('Home', {user: data})\r\n                    })\r\n                    .catch((error) =&gt; {\r\n                        alert(error)\r\n                    });\r\n            })\r\n            .catch((error) =&gt; {\r\n                alert(error)\r\n        });\r\n    }<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Example_login_using_email_and_password\"><\/span>4. Example login using email and password<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">\r\nimport { firebase } from '..\/..\/firebase\/config'\r\n\r\n\r\n\r\n    const onLoginPress = () =&gt; {\r\n        firebase\r\n            .auth()\r\n            .signInWithEmailAndPassword(email, password)\r\n            .then((response) =&gt; {\r\n                const uid = response.user.uid\r\n                const usersRef = firebase.firestore().collection('users')\r\n                usersRef\r\n                    .doc(uid)\r\n                    .get()\r\n                    .then(firestoreDocument =&gt; {\r\n                        if (!firestoreDocument.exists) {\r\n                            alert(\"User does not exist anymore.\")\r\n                            return;\r\n                        }\r\n                        const user = firestoreDocument.data()\r\n                        navigation.navigate('Home', {user: user})\r\n                    })\r\n                    .catch(error =&gt; {\r\n                        alert(error)\r\n                    });\r\n            })\r\n            .catch(error =&gt; {\r\n                alert(error)\r\n            })\r\n    }<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Check_the_status_of_the_logged_in_user_using_onAuthStateChanged\"><\/span>5. Check the status of the logged in user using onAuthStateChanged<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"\">  useEffect(() =&gt; {\r\n    const usersRef = firebase.firestore().collection('users');\r\n    firebase.auth().onAuthStateChanged(user =&gt; {\r\n      if (user) {\r\n        usersRef\r\n          .doc(user.uid)\r\n          .get()\r\n          .then((document) =&gt; {\r\n            const userData = document.data()\r\n            setLoading(false)\r\n            setUser(userData)\r\n          })\r\n          .catch((error) =&gt; {\r\n            setLoading(false)\r\n          });\r\n      } else {\r\n        setLoading(false)\r\n      }\r\n    });\r\n  }, []);<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Filtering_data_by_userID_and_sorting_the_createdAt_column\"><\/span>6. Filtering data by userID and sorting the createdAt column<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">\r\n\r\n    const [entities, setEntities] = useState([])\r\n\r\n    const entityRef = firebase.firestore().collection('entities')\r\n    const userID = 1\r\n\r\n\r\n\r\n    entityRef\r\n        .where(\"authorID\", \"==\", userID)\r\n        .orderBy('createdAt', 'desc')\r\n        .onSnapshot(\r\n            querySnapshot =&gt; {\r\n                const newEntities = []\r\n                querySnapshot.forEach(doc =&gt; {\r\n                    const entity = doc.data()\r\n                    entity.id = doc.id\r\n                    newEntities.push(entity)\r\n                });\r\n                setEntities(newEntities)\r\n            },\r\n            error =&gt; {\r\n                console.log(error)\r\n            }\r\n        )<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"7_Save_data_with_server_time\"><\/span>7. Save data with server time<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\"> const onAddButtonPress = () =&gt; {\r\n        if (entityText &amp;&amp; entityText.length &gt; 0) {\r\n            const timestamp = firebase.firestore.FieldValue.serverTimestamp();\r\n            const data = {\r\n                text: entityText,\r\n                authorID: userID,\r\n                createdAt: timestamp,\r\n            };\r\n            entityRef\r\n                .add(data)\r\n                .then(_doc =&gt; {\r\n                    setEntityText('')\r\n                    Keyboard.dismiss()\r\n                })\r\n                .catch((error) =&gt; {\r\n                    alert(error)\r\n                });\r\n        }\r\n    }<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"8_Delete_row\"><\/span>8. Delete row<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"\">    await firebase.firestore().collection('entities')\r\n      .doc(id)\r\n      .delete()\r\n      .then(function () {\r\n        Alert.alert('Record successfully deleted!');\r\n      })\r\n      .catch(function (error) {\r\n        Alert.alert('Error removing transaction: ', error);\r\n      });<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"9_Update_data\"><\/span>9. Update data<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"a_Update_all_fields\"><\/span>a. Update all fields<span class=\"ez-toc-section-end\"><\/span><\/h4>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">    const entityRef = firebase.firestore().collection(\"entities\");\r\n    entityRef.set({\r\n        text: \"text data\",\r\n        authorID: userID,\r\n        createdAt: timestamp,\r\n    });\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"b_Update_certain_field\"><\/span>b. Update certain field&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h4>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">    const entityRef = firebase.firestore().collection(\"entities\");\r\n \r\n    \/\/ To update text and authorID only: \r\n\r\n    entityRef.doc(uid)\r\n    .update({\r\n        text: \"text data\",\r\n        authorID: userID,\r\n    })\r\n    .then(function () {\r\n    console.log(\"Document successfully updated!\");\r\n    });<\/code><\/pre>\r\n\r\n\r\n\r\n\r\nReferences:\r\n\r\n\r\n\r\n\r\n\r\n<a href=\"https:\/\/www.freecodecamp.org\/news\/react-native-firebase-tutorial\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.freecodecamp.org\/news\/react-native-firebase-tutorial\/<\/a>\r\n\r\n\r\n\r\n\r\n\r\n<a href=\"https:\/\/github.com\/instamobile\/react-native-firebase\/blob\/master\/src\/screens\/HomeScreen\/HomeScreen.js\">https:\/\/github.com\/instamobile\/react-native-firebase\/<\/a>\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Here are the basic commands or cheat sheets for Firestore on Firebase for React Native, these are made to make it easier as a reference for coding and teaching training. 1. Add firebase library&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":2053,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,173],"tags":[11,197,150],"class_list":["post-2017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer","category-react-native","tag-database","tag-firebase","tag-react-native"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=2017"}],"version-history":[{"count":1,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2017\/revisions"}],"predecessor-version":[{"id":4091,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2017\/revisions\/4091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/2053"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=2017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=2017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=2017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}