개요

Composition API를 사용한 파일 업로드 및 새 APIFirebase Storage를 사용한 Ionic Framework Web Components for Vue 3 표시

Ionic Integration의 최신 베타 릴리스를 Vuejs Beta 3과 함께 사용하고 있습니다. 예제에서 typescript를 사용하고 있으며 단일 파일 구성 요소를 생성할 때 Composition API의 새로운 패턴에 크게 의존하고 있습니다.

비디오에서 다루는 내용

00:00 - 소개
00:10 - 애플리케이션 기능 개요
02:35 - Firebase 저장소 업로드 구성 API 후크에 집중
09:12 - 카메라 업로드 홈페이지
14:47 - 목록 업로드 풀 투 새로고침
16:24 - 이미지 세부 매개변수
16:50 - 스토리지 버킷에서 객체 목록 가져오기
17:39 - 탭 설정
19:41 - 이미지 상세 페이지

소스 코드

아론 손더스 / ionic-vue 3-sample-2

Firebase 파일 업로드를 통합하고 업로드된 파일을 나열합니다. 컴포지션 API로 생성된 Firebase 후크 사용

📺

Firebase Upload Hook Composition API를 사용하는 Vue 3 Ionic Capacitor 샘플 앱(버전 2)

updated 9/4/2020

• Features: IonTabs, IonPage, IonToast, Capacitor Plugins Camera, GeoLocation, Firebase Storage, Page Routing, Page Parameters
• YOUTUBE VIDEO - https://youtu.be/y2nP5OPJ6tk

• PART ONE, Capacitor Camera & Geolocations
• PART TWO, Firebase Integration
• PART THREE, Firebase Integration, Authentication

PWA/웹사이트/장치에서 작동하는 카메라

참조 https://capacitor.ionicframework.com/docs/pwa-elements/

타이프스크립트 사용

컴포지션 API 함수에서 Typescript 사용

모든 단일 파일 구성 요소에 대해 TypeScript 사용

저장소에 파일을 업로드하기 위해 Firebase 사용

파일을 업로드하고 나열하는 업데이트된 firebase 파일 업로드 구성 api 함수는 스토리지 버킷입니다

.

hooks 디렉토리에 배치할 자체 Firebase 구성 파일을 만들어야 합니다

.

// .env.firebase.ts
const FIREBASE_CONFIG = {
    apiKey: "zebaayDI9wPgYFLRUd_07WB8ZVHPWowFm2w"
    authDomain: "fffffff.firebaseapp.com"
    databaseURL: "https://fffffff.firebaseio.com"
    projectId: "fffffff",
    storageBucket: "fffffff.appspot.com",
    messagingSenderId: "87HPWowFm2w999",
    appId: "1:00000031465:web:53a3bHPWowFm2wc6a38",
    measurementId: "G-aSyDI9wPjgY",
  };
  
  export default FIREBASE_CONFIG 

구성 요소에 컴포지션 패턴 사용

버전

Ionic:

   Ionic CLI

…

View on GitHub