행성 간 사진 부스를 만드는 방법

사진 부스를 IPFS에 통합하고 web3.storage를 사용하여 셀카를 행성 간으로 이동시키는 방법을 알아보세요.

Web Summit 2022 동안 Filecoin 이벤트와 크리에이티브 팀은 Web3, IPFS(InterPlanetary File System) 및 Filecoin 네트워크의 분산 스토리지 솔루션에 대해 자세히 알아보고 싶어하는 3500명 이상의 방문객을 끌어 모은 놀라운 전시 스탠드를 설치했습니다.

Filecoin은 IPFS 프로토콜을 통해 Web3에 파일을 저장하고 유지하기 위한 광범위한 솔루션을 제공합니다. 가장 인기 있고 사용하기 쉬운 것 중 하나는 개발자를 위한 " IPFS 및 Filecoin에 대한 단일 API 호출" 솔루션인 web3.Storage입니다.

IPFS는 P2P 네트워크에서 파일을 공유하고 분산 컴퓨터 네트워크에서 데이터를 공유할 수 있는 웹 프로토콜입니다. Filecoin은 스토리지 시장이 IPFS에 파일을 오랫동안 적은 비용으로 유지할 수 있도록 하는 오픈 소스 프로토콜을 만들었습니다. 이 솔루션은 Web3의 스토리지 문제를 해결하고 행성 간 통신과 같은 문제를 처리하기 위해 인터넷을 업그레이드합니다.

행성간 통신에는 셀카도 포함되어야 합니다 ! 경량 node.js 애플리케이션을 사용하여 Sparkbooth라는 사진 부스 소프트웨어를 만들어 web3.storage에 연결하고 셀카를 IPFS에 업로드하는 방법을 알아보세요.

어떻게 작동하나요?

사진 부스의 주요 부분은 디지털 카메라, 일부 조명, 터치 스크린이 있는 컴퓨터, 카메라를 제어하여 사진을 찍는 일부 소프트웨어, IPFS 및 Filecoin 네트워크에 업로드하는 기능입니다.

이벤트 흐름은 다음과 같습니다.

1. 터치스크린은 사용자로부터 사진을 찍으라는 명령을 받습니다.

   
   

2. Photo Booth 소프트웨어(Sparkbooth라고 함)는 카메라와 대화하여 조치를 취합니다.

   
   

3. Sparkbooth는 사진을 컴퓨터에 로컬로 저장합니다.

   
   

4. Sparkbooth는 사용자에게 서버로 보낼 것인지 묻습니다(web3.storage를 통해).

   
   

5. Sparkbooth는 API 호출을 통해 사진, 사용자 이름, 비밀번호 및 성공 메시지를 *로 보냅니다. fil-사진-부스-업로더 *맞춤 nodejs 앱

   
   

6. fil-photobooth-uploader 앱은 다음을 수행합니다.

   1. 사용자 이름과 비밀번호를 확인하세요

   2. 사진 형식을 무엇으로 변경해 보세요 web3.storage 받아들인다

   3. 시스템에서 API 토큰/키를 검색하여 다음으로 보냅니다. __ 웹3. __저장

   4. w__ eb3.storage __ 사진을 IPFS 네트워크로 보내고 Filecoin에 백업합니다.

   5. w__ eb3.storage __는 IPFS 콘텐츠 ID(CID)를 다시 fil-사진-부스-업로더

   6. fil-사진-부스-업로더 다음을 통해 CID URL의 http 버전을 구성합니다. web3.storage IPFS 게이트웨이

   7. fil-photo-booth-uploader는 Sparkbooth 7에 성공 메시지를 반환합니다.

      
      

7. Sparkbooth는 다음과 같은 성공 메시지를 받습니다. “귀하의 사진은 다음을 통해 IPFS로 전송되었습니다. web3.storage . :-)'라는 문구가 사진의 URL과 함께 표시됩니다.

   
   

8. Sparkbooth는 생성된 QR 코드를 화면에 표시합니다.

외모? 일반 포토존과 똑같습니다.

IPFS CID URL의 예:

예:

전체 흐름은 다음과 같습니다.

IPFS 및 CID에 대해 자세히 알아보려면 다음을 방문하세요. 프로토스쿨 .

단계별 가이드

