Nebula Cloud Particles Effect Three.js Tutorial

웹 사이트를위한 멋진 배경을 만들 아이디어를 찾고 있습니다 이 튜토리얼은 애니메이션 성운을 만드는 방법을 보여줍니다

자바 스크립트와 threejs를 사용하는 배경을 확인해 보겠습니다 기본 장면 설정은 먼저 threejs 라이브러리를 가져온 다음 장면과 카메라를 설정합니다 60도 시야각으로 투시 카메라를 사용하고 뷰 프로스트가 1000 인 현재 뷰포트 크기로 카메라를 배치 한 다음 다음 회전을 설정하고 주변 광을 부드러운 백색광으로 설정 한 다음 WebGL 렌더러 설정 장면에 녹색 안개를 추가하여 오로라 효과를 만들고 페이지에 캔버스 요소로 장면을 추가하고 마지막으로 렌더링을 설정 렌더러에서 render 메소드를 호출 한 후 requestanimationframe 만 호출하면됩니다

이제 장면이 성운을 만들도록 설정되었습니다 먼저 구름을 만들어야합니다 파티클은 이전 튜토리얼의 클라우드 텍스처를 재사용 할 것입니다 로드 texture를 three

js로 텍스쳐 로더를 사용한 다음 계속해야합니다 콜백 함수 다음에 처리하고 클라우드를 먼저 생성하기 위해 일반 지오메트리로 머티리얼을 만들고 클라우드 텍스처를 머티리얼에 매핑 많은 클라우드가 필요하므로 transparent 속성을 true로 설정하십시오 파티클은 루프를 50 번 생성하고 위의 지오메트리와 재질은 각 구름마다 위치를 무작위로 지정합니다 그리고 회전 또한 불투명도를 55 %로 줄이고 마지막으로 씬에 추가했습니다 다음으로 구름을 애니메이션 해 보도록하겠습니다 먼저 배열 객체를 만든 다음 생성 후 각 클라우드에 대한 참조 렌더링 루프 내에서 다음에 각 클라우드의 회전을 업데이트합니다

먼저 조명 작업을 시작합니다 옅은 주황색 방향 조명을 추가합니다 다른 색의 포인트 라이트를 추가하겠습니다 구름 주위에 주황색 빨강과 파란 빛을 두십시오 성운 구조가 완성되면 다음으로 포스트 프로세싱 작업을합니다 이전 튜토리얼에서 블룸 또는 HDR 게시물을 만드는 방법을 보여주었습니다 처리 효과이 자습서에서 해당 코드를 재사용 할 것입니다

세 가지 테스트를 위해 사후 처리 플러그인을 가져온 다음 전역 변수를 작성하십시오 효과 작곡가를 위해 마지막 튜토리얼에서 코드를 복사하십시오 일반 렌더러 대신 포스트 프로세싱 컴포저에서 렌더링 이제 거의 배경이 약간 비어있어서 여기에 별을 추가하겠습니다 배경 질감으로 사용할 스톡 이미지입니다 텍스처 로더를 다시 사용하여 이미지를 만든 다음 텍스처 후 처리 효과를 만듭니다 텍스처에서 컬러 닷지 블렌드 기능을 사용하여로드했습니다

불투명도를 20 %로 설정 한 다음 효과 패스에 효과를 추가하십시오 코드를 복사하고 만든 후 이전 튜토리얼의 로그인 양식 여기에 작은 CSS 배경색 변경이 있습니다 이 예제를 반응 형으로 만들려면이 튜토리얼을 업데이트해야합니다 사용자가 브라우저 창 크기를 조정할 때 가로 세로 비율이 있으므로 핸들러를 만들어 보겠습니다 카메라를 재설정하고 설정을 렌더링하는 기능 그런 다음 크기 조정 이벤트로 바인딩하십시오 이 튜토리얼의 모든 것이 당신이 더 많은 것을보고 싶다면 즐기길 바랍니다

개발 팁과 자습서가이 채널을 구독하여 다음에 또 만나요

Learn JavaScript Promises (Pt. 2) with a Firestore Trigger in Cloud Functions – Firecasts

DOUG STEVENSON : 이봐, 다시 오신 것을 환영 해 Firebase의 클라우드 기능에 대한 또 다른 Firecast

내 이름은 더그 스티븐슨이고, 오늘의 주제는 파이어 스토어 트리거에서 자바 스크립트 약속으로 프로그래밍하고있다 클라우드 기능 마지막 비디오에서 약속을 사용하는 방법에 대해 이야기했습니다 HTTP 트리거에서 비디오를 보지 않았다면, 먼저해라

그러면 네가 끝나면 다시 와라 기다릴게 지난 번에 자바 스크립트 약속이 의미하는 바를 배웠습니다 백그라운드에서 진행되는 비동기 작업 귀하의 기능 중 그것은 세 가지 상태 – 보류 중, 이행 중, 거부 중이다

