How to build website as iOS/Android app in just 5 min.

This article is translated from Japanese Article. And not good at English. If you are interested, please see https://capacitorjs.com/docs for details.

DESCRIPTION

• You can delivery your websites as Mobile App in App Store and Google Play.
• Let's take a look at how to build websites as apps by step.
• If you can make website, you can develop iOS/Android app.

CONTENT

The content of this website is not a "App" (such as a media application), but as an entrance, let's take a look at how to make a website made of HTML/CSS and a little JavaScript work as iOS/Android app.

Here's a website to try out:
https://www.benaton.net/

We will turn this website into Mobile Apps using library Capacitor, and display it in the emulator of iOS and Android.

This French restaurant is actually open, so please come if you are interested.

Environment Settings

First, you need to set up the environment necessary to use Capacitor. By the way, in this tutorial, we will make an iOS application, so we will make it based on MacOS, but if you do not make an iOS application and only make an Android application, you can use it on Windows.

Xcode and Android Studio take a long time to download, so please download them when you have time.

1. Install NodeJS

Install a JavaScript environment called NodeJS. Installing it also makes the Package Manager for the JavaScript library npm available.

https://nodejs.org/ja/download/

Install from "LTS (recommended version)". Some libraries do not support "latest version", so use LTS.

iOS App Environment Settings (MacOS only)

Install Xcode

Install Xcode from App Store.

https://apps.apple.com/jp/app/xcode/id497799835?mt=12

Even if you have downloaded it before, Capacitor is not compatible with Xcode 11 or less, so I recommend you to update it just in case.

Installing CocoaPods

Use CocoaPods, the package manager for Xcode, and the Xcode Command Line tools tool to use it on the command line. Open a terminal and do the following:.

% sudo gem install cocoapods
% xcode -select --install
% pod repo update

Android App Environment Settings (Common)

You need to download the Android Studio IDE (integrated development environment). Please download from the following URL.

https://developer.android.com/studio

After the installation is complete, start it once to complete the initial configuration.

Ready to build the app

Now, let's set up the settings to build the current website into the app. First, download the source code for your Web site.

https://github.com/le-benaton/website

The source code (Other than text and photo data) is be under the MIT license.

If you know what Git is, go to git clone [e-mail]:le-bench/website.git. Otherwise, go to the "↓ Code" tab and click the "Download ZIP" button to download the full set of source code.

The repository is configured as follows:

le-benaton/
├── .github/ ............. GitHub Actions
├── scripts/ ............. scripts to reflect templates
├── src/
│   ├── data/ ............ notification, wine list data
│   └── template/ ........ website template
├── .gitignore
├── package.json
├── package-lock.json
├── prettier.config.js ... Prettier config file
├── README.md
└── tsconfig.json ........ Typescript config file

The complete set of source code is in src, but if you build it programmatically, www will be automatically generated to create a public file.

First, install the build program using the Node.js package manager npm that you just installed. Run the following command from the downloaded directory:

If you don't understand how to execute the command, drag and drop the extracted folder into the terminal. The terminal opens at the directory location, so you can execute the command on that screen.

% npm install

This command automatically begins the installation. When you are finished, continue with the following command:

% npm run build

After a few moments, you will see a www in the directory. This is the data to be released and the data to be made into an app.

📌 If you set up your own website

If you are not building and publishing in this way (When preparing HTML or JavaScript files for direct publication), you will need to do the following:

1. Change all calls from CDN to a local file
   For example, don't you use CDN when calling CSS or jQuery?

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
	defer
></script>

In that case, you must change all calls from CDN to local files. Download the file and make it local call. If it looks like this:

If you are also calling CSS from the CDN, do the same.

<script
  src="assets/jquery-3.5.1.min.js"
	defer
></script>

Google Analytics won't work (This is Web only), so you can leave it as it is. Also, Google Adsense doesn't work, so if you want to advertise, you need to use AdMob (https://capacitorjs.com/docs/guides/ads).

2. Move the file to a public directory and set npm
   Next, create a directory called www and move all the public files. Then, in the project directory:

% npm init

You will be asked about the name of the package and so on, but you can skip all by pressing Enter key. This will automatically create a file called package.json , and if you can verify it, you're successful.

Configuring Capacitor

Then install Capacitor. Run the following command:.

% npm install @capacitor/core @capacitor/cli

Install the Capacitor itself and the tools to use it at the command line. Wait a moment and it will be complete, so continue with the following:

% npx cap init

You will be asked many more questions, so press the Enter key to skip everything. It will generate a file called capacitor.config.json which will be the configuration file for your application using Capacitor. Then create the platform you need.

When you create an iOS app

% npx cap add ios

If you create an Android app.

% npx cap add android

If you create an iOS app, the ios directory is created, and if you create an Android app, the android directory is created, and all the files for the app are automatically created there.

If you get the error [error] Capacitor could not find the web assets directory , you forget to create the www directory.

Launch the application

iOS

Now, let's start the application in the emulator. Run the following command to launch the previously installed Xcode:

% npx cap open ios

When it starts up, the screen looks like this (If the screen is white, select App in the upper left):

First, sign. Click "App" -> "(TARGETS) App" from the left and click "Signing & Capabilities" from the top tab to open the Signing screen. Please select your account from this "Team".

Next, select "Generic iOS Device" in the upper left corner and select the emulator you want to display. Then press the ▶ button to emulate execution on your iOS device (Initial startup takes time.).

Select and run iPhone SE. The following screen appears and can be emulated.

By the way, JavaScript also works, so you can open and close header menu.

Android

Run the following command to launch Android Studio:

% npx cap open android

Incidentally, if you did not run npx cap add android earlier, you will get an error [error] android "platform has not been created.Use" npx cap add android "to add the platform project.
When Android Studio opens without any problems, click ▶ at the top to start the emulator.

By the way, you can choose a device to emulate from the pulldown to the left of ▶, but if you don't see anything here, add a device from "OPEN AVD Manager".
If it works, you should see something like:.

Update content

Currently, I copy www to both iOS and Android, but of course I sometimes update the contents. To do this, first update www and run the command:

% npx cap copy

Then, copy the latest contents of www to iOS and Android.

Result

Now you can build a regular web app as an iOS or Android app. From the left, there are web display, Android emulator and iOS emulator.

And if you make it into an app, you will see the next step. I mean,

1. app-like appearance
   iOS is designed with Human Design Guidelines, and Android is designed with Material Design. Using HTML/CSS to animate push transitions or to create button click effects can be challenging.

2. app-like feature
   It's not just a screen, but a task list-like feature, a real-time view of articles, or a chat feature. You may want to add such an app-like function.

To solve these problems, Ionic team, the developer of Capacitor, has released a framework called "Ionic Framework" for use with various JavaScript frameworks. Please use it as the next step.

For details on how to use it, including how to use the Capacitor plug-in, see the book Introduction to Making Mobile Apps with Ionic "Angular Version".