라즈베리파이 전자액자 만들기 ⑤ : 매직미러(Magic Mirror2) 구글포토 연동하기

https://sohyemin.tistory.com/332?category=821094 

#18/28 [매직미러 HowTo] / 스텝 3

#18/28 [매직미러 HowTo] / 스텝 3

 

MMM-GooglePhotos 설치

git clone https://github.com/eouia/MMM-GooglePhotos.git
cd MMM-GooglePhotos
npm install

구글 API 받아오기

• Google Cloude Platform 에서 프로젝트 생성
  
  • 프로젝트 이름은 자유. 나는 'SB-MagicMirror'
• 메뉴 -> API 및 서비스 -> 라이브러리 -> 'photo library api' 검색 -> 클릭해서 '사용' 클릭
  • 공식사이트에는 'google plus'도 활성화 해주어야 한다고 나와있는데 일단 안하고 계속해보고 안되면 활성화해보자.

• '사용자 인증 정보' 만들기
  • 인증 정보 만들 때, 사용자/애플리케이션 데이터 뭘 선택해야 될 지 몰라서.. 일단 사용자로 선택함
  • Oauth 동의화면에서 앱이름,구글이메일,개발자이메일(본인 이메일) 입력
  • Oauth 클라이언트 ID에서 애플리케이션 유형은 'TV 및 입력 기기 제한'으로 선택하고 이름 적고 만들기
    -> 2022.04 기준 'TV 및 입력 기기 제한'으로 하면 에러가 났고 '데스크톱'으로 하니까 작동했음. 아래 참고
  • 다 만들고 나면 '클라이언트 ID' 라고 보임.
  • 다운로드 아이콘이 보이는데 클릭하면 'clent_secret_-----.json'파일이 다운로드 됨. 이 파일을 'credentials.json'으로 저장해서 MMM-GooglePhotos'폴더에 붙여넣기

• json파일을 붙여넣었다면 터미널을 열어서 아래 명령어 입력
  • node generate_token.js : node는 외부 명령어를 실행해주는 커맨드로 'generate_token.js'의 명령들을 실행함
  • 나는 아래와 같은 오류가 났음 ㅜㅜ 
  • Oauth클라이언트ID를 새로 만들면서 '데스크톱'으로 설정하니까 작동 됨! 아마도 최근에 업데이트하면서 뭔가 바뀐거 같은데...일단 깃허브에 최근 이슈 중에서 이렇게 해서 해결을 했다길래 따라함.
  • 참고 링크 : https://github.com/aneaville/MMM-GooglePhotos/issues/138

cd ~/MagicMirror/modules/MMM-GooglePhotos
node generate_token.js

sb@raspberrypi:~/MagicMirror/modules/MMM-GooglePhotos $ node generate_token.js [GPHOTOS:CORE] TypeError: Cannot read properties of undefined (reading '0') /home/sb/MagicMirror/modules/MMM-GooglePhotos/GPhotos.js:133       throw e       ^   TypeError: Cannot read properties of undefined (reading '0')     at new Auth (/home/sb/MagicMirror/modules/MMM-GooglePhotos/GPhotos.js:35:91)     at GPhotos.onAuthReady (/home/sb/MagicMirror/modules/MMM-GooglePhotos/GPhotos.js:130:14)     at GPhotos.generateToken (/home/sb/MagicMirror/modules/MMM-GooglePhotos/GPhotos.js:141:10)     at Object.<anonymous> (/home/sb/MagicMirror/modules/MMM-GooglePhotos/generate_token.js:10:9)     at Module._compile (node:internal/modules/cjs/loader:1103:14)     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)     at Module.load (node:internal/modules/cjs/loader:981:32)     at Function.Module._load (node:internal/modules/cjs/loader:822:12)     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)     at node:internal/main/run_main_module:17:47

 

• 에러를 해결하고 node를 실행시키고 나면 구글 창이 켜지면서 로그인을 하라고 함. 계정 로그인을 하고 나면 '승인 오류' 라는 굉장히 불안한 화면이 뜸. 
  • 다시 구글 클라우드 플랫폼에 들어가서 테스트 사용자 추가를 해주자

 

• 다시 node 명령어를 실행시켜주면 승인 오류 는 사라지고 뭔가 넘어가는 화면이 나옴
• 계속해서 넘어가다보면 액세스 권한을 허용하는 창에서 허용에 체크를 해주고 계속
• 근데 또 방화벽이 어쩌고, localhost 에서 연결을 거부했습니다 라는 오류가 뜸
• 당황하지말고 주소창을 보면 우리가 필요한 code가 나와있음!
  - 'code="4/~~"&scope='라는게 보일텐데 = 다음부터 & 앞까지 복사해서 터미널에 붙여넣어주자
• 터미널에 붙여넣어준 후 'Token is refreshed' 'Token is generated' 라는 문구가 보이면 성공!

 

마지막으로 Config 작성을 해주자

• 지난번에 Magic Mirror의 Module을 만졌었는데, 그 때와 동일하게 config.js에서 weather 위쪽에 복사를 해서 넣어주자.(사실 위치는 어디든 상관없음. 대신 ',' 조심)
  • MagicMirror/config/config.js
  • position은 'fullscreen_below'로 하면 전체화면에 보여짐.
  • albums: [] 안에 본인이 만든 구글포토 앨범이름을 적어준다.
  • sort 는 random으로 설정함.
  • updateInterval : 1000 * 60 은 단위가 1/1000초라서 1000*60은 60초=1분마다 사진이 업데이트된다.
  •  

{
  module: "MMM-GooglePhotos",
  position: "fullscreen_below",
  config: {
		albums: ["Sunsha"], // Set your album name. like ["My wedding", "family share", "Travle to Paris"]
		updateInterval: 1000 * 60, // minimum 10 seconds.
		sort: "random", // "new", "old", "random"
		uploadAlbum: null, // Only album created by `create_uploadable_album.js`.
		condition: {
			fromDate: null, // Or "2018-03", RFC ... format available
			toDate: null, // Or "2019-12-25",
			minWidth: null, // Or 400
			maxWidth: null, // Or 8000
			minHeight: null, // Or 400
			maxHeight: null, // Or 8000
			minWHRatio: null,
			maxWHRatio: null,
			// WHRatio = Width/Height ratio ( ==1 : Squared Photo,   < 1 : Portraited Photo, > 1 : Landscaped Photo)
		},
		showWidth: 1080, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirror region is recommended.
		showHeight: 1920,
		timeFormat: "YYYY/MM/DD HH:mm", // Or `relative` can be used.
  }
},

 

자 여기까지 완료했다면 MagicMirror 폴더로 가서 npm run start 를 갈겨보자!

 

 

근데 까만 화면만 나는 나옴 ㅜㅜㅜ

또 혼자서 삽질하다 해맸는데...albums 배열 안에 "" 로 이름 표시해줘야합니다!!!

앨범을 불러오는 시간을 좀 기다리면 나옴!!

끼얏호!