{"id":3939,"date":"2019-10-08T21:35:24","date_gmt":"2019-10-08T19:35:24","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=3939"},"modified":"2019-10-20T09:05:17","modified_gmt":"2019-10-20T07:05:17","slug":"3939-2","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/3939-2\/","title":{"rendered":"Tkinter and Firebase (and javascript) to get data"},"content":{"rendered":"

Tkinter to create a GUI for firebase<\/h2>\n

This little script let us look to the records into firebase. We need to add a way to add the records. Let’s see the code until now:<\/p>\n

from firebase import firebase\r\n\r\n# put the name of your database where the ***** are\r\naddress = \"https:\/\/*******.firebaseio.com\/\"\r\nfb = firebase.FirebaseApplication(address)\r\n\r\nfb.put(\"books\",\r\n\t\"Pinocchio\", {\r\n\t\t\"author\" : \"Collodi\",\r\n\t\t\"Edition\" : 1968}\r\n\t   )\r\n\r\nimport tkinter as tk\r\n\r\nroot = tk.Tk()\r\n\r\ndef entry(text):\r\n\tl = tk.Label(text=text)\r\n\tl.pack()\r\n\te = tk.Entry(root)\r\n\te.pack()\r\n\r\nauthor = entry(\"Author\")\r\nedition = entry(\"Edition\")\r\n\r\ndef seedata():\r\n\tdata2 = data[lbx.get(lbx.curselection())]\r\n\tfor k in data2:\r\n\t\tlbx2.insert(tk.END, k + \": \" + str(data2[k]))\r\n\r\nlbx = tk.Listbox(root)\r\nlbx.pack()\r\ndata = fb.get(address, \"books\")\r\nfor k in data:\r\n\tlbx.insert(tk.END, k)\r\nlbx2 = tk.Listbox(root)\r\nlbx2.pack()\r\nlbx.bind(\"<<ListboxSelect>>\", lambda x: seedata())\r\n\r\nroot.mainloop()<\/pre>\n
The app..\"\"<\/a><\/p>\n
Now we need the code to add the records.<\/p>\n
How to get the data in javascript<\/h2>\n
To get the data in an html page you need some code like this (you nedd the confid data from your firebase project):<\/p>\n
<div id=\"board\"><\/div>\r\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/4.10.1\/firebase.js\"><\/script>\r\n<script>\r\nvar config = {\r\n  apiKey: \"AHfjhdjskhdlg\u00f2jkjgk\u00f2sjdklfgjlskdjfgkljdf\",\r\n  authDomain: \"showrfjkjksdf-546.firebaseapp.com\",\r\n  databaseURL: \"https:\/\/showrfjkjksdf-546.firebaseio.com\/\",\r\n  projectId: \"showrfjkjksdf-546\",\r\n  storageBucket: \"showrfjkjksdf-546.appspot.com\",\r\n  messagingSenderId: \"4546768786\"\r\n};\r\nfirebase.initializeApp(config);\r\nlet database = firebase.database();\r\nlet ref = database.ref().child(\"my_data_to_read\"); \/\/ Scrivi da dove vuoi leggere i dati\r\nref.on(\"value\", gotData, errData);\r\n\r\nfunction gotData(data){\r\n    board.innerHTML = \"\";\r\n    x = data.val();\r\n    for (n in x){\r\n      board.innerHTML += n + \": \" + x[n] + \"<br>\"\r\n    }\r\n}\r\n\r\nfunction errData(err){\r\n    console.log(\"Error\");\r\n    console.log(err);\r\n}\r\n<\/script><\/pre>\n
You will get the var config data from your project. Then you will nedd to add the child you want to read the data from in:<\/p>\n
let ref = database.ref().child(\"my_data_to_read\"); \/\/ Scrivi da dove vuoi leggere i dati<\/pre>\n
my_data_to_read is the child.<\/p>\n
The following code will read the data and show them in the div “board”:<\/p>\n
ref.on(\"value\", gotData, errData); \/\/ sends the values to the function got data\r\n\r\nfunction gotData(data){\r\n    board.innerHTML = \"\";\r\n    x = data.val();\r\n    for (n in x){\r\n      \/\/ iterate all the data adding each one in board\r\n      board.innerHTML += n + \": \" + x[n] + \"<br>\"\r\n    }\r\n}<\/pre>\n
 <\/p>\n
Firebase<\/h4>\r\n