그리고 Then 및 Catch를 사용하여 콜백을 작성할 수 있습니다 상태가 언제 바뀌는지를 알 수있는 방법 또한 클라우드 종료를위한 첫 번째 규칙을 배웠습니다 기능– HTTP 트리거는 클라이언트에 응답을 보내야합니다 제대로 종료됩니다

오늘 우리는 두 번째 규칙을 살펴볼 것입니다 – 다른 모든 유형의 경우 트리거의 경우 약속을 반환해야합니다 성취되거나 거절되는 해당 기능의 모든 보류중인 작업이 완료되면 이를 통해 클라우드 기능에서 언제 함수 호출을 정리하는 것이 안전합니다 다음 단계로 이동하십시오 지난 번에 나는 HTTP 함수를 작성했다 Firestore에서 문서를 가져옵니다

간단한 웹 API처럼 클라이언트에 내용을 보냅니다 이번에는 Firestore 트리거를 작성하여 해당 문서가 새 데이터로 업데이트 될 때마다 발생합니다 기억하고 싶다면 내 Firestore 데이터베이스는 다음과 같습니다 Firebase 콘솔에서 다음을 볼 수 있습니다 저는 Cities Weather라는 콜렉션을 가지고 있습니다

각 문서는 한 도시에서 시간 경과에 따른 기상 조건을 추적합니다 마지막 비디오에서 언급했듯이, 곧 보스톤에 갈 예정 이니 HTTP API 끝점을 만들었습니다 내 응용 프로그램은 최신 조건을 얻기 위해 전화 할 수 있습니다 모든 앱이이 위치를 폴링하여 업데이트를 확인할 수 있습니다 기상 조건이 바뀌 었는지 확인하기

보스턴에서 누구나 일반적으로 사용할 수 있습니다 누가 HTTP 엔드 포인트를 알고 있는지 하지만이 프로젝트에 연결된 Firebase 앱을 가지고 있습니다 내 앱이이 엔드 포인트를 폴링하지 못하도록하고 싶습니다

반복적으로 업데이트를 얻을 수 있습니다 이를 수행하는 더 좋은 방법이 있습니다 폴링 대신 내가하고 싶은 일 Firestore 트리거를 작성합니다 보스턴 날씨 문서의 업데이트에 따라 화재가 발생합니다 업데이트 할 때마다 클라우드 메시징을 사용합니다

알림을 내 앱에 보내서 알려주는 것 기상 조건의 변화 이는 반복적으로 폴링하는 것보다 훨씬 효율적입니다 HTTP 끝점을 확인하거나 문서를 직접 쿼리 할 수도 있습니다 내 앱은 항상 최신 날씨로 최신 정보를 얻을 수 있습니다 심지어 실행되지 않을 때에도 그것을하는 방법을 보자

지난 시간의 HTTP 기능은 다음과 같습니다 보스턴의 날씨 업데이트를 위해 투표 할 수 있습니다 여기서 내가 할 일은 새로운 Firestore를 작성하는 것입니다 해당 문서에 대한 업데이트에 대한 응답으로 발동하는 트리거입니다 내보내고 BostonWeatherUpdate에서 호출합니다

그런 다음 함수 SDK를 사용하여 업데이트에 반응하는 Firestore가 실행되었습니다 보스턴 날씨 문서에서 onUpdate 메서드에 함수를 전달합니다 있을 때마다 호출됩니다 이 문서의 변경

이 함수는 변경 매개 변수를 받아들입니다 이 업데이트는 발생한 업데이트를 설명합니다 change 매개 변수에는 앞과 뒤에 두 가지 속성이 있습니다 나는이 문서의 내용에 관심이있다 변경이 발생한 후 이 속성은 문서 스냅 샷입니다

그 문서의 업데이트 된 내용으로, 그래서 나는 그것을 변환하기 위해 데이터 메소드를 사용한다 자바 스크립트 개체 이제 문서 데이터가 생겼으니 내가하고 싶은 일 내 응용 프로그램에 보낼 FCM 메시지 페이로드를 작성합니다 이미 작성한 코드를 여기에 붙여 넣습니다 FCM은 모든 값을 문자열로 요구합니다

그래서 나는 필요에 따라 임의의 숫자를 문자열로 변환하고있다 이제 Admin SDK를 사용하여 이 데이터는 weather_boston이라는 주제로 페이로드됩니다 이렇게하면 내 앱을 설치할 때마다 FCM을 사용하는 경우 이러한 알림을받습니다 SDK를 사용하여이 주제에 가입하십시오 FCM에 익숙하지 않다면 괜찮습니다

링크를 클릭하면 모든 것을 배울 수 있습니다 아래의 설명에서 앱을 계속 유지하는 가장 좋은 방법입니다 데이터베이스의 변경 사항을 최신으로 유지합니다 하지만 내 코드에서 잊어 버린 것이 하나 있습니다

