웹 도구를 사용한 Android 개발: Ionic React를 사용한 가장 빠른 제작 방법

Android 개발에 투자하면 엄청난 기기 시장 점유율, 시장 도달 범위 확대, 높은 투자 수익을 얻을 수 있습니다.

전 세계적으로 68억 명이 넘는 스마트폰 사용자가 있습니다. Android는 전 세계 시장 점유율의 약 70%를 점유하고 있으며 약 47억 6천만 명의 사용자를 보유하고 있어 틈새 시장을 쉽게 찾을 수 있습니다. 고품질의 빠른 애플리케이션을 생산하는 것이 가장 중요합니다.

기본 웹 구성 요소가 포함된 Ionic을 사용하면 HTML, JavaScript, CSS와 같은 친숙한 도구를 사용하여 성능이 뛰어난 고품질 Android 앱을 구현하는 동시에 Capacitor로 기본 기능을 활용할 수 있습니다.

이것은 단순한 Ionic 튜토리얼 그 이상입니다. 생산 준비가 완료된 고품질의 고성능 Android 애플리케이션을 구축하는 것입니다.

이 기사는 프론트엔드인 React를 사용하여 Ionic의 기본 사항을 다루고 나중에 Capacitor를 사용하여 네이티브 기술과 웹 기술 간의 연결을 탐색하는 시리즈에 대한 소개입니다.

이온 프레임워크: 소개

런타임이나 서로 다른 기술 간의 브리지는 새로운 것이 아닙니다!

Node.js를 예로 들어 보겠습니다. Node를 통해서만 JavaScript가 시스템 언어가 될 수 있습니다.

   [JS]
   [byte code]
   [Node] --> [N API] --> [C/C++ modules]
   [bindings]
   [Cpp][V8][libuv]
   [OS]

HTML, JavaScript, CSS를 사용하는 하이브리드 데스크톱 애플리케이션을 WebView를 통한 보기로 생각해 보세요. 성능이 뛰어난 데스크톱 개발 프레임워크인 Go Wails는 이러한 아이디어를 기반으로 합니다. 마찬가지로 Rust Tauri 앱도 이 원칙에 따라 작동합니다.

바인딩은 React Native 및 NativeScript와 같은 예를 들어 모바일 세계에서 한동안 존재하고 테스트되었습니다.

개발자들은 UI뿐만 아니라 아름답고 반응성이 뛰어난 UI의 중요성을 깨닫고 있습니다. 이 분야에는 웹 기술만큼 발전된 프레임워크가 없습니다.

Android 네이티브 개발은 덜 선호되는 XML에서 벗어나 Kotlin의 구성 가능한 UI를 사용하는 React 방향으로 이동하고 있습니다.

이러한 추세는 아름다운 구성 가능 UI와 기본 속도라는 두 가지 장점을 모두 제공합니다. 이것이 바로 Ionic이 동종 제품 중에서 눈에 띄는 부분입니다. 차이점은 Ionic이 이해하기 쉽다는 것입니다. 저는 한 달도 안 되어 클라이언트의 애플리케이션을 성공적으로 구축했습니다.

설정

새 프로젝트 폴더를 만들고 다음을 실행하세요.

npx ionic start

이렇게 하면 Ionic 설정이 진행됩니다. 이 글의 프론트엔드 프레임워크로 React를 선택하세요.

Vite는 아직 Ionic 웹 구성 요소의 핵심인 Stencil.js를 지원하지 않기 때문에 Ionic은 여전히 ​​Webpack과 CRA(Create React App)를 사용합니다.

모든 것이 설치되면 VSCode에서 프로젝트를 엽니다. 나는 npm을 제거하고 pnpm을 사용하는 것을 선호합니다(이 단계는 선택 사항입니다). 당신도 똑같이 하고 싶다면:

• node_modules 폴더를 삭제하세요.

• package.json이 아닌 package-lock.json 파일을 삭제하세요.

• pnpm install을 실행하세요.

Ionic 애플리케이션을 실행하려면 다음을 사용하세요.

npx ionic serve

Ionic CLI가 모든 것을 처리해 드립니다. 휴대폰과 유사한 미리보기를 위해 --lab 옵션을 사용할 수도 있습니다(참고: 이는 Android 또는 iOS 에뮬레이터가 아니라 "보기"입니다).

pnpm add -D @ionic/lab

npx ionic serve --lab

이를 통해 휴대폰과 같은 보기에서 UI가 어떻게 보일지 미리 볼 수 있습니다.

구조 검토

선택한 IDE에서 프로젝트가 열려 있다고 가정합니다. React 경험이 없다면 다소 어려울 수 있습니다. 기본 React 튜토리얼을 수강하고 React 라우터에 대해 알아보는 것이 좋습니다.

