SunPoint IT Solutions

Loading...

Blog

Creating a mobile app with SPA using Capacitorjs

          Purpose: Create a working mobile (Android / iOS) app from an existing mobile web application.

          Advantages: Rapid creation of mobile applications, from web applications or web pages.
       Disadvantages: Functionality is limited, not all functionality that is usually available in mobile development is available in Capacitor.

          Step-by-step instructions:

1) Installing the desktop setup library.
The setting will depend on the operating system.
The setup instructions include installing:
- NodeJS 16 or higher (the latest LTS is preferred);
- install vsCode/xCode, Android Studio depending on your system and selected iOS or Android platform, install Android SDK;
-Library installation is performed by commands.

npm install @capacitor/cli @capacitor/core

npm install @capacitor/ios @capacitor/android

-Create a web application build (or transfer our files to the build folder, for example index.html);

npm run build

- Initialize the capacitor;
npx cap init

-Add android or ios environment;
npx cap add android
npx cap add ios (possible only on mac)

-Synchronize our web application with the android environment;
npx cap sync android
npx cap sync ios

-Open in AndroidStudio;

npx cap open android

-AndroidStudio will open, and if everything is configured, virtual devices are added or physical devices are connected for debugging, then it will be possible to run the application in development mode.

             

         For publication in Playmarket, select "Generated Signed Bundle", and following the instructions, filling in the necessary information, we will receive a build ready for publication in PlayMarket.

                                                                   

           The versioning setting is in the build.gradle file and we install a new version for each new build.

                                 

            After these settings, if there are changes in our web application, it is enough to update the mobile application:
npm run build
npx cap sync android
npx cap open android
           And click on the button Generated Signed Bundle and send the assembly to PlayMarket.Additional functionality

             Additional functionality 

             If you need advanced functionality as in mobile applications, for example:

-File system of the phone;
-Access to notifications;
-Access and work with the camera;
-Access and change the keyboard;
-etc.

        To work with this, Capacitor plugins are provided, the basic functionality is provided by official plugins, and additional functionality, such as bluetooth control of the backlight, is also provided by capacitor-community plugins.
            For example, to work with the phone`s contact book, the contacts plugin is installed via npm
npm install @capacitor-community/contacts
            The number of plugins is quite small, but it is enough for basic work with the phone:
Capacitor - 30 plugins;
Capacitor-community - 55 plugins.

https://youtu.be/0c5AbV9SbTU

LATEST POSTS