다른 모든 기능을 종료하는 두 번째 규칙 기억하기 HTTP 트리거보다 – 약속을 반환해야합니다 보류중인 모든 작업이 완료되면 완료되거나 거부됩니다 내 코드를 확인하는 걸 깜박 했어 해당 메시지를 보낼 때 Admin SDK가 반환하는 것입니다 그럼 VS 코드에서 살펴 보겠습니다

sendToTopic 위에 마우스를 올려 놓으면, VS 코드는 인수와 반환 값을 알려줍니다 그리고 저는 그것이 약속을 되 돌리는 것을 볼 수 있습니다 즉,이 함수는 즉시 반환됩니다 약속이 끝날 때까지 끝나지 않습니다 성취되었거나 거절 당했다

제가 여기서 할 수있는 일은이 일을 제 직무에서 되돌려주는 것입니다 클라우드 기능을 만들 것입니다 청소 및 이동하기 전에 FCM이 완료 될 때까지 기다리십시오 좋아, 그게 더 낫지 만 고려해야 할 것이 하나있다 모든 약속은 성공적으로 수행되거나 오류로 거부됩니다

그래서 생각하는 것이 좋습니다 오류 조건을 처리해야하는 경우 당신은 약속을 다루고 있습니다 마지막 비디오를 기억한다면, 약속에 Catch 메서드를 사용하여 오류를 트랩 할 수 있습니다 내가 할 일은 약속의 리턴에 Catch 메서드를 호출하는 것입니다 sendToTopic에 의해

나는 콜백 함수를 전달할 것이다 오류 조건을 처리합니다 지금은 그냥 기록 할게 또한 Catch 자체가 반환한다는 점에 유의하십시오 콜백이 완료되었을 때의 약속, 이 전체 기능이 실제로 무엇인지 지금 돌아온다

그러나 만약 당신이해야 할 일은 오류를 기록하는 것입니다, 여기에 캐치를 사용할 이유가 없습니다 이전과 같이 원래의 약속을 반환하면, 클라우드 기능이 오류를 기록합니다 약속이 거절되면 그 기능에서 내가 약속을 되 돌리지 않으면 관리자 SDK가 완료되면 메시지 전송 비동기 적으로 매우 가능하다 그 메시지는 결코 보내지지 않을 것이고, 클라우드 기능이 정리할 수 있기 때문에 작업이 완료되기 전에

약속을 지키는 것을 잊어 버리면 일관성없는 버그가 발생할 수 있습니다 귀하의 배경 기능 항상 API에서 반환하는 약속을 추적해야합니다 당신은 당신의 기능을 부릅니다 그런 식으로 항상 당신의 배경에서 약속을 되 찾으세요

기능 여기에는 트리거 된 기능이 포함됩니다 Firestore의 변화뿐만 아니라, 실시간 데이터베이스, 클라우드 스토리지, 인증, Analytics, Crashlytics 및 Pub / Sub, 그리고 아마도 더 많이 올 것입니다 약속에 대해 더 배울 점이 있다는 것을 알아야합니다 다음에는 내가 너에게 보다 복잡한 작업을 관리하겠다는 약속으로 할 수있다

함수 코드에서 그래서 YouTube의 Firebase 채널에 가입하십시오 그 사실을 알리기 위해 그때까지 문서의 일부 링크를 확인하십시오 아래의 설명에서

다음에 너를 볼거야 [음악 재생]

Learn JavaScript Promises (Pt 3) for sequential and parallel work in Cloud Functions – Firecasts

이봐, 모두들 클라우드 기능에 대한 또 다른 Firecast에 오신 것을 환영합니다

Firebase 용 내 이름은 더그 스티븐슨이고, 오늘의 주제는 JavaScript로 약속 된 프로그래밍 Firebase 용 클라우드 기능에서 이 시리즈의 마지막 두 편의 비디오에서, 나는 약속을 사용하여 관리에 관해 이야기했다 HTTP 트리거에서 발생하는 작업 및 Firestore 방아쇠 각 유형의 트리거에는 약간 다른 방식이 있습니다

Firestore가 반환 한 약속을 가지고 일하는 API와 Firebase Admin SDK가 있습니다 특히 자바 스크립트 약속의 기본 사항을 배웁니다 그리고 그것들을 사용하는 방법 그리고 클라우드 종료를위한 두 가지 규칙도 보았습니다 기능, 이것들은 – 첫째, HTTP 트리거는 클라이언트에 응답을 보내야합니다

제대로 종료; 둘째, 배경 트리거라고하는 다른 모든 유형의 트리거의 경우, 당신은 성취되거나 거절되는 약속을 반드시 반환해야합니다 해당 기능의 모든 보류중인 작업이 완료되면 이를 통해 클라우드 기능에서 언제 함수 호출을 정리하는 것이 안전합니다 다음으로 이동하십시오 지금까지 내가 보여준 코드는 매우 간단합니다 어떻게 생겼는지 다시 살펴 보겠습니다