진입점은 index.tsx의 표준 React 애플리케이션 렌더링입니다.

root.render(      

<React.StrictMode>

     <App/>

</React.StrictMode>

  );

App.tsx에서는 Ionic 라우터와 구성 요소를 사용하는 라우터 및 탭 탐색 모음입니다. Ionic 구성 요소는 Stencil.js로 구축된 기본 웹 구성 요소로, 모바일 애플리케이션처럼 보이도록 설계되었습니다.

Ionic은 iOS와 Android 표준에 모두 맞는 CSS 파일과 테마를 제공합니다. 자연스러운 모바일 애플리케이션 모양과 느낌을 위해 HTML 대신 Ionic 구성 요소를 사용하세요.

라우터부터 시작하여 App.tsx를 분석해 보겠습니다. React 웹 라우터와 유사하게 작동하여 구성 요소에 대한 경로를 일치시키고 탐색 시 일치하는 구성 요소를 렌더링합니다.

import Tab1 from './pages/Tab1';

import Tab2 from './pages/Tab2';

import Tab3 from './pages/Tab3';



    <IonRouterOutlet>
          <Route exact path="/tab1">
            <Tab1 />
          </Route>
          <Route exact path="/tab2">
            <Tab2 />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route exact path="/">
            <Redirect to="/tab1" />
          </Route>
     </IonRouterOutlet>

백엔드에 익숙하다면 경로는 엔드포인트, 컴포넌트는 핸들러입니다.

   <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon aria-hidden="true" icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon aria-hidden="true" icon={ellipse} />
            <IonLabel>Tab 2</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon aria-hidden="true" icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
     </IonTabBar>

IonTabBar는 애플리케이션 하단의 제공된 슬롯에 탭 표시줄을 생성합니다. 마법은 탭 버튼에 있습니다. href를 사용하여 라우터를 트리거합니다. Ionic 구성요소로 래핑된 모든 일반 React 코드.

탭 페이지 중 하나를 따르세요. 본질적으로 단순한 페이지입니다.

   <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name="Tab 1 page" />
      </IonContent>
    </IonPage>

Ionic 페이지 구성요소를 사용하면 스크롤 및 반응성과 같은 작업이 즉시 처리됩니다.

Ionic 페이지의 표준 구조에는 대부분의 모바일 애플리케이션과 유사하게 도구 모음과 콘텐츠 영역이 있는 헤더가 포함되어 있습니다.

헤더:

  <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>

콘텐츠 영역:

    <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
          <ExploreContainer name="Tab 1 page" />
      </IonContent>

The content area occupies most of the screen, where most of the application lives. The ExploreContainer acts as a slot; we can conditionally render components based on the name prop.

<ExploreContainer name="Tab 1 page" />

When name is "Tab 1," we render a component for that tab. You can hard code components for each tab, but the slot method is more flexible and composable.

For example, open the ExploreContainer component under the components folder and create three new components:

const Tab1Content = () => { return ( "I am tab 1 content" ); }

const Tab2Content = () => { return ( "I am tab 2 content" ); }

const Tab3Content = () => { return ( "I am tab 3 content" ); }

Now update the container to conditionally render based on the name prop:

<div className="container">
  {name.includes("Tab 1") ? <Tab1Content /> : name.includes("Tab 2") ? <Tab2Content /> : <Tab3Content />}
</div>

This is just an example; you can create an easy-to-follow pattern matching method. The updated preview should show "I am tab x content" based on the tab clicked.

This application is still web-based. We haven't installed or initialized Capacitor, which is responsible for turning our application into a native app.

Capacitor is a cross-platform native runtime for web apps, allowing us to create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.

Enabling Capacitor in Ionic

First, install Capacitor:

pnpm add @capacitor/core
pnpm add -D @capacitor/cli

Next, initialize the Capacitor configuration file:

npx cap init

The package ID should uniquely identify your app. We use an inverted domain name, e.g., com.example.app.

Capacitor is initialized. Run the following commands to install a Capacitor platform and primitive plugins:

pnpm add @capacitor/android



pnpm add @capacitor/app @capacitor/haptics @capacitor/keyboard @capacitor/status-bar

The following command will create the native android project structure and files in your ionic project:

npx cap add android

Important: Build the web app:

pnpm run build

to avoid this error before we run sync

[error] Could not find the web assets directory: .\build.

... More info: https://capacitorjs.com/docs/basics/workflow#sync-your-project

Once the build is finished, you can sync, copying the built web app; into the native webview:

npx cap sync

Believe it or not, we are ready to either build or preview the native application in an emulator.

