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-S...
閱讀完整內容

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 m...
閱讀完整內容

AIS0. understanding AIS NMEA 0183: How it's coded

For my boat tracking system, I found out that using AIS format seems to be a good idea, at least I don't have to worry about how to present boat data, since there are already plenty things for do this on mobile phone or PC. Here is what I read: http://catb.org/gpsd/AIVDM.html Looking into AIS NMEA0183, it has much more application then I think. Such as MOB device, epir, aid to navigation device...etc, all are included. it use the first few char to indicate the function: Table 1. AIS talker IDs !AB NMEA 4.0 Base AIS station !AD MMEA 4.0 Dependent AIS Base Station !AI Mobile AIS station !AN NMEA 4.0 Aid to Navigation AIS station !AR NMEA 4.0 AIS Receiving Station !AS NMEA 4.0 Limited Base Station !AT NMEA 4.0 AIS Transmitting Station !AX NMEA 4.0 Repeater AIS station !BS Base AIS station (deprecated in NMEA 4.0) !SA NMEA 4.0 Physical Shore AIS Station It can also be used between device on boat for message communication, AIVDO The...
閱讀完整內容