Firestore 데이터베이스에 컬렉션이 있습니다 문서가 들어있는 도시 날씨라고하는 몇 개의 다른 도시 각 문서는 현재 날씨로 최신 상태로 유지됩니다 그 도시의 조건 이 HTTP 트리거는 지금 가져 왔습니다

보스턴의 현재 기상 조건을 반환합니다 Firestore에 요청하는 것을 볼 수 있습니다 알려진 위치에서 문서를 가져올 수 있습니다 get 메소드는 다음과 같은 약속을 반환합니다 그 문서의 스냅 샷으로 완성됩니다

JavaScript 객체로 변환 한 다음 다시 전송 JSON 형식으로 클라이언트에 전달합니다 약속이 오류로 거절되면, 나는 그것도 처리한다 자, 내가 여기에서하고 싶은 것은 그룹 인근 도시들입니다 더 큰 영역에서 HTTP 트리거를 생성합니다 모든 사람들을위한 기상 조건을 반환합니다

그 지역의 도시들 그래서 내가 한 것은 다른 컬렉션을 만든 것입니다 파이어 스토어 (Firestore)에서는 구역이라고 불렀고 거기에있는 문서들 해당 지역의 도시 목록을 포함합니다 한 번 보자 이제 Firestore에서 새로운 컬렉션, 더 큰 Boston 지역을위한 문서가 포함되어 있습니다

이 문서에는 다음과 같은 속성이 있습니다 도시, 그 지역의 도시 ID의 배열입니다 지금은 보스톤, 케임브리지, 서머빌입니다 이것은 불완전한 목록이며, 나중에 그것을 업데이트 할 것입니다 그래서 내가해야 할 일은 새로운 HTTP 트리거를 만드는 것이다

보스톤 지역 문서를 읽고, 이 도시 목록을 가져와 일치하는 각 문서를 읽습니다 도시 – 날씨 수집에서, 클라이언트로 반환합니다 그래서 저는 VS 코드로 바꾸고 그것을 작성하기 시작할 것입니다 여기서 내가 할 일은 새로운 HTTP 함수를 내보내는 것입니다 getBostonWeather를 호출합니다

그 함수에서 나는 그 보스턴 지역을 질의 할 것이다 문서 Get은 약속을 반환하므로 then 메서드를 사용합니다 문서 스냅 샷을 가져올 때 쿼리가 완료되었습니다 나는 그 스냅 샷을 자바 스크립트 객체로 변환 할 것이고, 그런 다음 cities라는 문서 속성에 액세스합니다

그 도시 ID의 배열을 가지고 이 배열을 반복 처리 한 다음 참조를 빌드 할 수 있습니다 내가 읽을 필요가있는 각 도시의 기상 문서에 여기에 약간의 걸림돌이 있습니다 이러한 각 호출은 약속을 되 돌린다

각 지역마다 몇 가지가있을 것입니다 그리고 나는 그들 모두를 기다릴 필요가있다 완료하고 모든 데이터를 클라이언트로 전송합니다 자,이 상황에서 나는 반드시 얼마나 많은 도시가 있을지 알고, 그러나 모든 결과가 필요합니다 그리고 나는 각자를 기다릴 필요가 없다

계속해서 하나씩 완료하십시오 그들은 모두 동시에, 동시에 일어날 수 있습니다 그래서 내가 여기서 정말로하고 싶은 것은 시작이다 모든 쿼리를 동시에 실행 한 다음 계속하십시오 모두 완료된 후에 일단 전체 문서 세트가 있으면, 클라이언트에게 최종 응답을 보내 드리겠습니다

그리고 저는이 모든 것을 promise라는 함수로 관리 할 수 ​​있습니다 어떻게 작동하는지 봅시다 첫째, 모든 약속을 배열로 수집합니다 루프 전에 빈 배열을 만들어서 할 수 있습니다 그런 다음 루프 내에서 각 약속을 해당 배열로 푸시합니다

즉시 반환을 얻으십시오, 따라서이 약속들 각각은 여전히 ​​보류 상태에 있습니다 나중에 성취되어야한다 약속이 수집되면, 내 코드는 이러한 모든 약속을 기다릴 필요가있다 계속하기 전에 성취되어야한다 promise

all 함수를 사용할 수 있습니다 약속의 배열을 지나치다 성취 된 새로운 약속을 되 찾을 것입니다 다른 모든 약속들이 성취 된 후에야 그것으로, 나는 그때의 메서드를 호출 할 수있다 더 많은 일을 계속하기

