Capgo - Instant updates for capacitor

Hire a Capacitor consultant

Features

• ⚡️ Test webapp directly in your phone with native API

• 😃 Share your dev with your teamate

• ↕️ Manage your channels for auto update system.

Documentation

https://github.com/Cap-go/capacitor-updater/wiki/Capgo-Sandbox-App

• Changing supabase

Plugins

All official plugin are install and preconfigured

• Action Sheet - Provides access to native Action Sheets.
• App - Handles high level App state and events.
• App Launcher - Allows to check if an app can be opened and open it.
• Browser - Provides the ability to open an in-app browser and subscribe to browser events.
• Camera - Provides the ability to take a photo with the camera or choose an existing one from the photo album.
• Clipboard - Enables copy and pasting to/from the system clipboard.
• Device - Exposes internal information about the device, such as the model and operating system version, along with user information such as unique ids.
• Dialog - Provides methods for triggering native dialog windows for alerts, confirmations, and input prompts.
• Filesystem - Provides a NodeJS-like API for working with files on the device.
• Geolocation - Provides simple methods for getting and tracking the current position of the device using GPS, along with altitude, heading, and speed information if available.
• Haptics - Provides physical feedback to the user through touch or vibration.
• Keyboard - Provides keyboard display and visibility control, along with event tracking when the keyboard shows and hides.
• Local Notifications - Provides a way to schedule device notifications locally (i.e. without a server sending push notifications).
• Motion - Tracks accelerometer and device orientation (compass heading, etc.).
• Network - Provides network and connectivity information.
• Push Notifications - Provides access to native push notifications.
• Screen Reader - Provides access to TalkBack/VoiceOver/etc. and Provides simple text-to-speech capabilities for visual accessibility.
• Share - Provides methods for sharing content in any sharing-enabled apps the user may have installed.
• Splash Screen - Provides methods for showing or hiding a Splash image.
• Status Bar - Provides methods for configuring the style of the Status Bar, along with showing or hiding it.
• Storage - Provides a simple key/value persistent store for lightweight data.
• Text Zoom - Provides the ability to change Web View text size for visual accessibility.
• Toast - Provides a notification pop up for displaying important information to a user. Just like real toast!

Dev contribution

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• TypeScript
• bun - fast javascipt runtime, package manager, bundler, test runner an all-in-one toolkit
• critters - Critical CSS
• Netlify - zero-config deployment
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • Windi CSS Intellisense - IDE support for Windi CSS
  • ESLint

Usage

Build

To build the App in mobile, run

bun install
bun mobile

And you will see the generated file in dist that ready to be served.

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Development

You will need to start each local server in separate terminals.

Before you continue, you need to have these installed:

• Docker
• bun
• Supabase CLI

You can install the supabase CLI globally with bun install supabase -g and you can invoke supabase from anywhere.

Alternatively, you can install the CLI inside this repo with bun install supabase --save-dev but to invoke it use: ./node_modules/supabase/bin/supabase.

The rest of this guide assumes that you installed the supabase CLI globally.

Start Supabase DB Locally

Start the Supabase DB:

supabase start

If the command completed successfully, your console output should be similar to the output below:

Started supabase local development setup.

         API URL: http://localhost:54321
     GraphQL URL: http://localhost:54321/graphql/v1
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: xxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXx.xxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXx
service_role key: xxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXx.xxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxXxxxxxXxxxxxX

Start Supabase DB and Functions Locally

You need make sure Docker is running.

bun install
bun backend

Start Frontend Locally

Before starting the frontend, make sure you replace the value of supa_anon.local inside the file configs.json with the value of anon key. If supabase is already running, you can also obtain anon key from the output of supabase status.

In another terminal, run the server with the necessary Netlify functions:

bun serve

Login

Visit http://localhost:5173

There are two login credentials you can use:

Account	Username	Password
Demo User	[email protected]	testtest
Admin User	[email protected]	adminadmin

The demo user account has some demo data in it. If the data is not fresh just reset the db with supabase db reset. The seed has been made in the way the data is always fresh.

The admin user has admininstrative rights so he can impersonate other users. You can find the menu for that in the account section.

Supabase DB Reset

Make sure you have Docker running.

This will seed the DB with demo data again.

bun reset