분류 mobile

웹 개발자가 모바일 앱을 구축하는 가장 쉬운 방법

컨텐츠 정보

  • 조회 281 (작성일 )

본문

모바일 앱 구축에 관심이 있는 웹 개발자를 위한 다양한 옵션이 있습니다. 개발자는 React Native, NativeScript, Cordova, Ionic Framework 및 Capacitor와 같은 프로젝트 중에서 선택할 수 있습니다.


많은 옵션을 감안할 때 친숙한 웹 기반 개발 경험을 원하는 웹 개발자에게 가장 적합한 것이 무엇인지 항상 명확하지는 않습니다.


이를 통해 Capacitor (선택적으로 Ionic Framework와 같은 모바일 중심의 UI 프레임 워크 포함)가 웹 개발자가 모바일 앱을 구축 할 수 있는 가장 자연스럽고 쉬운 방법이라는 사실을 확인하고 싶습니다.


"Electron for Mobile" 


Electron은 표준 웹 기술을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 구축하는 데 널리 사용되는 솔루션입니다. 웹 개발자는 React / Angular / Vue, Tailwind 또는 Material UI와 같은 인기 있는 라이브러리를 포함하여 웹 앱에 사용하는 표준 HTML, CSS 및 JavaScript를 사용하고 이러한 앱을 강력한 데스크톱 앱으로 전환 할 수 있습니다.


이 간단한 공식은 Electron을 가장 인기 있는 크로스 플랫폼 툴킷 중 하나로 만들었습니다. 오늘날 Electron은 Slack 및 VS Code와 같은 많은 인기 앱을 지원합니다.


"Electron과 유사하지만 모바일 앱을 위한 것은 무엇입니까?"라고 질문 한 적이 있다면? 대답은 커패시터입니다.


Electron과 마찬가지로 Capacitor는 브라우저에서 실행되는 표준 웹 앱을 가져 와서 강력한 네이티브 API 및 네이티브 UI (예 : 카메라파일 시스템)에 대한 액세스로 확장합니다. 이러한 API는 iOS, Android, 웹 및 Electron에서 작동합니다.


Electron은 Chromium을 통해 "웹보기"에서 번들로 제공되지만 Capacitor는 iOS 및 Android에서 사용할 수 있는 표준 내장 웹보기 기본 컨트롤을 사용합니다. 이것은 Capacitor가 Electron과 동일한 팽창 문제를 겪지 않는다는 것을 의미합니다.


순 효과는 Capacitor가 실제로 일종의 "Electron for Mobile."라는 것입니다.


React Native 또는 Flutter는 어떻습니까? 


스스로에게 물어볼 수도 있습니다. React Native (또는 Flutter)가 "모바일 용 전자"가 아닌 이유는 무엇입니까?


그 이유는 React Native와 Flutter는 표준 웹 브라우저 환경을 사용하여 앱을 실행하지 않기 때문입니다. 오히려 실제 웹 환경이 아닌 "웹과 유사한"앱 빌드 경험을 제공하기 위해 시스템 UI 컨트롤 및 API에 대한 추상화입니다. 둘 다 각 플랫폼에 대해 특별히 작성된 코드가 필요하며 웹 특정 라이브러리 또는 코드를 사용할 수 없습니다.


이것은 웹 개발자가 모바일 앱을 빌드 하는 최단 경로가 Capacitor임을 의미하므로 중요합니다.


Alt Text 


 


Alt Text 


네이티브 품질의 모바일 UI 경험을 위해 Ionic Framework와 React를 사용하는 웹 앱의 간단한 예를 들어 보겠습니다 .Capacitor를 사용하여 iOS, Android 및 웹에 네이티브로 배포합니다.


코드를 살펴보면 UI 구성 요소에 Ionic Framework를 사용하는 단순한 React 앱이라는 것을 알 수 있습니다. 예를 들어 React Router에 익숙한 개발자는 Tab 레이아웃을 빌드하는 데 사용되는 JSX가 익숙하다는 것을 알아야 합니다.


그런 다음 몇 가지 Capacitor 명령을 실행하여 앱을 번들링하고 Xcode에서 바로 실행할 수 있습니다.


Alt Text 


우리 앱은 단순한 React 앱이기 때문에 브라우저에서 직접 실행할 수도 있고 모든 정적 웹 호스트에 프로그레시브 웹 앱으로 배포 할 수도 있습니다.


Alt Text 

마지막으로 Capacitor는 장치 기능에 액세스하는 일관된 교차 플랫폼 접근 방식을 제공하는 JS 모듈 @ capacitor / core와 함께 제공됩니다.


예를 들어 Filesystem API에 액세스하려면 iOS, Android, Web 및 Electron에서 동일한 코드를 사용할 수 있습니다.


import {
  Plugins, 
  FilesystemDirectory,
  FilesystemEncoding
} from '@capacitor/core';

const { Filesystem } = Plugins;

async fileWrite() {
  try {
    const result = await Filesystem.writeFile({
      path: 'secrets/text.txt',
      data: "This is a test",
      directory: FilesystemDirectory.Documents,
      encoding: FilesystemEncoding.UTF8
    })
    console.log('Wrote file', result);
  } catch(e) {
    console.error('Unable to write file', e);
  }
}


누가 커패시터를 사용하고 있습니까? 


커패시터는 오늘날 주요 앱을 구동하는 데 사용되고 있습니다. Burger King, Popeyes 및 BBC (Capacitor를 사용하여 범용 웹 네이티브 앱을 빌드하는 방법에 대한 훌륭한 기사를 작성 함)와 같은 회사는 하나의 코드 기반과 표준으로 iOS, Android, 웹 및 데스크톱에서 Capacitor 빌드 앱을 사용하고 있습니다. 웹 기술.


Capacitor는 또한 Ionic Framework의 새로운 기본 기반으로 오늘날 앱 스토어에 있는 모든 앱의 15 % 이상을 지원합니다.


Capacitor 시작하기 


Electron에 익숙하다면 Capacitor는 매우 친숙 할 것입니다. 일반적인 JS 모듈처럼 앱에 직접 설치되며 웹 앱을 네이티브 iOS 및 Android 프로젝트에 복사하고 새 Capacitor 플러그인을 동기화 및 설치하기 위한 로컬 CLI 도구가 추가됩니다.


Capacitor를 시작하려면 공식 Capacitor 문서를 확인하고 구축하십시오!


https://dev.to/ionic/the-easiest-way-for-web-developers-to-build-mobile-apps-1ih8