그러나 그것은 필자가 필요 이상으로 코드를 중첩시키는 것을 의미합니다 가장 좋은 일은 약속을 되 찾는 것입니다 콜백에서 이제 이와 같은 약속의 결과로 어떤 일이 일어나는지 봅시다 콜백으로부터 약속을 되 돌리면, then 메소드는 새로운 약속을 리턴한다

동시에 성취되거나 거절 된 그 약속의 다른 약속 이 새로운 약속으로 다른 방법을 변경할 수 있습니다 그 일이 중단 된 곳에서 계속됩니다 이것을 사용하여 다른 콜백을 작성할 수 있습니다 성취 된 약속의 결과를 받는다

이전 콜백에서 이 경우 문서 스냅 샷 배열입니다 각 결과를 얻습니다 그래서이 스냅 샷 인수는 문서 배열입니다 약속의 배열에서 충족되는 스냅 샷 위

여기서 내가 할 일은 스냅 샷 배열을 반복하는 것입니다 모든 기상 조건을 모으기 각 도시의 개체 그러나이 모든 것들을 어떻게해야합니까? 글쎄, 나는 모든 결과를 가진 새로운 배열을 만들 것이다 그들을 거기에 밀어 넣으십시오 그런 다음 결과 배열을 보낼 수 있습니다

JSON 형식으로 클라이언트에 전달합니다 오, 내가 여기있는 동안 나는 옳은 일을 할거야 이 후에 잡을 전화를 붙여서 처리 할 수 ​​있습니다 발생하는 모든 오류가 있습니다 응답을 회신하는 것이 중요합니다

모든 상황에서 자, JSON이 어떻게 보이는지 봅시다 내 명령 쉘에서, 내 프로젝트 함수 폴더에, 내가 지금 할게 뭐야? 린터가 돌아가고 나면 괜찮아 TypeScript를 JavaScript로 컴파일하십시오 그런 다음 HTTP 기능 에뮬레이터를 실행합니다

getBostonAreaWeather에 대한 로컬 호스트 URL을 제공합니다 기능 그래서 복사하고, 다른 쉘 탭으로 전환하고, 이 cURL 명령을 실행하여 반환 된 내용을 확인하십시오 시원한 보스톤 지역 날씨 기록을 볼 수 있습니다

이것은 좋은 출발이지만 어떤 도시인지는 알 수 없습니다 각 개체는를 참조합니다 다시 VS 코드로 돌아가서 콜백을 변경합니다 각 JavaScript 객체에 고유 한 문서 ID를 추가하려면, 그런 다음 수정 된 객체를 결과 배열로 푸시합니다 그런 다음 쉘로 돌아가서 TypeScript를 컴파일하고, 에뮬레이터를 실행 한 다음 cURL을 다시 사용하여 결과를보십시오

그리고 거기에 우리가 간다 하지만 이것은 읽기가 어렵습니다 그래서 파이썬 예쁜 프린터로 파이프 할 것입니다 그냥 쉽게 할 수 있습니다 좋은

테스트와 디버깅이 더 좋아 보이지 않습니까? 나도 그렇게 생각해 그래서 우리는 약속을 다루는 두 가지 새로운 기법을 보았습니다 첫째, 작업 항목을 연결할 수 있습니다 then 메서드의 콜백에서 약속을 반환합니다 클라우드 기능에 대한 약속을 되 돌리는 것처럼, 이 약속은 모든 비동기 작업을 나타냅니다

여기에서 시작되었습니다 콜백에 의해 반환 된 약속이 성취 될 때, 다음 약속 콜백은 결과를받습니다 이전에 생성 된 catch 콜백은 오류를 포착합니다 이전 작업 중 하나에서 마지막 약속, 캐치에서의 복귀, 전체 시퀀스가 ​​완료된 후 완료되거나 거부됩니다

완전한 두 번째로 배운 것은 많은 다른 작업 항목을 비동기 적으로 시작할 수 있습니다 모든 약속을 배열로 모으십시오 promiseall을 사용하여 새로운 약속을 만듭니다

다른 모든 약속들도 성취 될 때 성취된다 새로운 약속은 일련의 결과를 제공합니다 다음 콜백으로 이동합니다 약속들 중 하나라도 오류가 있으면 거부되고, 약속이 반환됩니다 promise

all에서 모두 거부 될 것이며, 그게 전부입니다 일단 이러한 기술로 연습을하면, 클라우드 용으로 복잡한 코드를 작성하는 것이 쉬워집니다 종료 할 두 규칙을 따르는 동안의 기능 당신의 기능을 올바르게 이제 TypeScript로 작성된 함수의 경우, 내가 여기서 사용하고있는 것은 더 쉬운 방법이다 일련의 약속들을 다룰 수 있습니다 TypeScript는 다음과 같은 구문을 제공합니다

비동기가 약속을 쉽게 처리하도록 만듭니다 그래서 그것이 어떻게 작동하는지보고 싶다면, YouTube의 Firebase 채널에 바로 가입하십시오 이 시리즈의 다음 동영상에 대한 알림을받을 수 있습니다 다음에 너를 볼거야

