{"id":1369,"date":"2016-08-15T15:57:10","date_gmt":"2016-08-15T22:57:10","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=1369"},"modified":"2016-08-15T15:57:10","modified_gmt":"2016-08-15T22:57:10","slug":"demonstration-app-for-using-firebasedb-in-appinventor","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2016\/08\/15\/demonstration-app-for-using-firebasedb-in-appinventor\/","title":{"rendered":"Demonstration app for using FirebaseDB in AppInventor"},"content":{"rendered":"<p>FirebaseDB provides for sharing between users all running the exact same app on their device. Read <a href=\"http:\/\/appinventor.pevest.com\/?p=1358\">&#8220;What is FirebaseDB?&#8221;<\/a> to learn more about FirebaseDB and what it does for your applications.<\/p>\n<p>This is a quick and very short app that demonstrates the fundamental operation of FirebaseDB when used in MIT App Inventor. I hope to create a more interesting demo app a bit later.<\/p>\n<blockquote><p><em>Caution: FirebaseDB is an experimental component offered by MIT App Inventor. FirebaseDB remains under development and is subject to change; apps written today might not work in the future. Apps containing the FirebaseDB component will not work in the emulator &#8211; run on your phone or tablet instead. At this time, the cloud-based database is a shared database, shared among multiple users, and cannot &#8211; yet &#8211; be linked to your personal Google account.<\/em><\/p><\/blockquote>\n<h3>FirebaseDB is Similar to TinyWebDB<\/h3>\n<p>The programming interface for <em>FirebaseDB<\/em> is nearly the same as that used for <em>TinyWebDB<\/em>.\u00a0<em>TinyWebDB<\/em> is a simple cloud-based database \u2013 to use, you need to set up the <em>TinyWebDB<\/em> on your own server or on Google\u2019s servers. With your data stored in the \u201ccloud\u201d, your data may be shared among many apps. For the FirebaseDB demo, you do not need to set up your own server, nor do you need to use TinyWebDB:<\/p>\n<blockquote><p>For details on setting up and using TinyWebDB \u2013 including some tricks that enable sharing of TinyWebDB data between apps \u2013 please see my book,<\/p>\n<ul>\n<li><strong>App Inventor 2 Databases and Files<\/strong>\u00a0<strong>(Volume 3 e-book)<\/strong><br \/>\nStep-by-step TinyDB, TinyWebDB, Fusion Tables and Files<br \/>\nBuy from: <a href=\"http:\/\/amzn.to\/1UxQGSO\">Amazon<\/a>,<a href=\"https:\/\/play.google.com\/store\/books\/details\/Edward_Mitchell_App_Inventor_2_Databases_and_Files?id=ryB4CgAAQBAJ\"> Google Books<\/a>, <a href=\"https:\/\/store.kobobooks.com\/en-US\/ebook\/app-inventor-2-databases-and-files\">Kobo Books<\/a><\/li>\n<\/ul>\n<p>For more information, including a sample chapter, please see <a href=\"http:\/\/appinventor.pevest.com\/?page_id=33\">my App Inventor books page<\/a>.<\/p><\/blockquote>\n<h2>Sample App User Interface<\/h2>\n<p>Our simple demonstration app stores and retrieves a text value to and from the <em>FirebaseDB<\/em>. As with <em>TinyDB<\/em> or <em>TinyWebDB<\/em>, enter a &#8220;tag&#8221; value to use to look up the value. For example, a tag value could be a part number, and the value could be the text description of the part&#8217;s name. Or the tag could be a phone number and the value could be the name of the person who has that phone number.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/Screenshot_20160815-152608.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1372 aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/Screenshot_20160815-152608-576x1024.gif\" alt=\"Screenshot_20160815-152608\" width=\"280\" height=\"497\" \/><\/a><\/p>\n<p>The program is operated by entering a tag and a value and then pressing the Store Value button. The value entered is written to the FirebaseDB database in the cloud.<\/p>\n<p>After a value has been stored, you retrieve values by entering the original tag and pressing Retrieve Value. The data corresponding to the tag is retrieved from FirebaseDB and display in the Value field, on screen.<\/p>\n<p>If the app is run simultaneously on other devices, any data updates made on the other devices result in all devices receiving a data changed notification. When the data in the FirebaseDB is changed, the new data is displayed on all devices.<\/p>\n<h2>Designer View<\/h2>\n<p>A combination of vertical and horizontal layouts is used to organize the positions of the controls (see the Components list, below, or download the sample code).<\/p>\n<p><em>Store Value<\/em> and <em>Retrieve Value<\/em> are buttons. <em>Tag<\/em> and <em>Value<\/em> are labels, followed by text boxes for data entry. <em>\u00a0Data Changed Event<\/em> and the <em>status<\/em> message are both labels.<\/p>\n<p>Drag the <em>FirebaseDB<\/em> component from the <em>Experimental<\/em> section of the Designer controls palette. You will receive a warning that <em>FirebaseDB<\/em> is experimental.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FirebaseDesigner.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1373 aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FirebaseDesigner.gif\" alt=\"FirebaseDesigner\" width=\"266\" height=\"438\" \/><\/a><\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FBDemo_Components.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1374 aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FBDemo_Components.gif\" alt=\"FBDemo_Components\" width=\"164\" height=\"275\" \/><\/a><\/p>\n<h2>Blocks View<\/h2>\n<p>(Sorry for the image quality on these three blocks &#8211; the screen capture utility I used for these did not do a very good job)<\/p>\n<p>The <em>btnStoreValue<\/em> event handler reads the enter tag and data value from the text boxes on screen, and then stores those to the <em>FirebaseDB<\/em>. Find the <em>FirebaseDB<\/em> <em>StoreValue<\/em> component by clicking on the <em>FirebaseDB<\/em> component in the Blocks list.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FirebaseBlocks1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1375 aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FirebaseBlocks1.gif\" alt=\"FirebaseBlocks1\" width=\"335\" height=\"98\" \/><\/a><\/p>\n<p>Fetching a store value is simple &#8211; call <em>FirebaseDB&#8217;s<\/em> <em>GetValue<\/em> method and pass to it the tag. Unlike <em>TinyDB<\/em> (but similar to <em>TinyWebDB<\/em>), the value is not read instantaneously but instead, once the data is read and available, an event called <em>GotValue<\/em> occurs. \u00a0A <em>GotValue<\/em> event handler processed the incoming data; in our simple app, the data is stored back in to the <em>Value<\/em> text box, on screen.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FirebaseBlocks2.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1376 aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FirebaseBlocks2.gif\" alt=\"FirebaseBlocks2\" width=\"332\" height=\"198\" \/><\/a><\/p>\n<p>A unique feature of <em>FirebaseDB<\/em> is the database&#8217;s ability to alert apps that data inside the database has been changed. This alert caused a <em>DataChanged<\/em> event to occur &#8211; and which delivers the tag and value that were updated to the app.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FirebaseBlocks3.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1377 aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2016\/08\/FirebaseBlocks3.gif\" alt=\"FirebaseBlocks3\" width=\"407\" height=\"120\" \/><\/a><\/p>\n<h2>Reminder<\/h2>\n<p>FirebaseDB is experimental and incomplete, is subject to change, and should not be relied upon at this time for production code. However, you may use it for learning and experimentation.<\/p>\n<h2>Download Source Code<\/h2>\n<p>Download: <a href=\"http:\/\/appinventor.pevest.com\/files\/FirebaseDB_Demo.aia\">FirebaseDB_Demo.aia<\/a><\/p>\n<p>After downloading to your computer, you may upload the file to your App Inventor account using <em>Projects | Import project (.aia) from my\u00a0computer<\/em><\/p>\n<h2>Related Tutorials<\/h2>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=1061\">All new tutorial: Using TinyDB in App Inventor<\/a><\/li>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=1083\">TinyDB Database Manager<\/a><\/li>\n<li><strong>App Inventor 2 Databases and Files<\/strong>\u00a0<strong>(Volume 3 e-book)<\/strong><br \/>\nStep-by-step TinyDB, TinyWebDB, Fusion Tables and Files<br \/>\nBuy from: <a href=\"http:\/\/amzn.to\/1UxQGSO\">Amazon<\/a>,<a href=\"https:\/\/play.google.com\/store\/books\/details\/Edward_Mitchell_App_Inventor_2_Databases_and_Files?id=ryB4CgAAQBAJ\"> Google Books<\/a>, <a href=\"https:\/\/store.kobobooks.com\/en-US\/ebook\/app-inventor-2-databases-and-files\">Kobo Books<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>FirebaseDB provides for sharing between users all running the exact same app on their device. Read &#8220;What is FirebaseDB?&#8221; to learn more about FirebaseDB and what it does for your applications. This is a quick and very short app that demonstrates the fundamental operation of FirebaseDB when used in MIT App Inventor. I hope to &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2016\/08\/15\/demonstration-app-for-using-firebasedb-in-appinventor\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Demonstration app for using FirebaseDB in AppInventor<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6,10],"tags":[],"class_list":["post-1369","post","type-post","status-publish","format-standard","hentry","category-components","category-documentation","category-programming-method"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=1369"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1369\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=1369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=1369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=1369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}