We'll dive deeper into Capacitor and native development, environment setup, etc., in the next article.

Since we are still getting a feel for Ionic, let's play with a few Ionic components and wrap up with a simple application example.

PokeApp Example

You can easily find Ionic components in the documentation.

We'll implement a simple app that fetches Pokémon data from the PokeAPI, for a compact card view, and then build it into an APK.

From the results, we can already see how decent the app looks with no styling—thanks to the power of Ionic components.

Open the ExploreContainer component, and we'll work on Tab 2.

Update the component and add the following:

const BASE_LINK = "https://pokeapi.co/api/v2/pokemon/"



const Tab2Content = () => { 



 const [pokemon, setPokemon] = useState("pikachu")



 useEffect(()=> {    

if(pokemon != ""){    

  fetch(BASE_LINK + pokemon).then(async(poke)=> {

       console.log(await poke.json())              

    }).catch((err)=>console.log(err))   

 } 



 }, [pokemon])  



// add some padding to the div below

return  (

  <div style={{padding: ".5em"}}>

        I am tab 2 content  
 </div>

)}

We've added a state to track the Pokémon we want to look up, with the default being Pikachu:

const [pokemon, setPokemon] = useState("pikachu")

On load, we fetch the Pokémon data from the PokeAPI:

 useEffect(()=> {    

if(pokemon != ""){    

  fetch(BASE_LINK + pokemon).then(async(poke)=> {

       console.log(await poke.json())              

    }).catch((err)=>console.log(err))    } 

 }, [pokemon])  

The useEffect hook runs twice in React strict mode.

Instead of logging our result, let's turn it into a state so we can use it in our card component.

First, add a new useState under the Pokémon one:

 const [showResults, setResults] = useState()

Then, update the useEffect to set the results::

 useEffect(()=> {
    if(pokemon != ""){
      fetch(BASE_LINK + pokemon).then(async(poke)=> {


       const results = await poke.json()
       const {front_default} = results.sprites
       setResults({front_default})


      }).catch((err)=> console.log(err))
    }
  }, [pokemon])

The PokeAPI returns a lot of data. We are interested in the Pokémon image, specifically the front-facing image in the sprites object:

       const results = await poke.json()
       const {front_default} = results.sprites
       setResults({front_default})

If you are familiar with React, you know we have created the re-render on state change loop already. Now, we just need to consume the data:

 return  (
  <div style={{padding: ".5em"}}>
 <IonCard>
      <IonCardHeader>
        <IonCardTitle>{pokemon}</IonCardTitle>

      </IonCardHeader>

      <IonCardContent>
         <img src={showResults ? showResults.front_default : ""} />
      </IonCardContent>
    </IonCard>
  </div>
  )

We use an Ion card component to show the retrieved image:

   <IonCardContent>
         <img src={showResults ? showResults.front_default : ""} />
      </IonCardContent>

We have a basic structure already, but we can only show the default Pokémon. We need a way to accept user input (a Pokémon name) and make a fetch request based on that input.

The basic React approach is to have an input element bound to a useState value, updating it on onChange. However, in our case, this is problematic because every keystroke will trigger our useEffect, making multiple erroneous requests to the PokeAPI.

Instead, we need the user to type fully and press a search button to initiate the API call. Copy the code below and paste it on top of the Ion card:

 <IonItem>
        <IonInput aria-label="Pokemon" value={pokemon} ref={pokeNameref}></IonInput>
      </IonItem>
      <IonButton onClick={()=> PokeSearch() }>search</IonButton>

</IonItem>

From the code above, we need two things: a useRef pointing to our Ion input and a PokeSearch function triggered by an Ion button.

const Tab2Content = () => {
  const [pokemon, setPokemon] = useState("pikachu")
  const [showResults, setResults] = useState<any>()
  const pokeNameref = useRef<any>(null)

  const PokeSearch = () => {

    if(pokeNameref.current){

      console.log(pokeNameref.current.value)
         setPokemon(pokeNameref.current.value.toLocaleLowerCase())
    }
  }



....



}

The code below is responsible for updating the state, triggering the effect

 if(pokeNameref.current){

      console.log(pokeNameref.current.value)
         setPokemon(pokeNameref.current.value.toLocaleLowerCase())
    }

The entire component:

const Tab2Content = () => {
  const [pokemon, setPokemon] = useState("pikachu")
  const [showResults, setResults] = useState<any>()
  const pokeNameref = useRef<any>(null)

  const PokeSearch = () => {

    if(pokeNameref.current){

      console.log(pokeNameref.current.value)
      setPokemon(pokeNameref.current.value.toLocaleLowerCase())
    }
  }

  useEffect(()=> {
    if(pokemon != ""){
      fetch(BASE_LINK + pokemon).then(async(poke)=> {
       const results = await poke.json()
       console.log(results.sprites)
       const {front_default} = results.sprites
       setResults({front_default})
      }).catch((err)=> console.log(err))
    }
  }, [pokemon])

  return  (
  <div style={{padding: ".5em"}}>
      <IonItem>
        <IonInput aria-label="Pokemon" value={pokemon} ref={pokeNameref}></IonInput>
      </IonItem>
      <IonButton onClick={()=> PokeSearch() }>search</IonButton>
 <IonCard>
      <IonCardHeader>
        <IonCardTitle>{pokemon}</IonCardTitle>

      </IonCardHeader>

      <IonCardContent>
         <img src={showResults ? showResults.front_default : ""} />
      </IonCardContent>
    </IonCard>
  </div>
  )
}

Our simple PokeApp is complete. Make sure ionic serve --lab is running and type a few Pokémon names, such as:

bulbasaur dragonite

If everything is set up correctly, the Pokémon should change on search.

Not a life-changing application, but enough for learning Ionic. The next step requires Android Studio . Download it and follow the defaults while installing it.

PokeApp to APK

If you have never seen Android Studio, it’s probably the most complex IDE and has a steep learning curve!

I suggest following the defaults on installation and letting it run its course. My only suggestion is to select the option to install an emulator, which makes it easier to build and review the APK before bundling it.

When you download Android Studio for the first time, it'll download a lot of dependencies and set up Gradle, which may take some time. Let it do its thing. Gradle is a build tool for Android, similar to how we use Webpack or Vite in web development.

When you are ready and Android Studio is installed, navigate to our PokeApp in the terminal.

As an extra precaution, build and sync before opening the project in Android Studio to ensure there are no errors:

pnpm run build

npx cap sync

If the build is successful, we can rest assured there are no errors in our application. Next, open the project in Android Studio:

npx cap open android

Let the Gradle processes run:

When Gradle is done, try running the app in an emulator (top middle) in the IDE. If the app runs on the emulator, you can be sure it'll bundle to a standalone APK:

Check this extensive link for more ways to debug and run your APK: android studio run

Notes on Building the APK

There are a few steps involved in building an actual production APK for the Google Play Store, from setting up an Android console to creating banner images, which are tedious but essential tasks.

Note: The Android development account is a one-time fee. You can buy and set it up on Google Console.

Design, search keywords, and banners are beyond coding. This series is about getting the coding part right! I promise everything else will fall into place with practice and getting used to the tediousness of the Google Play Console.

In short, I will skip the Google Play Console for a few reasons:

• It takes a while (2 weeks minimum) to get approved.
  When approved, the APK goes through a vetting process (takes time, may fail).

• You can't submit an APK on Google Console unless you have banners and icons.

• There is a lot of editing and icon generation for different screens.

These reasons make it impractical to include in a tutorial. But rest assured, what I will show you in this and upcoming articles will prepare you to build production-ready applications to publish in any store besides Google or for self-hosting.

However, if you already have a Google Play account, there are many articles and videos on publishing an Ionic Android app.

For our case, as long as we can generate a debug APK file and install it on an emulator or real phone, the other steps are just a Google search away!

Because this process is tedious, I will dedicate a separate article in this series to go through Android Studio, sign an APK, and build a release. For now, a debug APK will suffice as this article is already long.

Generating a debug apk

Look at your Android Studio top bar left; after the Android icon, there should be a hamburger menu button. Select to expand the menu. The build option is hidden there:

If the APK is generated successfully, a popup should show at the bottom right with a locate option, which will open the explorer to the APK path. You can share or install it on an Android device!

If you want to create a signed APK, the full production deal, Google has an extensive documentation

This was a high-level overview. We will go deeper with each article in the series.

이 기사에서는 웹 도구를 사용한 Android 개발을 소개했으며, 우리가 선택한 프레임워크는 Ionic이었습니다. Ionic 및 Ionic 구성 요소의 기본 사항, 기본 런타임 브리지 Capacitor 설정 방법, 디버그 APK 구축 방법을 다루었습니다.

Capacitor에 대해 자세히 알아볼 준비가 되었다면 여기에서 다음 기사를 찾을 수 있습니다. Capacitor JS: 웹 기술과 네이티브 간의 연결—Android, IOS, PWA

이제 시작에 불과합니다.

더 길고 독점적이며 실용적인 콘텐츠에 관심이 있다면 ko-fi 플랫폼에서 프로그래밍 기술을 향상시킬 수 있는 계층과 게시물이 있습니다.

위 내용은 웹 도구를 사용한 Android 개발: Ionic React를 사용한 가장 빠른 제작 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!