Google Drive API V3 與 Angluar 整合 Example

-

Google Drive API V3 與 Angluar 整合範例

https://github.com/kirinchen/google-drive-angular/

大致的功能如下

  • 登入/登出
  • 顯示列表By File Tyoe demo-list.jpg
  • read 檔案內容 demo-filebody.jpg
  1. 如何申請Google Drive 開發者金鑰和Oauth
  2. 下載專案與專案設定
  3. Run Server

如何申請Google Drive 開發者金鑰和Oauth

最近本人開始騎單車的爬坡,所以開發了一個爬坡小工具,那就會用到Google Map API,這邊先做個預告,順便寫個Gmap小筆記啦

創建API Key

1.先到 Google雲端後台 . https://console.developers.google.com/apis/dashboard

2.請先選擇一個專案 (如果沒有請按建立) accept.jpg

3.啟用API,

  • 資料庫 >
  • 搜尋 : Google Drive API
  • 啟用 Google Drive API
  1. 先到憑證,並建立API KEY accept.jpg accept.jpg certificatedone.jpg

5.再到 Google雲端後台 . Google Cloud Platform Console 並選則憑證 go-cert-page.jpg

這邊可以看之前申請的Key,也可以複製金鑰

建立OAuth 2.0 用戶端 ID

  1. 建立OAuth 同意畫面填入基本資料即可 certificatedone.jpg

  2. 選擇建立OAuth 2.0 用戶端 ID certificatedone.jpg

下載專案與專案設定

  1. 下載 https://github.com/kirinchen/google-drive-angular.git 或者 git clone https://github.com/kirinchen/google-drive-angular.git
  2. cd 到 [root ]] 專案下/
  3. run npm install
  4. 修改 [root]/src/environments/environment.ts
export const environment = {
  production: false,
  clientId: '{OAuth 2.0 用戶端 ID}',
  apiKey: '{API KEY}'
};

Run server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Dev

Main Logic is src/app/auth/auth.component.ts

留言

張貼留言

這個網誌中的熱門文章

Google Map 單車路徑計算坡度和角度小工具

-
圖片
  Google Map 單車路徑計算坡度和角度小工具 本人最近開始稍微開始認真騎腳踏車,然後我常用google map 去安排路線(癡迷上自己亂排路線的快感 XD) 但是常常google會帶入非人性化的路線,例如用走的都幾乎走不上去,於似乎本人找了幾個工具 像是 bikeroll 非常直觀好用,但是坡度顯示不精準 (12% ~ 48% <--- 48%會往生XD) 所以本人就想說來開發一個能夠自己決定每幾公尺就計算這個區段的坡度的工具,工具網址如下 https://mapsteepness.web.app 源始碼 Github :  https://github.com/kirinchen/map-steepness-gradient 設定教學 一進入網站就會先到設定頁  https://mapsteepness.web.app/config 設定基本參數 設定說明 A: 設定語系 B: 設定每幾公尺為一個路徑 C :設定 Google Map 金鑰,請看此  教學 Google Map 金鑰要啟用 Directions API / Maps Elevation API / Maps JavaScript API 三個服務 啟用服務教學 :  教學 為什麼要此金鑰,因為Google這幾年增加圖資的費用,所以很多地圖相關的APP都取消服務,而我們採用各自申請金鑰來提供此服務,且沒有超過一定的使用量基本上是免費的 操作教學 1. 準備單車路徑的KML檔案 google map 匯出KML教學 範例檔案 ：  點我下載 KML  Wiki 2. 匯入KML檔案到 mapsteepness 系統中 :  連結   3. 等匯入完成 就可以點選 路徑列表   4. 查看此次路徑，的每個路徑分段，並選擇要在地圖上觀察的分段 可以用上面的過濾器 透過夾角或是坡度來篩選 要的路徑 起點/終點 : 標示路段起點/終點的經緯度 距離 : 該路段的長度 海拔 : 終點的海拔高度 坡度/夾角 : 該路段的爬升坡度,與夾角 選取 : 選區的路段可以顯示在地圖上 5. 顯示在地圖上  5.1 點選其中的一段的路徑 點擊地圖標示 起點/終點   : 起點...
閱讀完整內容

angular 如何Http 如何設定 CORS (Cross-Origin Resource Sharing)

-
如果要對所有送出的 Request 做調整 之前我在寫後台的,就可以使用AOP的方式實作, 而Angular也有類似的架構 如果我們用  @angular/common/http  Angular只要實作 HttpInterceptor  interface就可以了 實作 HttpInterceptor 在cmd輸入 ng g service BasicAuthHtppInterceptor 已建立BasicAuthHtppInterceptorService ,修改內容如下 import { Injectable } from '@angular/core' ; import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http' ; @Injectable ({ providedIn: 'root' }) export class BasicAuthHtppInterceptorService implements HttpInterceptor { constructor ( ) { } intercept(req: HttpRequest< any >, next: HttpHandler) { req = req.clone({ setHeaders: { /*有關CORS的參數就可以改在這裡了*/ 'Access-Control-Allow-Origin' : '*' , 'Access-Control-Allow-Credentials' : 'true' , 'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS, PATCH' , 'Access-Control-Max-Age' : '86400' } }); return ...
閱讀完整內容

10月24日 「方程式編輯器」讓你用Word打數學算式、根號、平方

-
圖片
「方 程式編輯器」是微軟Office 2003內建的一個外掛功能，原本不存在於Word軟體內，不過可以在安裝Office或更新Office時重新安裝「方程式編輯器」這個功能，重開之 後，就可以透過「方程式編輯器」來輸入數學符號、開根號、平方…等等，對於一些相關科系或者中小學老師製作講義，都相當方便唷！ 安裝方法： 第1步 如果你電腦中的Office軟體在一開安裝時有勾選「方程式編輯器」這個項目的話，可以不用執行下面的安裝步驟。 如 我你的Office裡面找不到「方程式編輯器」這功能，則請依照下面方法，先由〔開始〕→【控制台】→「新增或移除程式」，開啟「新增或移除程式」對話 盒，找到之前安裝的「Microsoft Office Professional Edition 2003」項目後，在〔變更〕上按一下滑鼠左鍵。 第2步 出現Office的安裝畫面後，點選「新增或移除功能」，再按一下〔下一步〕。(此時會需要你插入你所購買的Office安裝光碟) 第3步 接著，勾選「選擇應用程式的進階自訂」，然後再按〔下一步〕。 第4步 接著先點選「Office」工具，拉開下拉選單後，點一下【方程式編輯器】，再點選【從我的電腦執行】，最後再按一下〔更新〕，即可將「方程式編輯器」功能安裝到你的電腦中，讓我們可以透過這個編輯器來編輯數學方程式。 使用方法： 第1步 確定你的電腦有安裝「方程式編輯器」功能後，重新開啟Word視窗，當我們要輸入數學算式時，依序按下〔插入〕→【物件】，準備開啟「方程式編輯器」。 第2步 出現「物件」對話盒後，切換到〔建立新物件〕活頁標籤中，再點選【Microsoft 方程式編輯器 3.0】，最後再按下〔確定〕。
閱讀完整內容