How to Build a Production-Ready Android App with Web Tools: Ionic React

Lumin-ix - Aug 7 - - Dev Community

Investing in Android development can yield a huge device market share, expanded market reach, and high return on investment.

With over 6.8 billion smartphone users worldwide. Android holds approximately 70% of the global market share, translating to about 4.76 billion users, finding your niche is within reach. It's all about producing high-quality, fast applications.

Ionic, with native web components, enables you to achieve performant and high-quality Android apps using familiar tools like HTML, JavaScript, and CSS, while tapping into native functionalities with Capacitor.

This is more than just a tutorial on Ionic; it's about building quality and performant Android applications ready for production.

This article is an introduction to a series where we'll cover the basics of Ionic with React as our frontend and later explore the bridge between native and web technologies using Capacitor.

Ionic framework: An Introduction

Runtimes or bridges between different technologies are nothing new!

Take Node.js, for example. Only through Node can JavaScript become a systems language.


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

Consider hybrid desktop applications using HTML, JavaScript, and CSS as a view via the webview. Go Wails, a very performant desktop development framework, is based on this idea. Similarly, Rust Tauri apps operate on this principle.

Bindings have existed and been tested for a while in the mobile world, with examples like React Native and NativeScript.

The development world is realizing the importance of not just UI but beautiful and responsive UI. There are no frameworks as advanced as web technologies in this field.

Android native development is shifting towards the direction of React with composable UIs in Kotlin, moving away from the less favored XML.

This trend brings the best of both worlds: native speed with beautiful composable UI. That's where Ionic stands out among its peers. The difference is that Ionic is easy to grasp—I successfully built a client's application in under a month.

Setup

Create a new project folder and run the following:


npx ionic start
Enter fullscreen mode Exit fullscreen mode

This will take you through the Ionic setup. Choose React as the frontend framework for this article.

Ionic still uses Webpack and Create React App (CRA) because Vite does not yet support Stencil.js, the core of Ionic web components.

Once everything is installed, open the project in VSCode. I prefer to remove npm and use pnpm (this step is optional). If you want to do the same:

  • Delete the node_modules folder.

  • Delete the package-lock.json file, not package.json.

  • Run pnpm install.

To run an Ionic application, use:


npx ionic serve
Enter fullscreen mode Exit fullscreen mode

The Ionic CLI will take care of everything. You can also use the --lab option for a phone-like preview (note, this is not an Android or iOS emulator, but a "view"):


pnpm add -D @ionic/lab

npx ionic serve --lab
Enter fullscreen mode Exit fullscreen mode

ionic lab image preview

This allows us to preview how the UI will look on a phone-like view.

Going Over the structure

I assume you have the project open in an IDE of your choice. If you do not have React experience, this may be a bit challenging. I suggest taking a basic React tutorial and learning about React routers.

The entry point is a standard React application render in index.tsx:


root.render(      

<React.StrictMode>

     <App/>

</React.StrictMode>

  );
Enter fullscreen mode Exit fullscreen mode

In App.tsx, it's a router and tab navigation bar, using Ionic router and components. Ionic components are native web components built with Stencil.js, designed to look like a mobile application.

Ionic provides CSS files and themes to match the standards of both iOS and Android. Use Ionic components over HTML for a natural mobile application look and feel.

Let's break down App.tsx, starting with the router. It works similarly to the React web router, matching a path to a component and rendering the matching component on navigation.




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>
Enter fullscreen mode Exit fullscreen mode

If you're familiar with backend, the path is like an endpoint, and the component is a handler.


   <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>
Enter fullscreen mode Exit fullscreen mode

The IonTabBar creates a tab bar at the provided slot, in our application its bottom. The magic is in the tab button: triggers the router using hrefs. All normal React code, wrapped in Ionic components.

Follow one of the tab pages; they are essentially just pages.


   <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>
Enter fullscreen mode Exit fullscreen mode

Using the Ionic page component handles things like scrolling and responsiveness out of the box.

The standard structure of an Ionic page includes a header with a toolbar and a content area, similar to most mobile applications.

Header:


  <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
Enter fullscreen mode Exit fullscreen mode

Content area:




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

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" />
Enter fullscreen mode Exit fullscreen mode

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" ); }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

Next, initialize the Capacitor configuration file:


npx cap init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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


npx cap add android
Enter fullscreen mode Exit fullscreen mode

Important: Build the web app:


pnpm run build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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


npx cap sync
Enter fullscreen mode Exit fullscreen mode

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.

results

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>

)}
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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])
Enter fullscreen mode Exit fullscreen mode

pikachu

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()
Enter fullscreen mode Exit fullscreen mode

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])
Enter fullscreen mode Exit fullscreen mode

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})
Enter fullscreen mode Exit fullscreen mode

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>
  )
Enter fullscreen mode Exit fullscreen mode

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




   <IonCardContent>
         <img src={showResults ? showResults.front_default : ""} />
      </IonCardContent>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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())
    }
  }



....



}
Enter fullscreen mode Exit fullscreen mode

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())
    }
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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


bulbasaur dragonite
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Let the Gradle processes run:

gradle running

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:

play or debug

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:

gif build

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.

In this article, we introduced Android development using web tools, and our framework of choice was Ionic. We covered the basics of Ionic and Ionic components, how to set up the native runtime bridge Capacitor, and built a debug APK.

If you are ready to dive deep into Capacitor, you can find the next article here: Capacitor JS: The Bridge Between Web Tech & Native—Android, IOS, PWA

This is just the start.

If you are interested in more longer, exclusive, practical content, I have tiers and posts designed to elevate your programming skills at the ko-fi platform.

Image
Construction Management Software: Is It Worth the Investment?

softwaredevelopment, managementsoftware, dubai, webdev
Image
Mastering User Acceptance Testing: Best Practices For Seamless Software Deployment

user, acceptance, testing
Image
Why Move to Cloud?

oracle, cloud, cloudcomputing
Image
AI for Good: Harnessing Technology for Positive Change

ai, aiforgood, abdulsalamamtech, aiwednesday
Image
Dockerfile Best Practices Explained - Interlude Post 2

beginners, devops, docker, tutorial
Image
Fighting The Bad Guys in a Fun Way

cybersecurity, security, coding, python
Image
5 Best Mobile Payment Apps for Every Business

nfcpaymentapps, mobilepaymentapps, mobileapplicationdevelopment, applicationdevelopment
Image
Mastering Local Storage in Web Development

html, css, webdev, javascript
Image
Anti-Skid Nonslip Dashboard Mats
Image
Different Types of Software Testing

softwaretesting, manualtesting, automationtesting, testing
Image
Piles Treatment in Hyderabad
Image
🌍 Terraform Commands: From Beginner to Advanced for DevOps Engineers

devops, terraform, cli, beginners
Image
Sip in Style: How to Choose the Perfect Mug for Every Occasion

coffee
Image
Guo Wengui: The end of fraud and the trial of justice

wenguiguo, washingtonfarm
Image
Guo farm accumulated wealth, the ants lost all their money

washingtonfarm, wenguiguo
Image
Guo Wengui was finally convicted of fraud, and justice was served

wenguiguo, washingtonfarm
Image
Essential Women's Motorcycle Clothing: Gear Up for Adventure
Image
Future-Proof Your App: Scalability Considerations for Long-Term Success

product, webdev, frontend, softwaredevelopment
Image
Comment system: API Gateway & DynamoDB Integration in Pulumi

serverless, aws, webdev, node
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player