플랫폼 차이점을 관리하는 Capacitor

Capacitor 개발자들이 iOS와 Android용 앱을 동일한 코드베이스를 사용하여 개발하는 데 도움을 주며, 플랫폼별 차이점을 해결하고, 네이티브 기능 통합을 간소화하고, 플랫폼 지침 준수 및 성능 최적화를 보장합니다. 주요 특징:

플랫폼 감지: 사용 Capacitor.getPlatform() 을 통해 플랫폼에 따라 code를 적용하세요.
내장 플러그인: 카메라, 저장소, 위치 정보와 같은 기능에 대한 통합 API.
커스텀 플러그인: 유니크한 요구 사항에 대한 네이티브 code를 추가하세요.
UI 조정: iOS (예: SF Symbols, 둥근 버튼)와 Android (예: Material Icons) 디자인 규칙을 따르세요. SF Symbolsrounded buttons Material Icons왼쪽 정렬된 버튼).
설정: 양쪽 플랫폼에서 설정을 조정합니다. capacitor.config.json 실시간 업데이트와 함께
__CAPGO_KEEP_0__ Capgo: 앱 스토어 지연 없이 즉시 업데이트를 배포하여 24시간 내에 95%의 사용자 수락을 달성합니다.

빠른 비교

기능	iOS	안드로이드
네비게이션	하단 탭 바, 뒤로 버튼 왼쪽	상단 네비게이션 드로어, 하단 네비게이션
타이포그래피	San Francisco 폰트	Roboto 폰트
플러그인 (예: 카메라)	AVFoundation	카메라2 API
빌드 출력	`.ipa` 파일	`.aab` 또는 `.apk` 파일

Capacitor

크로스 플랫폼 개발: CapacitorJS와의 …

How Capacitor Handles Platform Code

Capacitor

Capacitor offers tools to manage platform-specific code, allowing developers to create tailored experiences for iOS and Android using a single API.

Code

With Capacitor’s built-in platform API, detecting the current platform is simple. The Capacitor.getPlatform() __CAPGO_KEEP_2__

import { Capacitor } from '@capacitor/core';

const platform = Capacitor.getPlatform();
if (platform === 'ios') {
  // Code specific to iOS
} else if (platform === 'android') {
  // Code specific to Android
}

__CAPGO_KEEP_0__ 생체 인증, iOS는 Face ID를 사용하고 Android는 지문 인증을 사용합니다. Face ID and Android relies on Fingerprint Authentication. Along with platform detection, Capacitor’s built-in plugins simplify native integration.

플랫폼 차이處理

Capacitor의 내장 플러그인은 네이티브 통합을 간소화합니다.

내장 플랫폼 기능	__CAPGO_KEEP_0__는 플랫폼별 차이점을 무난하게 처리하는 코어 플러그인을 제공합니다. 이 플러그인은 네이티브 구현의 복잡성을 관리하면서 일관된 자바스크립트 인터페이스를 제공합니다.	플러그인
iOS 구현	Android 구현	Camera2 API
__CAPGO_KEEP_0__	저장소	UserDefaults
SharedPreferences	위치 정보	CoreLocation

위치 정보 관리

Each plugin automatically uses the platform’s native APIs, ensuring smooth performance and functionality.

사용자 정의 플랫폼 플러그인 만들기

For cases where built-in plugins don’t meet your needs, you can create custom plugins to access specific native APIs. Here’s how:
```
@Plugin({
  name: 'CustomFeature',
  platforms: ['ios', 'android']
})
```

Add Native Code

@PluginMethod()
async customFunction(): Promise<void> {
  if (Capacitor.getPlatform() === 'ios') {
    // Add iOS-specific code
  } else {
    // Add Android-specific code
  }
}

Add Native __CAPGO_KEEP_0__

iOS (Swift):

@objc func customFunction(_ call: CAPPluginCall) {
  // Add native iOS functionality
}

안드로이드 (Kotlin):

@PluginMethod
fun customFunction(call: PluginCall) {
  // Add native Android functionality
}

사용자 지정 플러그인은 API를 일관성 있게 유지하고 사용하기 쉽게 하여 성능과 기능성을 유지하면서 개발 프로세스를 복잡하게 하지 않습니다.

플랫폼별 UI 지침