전제 조건

이 튜토리얼을 실행하는 데 필요한 몇 가지 사항은 다음과 같습니다.

• 📸 카메라 - 최신 Canon
• 💻 컴퓨터 - 터치 스크린이 있는 일체형 데스크탑 또는 터치 스크린이 있는 노트북
• 👨🏻‍💻 사진 부스 소프트웨어 - Sparkbooth 7
• 🤖 앱 서버 - 편의상 Heroku를 사용하고 있습니다.
• 📦 IPFS 지원 제품 - web3.storage 계정
• 🌎 인터넷 연결 - 유선 또는 무선(Wi-Fi)으로 WWW와 통신하는 방법\

1단계, Web3.Storage 설정

1. 만들기 web3.storage 귀하의 계정을 통해 Github 계정 또는 이메일

2. 계정 > API 토큰으로 이동하세요.

3. 새로운 API 토큰을 생성하고 원하는 대로 이름을 지정하세요(예: Filecoin Web Summit 2022).

4. 복사 버튼을 사용해 API 키를 복사하세요.

5. 나중을 위해 저장하세요. 이것을 fil-photo-booth-uploader 애플리케이션에 환경 변수로 넣어야 합니다.

2단계: nodejs 앱 배포

Sparkbooth 7과 web3.storage가 원활하게 대화하려면 해당 언어를 번역하는 데 약간의 도움이 필요합니다. nodejs 앱이 이를 달성하는 데 도움이 될 것입니다. 서버에서 호스팅해야 하며 우리는 이를 위해 Heroku를 사용하고 있습니다(Web3 기본 호스팅 방법을 알고 계시다면 제게 DM을 보내주세요. 시도해 보고 싶습니다).

1. 먼저 가세요 github.com (계정이 없으면 새로 가입하세요)

2. 방문하다 Filecoin 사진 부스 업로더 그런 다음 포크를 클릭하십시오. 이를 통해 소스 코드를 자신의 계정이나 저장소에 복사하고 Heroku에 연결할 수 있습니다.

3. 다음으로 가입하세요. 헤로쿠 계정 . Heroku는 거의 무료로 애플리케이션이나 서버를 실행하는 데 도움이 되는 중앙 집중식 개발자 플랫폼인 AWS와 같습니다.

4. 새 앱을 만들고 이벤트 이름을 입력하세요.

5. 각 이벤트마다 새로운 앱이 필요할 것 같습니다.

6. "배포 방법"에서 GitHub를 선택한 다음 GitHub 계정에 로그인합니다. 애플리케이션을 빌드하고 서버를 실행하기 위해 Heroku가 코드를 자체적으로 가져오도록 권한을 부여합니다.

7. “Connect to GitHub”에서 방금 분기한 리포지토리 이름(예: fil-photo)을 검색한 다음 코드 리포지토리를 연결합니다.

8. 모든 설정을 그대로 두고 "브랜치 배포"를 클릭하여 첫 번째 빌드를 시작합니다. Heroku는 애플리케이션 유형을 인식할 수 있을 만큼 똑똑합니다. 다음:빌드하고 배포하세요.

9. 그러나 서버가 작동하기 전에 사용자 이름, 비밀번호 및 web3.storage 서버 환경의 API Token입니다. Heroku는 인터넷에 노출시키지 않고도 안전하게 액세스할 수 있습니다. "설정"으로 이동한 다음 "구성 변수"로 이동합니다.

10. 다음 구성을 입력하고 SPARKBOOTH_PASSWORD, SPARKBOOTH_USER, W3S_API_TOKEN을 비밀번호, 사용자 이름 및 web3.storage 각각 API 토큰입니다. 이름은 위와 같아야 합니다.

11. 이제 앱이 실행 중이어야 합니다! 나중에 Sparkbooth 7에 넣을 URL을 찾으려면 "설정" 아래의 "도메인"으로 이동하세요.

3단계: Sparkbooth 7 설정

마지막 단계는 사용자 정의 nodejs 앱과 통신하여 설정 흐름을 완료할 수 있도록 사진 부스 노트북의 소프트웨어를 준비하는 것입니다. \

1. 향하다 Sparkbooth.com . 다운로드 스파크부스 7 DSLR , 지불 라이센스 비용 또는 평가판을 사용하십시오.

