FireBase資料庫

Size: px

Start display at page:

Download "FireBase資料庫"

存翦
5 years ago
Views:

1 FireBase 資料庫建國科技大學資管系饒瑞佶 2016/6 V1 2016/9 V2 2016/10 V3

2 FireBase 資料庫 (I) Firebase 是專為行動應用開發者所提供的後端服務平臺 (Backend as a Services,BaaS) Firebase 整併 Google 既有的雲端服務與工具增加了免費的數據分析工具雲端訊息推播通知系統當機報告遠端配置及動態連結等功能

3 FireBase 資料庫 (II) Google 目前開放免費使用 Firebase 的服務, 不論是網頁應用系統或目前最熱門的手機, 都能透過 Firebase 所提供的 API 儲存或讀取在雲端上的資料, 開發人員不需要自己建置資料庫與設計伺服器端的程式, 就能快速地讓自己的應用程式能夠將資料儲存在雲端上

4 Firebase 特色 Schemaless 改以 structure 取代 table fileds 需要網路內建雙向資料繫結 (two-way data-binding) 改以 API 取代 SQL 指令回歸到 www 本質, 使用 HTML+JS 就可以存取使用適合於即時資料分享與更新, 不適合儲存大量資料不需要租用 / 建置 / 維護伺服器

5 使用 Firebase 使用 Firebase 最快的方式是以原有的 Google 帳號登入並開始使用, 先註冊後再進入網站操作資料

6 使用 Google 帳號登入後點擊右上方的 Console 即可進入主控台

7 建立新專案

8 輸入專案資料

9 建立專案後功能區連結應用程式

10 資料庫管理 (Database) 未來程式連結的根節點

11 建立資料 Firebase 並不是以傳統關連式資料庫的表格, 而是以 JSON 格式儲存資料, 它就是一個 JSON 樹狀結構 (JSON Tree), 請按下加號後, 在 Firebase 中建立一個聯絡人資料的名稱請輸入 contacts/1/name, 值為小叮噹

12 加入第二筆資料

13 Client 存取 FireBase

14 Client 存取 FireBase 分成有認證 authentication 與沒有認證兩個方式分成沒有 rules 與有 rules 兩個方式分成 Web Android 與 ios 三個主要 Client 提供有 JavaScript API REST API Android SDK 與 ios SDK

15 沒有認證 + 沒有 rules

16 JavaScript API jquery vs. Firbase

17 訂定讀寫規則連結 Firebase 中的 contacts 記錄請按上方的規則標籤進行資料存取的規劃訂定 Firebase 預設只有已經驗證過的帳號才能夠讀取 (read) 或寫入 (write) 資料

18 訂定讀寫規則後發佈 true 代表不設定 rules

19 第一種取得資料方法

