Building a cross-platform app can seem daunting for beginners, but with the right tools, it's achievable and rewarding. Capacitor is an open-source framework that allows developers to create native mobile applications using web technologies like HTML, CSS, and JavaScript. This tutorial will guide you through the process of building your first Capacitor app, suitable for both iOS and Android platforms.

What is Capacitor?

Capacitor is a modern native runtime for building cross-platform apps with web technologies. It was developed by the team behind Ionic Framework and offers a simple way to package web apps as native applications. Capacitor provides access to native device features through a JavaScript API, making it easier to develop feature-rich mobile apps.

Prerequisites

  • Node.js installed on your computer
  • Basic knowledge of HTML, CSS, and JavaScript
  • Android Studio and Xcode installed for Android and iOS development
  • A code editor like Visual Studio Code

Setting Up Your Project

Start by creating a new web project. You can use any framework or plain HTML. For simplicity, we'll use plain HTML here.

Open your terminal and run the following commands to initialize your project and install Capacitor:

mkdir my-capacitor-app
cd my-capacitor-app
npm init -y
npm install @capacitor/core @capacitor/cli

Initialize Capacitor in your project:

npx cap init myApp com.example.myapp

Adding Platforms

Add Android and iOS platforms to your project:

npx cap add android
npx cap add ios

Creating Your Web App

Create an index.html file in your project directory with simple content:

<!DOCTYPE html>
<html>
<head>
  <title>My Capacitor App</title>
</head>
<body>
  <h1>Welcome to Your First Capacitor App!</h1>
  <button id="alertButton">Show Alert</button>
  <script>
    document.getElementById('alertButton').addEventListener('click', () => {
      alert('Hello from Capacitor!');
    });
  </script>
</body>
</html>

Building and Running Your App

Copy your web assets to the native platforms and open the project in the respective IDEs:

npx cap copy
npx cap open android
npx cap open ios

Build your app in Android Studio or Xcode, then run it on a device or emulator. Your web app will be wrapped as a native app, capable of accessing device features.

Adding Native Functionality

Capacitor provides plugins to access native features like camera, geolocation, and more. To use a plugin, install it and import it into your JavaScript code:

npm install @capacitor/camera
npx cap sync

Example of using the Camera plugin:

import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const image = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Base64
  });
  // Use the image data
}

Conclusion

Capacitor simplifies the process of building cross-platform mobile applications with web technologies. By following this tutorial, you've learned how to set up a project, create a basic web app, and deploy it to Android and iOS. Experiment with native plugins to add more features and enhance your app's capabilities.