Web ツールを使用した Android 開発: Ionic React を使用して本番環境への最速の方法

Android 開発に投資すると、巨大なデバイス市場シェア、市場範囲の拡大、高い投資収益率が得られます。

世界中で 68 億人以上のスマートフォン ユーザーがいます。 Android は世界市場シェアの約 70% を保持しており、ユーザー数は約 47 億 6,000 万人に達しており、あなたのニッチ市場が手の届くところにあることがわかります。重要なのは、高品質で高速なアプリケーションを作成することです。

Ionic はネイティブ Web コンポーネントを備えており、Capacitor でネイティブ機能を利用しながら、HTML、JavaScript、CSS などの使い慣れたツールを使用して、パフォーマンスが高く高品質な Android アプリを実現できます。

これは単なる Ionic のチュートリアルではありません。それは、実稼働の準備ができた高品質でパフォーマンスの高い Android アプリケーションを構築することです。

この記事は シリーズ の紹介であり、フロントエンドとして React を使用して Ionic の基本を説明し、その後、Capacitor を使用してネイティブ テクノロジーと Web テクノロジーの間のブリッジを探索します。

イオンフレームワーク: はじめに

ランタイムや異なるテクノロジー間のブリッジは新しいものではありません!

Node.js を例に考えてみましょう。 Node を通じてのみ JavaScript はシステム言語になることができます。

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

HTML、JavaScript、CSS を Web ビュー経由のビューとして使用するハイブリッド デスクトップ アプリケーションについて考えてみましょう。非常にパフォーマンスの高いデスクトップ開発フレームワークである Go Wails は、この考えに基づいています。同様に、Rust Tauri アプリもこの原則に基づいて動作します。

モバイルの世界ではバインディングが存在し、React Native や NativeScript などの例でしばらくテストされてきました。

開発の世界は、単なる UI ではなく、美しく応答性の高い UI の重要性を認識し始めています。この分野では、Web テクノロジーほど高度なフレームワークはありません。

Android ネイティブ開発は、あまり好まれない XML から離れ、Kotlin で構成可能な UI を使用した React の方向に移行しています。

このトレンドは、ネイティブの速度と美しい構成可能な UI という両方の長所をもたらします。そこが、Ionic が同業他社の中で際立っているところです。違いは、Ionic は理解しやすいということです。私は 1 か月以内にクライアントのアプリケーションを構築することに成功しました。

設定

新しいプロジェクト フォルダーを作成し、次のコマンドを実行します:

npx ionic start

これにより、Ionic のセットアップが完了します。この記事のフロントエンド フレームワークとして React を選択します。

Vite は Ionic Web コンポーネントのコアである Stencil.js をまだサポートしていないため、Ionic は引き続き Webpack と Create React App (CRA) を使用します。

すべてがインストールされたら、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 で構築されたネイティブ Web コンポーネントであり、モバイル アプリケーションのように見えるように設計されています。

Ionic は、iOS と Android の両方の標準に一致する CSS ファイルとテーマを提供します。自然なモバイル アプリケーションのルック アンド フィールを実現するには、HTML 上で Ionic コンポーネントを使用します。

ルーターから始めて、App.tsx を分解してみましょう。これは React Web ルーターと同様に機能し、コンポーネントへのパスを照合し、ナビゲーション上で一致するコンポーネントをレンダリングします。

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 は、指定されたスロット (アプリケーションではその下部) にタブ バーを作成します。魔法はタブ ボタンにあります。hrefs を使用してルーターをトリガーします。すべての通常の React コードは、Ionic コンポーネントでラップされています。

いずれかのタブページに従います。これらは本質的に単なるページです。

   <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.

この記事では、Web ツールを使用した Android 開発を紹介しました。選択したフレームワークは Ionic でした。 Ionic と Ionic コンポーネントの基本、ネイティブ ランタイム ブリッジ Capacitor のセットアップ方法、およびデバッグ APK の構築方法について説明しました。

Capacitor について深く掘り下げる準備ができている場合は、次の記事をここで見つけることができます: Capacitor JS: The Bridge Between Web Tech and Native—Android, IOS, PWA

これはほんの始まりにすぎません。

より長く、独占的で実践的なコンテンツに興味がある場合は、ko-fi プラットフォームでプログラミング スキルを向上させるように設計された階層と投稿を用意しています。

以上がWeb ツールを使用した Android 開発: Ionic React を使用して本番環境への最速の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。