20 <script src=' <script src=" <script src=' <script> $(document).ready(function(){ // Initialize Firebase var config = { apikey: "AIzaSyDjjqsqfpcYJSQim2wqpldIUwuM8rg5E80", authdomain: "test-73ef6.firebaseapp.com", databaseurl: " storagebucket: "test-73ef6.appspot.com", messagingsenderid: " " }; firebase.initializeapp(config); }); </script>

21 即時資料更新 Firebase 上節點資料有更新時, 可以同步通知其他 client 進行更新 Firebase data structure

22 作法針對節點透過 on 或 once 事件讀取需要注意節點的 rules 規則設定

23 同步讀取資料 <script> $(document).ready(function(){ // Initialize Firebase var config = { apikey: "AIzaSyDjjqsqfpcYJSQim2wqpldIUwuM8rg5E80", authdomain: "test-73ef6.firebaseapp.com", databaseurl: " storagebucket: "test-73ef6.appspot.com", messagingsenderid: " " }; firebase.initializeapp(config); // 同步顯示資料 var db = firebase.database(); db.ref("messages/").on("value", function(snap) { var data = snap.val(); // 顯示資料到 UI document.getelementbyid('messagesdiv').innerhtml= data; }, function(err) { alert(' 取得資料失敗!'); }); }); </script> <div id='messagesdiv'></div>

24 可以直接放入 Tibbo 中的 web server 執行

25 如果改 Firebase 上的資料?

26 第二種取得資料方法

27 步驟 1 引入必要的 js 函示庫 In HTML <head> section <script src=' ebase.js'></script> <script src=' /1.9.0/jquery.min.js'></script>

28 步驟 2 連結存取 Data 的 URL 位置在註冊登入 FireBase 後建立 project 就可以取得

29 步驟 3 取得資料為達到當資料寫入 FireBase 時能即時更新畫面, 需要監聽 child_added 事件, 共有 5 種事件 :1. Value 2. Child Added 3. Child Changed 4. Child Removed 5. Child Moved, 當資料寫入後 callback function 將執行後續動作請加入下列監聽事件 mydataref.on('child_added', function(snapshot) { });

30 使用回傳資料 Snapshots 使用 jquery 將 callback function 傳回的資料顯示在畫面上 // 監聽事件 mydataref.on('child_added', function(snapshot) { var message = snapshot.val(); displaychatmessage(message.name, message.text); }); function displaychatmessage(name, text) { $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendto($('#messagesdiv')); };

31 步驟 4 顯示資料 <body> <div id='messagesdiv'></div> <script> var dbref = new Firebase(" var mydataref = dbref.child('member') // 資料庫名稱 // 監聽事件 mydataref.on('child_added', function(snapshot) { var message = snapshot.val(); displaychatmessage(message.name, message.age); }); function displaychatmessage(name, age) { $('<div/>').text(age).prepend($('<em/>').text(name+': ')).appendto($('#messagesdiv')); }; </script> </body>

32 改用 list 顯示資料 var mydataref = new Firebase( 節點 /'); $(document).ready(function () { mydataref.once('value', function (snapshot) { var data = snapshot.val(); var list = []; for (var key in data) { if (data.hasownproperty(key)) { name = data[key].name? data[key].name : ''; text = data[key].text? data[key].text : ''; if (name.trim().length > 0) { list.push({ name: name + text, key: key }) } } } // refresh the UI refreshui(list); }); property

33 用 list 取得資料 function refreshui(list) { var lis = ''; for (var i = 0; i < list.length; i++) { lis += '<li data-key="' + list[i].key + '">' + list[i].name + '</li>'; }; document.getelementbyid('messagesdiv').innerhtml = lis; } }); 顯示資料的 <div>

34 加入資料異動

35 <div id='messagesdiv'></div> <input type='text' id='nameinput' placeholder='name'> <input type='text' id='ageinput' placeholder='message'> <script> var mydataref = new Firebase(' $(document).ready(function(){ showdata(); // 顯示資料 $('#ageinput').keypress(function (e) { if (e.keycode == 13) { var name = $('#nameinput').val(); var age = $('#ageinput').val(); mydataref.push({name: name, age: age}) $('#messagesdiv').empty(); $('#nameinput').val(''); $('#ageinput').val(''); alert('ok'); showdata(); }); } }); Firebase 使用 chronologicallyordered globally-unique IDs 當做 key 改成 set 可以修改資料改成 remove 可以刪除

36 function showdata(){ mydataref.once('value', function (snapshot) { var data = snapshot.val(); var list = []; for (var key in data) { if (data.hasownproperty(key)) { name = data[key].name? data[key].name : ''; age = data[key].age? data[key].age : ''; if (name.trim().length > 0) { list.push({ name: name + age, key: key }) } } } // refresh the UI refreshui(list); }); } function refreshui(list) { var lis = ''; for (var i = 0; i < list.length; i++) { lis += '<li data-key="' + list[i].key + '">' + list[i].name + '</li>'; }; document.getelementbyid('messagesdiv').innerhtml = lis; } </script>

37 如果要加一個節點 var dbref = new Firebase(' var mydataref = dbref.child( contacts1 ) // 加入 contacts1 節點

38 上述範例可以直接轉換成 ASP.NET vs. Firbase

39 第三種取得資料方法 FireSharp

40 FireSharp Docs Installation (NuGet) Install-Package FireSharp -Version Install-Package FireSharp.Serialization.JsonNet Install-Package FireSharp.Serialization.ServiceStack

41 For ASP.NET 與 WinForm 與 WebService protected void Button1_Click(object sender, EventArgs e) { IFirebaseConfig config = new FirebaseConfig(); // Firebase URL config.basepath = " config.serializer = new ServiceStackJsonSerializer(); //Register ServiceStack.Text config.serializer = new JsonNetSerializer(); //Register Json.Net } IFirebaseClient client = new FirebaseClient(config); // 要異動的資料, 需要建立 class Todo var todo = new Todo { name = TextBox1.Text, age = Convert.ToInt16(TextBox2.Text) }; // 下面可以改用 SET,REMOVE,UPDATE 等方法 PushResponse response = client.push("user/1", todo); Response.Write(response.Result.Name); // 傳回 key

42 Todo.cs internal class Todo { public string name { get; set; } public int age { get; set; } }

43 FireSharp 取得資料 IFirebaseConfig config = new FirebaseConfig(); // Firebase URL config.basepath = " config.serializer = new ServiceStackJsonSerializer(); //Register ServiceStack.Text config.serializer = new JsonNetSerializer(); //Register Json.Net IFirebaseClient client = new FirebaseClient(config); FirebaseResponse response = client.get("contacts/1"); Todo todo = response.resultas<todo>(); Response.Write(todo.name);

44 如果有設定 rule ".read" :"auth!=null 需要加入 config.authsecret 設定以下取得 secret

45 修改 code 加入本行 IFirebaseConfig config = new FirebaseConfig(); // Firebase URL config.authsecret = xxxxxxxxxxx"; config.basepath = " config.serializer = new ServiceStackJsonSerializer(); //Register ServiceStack.Text config.serializer = new JsonNetSerializer();

46 修改資料 var todo1 = new Todo { name = "rcjao", age = 11 }; FirebaseResponse response1 = client.update("contacts/3", todo1); 如果用下方指令, 會直接在跟節點下方新增 name 與 age 兩個屬性資料 FirebaseResponse response1 = client.update("", todo1);

47 Firbase REST API

48 REST API rt.html 透過 curl 進行傳輸 curl -X PUT -d '{ "alanisawesome": { "name": "Alan Turing", "birthday": "June 23, 1912" } }' '

49 使用 ASP.NET 撰寫 curl 連結 FireBase 寫入資料 protected void Page_Load(object sender, EventArgs e) { // 後面的每段都是一個節點, 最後一段 users 就是結點名稱 var url = " var jsondata = "{\"name\":\"ctu\",\"birthday\":\"june 23, 2016\"}"; } using (var client = new WebClient()) { client.headers.add("content-type", "application/json"); var response = client.uploadstring(url, jsondata); }

50 讀取 FireBase 資料 public string GetFireBase() { string response; // 後面的每段都是一個節點, 最後一段 users 就是結點名稱 var url = " } using (var client = new WebClient()) { client.encoding = System.Text.Encoding.UTF8; client.headers.add("content-type", "application/json"); byte[] bresult = client.downloaddata(url); response = Encoding.UTF8.GetString(bResult); } return response;

51 Android vs. Firbase

52 Android 端建立新專案與新 Activity

53 導入 Firebase Android API 加入 firebase SDK

54 Add Android Permissions <uses-permission android:name="android.permission.internet " />

55 Setup Firebase on Android Activity's oncreatemethod

56 Read & Write to your Firebase Database by passing the URL of your database into the Firebase constructor Firebase myfirebaseref = new Firebase("

57 Reading Data by attaching an event listener and handling the resulting events. myfirebaseref.child("contacts").addvalueeventlistener(new ValueEventListener() public void ondatachange(datasnapshot snapshot) { tv1.settext(snapshot.child("1").child("name").getvalue().tostring()); } public void oncancelled(firebaseerror error) { }

58 Writing Data // 寫入資料 myfirebaseref.child("contacts").child("3").child("name").setvalue(" 來自 android"); myfirebaseref.child("contacts").push().child("name").setvalue("aaa");

59 整筆寫入建立 class User public class User { public String name; public int age; public User() { // constructor } { } } public User(String inputname, int inputage) this.name = inputname; this.age = inputage; User user = new User("ctuim", 23); myfirebaseref.child("contacts").push().setvalue(user);

60 整筆讀取透過前面的 class User myfirebaseref.child("contacts/1").addvalueeventlistener(new ValueEventListener() public void ondatachange(datasnapshot snapshot) { tv1.settext(snapshot.child("name").getvalue().tostring()); // 整筆讀取 User post = snapshot.getvalue(user.class); Toast.makeText(Main.this,post.name.toString(),Toast.LENGTH_LONG).show(); } public void oncancelled(firebaseerror error) { }

61 透過 ListView 顯示 (I) ListView list = (ListView) findviewbyid(r.id.listview); final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, android.r.id.text1); list.setadapter(adapter); 需要 Firebase.setAndroidContext(this);

62 透過 ListView 顯示 (II) String url = " new Firebase(url).addChildEventListener( new ChildEventListener() public void onchildadded(datasnapshot datasnapshot, String s) { adapter.add((string) datasnapshot.child("name").getvalue()); public void onchildremoved(datasnapshot datasnapshot) { adapter.remove((string) datasnapshot.child("name").getvalue()); public void onchildmoved(datasnapshot datasnapshot, String s) { public void oncancelled(firebaseerror firebaseerror) { public void onchildchanged(datasnapshot datasnapshot, String s) { }); } 如果要同步更新, 可把本段放在 ondatachange 內

63 Firebase Authentication

64 共有 6 種方法多數是使用 rule:auth!=null 需要做的都寫在 firebase.auth().onauthstatechanged 事件中

65 Github Sample 要安裝 Firebase CLI( 要安裝有 NODE.JS) npm install -g firebase-tools 啟動 SERVER( 需要到指定目錄, 且目錄下要有 firebase.json) 模擬 www server firebase serve

66 測試匿名認證

67 測試 Anonymous Authentication 啟用認證加入 JS CODE 不需要 Firebase CLI 在 firebase.auth().onauthstatechanged 中加入讀寫程式 ( 可配合 P19 中第一種取得資料方法 )

68 測試 Google 認證

69 測試 Google Sign-in(1) 啟用認證加入 JS CODE 建立 Oauth 憑證 entials 需要 Firebase CLI

70 測試 Google Sign-in(2) 選擇專案

71 測試 Google Sign-in(3)

72 取得 Client-ID 測試 Google Sign-in(3)

73 測試 google-credentials.html 將目錄切換到 google-credentials.html 所在目錄啟動 firebase serve

74 修改 google-credentials.htm 填入 Client-ID 加入 js

執行 http://localhost:5000/google-credentials.

75 執行在 firebase.auth().onauthstatechanged 中加入讀寫程式 ( 可配合 P19 中第一種取得資料方法 )

76 測試 FB 認證

77 需要 Firebase CLI FB 建立應用程式

78 測試 facebook-credentials.html 啟用認證

79 修改 facebook-credentials.html 加入 JS CODE 修改 FB CODE

執行 http://localhost:5000/facebook-credentials.

80 執行在 firebase.auth().onauthstatechanged 中加入讀寫程式 ( 可配合 P19 中第一種取得資料方法 )

81 測試 custom 認證

82 建立 service count json file redentials/serviceaccountkey?project=_

83 修改 exampletokengenerator\auth.html 修正註解掉, 否則無法執行!

84 執行 auth.html

85 執行 customauth.html

86 JavaScript API Web Application

87 Firebase Authentication 6 種不同方式

88 啟用電子郵件 / 密碼

89 建立帳號直接建立重要的參數

90 Database structure 第一個節點第二個節點 ( 使用者的 UID) 設定讀寫規則需要節點 UID== 登入認證的 UID

91 透過程式建立帳號首先將 firebase 加入 web 網路應用

92 建立帳號 // 利用建立使用者 firebase.auth().createuserwith andpassword(" ", "password").then(function(){ alert(' 建立完成 '); }).catch(function(error) { // 建立失敗 var errorcode = error.code; var errormessage = error.message; alert(errormessage); });

93 搭配 jquery 加入 jquery <script src=' y/1.9.0/jquery.min.js'></script>

94 使用 jquery 設計註冊程式 <script> $(document).ready(function(){ // Initialize Firebase var config = { apikey: "AIzaSyDjjqsqfpcYJSQim2wqpldIUwuM8rg5E80", authdomain: "test-73ef6.firebaseapp.com", databaseurl: " storagebucket: "test-73ef6.appspot.com", messagingsenderid: " " }; firebase.initializeapp(config);

95 使用 jquery 設計註冊程式 $('#signup').click(function(){ // 利用建立使用者 var =$('#mail').val(); var password=$('#pwd').val(); firebase.auth().createuserwith andpassword( , password).then(function(){ alert(' 建立完成 '); }).catch(function(error) { // 建立失敗 }); }); }); </script> var errorcode = error.code; var errormessage = error.message; alert(errormessage);

96 UI <body> <h1>firebase Authentication 建立電子郵件 / 密碼 </h1> <br> <input type=text id="mail"> <br> 密碼 :<input type=password id="pwd"> <br><input type=button value= 註冊 " id="signup"> </body>

97 登入 UI <body> <h1>firebase Authentication 建立電子郵件 / 密碼 </h1> <br> <input type=text id="mail"> <br> 密碼 :<input type=password id="pwd"> <br><input type=button value=" 註冊 " id="signup"> <input type=button value=" 登入 " id="login"> </body>

98 登入 // 登入 $('#login').click(function(){ var =$('#mail').val(); var password=$('#pwd').val(); // 使用登入 Firebase firebase.auth().signinwith andpassword( , password).then(function(){ alert(' 登入成功 '); }).catch(function(error) { var errorcode = error.code; var errormessage = error.message; alert(" 登入失敗 :"+errorcode+"\n 訊息 :"+errormessage); }); });

99 登入後觸發事件 firebase.auth().onauthstatechanged // 不管登入成功或失敗, 都會觸發 firebase.auth().onauthstatechanged((user) => { if (user) { // 登入成功, 取得使用者 //alert(user.uid); // 登入者的 uid // 儲存 uid, 之後讀取與寫入資料用 localstorage.setitem("uid", user.uid); }else{ alert(' 尚未登入 '); } });

100 登出 UI <body> <h1>firebase Authentication 建立電子郵件 / 密碼 </h1> <br> <input type=text id="mail"> <br> 密碼 :<input type=password id="pwd"> <br><input type=button value=" 註冊 " id="signup"> <input type=button value=" 登入 " id="login"> <input type=button value=" 登出 " id="logout" style="display: none;"> </body>

101 登出修改登入 firebase.auth().signinwith andpassword( , password).then(function(){ alert(' 登入成功 '); $("#logout").show(); $("#login").hide(); }).catch(function(error) { var errorcode = error.code; var errormessage = error.message; alert(" 登入失敗 :"+errorcode+"\n 訊息 :"+errormessage); });

102 登出 $('#logout').click(function(){ firebase.auth().signout().then(function() { alert(' 已登出 '); $("#logout").hide(); $("#login").show(); }, function(error) { alert(' 登出失敗 '); }); });

103 登入後顯示資料設定讀取規則 rules 規則需要搭配資料庫結構而訂

104 rules 第一個節點第二個節點 ( 使用者的 UID) 設定讀寫規則需要節點 UID== 登入認證的 UID

105 資料結構第一個節點第二個節點 ( 使用者的 UID) 要讀取的資料

106 依 rule 讀取資料首先加入 Firebase client <script src=' ebase.js'></script>

107 依 rule 讀取資料 UI <body> <h1>firebase</h1> <br> <input type=text id="mail"> <br> 密碼 :<input type=password id="pwd"> <br><input type=button value=" 註冊 " id="signup"> <input type=button value=" 登入 " id="login"> <input type=button value=" 登出 " id="logout" style="display: none;"> <input type=button value=" 顯示資料 " id="showdata" style="display: none;"> <div id='messagesdiv'></div> </body>

108 依 rule 讀取資料修改登入 / 登出 firebase.auth().signinwith andpassword( , password).then(function(){ alert(' 登入成功 '); $("#logout").show(); $("#showdata").show(); $("#login").hide(); }).catch(function(error) { var errorcode = error.code; var errormessage = error.message; alert(" 登入失敗 :"+errorcode+"\n 訊息 :"+errormessage); });

109 依 rule 讀取資料只要登入 / 登出狀態改變會觸發 firebase.auth().onauthstatechanged 裡面將會有登入者資訊 user, 前面已經將其儲存起來 localstorage.setitem("uid", user.uid); 使用登入者資訊判定是否登入與登入者身分, 再配合 rule 設定, 決定是否能讀取資料?

110 依 rule 讀取資料 (1) // 顯示資料 $('#showdata').click(function(){ // 開始讀取資料 ( 這裡與.read:true 設定時的讀取方式不同 ) var uid= localstorage.getitem("uid"); // 取回 uid var db = firebase.database(); db.ref("user/" + uid).once("value", function(snap) { var data = snap.val(); var list = []; for (var key in data) { if (data.hasownproperty(key)) { name = data[key].name? data[key].name : ''; age = data[key].age? data[key].age : '';

111 依 rule 讀取資料 (2) if (name.trim().length > 0) { list.push({ name: name, age : age, key: key }) } } } // 顯示資料到 UI refreshui(list); }, function(err) { alert(' 取得資料失敗!'); }); });

112 依 rule 讀取資料 (3) // 使用 jquery 更新畫面 function refreshui(list) { var lis = ''; for (var i = 0; i < list.length; i++) { lis += '<li data-key="' + list[i].key + '">' + list[i].key + '/' + list[i].name + '/' + list[i].age + '</li>'; }; document.getelementbyid('messagesdiv').innerhtml = lis; }

113 加入顯示條件搜尋 name 中是 ray 的資料 db.ref("user/" + uid).orderbychild("name").equalto("ray").once("value", function(snap) { 搜尋 name 中 c 開頭到 d 開頭的資料.orderByChild("name").startAt("c").endAt("d\uf8ff") 顯示前 3 筆資料.limitToFirst(3)

114 加入顯示條件依據 key 排序.orderByKey() Like + % -part-2-advanced-searches-with.html

115 依 rule 寫入資料 UI <body> <h1>firebase</h1> <br> <input type=text id="mail"> <br> 密碼 :<input type=password id="pwd"> <br><input type=button value=" 註冊 " id="signup"> <input type=button value=" 登入 " id="login"> <input type=button value=" 登出 " id="logout" style="display: none;"> <input type=button value=" 顯示資料 " id="showdata" style="display: none;"> <div id='messagesdiv'></div> <div id="newdata" style="display: none;"> name:<input type=text id="newname"> <br>age:<input type=password id="newage"> <br><input type=button value=" 建立資料 " id="createdata"> </div> </body>

116 依 rule 寫入資料修改登入 firebase.auth().signinwith andpassword( , password).then(function(){ alert(' 登入成功 '); $("#logout").show(); $("#showdata").show(); $("#newdata").show(); $("#login").hide(); }).catch(function(error) { var errorcode = error.code; var errormessage = error.message; alert(" 登入失敗 :"+errorcode+"\n 訊息 :"+errormessage); });

117 依 rule 寫入資料 // 建立資料 $('#createdata').click(function(){ var uid= localstorage.getitem("uid"); // 取回 uid var newname = $('#newname').val(); var newage = $('#newage').val(); var db = firebase.database(); db.ref("user/" + uid).push({name: newname, age: newage}, function(error) { if (error) alert(' 建立失敗 '); else{ alert(' 建立成功 '); $('#showdata').click(); } }); });

118 刪除資料修改顯示資料函數 function refreshui(list) function refreshui(list) { var lis = ''; for (var i = 0; i < list.length; i++) { lis += '<li data-key="' + list[i].key + '">' + list[i].key + '/' + list[i].name + '/' + list[i].age + '</li><input class="del" type="button" data-key="' + list[i].key + '" value=" 刪除 "><input class="modify" type="button" data-key="' + list[i].key + '" value=" 修改 ">'; }; document.getelementbyid('messagesdiv').innerhtml = lis; }

119 刪除資料加入按鈕事件 // 取得刪除按鈕事件 $("#messagesdiv").on("click", "input.del", function () { DeleteNode($(this).attr('data-key')); });

120 刪除資料加入對應的函數 DeleteNode // 刪除資料 function DeleteNode(nodeid) { // Get a key for a new Post. var uid = localstorage.getitem("uid"); // 取回 uid var db = firebase.database(); db.ref("user/" + uid + "/" + nodeid).remove( function (error) { if (error) alert(' 刪除失敗 '); else { alert(' 刪除成功 '); $('#showdata').click(); } }); }

121 修改資料加入按鈕事件 // 取得修改按鈕事件 $("#messagesdiv").on("click", "input.modify", function () { var newname = $('#newname').val(); var newage = $('#newage').val(); writenewpost($(this).attr('data-key'), newname, newage) //alert($(this).attr('data-key')); });

122 修改資料加入對應的函數 writenewpost // 修改資料 function writenewpost(nodeid, name, age) { // 修改資料集 var postdata = { name: name, age: age }; var uid = localstorage.getitem("uid"); // 取回 uid var db = firebase.database(); db.ref("user/" + uid + "/" + nodeid).update(postdata, function (error) { if (error) alert(' 修改失敗 '); else { alert(' 修改成功 '); $('#showdata').click(); } }); }

123 Android Application by /PWD

124 Android vs. Firbase auth 2016/10 v1 th/android/password-auth

125 Create a New Project

126 導入 Firebase Android API 加入 firebase SDK

127 app buid.gradle 加入 compile 'com.google.firebase:firebaseauth:9.6.1'

128 取得開發環境金鑰的指紋碼選取並複製 SHA1 後方的指紋碼

129 取得 google-services.json 設定檔

130 下載設定檔 google-service.json

131 放入 google-service.json

132 google-service.json 這裏面有連結到 firebase 的資訊

133 最後 build.gradle 中加入必要的函式庫與外掛語法

134 專案層級的 build.gradle

135 應用程式階層的 build.gradle 最後, 請按一下顯示在 IDE 中工具列上的 [ 立即同步處理 ]

136 如果錯誤 Error:Execution failed for task ':app:processdebuggoogleservices'. > Missing api_key/current_key object 重新再產生一次 google-service.json 裡面就會有 api_key": [ { "current_key"

137 Firebase Notification

138 更新 Google Repository

$加入修正 app\build.gradle compile 'com.google.$

139 加入修正 app\build.gradle compile 'com.google.firebase:firebasecore:9.6.1 compile 'com.google.firebase:firebasemessaging:9.6.1'

140 In Firebase

141 設定訊息與發送對象當初設定的 packagename

142 建立帳號

143 LAYOUT <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 帳號 :" android:textsize="20sp" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>

144 LAYOUT <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 密碼 :" android:textsize="20sp" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onclick="signup" android:text="register" /> </LinearLayout> </LinearLayout>

145 CODE private FirebaseAuth mauth; private EditText m field; private EditText protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } mauth = FirebaseAuth.getInstance(); m field = (EditText) findviewbyid(r.id.field_ ); mpasswordfield = (EditText) findviewbyid(r.id.field_password);

146 CODE // 註冊帳號按鈕 public void signup(view v){ mauth.createuserwith andpassword( m field.gettext().tostring(), mpasswordfield.gettext().tostring()).addoncompletelistener(this, new OnCompleteListener<AuthResult>() public void oncomplete(@nonnull Task<AuthResult> task) { Toast.makeText(Main.this, "Sign-up successfully", Toast.LENGTH_SHORT).show(); if (!task.issuccessful()) { Toast.makeText(Main.this, "Sign-up FAIL", Toast.LENGTH_SHORT).show(); } } }); }

147 登入

148 UI 加入 login button <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onclick="login" android:text="login" />

149 private FirebaseAuth.AuthStateListener protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); mauth = FirebaseAuth.getInstance(); m field = (EditText) findviewbyid(r.id.field_ ); mpasswordfield = (EditText) findviewbyid(r.id.field_password); } mauthlistener = new FirebaseAuth.AuthStateListener() public void onauthstatechanged(@nonnull FirebaseAuth firebaseauth) { FirebaseUser user = firebaseauth.getcurrentuser(); if (user!= null) { // User is signed in Log.d("AAA", "onauthstatechanged:signed_in:" + user.getuid()); Toast.makeText(Main.this, " 歡迎登入 Firebase:" + user.getuid(),toast.length_short).show(); } else { // User is signed out Log.d("AAA", "onauthstatechanged:signed_out"); Toast.makeText(Main.this, " 您已登出 Firebase",Toast.LENGTH_SHORT).show(); } } };

150 // 登入 public void login(view v) { mauth.signinwith andpassword(m field.gettext().tostring(), mpasswordfield.gettext().tostring()).addoncompletelistener(this, new OnCompleteListener<AuthResult>() public void oncomplete(@nonnull Task<AuthResult> task) { Log.d("AAA", "signinwith oncomplete:" + task.issuccessful()); if (!task.issuccessful()) { Log.w("AAA", "signinwith failed", task.getexception()); Toast.makeText(Main.this, " 認證錯誤 ",Toast.LENGTH_SHORT).show(); } } }); protected void onstart() { super.onstart(); mauth.addauthstatelistener(mauthlistener); protected void onstop() { super.onstop(); if (mauthlistener!= null) { mauth.removeauthstatelistener(mauthlistener); } }

151 登出

152 UI 加入 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="logout" android:onclick="logout" />

153 code // 登出 public void logout(view v) { FirebaseAuth.getInstance().signOut(); }

154 寫入資料

155 修改 build.gradle 加入 compile 'com.google.firebase:firebasedatabase:9.6.1'

156 // 寫入資料寫入資料 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="writedata" android:onclick="writedata" /> public void writedata(view v) { FirebaseDatabase database = FirebaseDatabase.getInstance(); DatabaseReference myref = database.getreference("contacts"); // myref.setvalue("abcd").addoncompletelistener(this, new OnCompleteListener<Void>() { // public void oncomplete(@nonnull Task<Void> task) { // if (!task.issuccessful()) { // Toast.makeText(Main1.this, "Write FAIL", Toast.LENGTH_SHORT).show(); // } // } // }); User user = new User("ctuim", 23); myref.push().setvalue(user).addoncompletelistener(this, new OnCompleteListener<Void>() public void oncomplete(@nonnull Task<Void> task) { if (!task.issuccessful()) { Toast.makeText(Main1.this, "Write FAIL", Toast.LENGTH_SHORT).show(); } } }); }

157 配合 UID 寫入資料 String loginuseruid; // 取得登入者 FIRBASE 上的 UID 在 onauthstatechanged 中加入 loginuseruid=user.getuid(); 修正下面紅框部分 User user = new User("ctuim", 23); myref.child(loginuseruid).push().setvalue(user).addoncompletelistene r 注意要判斷 loginuserid 是否有值?

158 配合設定 rules 第一個節點第二個節點 ( 使用者的 UID) 設定讀寫規則需要節點 UID== 登入認證的 UID

159 顯示資料

160 使用 ListView UI 加入 <ListView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" />

161 String loginuseruid; // 取得登入者 FIRBASE 上的 UID ArrayAdapter<String> adapter; //FOR Listview 下段加入 oncreate(bundle savedinstancestate) // 使用 listview ListView list = (ListView) findviewbyid(r.id.listview2); adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,android.R.id.text1); list.setadapter(adapter);

162 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="showdata" android:onclick="showdata" /> public void showdata(view v) { if (loginuseruid!= null) { FirebaseDatabase database = FirebaseDatabase.getInstance(); DatabaseReference myref = database.getreference("contacts/" + loginuseruid);// Read from the database myref.addvalueeventlistener(new ValueEventListener() public void ondatachange(com.google.firebase.database.datasnapshot datasnapshot) { for (DataSnapshot child : datasnapshot.getchildren()) { adapter.add(datasnapshot.child(child.getkey()).child("name").getvalue(string.class)); } public void oncancelled(databaseerror error) { // Failed to read value } Toast.makeText(Main1.this, " 讀取失敗 ", Toast.LENGTH_SHORT).show(); } }); } else { Toast.makeText(Main1.this, " 尚未登入 ", Toast.LENGTH_SHORT).show(); }

163 Storage

164 設定需要啟動加入 JS CODE 設定上傳的節點

165 執行

166 Firebase

多媒體應用 13 新增專案並完成版面配置 <ExMusic01> <activity_main.xml> ImageView ID imgplay ImageView ID imgstop ImageView ID imgfront TextView ID txtsong TextView ID t

多媒體應用 13 新增專案並完成版面配置 <ExMusic01> <activity_main.xml> ImageView ID imgplay ImageView ID imgstop ImageView ID imgfront TextView ID txtsong TextView ID t 設定存取 SD 卡的權限 SD SD 13.1.4