What I learned building android app with AI

Quick Summary

Building a mobile app has become more accessible than ever, thanks to AI tools that require minimal coding experience. While debugging can present some challenges due to the multi-platform complexity (coding on lovable,git, android studio and testing mobile device), most issues can still be resolved manually with a bit of persistence. AI shines when it comes to quickly creating MVPs, but as complexity grows, it’s crucial to focus and approach one specific problem at a time. For more reflections on this, check out the general opinion post.

Building a mobile app that scans of apps not installed from the play store.

My bank app showed me a list of app installed from unofficial stores and instead of keep loading up the app to check I decided to make one so I can have more information about these apps and what are the security concerns related to these app.

Working with multiple platforms (Android studio and how the app is working on the mobile device), gives the AI some blind spots so we need to help it see what is happening or convert what is happening for the AI code wise.

But what I did see is how great Gemini Code Assist is at helping with resolving git conflicts.

Understanding the Architecture that lovable used – Capacitor-Powered Mobile App

Building a mobile application using web technologies has never been easier, thanks to tools like Capacitor and Vite. In this blog post, we’ll break down the architecture of a mobile app built with React and explain how different technologies fit together.

Simplified Overview

• React + TypeScript + Tailwind CSS + shadcn/ui → Used to build the front-end.
• React Query → Efficient data fetching and caching.
• React Router → Manages navigation inside the web app.
• Lucide React & Sonner → Enhances UI with icons and notifications.
• Vite → Builds the web app into static files that can be embedded into Capacitor, which wraps it in a WebView.
• Capacitor → Acts as both a wrapper (embedding the web app) and a bridge between JavaScript and the native mobile application (written in Java for Android or Swift for iOS).
• Portable → Once built, it can be used anywhere without requiring a Node.js server.

Key Technologies in the Stack

Before diving into how everything works together, let’s look at the core technologies:

• React + TypeScript: Provides a structured and scalable frontend framework.
• Vite: A lightning-fast build tool that optimizes web applications for speed and efficiency.
• Tailwind CSS + shadcn/ui: Helps in building a clean, modern UI quickly.
• Capacitor (v7): The bridge that allows web apps to run as native Android/iOS applications.
• React Query: Efficient data fetching and caching.
• React Router: Manages navigation inside the web app.
• Lucide React & Sonner: Enhances UI with icons and notifications.

How the Architecture Works

1️⃣ Vite: The Web App Compiler

Vite is responsible for building the web frontend. It compiles the React + TypeScript code into optimized static files (HTML, CSS, JavaScript). These files are what would normally be deployed to a web server, but in our case, they will be embedded inside a Capacitor mobile app.

2️⃣ Capacitor: The Native Compiler

Capacitor takes the built static files from Vite and wraps them inside a native container. This container consists of:

• A WebView (Chromium on Android, WKWebView on iOS) that displays the web app.
• A JavaScript-to-Native bridge that allows the web app to interact with the native system (e.g., access the file system, detect installed apps, interact with Bluetooth, etc.).

3️⃣ The Capacitor Bridge: Connecting Web and Native Code

One of the key challenges of hybrid app development is enabling JavaScript (running in the WebView) to communicate with native Android/iOS code.

Here’s how it works:

1. JavaScript in the WebView sends a request to Capacitor when it needs to access a native feature, such as checking installed applications or using the device’s camera.
2. Capacitor captures the request and passes it to the appropriate native plugin.
3. The native plugin processes the request using the Android (Java/Kotlin) or iOS (Swift) API.
4. Capacitor sends the response back to the JavaScript app, allowing it to use the retrieved data or perform necessary actions.

This bridge system enables web apps to behave more like native apps, providing access to device capabilities that are normally unavailable to browser-based applications.

Why Choose This Architecture?

✅ Leverages Web Technologies – Faster development with React, TypeScript, and Tailwind.
✅ Access to Native Features – Capacitor allows native API access (e.g., file system, camera, sensors).
✅ Hybrid App Benefits – One codebase, deployable as a mobile app or a web app.
✅ Optimized Performance – Vite ensures fast builds, and Capacitor optimizes native integration.
✅ Portable – Once built, it can be used anywhere without requiring a Node.js server.

When to Use Capacitor vs. React Native vs. Flutter?

While Capacitor is a great solution for hybrid apps, there are situations where React Native or Flutter might be a better choice:

When to Choose Capacitor

✅ You have a web-based project that you want to turn into a mobile app quickly.
✅ You prefer HTML, CSS, and JavaScript over native UI development.
✅ You don’t need extremely high-performance graphics or complex animations.
✅ You want one codebase that works on mobile and web with minimal changes.

When to Choose React Native

✅ You need better performance and more native UI components.
✅ You are already familiar with React but need native functionality.
✅ You want better access to native APIs without relying on WebView.

When to Choose Flutter

✅ You need the best performance possible for a cross-platform app.
✅ You want a consistent UI across all platforms, even if it means learning Dart.
✅ You are building an app with heavy animations or custom graphics.

More about the app

Summary of the app’s features:

App Sentry: Mobile Application Security Scanner

1. App Detection and Classification
   • Scans and identifies all non-system applications installed on a device
   • Classifies apps into “Trusted” (from official app stores) and “Side-loaded” (from unofficial sources)
   • Displays detailed information about each app including installation source, version, and install date
2. Security Verification
   • Verifies app signatures against a database of trusted developers
   • Uses both local and dynamically updated signature verification database
   • Supports recognizing trusted apps from various global app stores (Google Play, Samsung Galaxy Store, Huawei AppGallery, etc.)
3. Malicious App Detection (based on a list generated from AI automation with Gumloop)
   • Checks apps against a remote database of known malicious applications
   • Provides information about why an app is flagged as potentially malicious
   • Shows detailed reasoning and sources for malicious app identification
4. User-Friendly Interface
   • Clean, intuitive UI with color-coded classifications (green for trusted, red for side-loaded)
   • Powerful search and sort capabilities to find specific apps
   • Animated status indicators during scanning process
   • Detailed app cards showing comprehensive information about each application
5. Detailed Analytics
   • Provides statistics on total apps, trusted apps, side-loaded apps, and potentially malicious apps
   • Displays trusted developer signature information
   • Offers debug logging for advanced troubleshooting
6. Real-time Updates
   • Dynamically fetches the latest malicious app database
   • Updates trusted signature database from remote source
   • Caches data to minimize network usage
7. Compatibility
   • Works across various Android devices and versions
   • International support with country-specific app store recognition

This security tool helps users identify potentially risky applications and provides transparency about what software is installed on their devices, especially those not obtained through official channels.