iOS vs Android 디자인 규칙

iOS와 Android를 위한 디자인을 할 때, 사용자별로 다른 디자인 패턴을 따라야 합니다. 사용자는 네비게이션, 타이포그래피, 버튼, 헤더, 아이콘과 같은 것에 대해 다른 기대치를 가지고 있습니다. 이들은 어떻게 비교되는지 알아보겠습니다.

디자인 요소	iOS	안드로이드
네비게이션	하단 탭바, 왼쪽에 있는 뒤로가기 버튼	상단 네비게이션 드로어, 하단 네비게이션
Typography	San Francisco font	Roboto font
Buttons	둥근 사각형, 가운데 텍스트	Material Design 버튼, 왼쪽 정렬 텍스트
Headers	큰 제목, 가운데	앱 바, 왼쪽 정렬
Icons	SF Symbols	Material Icons

플랫폼 간 디자인 표준

각 플랫폼은 독특한 규칙을 가지고 있지만, 양쪽에서 일관된 브랜드 정체성을 유지하는 것은 중요합니다. 여기서 어떻게 일관성을 유지할 수 있는지 알려드리겠습니다.

const sharedStyles = {
  primaryColor: '#007AFF', // iOS blue
  androidPrimaryColor: '#6200EE', // Material Design purple
  borderRadius: Capacitor.getPlatform() === 'ios' ? '10px' : '4px'
};

:root {
  --app-header-height: var(--platform-header-height, 56px);
  --app-safe-area-top: var(--platform-safe-area-top, 0px);
}

Capacitor을 사용하여 플랫폼별 UI 컴포넌트를 통합할 수 있습니다. 또한 시스템 전역 설정인 Dark Mode와 Dynamic Type를 관리하는 데 도움이 됩니다. 이 과정을 완료하려면 플랫폼별 빌드 설정이 이 지침과 일치해야 합니다.

플랫폼 설정 및 구성

플랫폼 code을 관리한 후, iOS와 Android에서 앱이 정상적으로 작동하도록 보장하기 위해 올바른 구성이 중요합니다.

플랫폼 설정 `capacitor.config.json`

Use the capacitor.config.json 파일을 사용하여 iOS와 Android에서 사용하는 플랫폼별 설정을 정의할 수 있습니다.

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "ios": {
    "contentInset": "always",
    "backgroundColor": "#ffffff",
    "scheme": "myapp",
    "preferredContentMode": "mobile"
  },
  "android": {
    "backgroundColor": "#FFFFFF",
    "allowMixedContent": true,
    "captureInput": true,
    "webContentsDebuggingEnabled": true
  }
}

다음 설정 옵션을 고려하세요:

옵션	iOS	Android
Deep Links	`scheme` 속성	`androidScheme` 속성
상태 바	`statusBar.style`	`statusBar.backgroundColor`
키보드	`keyboard.resize`	`keyboard.resize`, `keyboard.style`
스플래시 화면	`splashScreen.launchShowDuration`	`splashScreen.layoutName`

런타임 설정이 준비되면 각 플랫폼을 위한 빌드 설정을 조정하여 성능을 향상하세요.

플랫폼별 빌드 설정

iOS와 Android를 위한 빌드 설정을 최적화하세요.

iOS의 경우 Info.plist 파일:

<key>NSCameraUsageDescription</key>
<string>Required for document scanning</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Required for store locator</string>

Android의 경우 android/app/build.gradle:

android {
    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 33
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt')
        }
    }
}

__CAPGO_KEEP_0__

Aspect	iOS	Android
Permissions	__CAPGO_KEEP_0__ `Info.plist`	__CAPGO_KEEP_1__ `AndroidManifest.xml`
__CAPGO_KEEP_2__	__CAPGO_KEEP_3__	__CAPGO_KEEP_4__
__CAPGO_KEEP_5__	__CAPGO_KEEP_6__	XML 기반 레이아웃
빌드 출력	`.ipa` 파일	`.aab` 또는 `.apk` Capacitor

파일 Capgo

Capgo Live Update Dashboard Interface

Capacitor Capacitor apps updated efficiently for both iOS and Android is crucial. Capgo offers a live update system that aligns with the guidelines of both platforms.

Capgo Features

