firebase host 4: write/read from web

Since setting up the firebase, I was searching lot of examples of read/write data from web with HTML and js...
bot none works for me.
I think the version changment is also a cause, but not sure where are the differences.
the version of firebase lib I used no is 6.2.4 and the examples are mostly 5.x.x, the version change also impact other java lib version and support.

after several fail, I decide to search most recent one.


  1. 26
    Day26 前端福音(1/4): Firebase-介紹 & 建立專案
  2. 27
    Day27 前端福音(2/4): Firebase-寫入&刪除資料
  3. 28
    Day28 前端福音(3/4): Firebase-讀取資料
  4. 29
    Day29 前端福音(4/4): Firebase-帳號系統&資料讀寫規則

But still, I need to modify some thing,

When you setup your firebase app and realtime, it will give you some setting to add at the end of body of your html, I need to add the 2nd one, the firebase-database.js, other when you do
var db = firebase.database();
it will give you an error.
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
<!--following is needed to make it work-->
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js"></script>

the the following are the config you get from firebase

<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIgfdwahrewhgfshgd5R6-833mPsisFO8Ikc",
authDomain: "fb-try1.firebaseapp.com",
databaseURL: "https://ffdsy1.firebaseio.com",
projectId: "ffdsy1",
storageBucket: "",
messagingSenderId: "299468413032",
appId: "1:299468413032:web:fgf345t345df565b"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>

I'm very new to HTML, it took me a while to understand the structure of HTML...

here is my working sample, it write data and read out, key and other id data has been changed
<!DOCTYPE html>
<html>
<head>
<title>firebase read</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
<!--following is needed to make it work-->
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCKiwsp5423543233mPsisFO8Ikc",
authDomain: "fb-try1.firebaseapp.com",
databaseURL: "https://fb-try1.firebaseio.com",
projectId: "fb-try1",
storageBucket: "",
messagingSenderId: "299468413032",
appId: "1:299468413032:web:fc9543254f565b"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>

<!--set data-->

<script>
var db = firebase.database();
db.ref("/chinese/Bob").set({
grade: 60
})
.then(function () {
alert("建立成功");
}).catch(function () {
alert("伺服器發生錯誤，請稍後再試");
});
</script>


<!--Read out data -->

<script>
var db = firebase.database();
db.ref("chinese/Bob").once('value', function (snapshot) {
var data = snapshot.val();
console.log(data);
});

</script>
<!--<script>src="index.js"</script>-->
</body>
</html>


for the basic part, to write data from web we can use:

  • set: will erase old data 
db.ref("/chinese/Bob/grade2").set(87)
  • update: will keep old data
var myGrade = { grade2: 10, grade3: 20 } db.ref("/chinese/Bob").update(myGrade)
  • push: add data to data base with random key.
db.ref("/content").push({ name: "Bob", content: "Yo~" })


to delete, we can use set or remove
db.ref("/content").set({})
db.ref("/content").remove()


For the basic read, it's using snapshot function(link to google), A DataSnapshot contains data from a Database location. 2 method listed, there are some more, worth to read
  • once : only read once
db.ref("chinese/Bob").once('value', function (snapshot) { var data = snapshot.val(); console.log(data); });
then you get:


  • on : read at first time and then run the call back function when data changed
db.ref("chinese/Bob").on('value', function (snapshot) { console.log(snapshot.val()); });


I think there are some other ways, the query function are also important



留言

張貼留言

這個網誌中的熱門文章

Heltec ESP32+OLED+Lora, hardware testing

圖片
you can easily find some good boards from china, but most of them lack of accurate document... Hrere is an example; https://hackaday.io/project/26991-esp32-board-wifi-lora-32 the board looks good with lora and a 128x64 OLED, but the IIC and reset connection is important, since pin can be muxing easily, so every board could be different. pinMode(16,OUTPUT);  digitalWrite(16, LOW); // set GPIO16 low to reset OLED  delay(50);  digitalWrite(16, HIGH); // while OLED is running, must set GPIO16 to high  and, if needed, edit your Wire.begin() to Wire.begin(4,15); (4 = SDA 15 SCL)  i tested it with the Adafruit SSD1306 and the Acrobotics SSD1306 Librarys  both work.  Display size is 128x64 There are discussions on these boards on TＴＮ as a LORA node..or maybee single ch gateway? Heltec has a git :  https://github.com/Heltec-Aaron-Lee And there is another copy call TTGO https://de.aliexpress.com/item/TTGO-LORA32-868-915-Mhz-SX1276-ESP32-Oled-display-Bluetooth-WIFI
閱讀完整內容

micro SD card for ESP32, on lolin32 with OLED and heltec 32 lora oled

圖片
I have purchased 2 micro SD card holder for my esp project. First I would like to test with heltec esp32 lora oled module. this module uses: sck=05 MISO=19 MOSI=27 SS(lora)=18, then I assigned 21 for sd SS and there is a lib in esp32-arduino, which use SS default at 5 I took the example and use SD.begin(21), but I alway get the error: entry 0x40078a9c Card Mount Failed But I do saw once that it read out the sd card type and volume. Not sure it's the issue of lora sd card swithing, or it just can't work. The other esp32 card I have is an wemos esp32 oled, it did not leave me too much pins, I need to find out how to connect sd to it. But I have wemos D1 mini esp8266 on hand, and connect it as:  * The WeMos Micro SD Shield uses:  * D5, D6, D7, D8, 3V3 and G  *  * The shield uses SPI bus pins:  * D5 = CLK  * D6 = MISO  * D7 = MOSI  * D8 = CS It's not working with the example in the arduino IDE 1.8.5, which marked SD(esp8266), but it w
閱讀完整內容

Install Network Time Protocol(NTP) on BeagleBone with Angstrom linux and set local time zone

Referenced from : http://cwraig.id.au/?p=513 1. Update your Package List opkg update 2. Get the ntp Package opkg install ntp ntpdate Update 2014/07/03 for the latest beaglebone image(2013-06-20) with kernel 3.8.12, after this installation,  system will add to service list, so only need to change time zone 3. Now we need to stop the ntpd service so we can request a manual update /etc/init.d/ntpd stop manual update ntpdate pool.ntp.org type in date, you should see the date is changing to current date and time, but the time zone is not corrected. The time zone info is contained in /etc/localtime , use this to remove it: rm /etc/localtime before link up our time zone, look into /usr/share/zoneinfo folder for your timezone. I did not find taiwan in asia, not plan to use hong_kong, but there is still: /usr/share/zoneinfo/Etc/GMT-8 now we make the link with ln command ln -s /usr/share/zoneinfo/Etc/GMT-8 /etc/localtime now type date again to check, should ha
閱讀完整內容