Learn JavaScript Promises with HTTP Triggers in Cloud Functions – Firecasts

안녕, 거기있어 클라우드 기능에 대한 또 다른 Firecast에 오신 것을 환영합니다

Firebase 용 내 이름은 더그 스티븐슨이고, 오늘의 주제는 HTTP로 자바 스크립트 약속으로 프로그래밍하고있다 클라우드 기능에서 트리거 클라우드 기능을위한 코드를 작성하려는 경우, 너는 어떻게해야하는지 확실히 알 필요가있어 거의 모든 기능을 제공하기 때문에 약속드립니다

쓰기가 그들을 사용합니다 그리고 제대로하지 않으면, 코드가 신비한 방식으로 실패 할 수 있습니다 자바 스크립트 약속에 대해 알아 보겠습니다 약속은 다음과 같은 비동기 작업을 나타냅니다 결국 완료해야합니다

Android 개발자 인 경우 작업 객체와 매우 유사합니다 Firebase를 다룰 때 때때로 사용하는 Android SDK 약속에 의해 추적되는 작업이 여전히 실행 중일 때, 약속은 보류 상태입니다 그런 다음, 작업이 성공적으로 완료되면, 약속은 성취되었다고합니다 또는 오류가 있으면 약속이 거부됩니다

이들은 Promise가있을 수있는 유일한 세 가지 상태입니다 보류 중, 이행 중 또는 거부 중이다 그리고 일단 약속이 성취되거나 거절되면, 다시 상태를 바꿀 수는 없습니다 많은 JavaScript API를 사용할 것입니다 수행 할 함수를 호출 할 때 약속을 반환합니다

어떤 작품 특히, Firebase Admin SDK 당신이 구할 때 약속을 되 찾을 것입니다 데이터베이스에서 읽거나 쓰는 것과 같은 일을하는 것, Cloud Storage의 파일과 상호 작용하며, 클라우드 메시징으로 알림을 보내십시오 또는 인증 된 사용자 프로파일을 갱신 할 수 있습니다 Promise를 반환하는 API는 즉시이를 수행합니다

작업이 완료되기 전에 이것은 기억하기 매우 중요합니다 이 약속을 사용하여 알아 내야하기 때문에 일이 끝나면 모든 작업이 완료되었을 때만 당신의 기능을 종결시키는 것이 안전하고, 함수가 종료되지 않도록하는 것이 중요합니다 작업은 아직 진행 중이다 그렇다면 정확히 클라우드 기능을 정확히 종료 하시겠습니까? 음, 알아야 할 두 가지 규칙이 있습니다

첫째, HTTP 유형 트리거의 경우 응답을 보낸 후 종료 됨 수신 한 응답 객체를 사용하여 클라이언트에 전달합니다 마지막 비디오를 봤다면 Hello World 기능이 있습니다 둘째, 다른 모든 유형의 트리거의 경우, 배경 트리거라고 불리는 완수 된 약속을 되 찾는 것 함수에서 시작된 작업 후에 만 완전히 완료되었습니다 대기 할 작업이 없으면 null을 반환 할 수 있습니다

그러나 당신은 당신의 기능에 매달려있는 어떤 약속도 남겨 둘 수 없습니다 적절한 취급없이 그렇지 않으면 대기중인 작업이 당신이 기대하는대로 완료하십시오 이와 같은 백그라운드 함수에서 Promise를 반환하면, 약속이 완료 될 때까지 클라우드 기능에 대기합니다 이사하거나 청소하기 전에 성취되거나 거절 된 그 기능

다른 유형의 값을 반환하는 경우, 클라우드 기능은이를 무시하고 기능을 종료합니다 바로 괜찮아 얘기 좀해라 몇 가지 코드를 살펴 보겠습니다

오늘은 HTTP 기능을 보여 드리겠습니다 여기 마지막 비디오의 Hello World 함수가 있습니다 그것은 TypeScript로 작성되었습니다 JavaScript와 매우 유사하지만 매우 유용하지는 않습니다 그래서 그것을 바꾸자

이 함수를 반환하도록하고 싶다고합시다 내 Firestore 데이터베이스에있는 문서의 내용 클라이언트에게 간단한 웹 API와 같은 종류의 기능을 제공합니다 내 프로젝트를위한 Firebase 콘솔에서, 너는 내가 불린 문서의 콜렉션을 볼 수있다 도시 – 날씨, 각 문서 추적 한 도시의 현재 날씨 상태 나는 곧 보스턴에 갈거야