2. Sparkbooth를 열고 구매를 확인하세요.

3. 앱을 열면 최대화되지만 "ESC"를 눌러 종료할 수 있습니다. 왼쪽 상단의 설정으로 이동합니다.

4. "계정으로 보내기"를 구성한 다음 사용하려는 사용자 이름과 비밀번호를 입력하세요. "서비스 URL"은 Heroku 앱 주소 + "/upload-w3s"여야 합니다. (예: http://fil-photo-booth-uploader.herokuapp.com:443/upload-w3s)

5. 테스트 버튼을 사용하여 연결을 테스트할 수 있습니다. 실패 메시지가 표시되지만 API 호출은 여전히 Heroku 앱으로 이동하여 테스트 사진을 web3.storage 계정. web3.storage 계정에서 테스트 이미지를 확인할 수 있습니다. '포토부스 테스트' 사진이 보이면 설정 성공! 딸깍 하는 소리 여기 확인하다.

w3up 베타 출시 예정

이 앱은 2022년에 빌드되었으며 기존 web3.storage API를 사용합니다. 이 글을 쓰는 시점에는 web3.storage에서 사용할 수 있는 새로운 베타 w3up API가 있습니다. 여러 프레임워크에 대한 프런트 엔드 웹 구성 요소 포함 . 이렇게 하면 IPFS를 사용하는 앱 작성을 더욱 쉽게 시작할 수 있습니다.

몇 가지 개선 제안

앱이 완벽하지 않아요! 개선할 수 있는 몇 가지 영역은 다음과 같습니다.

1. 보안

이는 단지 근거를 보여주기 위한 속임수일 뿐이지만 nodejs 앱의 보안은 이상적이지 않습니다. 애플리케이션 로직에서 비밀번호와 사용자 이름을 검증하는 것은 선호되지 않습니다. 나는 우리 앱에 호출을 전달하기 전에 헤더의 인증을 확인하는 방화벽이나 API 게이트웨이 뒤에 애플리케이션을 배치해야 한다고 생각합니다.

2. 경험

Sparkbooth 7은 훌륭하지만 UI가 상당히 제한적인 것 같습니다. 이것을 좀 더 맞춤화할 수 있다면 좋을 것 같습니다. 아마도 오픈 소스 사진 부스 소프트웨어가 이를 달성하는 데 도움이 될 수 있을까요?

3. 최근 사진 갤러리

어쩌면 별도의 컴퓨터를 사용하여 방문자에게 최신 사진을 보여줄 수도 있습니다. 그들은 자신에게 이메일로 보내고 싶은 사진을 선택하거나, QR 코드를 다시 표시하거나, 소셜 미디어에 공유할 수 있습니다. 여기에는 fil-photo-booth-uploader를 위한 프런트엔드 구축이 포함되며, 이는 프런트엔드 개발자에게 매우 멋진 프로젝트가 될 수 있습니다.

4. 분산형 앱 백엔드를 사용하세요. 아마도 Fluence 나 IPVM 과 같은 누군가가 도움을 줄 수 있을 것입니다.

결론

3일간의 웹 서밋 동안 Filecoin 사진 부스는 컨벤션의 인터넷 연결 문제로 인해 99%의 가동 시간과 1%의 중단을 겪었습니다. 총 934장의 사진이 파일코인 네트워크에 게시되었습니다. web3.storage의 매우 편리한 서비스 덕분에 행성 간 여행을 떠날 준비가 된 거의 1000장의 셀카입니다!

포토존도 유명하다. 셋째 날에는 CNN 기자도 부스를 인터뷰했습니다. (네, 부스가 유명해지고 있어요… 저는 아닙니다.)

포르투갈 리스본에서 열린 Web Summit에서 Filecoin 포토 부스를 인터뷰하는 CNN 기자

이 가이드를 사용하여 이벤트, 모임, 모임, 파티 또는 재미를 위한 행성 간 사진 부스를 직접 만들어 보세요.

Filecoin 네트워크는 이제 16EiB의 저장 용량을 가지며 300PiB 이상의 데이터가 저장되었습니다. 이 프로젝트에 기여하거나 사용하는 방법에는 여러 가지가 있습니다. 참여에 대해 자세히 알아보기 여기 .