Firebase Firebase Analytics의 맞춤 이벤트 데이터를 이달, 지난 달로 좁히고 redash로 봅니다. 한 것을 Redash로 표시하고 싶고 일단 할 수 있었으므로 메모. 기능을 사용하여 애널리틱스 데이터와 앱 데이터를 통합할 수 있습니다. 자세한 Firebase 데이터를 BigQuery에 넣는 방법은 여기 에서 확인하십시오. Redash에서 BigQuery를 데이터 소스에 추가하려면 을 확인하세요. Firebase 데이터 소스를 선택할 수 있게 되면 아래와 같은 날짜별로 작성된 이벤트 데이터... FirebaseBigQueryredash Re:dash에서 Firebase Analytics의 BigQuery에서 코호트를 표시하는 방법 FirebaseAnalytics를 사용하고 있습니까? 무료로 여기까지 해주는 것은 꽤 고맙습니다. 나는 특히 Retension 페이지를 잘 보지만 여기에서는 필터링 할 수 없으며 새로운 사용자에 대한 코호트 만 볼 수 있습니다. 신규 유저 뿐만이 아니라, 어느 시점에서 특정 상태였던 사람의 계속율을 보고 싶은 경우가 있었기 때문에, 처음에 신규 유저에 관한 코호트를 Re:dash로 재현하기로... FirebaseAnalyticsFirebaseBigQueryredash React×Stripe×Firebase×Express로 아마존 클론을 만들었다 React의 백엔드 처리와 결제 처리 기능을 폭속으로 구현할 수 있다고 화제의 Stripe를 습득하기 위해 구현했습니다. React에서의 Stripe 구현의 참고가 되면. 또, React의 최신의 쓰는 방법에 준한 코드를 유의하고 있으므로, React를 공부중의 분에게는 Github 리포지토리가 참고가 된다고 생각합니다. React JavaScript (ES6) Hooks Functional... Firebase스트라이프ReactExpress후크 Firebase Authentication은 토큰 인증을 사용하는 이야기 요 전날 Firebase를 이용하여 Vue.js에서 만든 SPA(Single Page Application)에 인증 기능을 폭속으로 구현한 적이 있었다. Firebase가 제공하는 공식 을 사용하여 1시간과 100행 이내의 구현으로 인증 기능을 만들 수 있었다. 이 기사에서는 Firebase SDK의 뒷면을 탐구하고 Firebase Authentication의 구조를 이해하고 구현한 소감을 ... authenticationFirebaseJWT초보자FirebaseAuth Vue + Firebase로 환경 구축 ~ 배포까지 【첫 투고】 참고 사이트 Vue CLI를 설치하지 않은 사람은 터미널에서 실행합니다. 둘째, 질문을 받지만 모두 Enter 여기서 디렉토리를 조금 만지십시오. src/main.js 를 추가합니다. 어디에서 apiKey등을 가져올까라고 하면, Firebase에 날아 주어, 우상의 「콘솔에 이동」을 클릭. 프로젝트 선택. 아래 이미지와 같이 "프로젝트 설정"을 클릭하십시오. 페이지를 이동하면 아래로 스크롤하... Firebasevue-clivue-routerVue.jsFirebaseRealtimeDatabase 대량 or 동시에 도착하는 Webhook을 서버리스로 간편하게 확인 흘려도 좋기 때문에 간편하게 확인한다 통지 용도로 대량으로 통지되는 Webhook가 public인 네트워크를 통해 누출 없이 도착하는지, 내용이 문제가 없는지, 확인할 필요가 있었다. 다만, 일일이 서버 세워・・・라고 하는 것은 귀찮아서 서버리스로 할 수 없을지도 검토했다. 다만, 잠시 사용하고 있으면 통지가 닿지 않게 되거나, 동시에 받은 Webhook를 쏟아내는 일이 있기 때문에, 누설 ... FirebaseWebhookserverlessGoogleAppsScriptgas 【Cloud Storage for Firebase】~has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 클라이언트의 javascript에서 Cloud Storage for Firebase의 이미지 데이터를 처리하려고 할 때, 이와 같은 오류가 발생했습니다. ~has been blocked by CORS policy: No 'Access-Control-Allow-Origin' CORS에 대한 설명이 많으므로 이 해결 방법을 공유합니다. cors.json 여기서 https://example.com... CORSFirebaseCloudStorageFirestore Firebase Functions [onCall]을 사용하는 함수로 CORS가 발생합니다. Firebase Functions에서는 미리 다음과 같은 함수를 제공합니다. server.ts Firebase Hosting에 배포하는 웹 사이트에서 누구나 사용할 수있는 기능으로 사용할 수 있으며,onCall 를 사용하여 정의하고 있습니다. 이상의 함수를, 클라이언트측에서, 다음과 같이 호출합니다. client.ts 그러면 다음과 같은 오류가 발생했습니다. 그리고 , 나쁜 것이 , loca... FirebaseCORSFirebaseCloudFunctions자바스크립트GoogleCloudPlatform firebase functions는 region을 잘못해도 CORS가 된다 Nuxt+Vue로 웹 앱을 만들 때 firebase functions를 API로 이용했다. API functions/index.js 클라이언트 store/index.js API 측에서는 region을 northeast로 설정했다 그럼에도 불구하고 클라이언트 측에서 functions region을 지정하지 않았습니다. 디폴트의 us-central에 액세스 되어 버려 CORS가 되었다 공식 문서... CORSFirebasenuxt.jsFirestore 갑자기 axios로 URL을 요청할 수 없습니다! ? 지금까지 보통으로 운용되고 있던 시스템에서 axios를 이용해 URL 리퀘스트를 행하고 있는 개소로부터 상기와 같은 에러가. from origin ' ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 오~ CORS의 오류, 응~ CORS 주변... CORSFirebase자바스크립트axios PlantUML로 Firebase 아키텍처 작성 시퀀스 다이어그램을 작성할 때는 PlantUML을 편리하게 사용하고 Firebase를 사용하여 아키텍처를 만들 때 아이콘이 있으면 조금 멋지게 보이지 않는다고 생각했기 때문에 만들었습니다. 사용법은 README에 쓰고 있는 그대로입니다만, 아래와 같이 되어 있습니다.... Firebaseplantuml GitHub Actions에서 React + Firebase 프로젝트를 CI/CD로 자동 배포한 이야기 얼마 전의 웹 서비스를 만들 때 2020년에 릴리스된 GitHubActions 에서 CI/CD(계속적 통합/계속적 딜리버리)를 해 보았으므로, 가볍게 흐름을 투고합니다. 프로젝트를 수정 한 후 매번 빌드 또는 배포를 실행하는 것이 번거롭기 때문에 자동화하고 싶습니다. 트렌드 CI/CD를 사용한 적이 없기 때문에 공부하고 싶습니다 firebase login:ci 명령을 실행합니다. 컨테이너나 ... FirebaseReactGitHub자동 배포CICD Angular : Firestore의 데이터를 페이지 네이션하고 싶다 ② ~ Material2의 Paginator를 사용 마지막: 모처럼 멋있는 Material2의 Paginator라는 부품이 있으므로 사용해보고 싶다. 정식 매뉴얼은 이쪽. 환경 app.module.ts Material2를 사용 중이라면 평소대로. app.module.ts에 MatPaginatorModule을 추가합니다. app.module.ts Paginator 붙이기 우선은 UI에 Material2의 Paginator를 붙인다. 위 환경에서... AngularFirebaseMaterialDesign페이지네이션Firestore React Hooks에서 Covid19 트래커 앱 만들기 React 연습, 특히 Hooks x Web API를 습득하기 위해 제작되었습니다. Covid19의 데이터는 disease.sh의 API에서 가져옵니다. 사이트의 내용으로는 세계 각국의 CoronaViruses Cases, Deaths, Recoverd 통계를 확인할 수 있습니다. React의 Hooks에 의한 State 관리는 정말 강력하네요. 그래서 간단하고 쓰기 쉽고 생산성이 매우 높습... FirebaseReactFunctionalProgrammingCOVID-19후크 길보 보고 앱을 만들어 보았다! 라는 이야기 조금이라도 건강해지는 시스템 개발할 수 없을까~라고 생각하고, 길보를 전사에서 기뻐하기 위한 앱을 개발했습니다. 개발 한계가 이틀 밖에 없었기 때문에, 만들지 않았습니다. (그 중 하루는 어떤 음악이 텐션 오르는지에 지출했습니다.) 채팅 워크에 메시지를 보내면 Mac을 연결하고 있는 모니터에 텐션이 오르는 음악과 함께 길보가 보고됩니다. ※본래라면, 텐션이 오르는 음악이 흐릅니다. 이 구성은... FirebaseElectron자바스크립트Node.jsChatwork Firebase를 사용해 보았습니다 ~ 제 3 장 Firestore에서 데이터 가져 오기 ~ React Hooks를 사용하여 채팅봇 앱을 만들고 있습니다. 이 장에서는 Firestore에 저장한 중에서 초기 데이터를 검색할 때까지 수행합니다. 제3장 Firestore에서 데이터 얻기 src 디렉토리 아래에 'firebase' 디렉토리를 만들고 그 안에 'config.js' 파일을 만듭니다. Firebase 페이지로 이동하여 프로젝트 설정 화면으로 이동합니다. 하단의 Firebase ... FirebaseReact후크apiFirestore Firebase를 사용해 보았습니다 ~ 제 2 장 Firestore에 데이터 저장 ~ React Hooks를 사용하여 채팅봇 앱을 만들고 있습니다. 이 장에서는 API를 사용하여 Firestore에 채팅봇 앱에서 사용할 데이터를 저장합니다. 제2장 Firestore에 데이터 저장 json 유형의 데이터 파일을 생성합니다. (json 파일을 쓰는 법을 모르겠습니다 ...라고하는 경우는 저는 챗봇에서 사용하는 응답 내용이나 사용자 선택 등을 json 형식으로 만들었습니다. Clo... FirebaseReact후크apiFirestore Google 홈에서 '에어컨 켜기'를 시도합니다. Google Home에서 에어컨을 조작할 수 있게 되었다 주의) 조금 소리가 작습니다 Raspberry Pi 약 5000엔 ( ) Google Home mini 약 3300엔(세일 가격) ( ) Google Home mini를 벽걸이로 하는 어댑터 약 1900엔 ( ) ESPr IR 약 3000 엔 Switch Science의 ESP-Wroom-02 + 적외선 모듈 등이 내장 된 개발 보드 ... LIRCFirebaseGoogleHomeESP-WROOM-02 【Vue.js】Firebase Hosting을 사용한 배포까지의 흐름 【Nuxt.js】 Vue.js, Nuxt.js 애플리케이션의 배포를 가정합니다. · firebase 프로젝트 · Google 계정 · 노드, npm 환경 · Vue.js 또는 Nuxt.js 애플리케이션 Firebase로 작업하기 위해 Firebase-CLI를 설치합니다. 터미널 버전이 표시되면 설치 완료입니다. 터미널 터미널 터미널 Y를 입력하고 Enter 브라우저가 시작됨 자신의 Google 계정을 선택하세... FirebaseFirebaseHostingVue.jsnuxt.js배포 Firebase(한 번 배포되었으며 업데이트 배포를 수행할 때의 명령) 첫 번째 배포가 완료되었다고 가정 배포가 쉬웠기 때문에 포트폴리 배포에 Firebase를 사용했습니다. 그러나, 업데이트 작업 후 다시 배포를 시도했는데 명령을 잊고 있었으므로 비망록으로 남기기로했습니다. Firebase의 아래 폴더에 배포 (업데이트)합니다. cd 에서 해당 디렉토리로 이동 터미널 이것으로 배포(업데이트)가 완료됩니다.... 배포업데이트Firebase Typescript×React×Hooks로 회원관리③Formik과 Yup에서 폼바리데이션 지난번에는 Typescript×React×Hooks 및 Firebase Authentication을 사용하여 작성한 회원 관리 앱에 Context를 활용한 상태 관리를 도입하여 앱의 규모 확대에 대한 내성을 강화했습니다. 이번에는 Formik과 Yup을 활용하여 폼 바리데이션을 추가하겠습니다. 총 3회의 내용은 아래와 같습니다. Formik 및 Yup에서 양식 유효성 검사 Firebase A... FirebaseReactTypeScriptreact-hooksFirebaseAuth Firebase + Express + Pug로 동적 페이지를 localhost로 호스팅 아직의 사람은 이쪽의 페이지를 부디( ) Firebase 계정 및 호스팅 프로젝트 생성이 완료되었다고 가정합니다. 아직의 사람은 이쪽의 페이지를 부디 ( ) 기존 Express 프로젝트를 번거롭지 않고 Firebase에서 이동하고 싶습니다. 'firebase init' 뒤의 첫 번째 질문에서 'Functions'와 'Hosting'에 체크를 넣어두면, 나중의 질문은 모두 디폴트 그대로 건너뛸... pugFirebaseExpress지역Node.js LINE Bot "나침반 팬더(ver0)" 몇 달 전부터 묵묵히 개발하고 있던 LINE Bot 「나침반 팬더」가 완성되었으므로 정리합니다. 소스 코드와 개요는 에서 공개하고 있습니다. 개요나 사용법에 관한 설명은 링크처의 문서에서 기술하고 있습니다. 이 기사에서는 기술적인 이야기로만 좁힙니다. 후, LT 등에 사용하고 싶기 때문에 슬라이드 형식입니다. 기본적으로 사용자는 빨간색 화살표처럼 LINE Bot과의 상호 작용만으로이 응용 프... Firebase자바스크립트leafletlinebot CloudFirestore의 array를 사용해보기 CloudFirestore의 array를 사용하고 있는 기사가 별로 발견되지 않았으므로, 비망록적으로 남겨 둔다. 기재할 것 CloudFirestore 필드의 배열 유형 사용 (이번에는 추가) 기재하지 않는 것 Firebase 프로젝트를 만드는 방법 아래 사진과 같이 favorite_dog 라는 배열을 만들고 그 안에 좋아하는 개 이름을 넣어가는 코드를 만든다. main.dart update... FirebasearrayCloudFirestoreFlutter Nuxt.js + Heroku에서 환경 변수가 통과하지 않을 때의 확인 사항 heroku 로 환경 변수가 잘 통과하지 않았던 적이 있었으므로 자신용으로 메모. nuxt.config.js 에서 확인할 수 있습니다. Firebase의 경우 value 는 'abc' 이면 통과하지 않을 수 있습니다.abc 라고 하는 쓰는 방법이 되어 있는지 체크해 봅시다. webpack 등을 사용하는 경우 heroku에서 환경 변수를 설정한 후 다시 컴파일해야 합니다. 재부팅에서는 안되는 ... 경 6Firebasenuxt.js환경 변수.env Firebase 프로젝트를 삭제할 수 없을 때 한 일 이전에 만들고 사용하지 않은 Firebase 프로젝트를 삭제하려고 했는데 "You cannot delete this project because it is linked with a Dialogflow agent."라는 표시에서 삭제할 수 없습니다. Cloud Shell 리엔을 삭제할 필요가 표시됩니다. $ gcloud alpha resource-manager liens list 프로젝트가 D... 문제해결Firebasegcpdialogflow Android 앱에서 자연어 처리(DialogFlow) 이전에는 Android 앱에서 DialogFlow를 사용하여 자연 언어 처리 기능을 구현했습니다. DialogFlow를 구현하기 위한 SDK가 Android용으로는 없고, 상당히 끼웠으므로 메모로서 투고했습니다. 조금이라도 도움이 되었으면 좋겠습니다. Android 앱에서 DialogFlow를 호출하기 위해 Cloud function을 사용합니다. Cloud function을 사이에 두어 A... Firebasedialogflow안드로이드자연 언어 처리Kotlin EnOcean의 화장실 센서를 LINE Bot으로 확인 EnOcean의 화장실 센서를 LINE Bot에서 확인해 보았습니다. Dialogflow에서 LINE Bot 연계를 하고 LIFF로 감시 화면을 표시하도록 했습니다. EnOcean에서 화장실 센서를 만들어 본 기사는 여기를 확인하십시오. EnOcean에서 수신한 신호를 라즈파이로 잡아 Firebase에 개폐 상태의 값을 저장하고 있습니다. React를 사용하여 Amazon S3에 설치한 정적... FirebaseReactEnOceanLINEmessagingAPIdialogflow Dialogflow 및 Firebase Cloud Functions에서 Actions On Google의 Node.js Client Library v2 지원 이전에 을 쓰고 나서 반년 정도. . 시대의 흐름은 빠른 것으로, 그 리포트대로 해도 움직이지 않는다! 그래서 간단한 포인트 정리입니다. 이전 보고서와 같이 작동하지 않는 이유는 Firebase Cloud Functions 템플릿을 사용하면 DialogflowApp의 Node.js Client Library가 v2가 되기 때문입니다. 억지로 v1을 사용할 수도 있지만 위의 그림 (Action... actionsongoogleFirebaseGoogleHomedialogflow음성 인식 이전 기사 보기
Firebase Analytics의 맞춤 이벤트 데이터를 이달, 지난 달로 좁히고 redash로 봅니다. 한 것을 Redash로 표시하고 싶고 일단 할 수 있었으므로 메모. 기능을 사용하여 애널리틱스 데이터와 앱 데이터를 통합할 수 있습니다. 자세한 Firebase 데이터를 BigQuery에 넣는 방법은 여기 에서 확인하십시오. Redash에서 BigQuery를 데이터 소스에 추가하려면 을 확인하세요. Firebase 데이터 소스를 선택할 수 있게 되면 아래와 같은 날짜별로 작성된 이벤트 데이터... FirebaseBigQueryredash Re:dash에서 Firebase Analytics의 BigQuery에서 코호트를 표시하는 방법 FirebaseAnalytics를 사용하고 있습니까? 무료로 여기까지 해주는 것은 꽤 고맙습니다. 나는 특히 Retension 페이지를 잘 보지만 여기에서는 필터링 할 수 없으며 새로운 사용자에 대한 코호트 만 볼 수 있습니다. 신규 유저 뿐만이 아니라, 어느 시점에서 특정 상태였던 사람의 계속율을 보고 싶은 경우가 있었기 때문에, 처음에 신규 유저에 관한 코호트를 Re:dash로 재현하기로... FirebaseAnalyticsFirebaseBigQueryredash React×Stripe×Firebase×Express로 아마존 클론을 만들었다 React의 백엔드 처리와 결제 처리 기능을 폭속으로 구현할 수 있다고 화제의 Stripe를 습득하기 위해 구현했습니다. React에서의 Stripe 구현의 참고가 되면. 또, React의 최신의 쓰는 방법에 준한 코드를 유의하고 있으므로, React를 공부중의 분에게는 Github 리포지토리가 참고가 된다고 생각합니다. React JavaScript (ES6) Hooks Functional... Firebase스트라이프ReactExpress후크 Firebase Authentication은 토큰 인증을 사용하는 이야기 요 전날 Firebase를 이용하여 Vue.js에서 만든 SPA(Single Page Application)에 인증 기능을 폭속으로 구현한 적이 있었다. Firebase가 제공하는 공식 을 사용하여 1시간과 100행 이내의 구현으로 인증 기능을 만들 수 있었다. 이 기사에서는 Firebase SDK의 뒷면을 탐구하고 Firebase Authentication의 구조를 이해하고 구현한 소감을 ... authenticationFirebaseJWT초보자FirebaseAuth Vue + Firebase로 환경 구축 ~ 배포까지 【첫 투고】 참고 사이트 Vue CLI를 설치하지 않은 사람은 터미널에서 실행합니다. 둘째, 질문을 받지만 모두 Enter 여기서 디렉토리를 조금 만지십시오. src/main.js 를 추가합니다. 어디에서 apiKey등을 가져올까라고 하면, Firebase에 날아 주어, 우상의 「콘솔에 이동」을 클릭. 프로젝트 선택. 아래 이미지와 같이 "프로젝트 설정"을 클릭하십시오. 페이지를 이동하면 아래로 스크롤하... Firebasevue-clivue-routerVue.jsFirebaseRealtimeDatabase 대량 or 동시에 도착하는 Webhook을 서버리스로 간편하게 확인 흘려도 좋기 때문에 간편하게 확인한다 통지 용도로 대량으로 통지되는 Webhook가 public인 네트워크를 통해 누출 없이 도착하는지, 내용이 문제가 없는지, 확인할 필요가 있었다. 다만, 일일이 서버 세워・・・라고 하는 것은 귀찮아서 서버리스로 할 수 없을지도 검토했다. 다만, 잠시 사용하고 있으면 통지가 닿지 않게 되거나, 동시에 받은 Webhook를 쏟아내는 일이 있기 때문에, 누설 ... FirebaseWebhookserverlessGoogleAppsScriptgas 【Cloud Storage for Firebase】~has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 클라이언트의 javascript에서 Cloud Storage for Firebase의 이미지 데이터를 처리하려고 할 때, 이와 같은 오류가 발생했습니다. ~has been blocked by CORS policy: No 'Access-Control-Allow-Origin' CORS에 대한 설명이 많으므로 이 해결 방법을 공유합니다. cors.json 여기서 https://example.com... CORSFirebaseCloudStorageFirestore Firebase Functions [onCall]을 사용하는 함수로 CORS가 발생합니다. Firebase Functions에서는 미리 다음과 같은 함수를 제공합니다. server.ts Firebase Hosting에 배포하는 웹 사이트에서 누구나 사용할 수있는 기능으로 사용할 수 있으며,onCall 를 사용하여 정의하고 있습니다. 이상의 함수를, 클라이언트측에서, 다음과 같이 호출합니다. client.ts 그러면 다음과 같은 오류가 발생했습니다. 그리고 , 나쁜 것이 , loca... FirebaseCORSFirebaseCloudFunctions자바스크립트GoogleCloudPlatform firebase functions는 region을 잘못해도 CORS가 된다 Nuxt+Vue로 웹 앱을 만들 때 firebase functions를 API로 이용했다. API functions/index.js 클라이언트 store/index.js API 측에서는 region을 northeast로 설정했다 그럼에도 불구하고 클라이언트 측에서 functions region을 지정하지 않았습니다. 디폴트의 us-central에 액세스 되어 버려 CORS가 되었다 공식 문서... CORSFirebasenuxt.jsFirestore 갑자기 axios로 URL을 요청할 수 없습니다! ? 지금까지 보통으로 운용되고 있던 시스템에서 axios를 이용해 URL 리퀘스트를 행하고 있는 개소로부터 상기와 같은 에러가. from origin ' ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 오~ CORS의 오류, 응~ CORS 주변... CORSFirebase자바스크립트axios PlantUML로 Firebase 아키텍처 작성 시퀀스 다이어그램을 작성할 때는 PlantUML을 편리하게 사용하고 Firebase를 사용하여 아키텍처를 만들 때 아이콘이 있으면 조금 멋지게 보이지 않는다고 생각했기 때문에 만들었습니다. 사용법은 README에 쓰고 있는 그대로입니다만, 아래와 같이 되어 있습니다.... Firebaseplantuml GitHub Actions에서 React + Firebase 프로젝트를 CI/CD로 자동 배포한 이야기 얼마 전의 웹 서비스를 만들 때 2020년에 릴리스된 GitHubActions 에서 CI/CD(계속적 통합/계속적 딜리버리)를 해 보았으므로, 가볍게 흐름을 투고합니다. 프로젝트를 수정 한 후 매번 빌드 또는 배포를 실행하는 것이 번거롭기 때문에 자동화하고 싶습니다. 트렌드 CI/CD를 사용한 적이 없기 때문에 공부하고 싶습니다 firebase login:ci 명령을 실행합니다. 컨테이너나 ... FirebaseReactGitHub자동 배포CICD Angular : Firestore의 데이터를 페이지 네이션하고 싶다 ② ~ Material2의 Paginator를 사용 마지막: 모처럼 멋있는 Material2의 Paginator라는 부품이 있으므로 사용해보고 싶다. 정식 매뉴얼은 이쪽. 환경 app.module.ts Material2를 사용 중이라면 평소대로. app.module.ts에 MatPaginatorModule을 추가합니다. app.module.ts Paginator 붙이기 우선은 UI에 Material2의 Paginator를 붙인다. 위 환경에서... AngularFirebaseMaterialDesign페이지네이션Firestore React Hooks에서 Covid19 트래커 앱 만들기 React 연습, 특히 Hooks x Web API를 습득하기 위해 제작되었습니다. Covid19의 데이터는 disease.sh의 API에서 가져옵니다. 사이트의 내용으로는 세계 각국의 CoronaViruses Cases, Deaths, Recoverd 통계를 확인할 수 있습니다. React의 Hooks에 의한 State 관리는 정말 강력하네요. 그래서 간단하고 쓰기 쉽고 생산성이 매우 높습... FirebaseReactFunctionalProgrammingCOVID-19후크 길보 보고 앱을 만들어 보았다! 라는 이야기 조금이라도 건강해지는 시스템 개발할 수 없을까~라고 생각하고, 길보를 전사에서 기뻐하기 위한 앱을 개발했습니다. 개발 한계가 이틀 밖에 없었기 때문에, 만들지 않았습니다. (그 중 하루는 어떤 음악이 텐션 오르는지에 지출했습니다.) 채팅 워크에 메시지를 보내면 Mac을 연결하고 있는 모니터에 텐션이 오르는 음악과 함께 길보가 보고됩니다. ※본래라면, 텐션이 오르는 음악이 흐릅니다. 이 구성은... FirebaseElectron자바스크립트Node.jsChatwork Firebase를 사용해 보았습니다 ~ 제 3 장 Firestore에서 데이터 가져 오기 ~ React Hooks를 사용하여 채팅봇 앱을 만들고 있습니다. 이 장에서는 Firestore에 저장한 중에서 초기 데이터를 검색할 때까지 수행합니다. 제3장 Firestore에서 데이터 얻기 src 디렉토리 아래에 'firebase' 디렉토리를 만들고 그 안에 'config.js' 파일을 만듭니다. Firebase 페이지로 이동하여 프로젝트 설정 화면으로 이동합니다. 하단의 Firebase ... FirebaseReact후크apiFirestore Firebase를 사용해 보았습니다 ~ 제 2 장 Firestore에 데이터 저장 ~ React Hooks를 사용하여 채팅봇 앱을 만들고 있습니다. 이 장에서는 API를 사용하여 Firestore에 채팅봇 앱에서 사용할 데이터를 저장합니다. 제2장 Firestore에 데이터 저장 json 유형의 데이터 파일을 생성합니다. (json 파일을 쓰는 법을 모르겠습니다 ...라고하는 경우는 저는 챗봇에서 사용하는 응답 내용이나 사용자 선택 등을 json 형식으로 만들었습니다. Clo... FirebaseReact후크apiFirestore Google 홈에서 '에어컨 켜기'를 시도합니다. Google Home에서 에어컨을 조작할 수 있게 되었다 주의) 조금 소리가 작습니다 Raspberry Pi 약 5000엔 ( ) Google Home mini 약 3300엔(세일 가격) ( ) Google Home mini를 벽걸이로 하는 어댑터 약 1900엔 ( ) ESPr IR 약 3000 엔 Switch Science의 ESP-Wroom-02 + 적외선 모듈 등이 내장 된 개발 보드 ... LIRCFirebaseGoogleHomeESP-WROOM-02 【Vue.js】Firebase Hosting을 사용한 배포까지의 흐름 【Nuxt.js】 Vue.js, Nuxt.js 애플리케이션의 배포를 가정합니다. · firebase 프로젝트 · Google 계정 · 노드, npm 환경 · Vue.js 또는 Nuxt.js 애플리케이션 Firebase로 작업하기 위해 Firebase-CLI를 설치합니다. 터미널 버전이 표시되면 설치 완료입니다. 터미널 터미널 터미널 Y를 입력하고 Enter 브라우저가 시작됨 자신의 Google 계정을 선택하세... FirebaseFirebaseHostingVue.jsnuxt.js배포 Firebase(한 번 배포되었으며 업데이트 배포를 수행할 때의 명령) 첫 번째 배포가 완료되었다고 가정 배포가 쉬웠기 때문에 포트폴리 배포에 Firebase를 사용했습니다. 그러나, 업데이트 작업 후 다시 배포를 시도했는데 명령을 잊고 있었으므로 비망록으로 남기기로했습니다. Firebase의 아래 폴더에 배포 (업데이트)합니다. cd 에서 해당 디렉토리로 이동 터미널 이것으로 배포(업데이트)가 완료됩니다.... 배포업데이트Firebase Typescript×React×Hooks로 회원관리③Formik과 Yup에서 폼바리데이션 지난번에는 Typescript×React×Hooks 및 Firebase Authentication을 사용하여 작성한 회원 관리 앱에 Context를 활용한 상태 관리를 도입하여 앱의 규모 확대에 대한 내성을 강화했습니다. 이번에는 Formik과 Yup을 활용하여 폼 바리데이션을 추가하겠습니다. 총 3회의 내용은 아래와 같습니다. Formik 및 Yup에서 양식 유효성 검사 Firebase A... FirebaseReactTypeScriptreact-hooksFirebaseAuth Firebase + Express + Pug로 동적 페이지를 localhost로 호스팅 아직의 사람은 이쪽의 페이지를 부디( ) Firebase 계정 및 호스팅 프로젝트 생성이 완료되었다고 가정합니다. 아직의 사람은 이쪽의 페이지를 부디 ( ) 기존 Express 프로젝트를 번거롭지 않고 Firebase에서 이동하고 싶습니다. 'firebase init' 뒤의 첫 번째 질문에서 'Functions'와 'Hosting'에 체크를 넣어두면, 나중의 질문은 모두 디폴트 그대로 건너뛸... pugFirebaseExpress지역Node.js LINE Bot "나침반 팬더(ver0)" 몇 달 전부터 묵묵히 개발하고 있던 LINE Bot 「나침반 팬더」가 완성되었으므로 정리합니다. 소스 코드와 개요는 에서 공개하고 있습니다. 개요나 사용법에 관한 설명은 링크처의 문서에서 기술하고 있습니다. 이 기사에서는 기술적인 이야기로만 좁힙니다. 후, LT 등에 사용하고 싶기 때문에 슬라이드 형식입니다. 기본적으로 사용자는 빨간색 화살표처럼 LINE Bot과의 상호 작용만으로이 응용 프... Firebase자바스크립트leafletlinebot CloudFirestore의 array를 사용해보기 CloudFirestore의 array를 사용하고 있는 기사가 별로 발견되지 않았으므로, 비망록적으로 남겨 둔다. 기재할 것 CloudFirestore 필드의 배열 유형 사용 (이번에는 추가) 기재하지 않는 것 Firebase 프로젝트를 만드는 방법 아래 사진과 같이 favorite_dog 라는 배열을 만들고 그 안에 좋아하는 개 이름을 넣어가는 코드를 만든다. main.dart update... FirebasearrayCloudFirestoreFlutter Nuxt.js + Heroku에서 환경 변수가 통과하지 않을 때의 확인 사항 heroku 로 환경 변수가 잘 통과하지 않았던 적이 있었으므로 자신용으로 메모. nuxt.config.js 에서 확인할 수 있습니다. Firebase의 경우 value 는 'abc' 이면 통과하지 않을 수 있습니다.abc 라고 하는 쓰는 방법이 되어 있는지 체크해 봅시다. webpack 등을 사용하는 경우 heroku에서 환경 변수를 설정한 후 다시 컴파일해야 합니다. 재부팅에서는 안되는 ... 경 6Firebasenuxt.js환경 변수.env Firebase 프로젝트를 삭제할 수 없을 때 한 일 이전에 만들고 사용하지 않은 Firebase 프로젝트를 삭제하려고 했는데 "You cannot delete this project because it is linked with a Dialogflow agent."라는 표시에서 삭제할 수 없습니다. Cloud Shell 리엔을 삭제할 필요가 표시됩니다. $ gcloud alpha resource-manager liens list 프로젝트가 D... 문제해결Firebasegcpdialogflow Android 앱에서 자연어 처리(DialogFlow) 이전에는 Android 앱에서 DialogFlow를 사용하여 자연 언어 처리 기능을 구현했습니다. DialogFlow를 구현하기 위한 SDK가 Android용으로는 없고, 상당히 끼웠으므로 메모로서 투고했습니다. 조금이라도 도움이 되었으면 좋겠습니다. Android 앱에서 DialogFlow를 호출하기 위해 Cloud function을 사용합니다. Cloud function을 사이에 두어 A... Firebasedialogflow안드로이드자연 언어 처리Kotlin EnOcean의 화장실 센서를 LINE Bot으로 확인 EnOcean의 화장실 센서를 LINE Bot에서 확인해 보았습니다. Dialogflow에서 LINE Bot 연계를 하고 LIFF로 감시 화면을 표시하도록 했습니다. EnOcean에서 화장실 센서를 만들어 본 기사는 여기를 확인하십시오. EnOcean에서 수신한 신호를 라즈파이로 잡아 Firebase에 개폐 상태의 값을 저장하고 있습니다. React를 사용하여 Amazon S3에 설치한 정적... FirebaseReactEnOceanLINEmessagingAPIdialogflow Dialogflow 및 Firebase Cloud Functions에서 Actions On Google의 Node.js Client Library v2 지원 이전에 을 쓰고 나서 반년 정도. . 시대의 흐름은 빠른 것으로, 그 리포트대로 해도 움직이지 않는다! 그래서 간단한 포인트 정리입니다. 이전 보고서와 같이 작동하지 않는 이유는 Firebase Cloud Functions 템플릿을 사용하면 DialogflowApp의 Node.js Client Library가 v2가 되기 때문입니다. 억지로 v1을 사용할 수도 있지만 위의 그림 (Action... actionsongoogleFirebaseGoogleHomedialogflow음성 인식 이전 기사 보기