그래서 나는 누구든지 HTTP API 엔드 포인트를 만들기 위해 보스턴에서 날씨를 반환하는 전화를 걸 수 있습니다 클라우드 기능으로 충분히 쉽습니다 VS 코드로 돌아 가기, 내가 여기서 할 첫 번째 일은 함수의 이름을 바꿉니다 그런 다음 Firebase Admin SDK를 가져옵니다 기억하면 모듈이 이미 내 프로젝트에 설치되었습니다

내가 그것을 만들었을 때 사용하기 전에 Admin SDK를 초기화해야합니다 그래서 그렇게하겠습니다 그런 다음 필자가 원하는 문서를 얻기 위해 필자의 기능에서 사용할 것이다 나는 이미 그것의 길을 알고있다

그래서 이것은 쉽다 VS 코드가 자동으로 나를 알려줍니다 get 메소드에 관한 정보, 나는 그것이 약속을 되 돌리는 것을 본다 문서 스냅 샷 유형 객체를 포함합니다 내가 찾는 데이터로 그래서 제가 여기서해야 할 일은 그 약속을 사용하는 것입니다

보스턴 날씨 문서의 스냅 샷을 가져 오는 중입니다 약속에는 다음과 같은 방법이 있습니다 약속이 이행 된 후에도 코드를 계속 사용할 수있게 해줍니다 방금 완료 한 작업 결과가 표시됩니다 콜백 함수를 사용합니다

이러한 결과를 유일한 인수로 호출합니다 여기서 VS 코드가 확인 중임을 알 수 있습니다 그 콜백이 나에게 줄 것이다 인수로서의 문서 스냅 샷 객체 내가 쓸 함수에 이 콜백 함수 안에서 스냅 샷을 찍을 것이다

JavaScript 객체로 변환 할 수 있습니다 그리고 그걸로 JSON 표현을 보내 드리겠습니다 클라이언트에게 응답 객체는 객체를 변환하는 방법을 알고 있습니다 나를위한 JSON

마지막으로 응답을 보내는이 호출이 종료됩니다 함수 이제 방금 쓴이 코드를 테스트하고 싶습니다 마지막 비디오에서 내가 사용한 것을 보았습니다 코드를 클라우드 기능에 배포하는 Firebase CLI 테스트 해봐

그러나 이것이 항상 쉬운 일은 아닙니다 대부분의 경우 컴퓨터에서 코드를 테스트하는 것이 더 쉽습니다 배포하기 전에 배포보다 훨씬 빠릅니다 당신이 그것을 변경할 때마다 기능 따라서 배포하는 대신 로컬로 실행합니다

내 컴퓨터에서 Firebase CLI를 사용하십시오 HTTP 타입 함수의 경우, 이것들을 에뮬레이트 할 수 있습니다 HTTP 기능을 에뮬레이트하기 전에, 해당 TypeScript를 JavaScript로 컴파일해야합니다 나는 커맨드 라인에서 그렇게 할 것이다 먼저 프로젝트 기능 폴더로 변경합니다

여기에서 TSLint를 코드에서 실행하여 가능한 오류를 확인합니다 npm은 스크립트 lint를 실행합니다 그리고 당신은 무엇을 압니까? 문제가 있습니다 약속을 처리하지 못하는 오류가 있다는 말입니다 바르게

나에게 줄 번호를 알려주므로, 나는 거기를 보러 갈 것이다 위로 VS 코드로, 지금 기억하고있는 것 내가 무엇을 생각해야하는지 이 Promise가 오류로 거부 될 수있는 경우 발생합니다 Promise는 오류가있을 때 거부 될 수 있으므로, 여부를 생각하는 것이 중요합니다 언제든지 오류 사례를 처리해야합니다 약속으로 일하고 나는 그것이 여기에서 중요하다고 생각한다

그래서 나는 약속에 붙잡기 기능을 사용할 것이다 오류를 잡아낼 수 있습니다 그때 그 방법을 또한 아는 것이 중요합니다 성취되거나 거절 된 약속을 반환합니다 모든 사전 작업 그래서 나는 그것을 잡을 것이다

내가 할 일은이 약속에 대한 catch 메서드를 호출하는 것입니다 파이어 스토어 (Firestore) 방법으로 잘못되는 것을 잡아 내기 위해, 또한 콜백 내부에서도 마찬가지입니다 두 기능 중 하나에 오류가있는 경우, catch 콜백은 다음과 같은 객체를 사용하여 호출됩니다 오류를 설명합니다 여기서 내가 원하는 것은 Firebase에 오류를 기록하는 것입니다

콘솔에 연결하고 HTTP 오류 응답을 클라이언트에 보냅니다 사용자 정의 오류 응답을 보내려는 경우, 대신 여기에 오류 메시지가 발생합니다 그래서 이것은 시작에 불과합니다 오류 메시지에 다음과 같은 내용이 포함될 수 있습니다 개인 정보, 당신은 원하지 않는다

