★網站前端技術發展太快, 新手很難抉擇要學的東西, 大家學了什麼

CSS:https://colorlib.com/wp/free-css3-frameworks/
JS:https://colorlib.com/wp/javascript-frameworks/
HYBRID APP:https://blog.jscrambler.com/10-frameworks-for-mobile-hybrid-apps/
2d/3d Game:https://www.diycode.cc/topics/16
Desktop:https://electron.atom.io/
IOT:https://webduino.io/

上述只是冰山一角, UI/UX視覺整合, 前端資安, 後端node.js, Social Plugin, SEO, 自動化測試, 大數據分析, 資料視覺化, RWD, AI, Google Map, 語音辨識, 文字轉發音, 影像辨識, VR/AR, Webphone, WebRTC, midi, GrouthHacker, 程式混淆壓縮加密, 程式編譯如Typescript/Kotlin編譯成js, 版控只能git了,讓你玩不完....老實說有點噁心, 而且沒談到各框架生態系與外掛....哈哈 Orz

後端工作如後台開發, 金流, 後台資安, 大數據分析, 自動化測試, 排程, BOT, 轉檔, 檔案管理, RESTFUL API撰寫, 伺服器調教維運, 資料庫調教維運, LOG管理, 種類相較較少, 當然不是說比前端簡單, 後端工作需要深度學習與經驗. 個人推薦python作為後端開發程式會很省力, 因為投資報酬率還不錯. 或者想省掉後端管理的工就用firebase也是不錯選擇

2016年2月13日 星期六

Blogger 也可以有免費資料庫永久無限量存取功能 - 非Cookie (Google Blogger API V3)

大部分人都喜歡用痞客邦、或自己架 Wordpress 來撰寫部落格,其實 Blogger 也是很好的選擇。它的優點是可以自訂或載入外部 css, html, javascript 都沒問題,SEO也幫你優化,幾乎你想要的功能與視覺都能呈現出來;但如果你是網站工程師且熟悉 Blogger,那你一定很了解它唯一缺憾,是沒有像資料庫一樣存取功能來讓網站開發更多互動功能。可能很多人不知道 Google 針對 Blogger 部分也開放 API,讓軟體開發者透過 Blogger API 與 Blogger 互動,做到在網站、手機、其他應用程式可以針對指定文章或網頁新增、修改、刪除等動作。如果你的感覺很敏銳,那你應該知道,我們是否可以透過此功能,在文章或網頁進行修改存取時,放入使用者資訊,變成隨時可以存取的資料庫。用 blogger 開發 Web APP 絕對辦得到~要跳槽嗎?~哈!

官方資源
Blogger API 官方基礎指南
Blogger API 官方範例javascript客戶端程式開發指南
Blogger API 查詢

官方資源有看沒有懂沒關係,照著作者步驟來做:(本網誌左上角login按鈕就是存取實作範例)
1.Google Developers Console建立新專案
2.啟用 Blogger API v3
3.申請 API 金鑰,應該長這樣 AIzaSxBCWs3ks1DccyRmhvomBjWNFj6ONgVQIV0 (範例碼)
4.申請 OAuth 用戶端 ID,應該長這樣 800215999663-b4n3loctoaetx7gtnavvm5m7io3rgh4a.apps.googleusercontent.com (範例碼)
5.新增 Blogger 網頁並進入編輯模式,請把網址列 blogID 跟 postID 記錄下來,blogID 應為 1243191245343241160(範例碼),postID 應為 6160462135247944473(範例碼)。我們將針對此網頁進行程式資料存取,也就是我們的小型資料庫。
6.撰寫程式碼


  <!--增加一個應用程式授權按鈕-->
  <button id="authorize-button" style="visibility: hidden">Authorize</button>
  <script>
  
  //blogger api 小型資料庫存取實作
  var clientId = '800215999663-b4n3loctoaetx7gtnavvm5m7io3rgh4a.apps.googleusercontent.com';
  var apiKey = 'AIzaSxBCWs3ks1DccyRmhvomBjWNFj6ONgVQIV0';
  var scopes = 'https://www.googleapis.com/auth/blogger';
  var blogID = '1243191245343241160';
  var postID = '6160462135247944473';

  function handleClientLoad() {
    // 步驟2: 設定 API 金鑰
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
  }

  function checkAuth() {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
  }

  function handleAuthResult(authResult) {
    var authorizeButton = document.getElementById('authorize-button');
    if (authResult && !authResult.error) {
      authorizeButton.style.visibility = 'hidden';
      makeApiCall();
    } else {
      authorizeButton.style.visibility = '';
      authorizeButton.onclick = handleAuthClick;
    }
  }

  function handleAuthClick(event) {
    // 步驟3: 通過授權以存取資料
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
    return false;
  }

  function makeApiCall() {
    // 步驟4: 讀取 Google blogger API 並執行存取動作
    var request;
    gapi.client.load('blogger', 'v3', function() {
      request = gapi.client.blogger.pages.get({'blogId':blogID,'pageId':postID});
      // 執行讀取
      request.execute(function(response) {
          console.log(response);
          // 執行寫入
          var save_data = {user_name:"test",user_password:"test2"};
          save_data = JSON.stringify(save_data); //以JSON字串存入
          request = gapi.client.blogger.pages.update({'blogId':blogID,'pageId':postID,'content':save_data});
          request.execute(function(response) {
            console.log(response);
          });
      });
    });
  }


  </script>
  <!-- 步驟1: 讀取 JavaScript client library -->
  <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
  

3 則留言:

  1. 沒有很懂,請問這個範例是要做些什麼呢?

    回覆刪除
  2. 彷彿懂一點了,這是指把資料以 json 格式寫在某一個指定的網頁 (網址) 嗎?

    但這樣並沒辦法像真正的資料庫一樣操作,挺麻煩的… 感覺不實用呀…

    回覆刪除
  3. 玩玩看網站最上面login功能,不要用FB登入

    回覆刪除