기능	설명	플랫폼 이점
실시간 업데이트	앱 스토어 검토 없이 즉시 배포	iOS와 Android에서 일관된 경험을 보장
끝-to-끝 암호화	업데이트 전달을 보장	iOS와 Android의 보안 요구 사항을 충족
채널 시스템	특정 사용자 그룹을 대상	베타 테스트 및 phased 롤아웃을 지원
부분 업데이트	다운로드만 수정된 콘텐츠	대역폭 절약 및 업데이트 속도 향상

Capgo은 23.5 만 개의 업데이트 delivery를 완료하여 24 시간 이내에 95%의 활성 사용자 업데이트율을 달성했습니다. [1]. 이러한 기능은 업데이트 관리 플랫폼 간에 smoother하고 더 효율적인 업데이트를 제공합니다.

Capgo 플랫폼 관리

Capgo 채널 시스템은 업데이트를 더 쉽게 관리합니다. 개발자는 iOS 전용 기능을 베타 사용자와 테스트할 수 있으며 Android 업데이트를 단계적으로 출시할 수 있으며 성능 메트릭스를 무중단으로 추적할 수 있습니다.

이 플랫폼은 Apple과 Google의 OTA 업데이트 요구 사항을 준수합니다. [1].

현재, 750 개의 프로덕션 앱이 Capgo을 사용하여 82%의 글로벌 업데이트 성공률을 유지하고 있습니다. [1]. CI/CD 통합은 배포를 간소화하고 롤백 기능은 개발자가 문제가 발생할 경우 이전 버전으로 즉시 되돌릴 수 있도록 해줍니다. 실시간 분석은 업데이트 성능에 대한洞察를 제공하고 앱 안정성을 유지하는 데 도움이 됩니다.

결론

플랫폼 관리 이점

Capacitor에서 플랫폼 차이점을 효과적으로 관리하는 것은 크로스 플랫폼 개발을 향상시키는 데 도움이 됩니다. 플랫폼 감지 및 구성에 대한 내장 도구를 통해 개발자는 iOS와 Android 모두에 대한 smooth한 경험을 제공할 수 있으며, 각 플랫폼의 고유한 디자인 표준 및 기능을 존중할 수 있습니다.

개발 팀이 업데이트를 더 빠르게 릴리즈하고 사용자 만족도를 높일 수 있도록 플랫폼 관리에 초점을 맞추면, Capgo와 같은 도구는 일관된 플랫폼 처리가 높은 업데이트 성공률과 더 나은 사용자 경험을 가져올 수 있음을 보여주었습니다. [1].

“Agile 개발을 실천하고 @Capgo는 사용자에게 지속적으로 제공하는 mission-critical입니다!”
– Rodrigo Mantica [1]

이런 통찰력을 바탕으로 실질적인 개선책을 만들 수 있습니다.

다음 단계

페이지/영역: Capgo Builder / Native Cloud Build 제품 페이지. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 메시지 키 `native_build_builder_credit_next` (Native Build Builder Credit Next).

이 이점을 최대로 활용하려면 다음 전략을 고려하십시오:	작업 항목
이점	자동으로 iOS와 Android의 요구 사항에 맞춰 조정합니다.
실시간 업데이트 구현	급한 수정을 위한 앱 스토어 지연을 피합니다.
분석 설정	각 플랫폼의 성능 지표를 추적합니다.
롤백 지원 활성화	플랫폼별 문제를 신속하게 해결합니다.

개발자들이 워크플로우를 개선하기 위해 Capgo와 같은 도구를 사용하는 경우, 프로세스를 단순화할 수 있습니다. 엔드 투 엔드 암호화 및 CI/CD 통합과 같은 기능은 팀이 일관성을 유지하면서 효율적으로 업데이트를 배포할 수 있도록 도와줍니다.

플랫폼 관리의 성공은 올바른 도구를 사용하고 플랫폼별 지침을 준수하는 데에 달려 있습니다. 강력한 감지 및 관리 전략에 집중함으로써 개발자는 iOS와 Android 모두에서 앱이 부드럽게 작동하도록 보장할 수 있습니다.

How Capacitor Handles Platform Differences로 계속 진행하세요.

__CAPGO_KEEP_0__을 사용하고 있다면 How Capacitor Handles Platform Differences 플랫폼 차이處理 Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.

How Capacitor Handles Platform Differences