모든 클라이언트에게 보낼 수 있습니다 승인 나는 linter를 다시 실행하고, 코드를 컴파일하고, 이 기능을 에뮬레이션합니다 바라건대, 이번에는 진짜 먼저, 스크립트를 다시 실행하여 스크립트를 실행합니다

내 셸 역사에서 모든 것이 체크 아웃됩니다 그런 다음 스크립트 실행을 실행합니다 TypeScript를 컴파일합니다 이렇게하면 패키지화 된

JSON에 정의 된 빌드 명령이 실행됩니다 Firebase init이 설정 한 파일 TypeScript 컴파일러 또는 TSC를 실행하고, 내 TypeScript를 JavaScript로 변환하는 중입니다 변환 된 JavaScript는 lib 폴더에 나타나며, 소스 옆에 원래 TypeScript와 매우 흡사하게 보입니다

하지만 TypeScript가 더 쉽다는 것에 동의 할 것 같습니다 읽다 이제는 Firebase CLI를 사용하여이 기능을 에뮬레이션합니다 명령을 실행합니다 파이어베이스는 기능 만 수행합니다

그걸 걷어차 당신은 그것이 나에게 URL을주는 것을 볼 수있다 로컬 호스트, 내 개인 컴퓨터, 함수를 호출합니다 그래서 URL을 복사 한 다음 명령에 curl을 사용합니다 함수를 호출하기위한 HTTP 요청을하기위한 라인

지난번에 내가 기억하고있을거야 함수 URL을 복사하여 웹 브라우저에 붙여 넣었습니다 그것을 실행합니다 당신도 그렇게 할 수 있습니다 하지만 때로는이 방법으로도 실행하는 것이 좋습니다

그리고 여기에서 JSON 내용을 볼 수 있습니다 내 기능으로 생성 된 보스턴 날씨 문서 방금 설명한 코드에서 주목해야 할 점은 나는 완전한 응답을 보내고있다 모든 코드 경로에서 클라이언트에게 성공과 오류를 모두 알려줍니다 이건 매우 중요합니다

클라이언트에게 응답을 보내지 않으면, 당신의 기능은 타임 아웃 될 것이고 클라이언트는 아무것도받지 못할 것입니다 그 시간 초과 후 그것은 웹 API에 대해 매우 나쁜 경험입니다 그래서 뭔가를 돌려 보내고 있다는 것을 절대 확신하십시오 모든 경우와 모든 코드 경로에서

승인 이 함수는 잘 작동하지만 약간 추한 것입니다 그리고 그것을 정리하기 위해 할 수있는 일이 있습니다 일반적으로 사람들은 Promise 함수를 연결합니다 함께 적은 타이핑과 가독성을 제공합니다

그래서 지금 제 기능을 정리하기 위해 할 것입니다 여기서 내가하는 일은 모든 상수를 제거하는 것입니다 약속들을 담고 있습니다 간단히 그 다음에 허용하고 메소드를 catch 할 수 있습니다 반환 약속과 직접 협력하기 위해, 어떤 종류의 변수도 필요하지 않습니다

한 가지 일이 생길 때 꽤 일반적입니다 다른 순서대로 그래서 내가 여기에있는 것은 반환 된 약속입니다 get에 의해 호출되는 메서드가 있습니다 약속은 그때까지 돌아 왔습니다

catch 메서드가 호출되었습니다 그리고 지금은 모두 좋습니다 이제부터는 내 약속을 모두 쓰겠습니다 승인 이제 약속 사용의 기본 사항을 알았습니다

귀하의 HTTP 기능 앞서 언급 한 것처럼 거의 모든 기능 어떤 식 으로든 약속을 사용합니다 이제 두 가지 규칙을 검토해 보겠습니다 귀하의 기능을 종료하십시오 첫째, HTTP 유형 트리거의 경우 마지막 행동으로서 클라이언트에게 응답을 보내야한다

모든 코드에 대해 함수를 사용합니다 그 기능에있어서의 길은 오늘날 우리가 한 일입니다 약속의 도움으로 둘째, 다른 모든 유형의 트리거의 경우, 당신은 그 기능에서 Promise를 반환해야합니다 작업이 완료되면 완료되거나 거부됩니다 그게 내가 다음에 너에게 보여줄거야

TypeScript를 잘 아는 사람들에게는, Async / Await 사용에 대해 이야기 할 때 궁금 할 것입니다 약속을 다룰 이 시리즈의 뒷부분에서 몇 가지 동영상으로 나옵니다 개인적으로 나는 그것을 마스터하는 것이 중요하다고 생각한다 정상적인 약속이므로 처음으로 구독하십시오

Firebase 채널 바로 여기 YouTube에서 다음 동영상을 알리기 위해 @Firebase라는 이름으로 Twitter에서 우리를 팔로우하십시오 그때까지 문서를 읽으십시오 아래 설명에서 다른 유용한 링크를 클릭하십시오 다음에 또 봐 [음악 재생]