Firebase Studio로 코드를 가져오는 버튼 만들기

웹사이트에 'Firebase Studio에서 열기' 버튼을 추가하여 사용자가 사이트의 코드를 Firebase Studio 작업 공간으로 직접 가져와 에이전트 기반 클라우드 개발 환경에서 계속 작업할 수 있도록 지원하세요.

이 기능은 다음 사용자를 위해 설계되었습니다.

• 사용자가 기본 편집기에서 완전한 개발 환경으로 이동할 수 있는 코드 플레이그라운드

• 사이트에서 코드와 시각적 프로토타입을 생성하고 사용자가 Firebase Studio에서 이를 반복하는 앱 프로토타입 제작 도구

Firebase Studio SDK에서 열기 사용

'Firebase Studio에서 열기' 버튼은 새 작업공간을 만들고 채우는 적절한 링크를 생성하는 JavaScript 라이브러리인 Firebase Studio에서 열기 SDK로 구동됩니다. 코드를 가져오는 방법에 관한 여러 옵션을 제공합니다.

가져오기 방법

다음 방법을 사용하여 코드를 가져오도록 버튼을 구성할 수 있습니다.

• Git 저장소 또는 템플릿에서: Git 저장소 또는 Firebase Studio 템플릿에 연결합니다. 완료된 프로젝트나 사전 정의된 템플릿에 적합합니다. 이러한 사용 사례에 대한 자세한 내용은 Firebase Studio에서 사전 정의된 작업공간 바로가기 만들기를 참고하세요.

• 프로젝트 파일 세트에서: 웹 애플리케이션에서 직접 파일 및 코드 스니펫 세트에서 작업공간을 동적으로 만듭니다. 이 옵션은 다른 곳에 저장되지 않은 사용자 작업을 내보내므로 코드 플레이그라운드와 앱 프로토타이퍼에게 가장 강력한 옵션입니다.

사이트에 'Firebase Studio에서 열기' 버튼 추가

Firebase Studio에서 열기 SDK: 버튼 이미지를 생성하고, 딥 링크를 만들고, 파일 콘텐츠를 전송하여 Firebase Studio 작업공간을 만드는 도우미 함수를 비롯해 필요한 모든 것을 제공합니다.

웹사이트에 'Firebase Studio에서 열기' 버튼을 추가하려면 다음 단계를 따르세요.

1. 프로젝트 디렉터리에 패키지를 설치합니다.

   npm install @firebase-studio/open-sdk
   

2. 라이브러리를 가져오려면 코드에 다음을 추가하세요.

   import * as FirebaseStudio from '@firebase-studio/open-sdk';
   

자세한 안내, 코드 예시, 전체 API 참조는 공식 SDK 문서를 참고하세요.

작업공간 환경 이해하기

사용자가 사이트에서 워크스페이스를 만들면 Firebase Studio에서 개발 환경을 설정합니다. 자동화 수준은 프로젝트 유형에 따라 다릅니다.

최적화된 환경

React, Angular, 간단한 HTML 프로젝트의 경우 호출자가 settings 객체 내에서 baselineEnvironment 속성을 올바르게 설정하면 Firebase Studio에서 최적화된 사전 구성 환경을 제공합니다. 즉, 사용자가 Firebase Studio에서 링크를 열면 Firebase Studio에서 작업공간을 만들고 다음 작업을 자동으로 실행합니다.

• 필요한 모든 종속 항목을 설치합니다.
• 올바른 개발 서버를 구성하고 시작합니다.
• 올바른 도구와 확장 프로그램으로 환경을 설정합니다.

이렇게 하면 사용자가 애플리케이션의 실시간 미리보기를 열고 코드와 직접 상호작용할 수 있는 환경이 열립니다.

일반 환경

다른 모든 프로젝트 유형의 경우 Firebase Studio에서 일반 가져오기를 사용합니다. 파일이 워크스페이스에 업로드되지만 사용자가 초기 설정을 수동으로 실행해야 합니다. 다음과 같은 조치를 취해야 할 수 있습니다.

• 언어 런타임 및 종속 항목을 설치합니다.
• dev.nix 파일을 구성합니다.

이러한 프로젝트의 경우 Firebase Studio에서 맞춤설정되지 않은 환경을 만들어 사용자에게 설정 프로세스를 완전히 제어할 수 있는 권한을 부여합니다.

사용자 환경

두 유형의 작업공간 모두 사용자가 'Firebase Studio에서 열기' 버튼을 클릭하면 작업공간의 이름을 지정하고 가져올 파일 목록을 검토하라는 메시지가 표시됩니다.

사용자가 가져오기를 클릭하면 새 Firebase Studio 작업공간이 열립니다. 여기에는 프로젝트 파일, 앱 미리보기, 다음 단계가 포함된 README 파일이 포함됩니다.

'Firebase Studio에서 열기' 버튼 디자인

Firebase Studio에서 열기 SDK를 사용하여 버튼을 디자인하거나 다음 도구를 사용하여 Firebase Studio 버튼의 HTML을 생성할 수 있습니다.

SDK를 사용하는 경우 버튼의 선택적 구성 속성을 포함할 수 있습니다.

• label: 버튼에 표시되는 텍스트 라벨을 설정합니다.
  • 허용되는 값: open, try, export 또는 continue입니다.
• color: 버튼의 색상 구성표를 정의합니다.
  • 허용되는 값: dark, light, blue 또는 bright입니다.
• size: 버튼의 높이를 픽셀 단위로 지정합니다.
  • 허용되는 값: 20 또는 32
• imageFormat: 생성된 이미지의 파일 형식을 결정합니다.
  • 허용되는 값: svg 또는 png

예를 들면 다음과 같습니다.

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

다음 단계

• Firebase Studio에서 열기 SDK 설치
• Firebase Studio 작업공간을 맞춤설정하는 방법 이해하기