- 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.
Here's a website to try out:
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.
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 from "LTS (recommended version)". Some libraries do not support "latest version", so use LTS.
iOS App Environment Settings (MacOS only)
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.
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 firstname.lastname@example.org: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
- 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).
- Move the file to a public directory and set npm
Next, create a directory called
wwwand 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.
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
Launch the application
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.
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:.
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.
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,
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.
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.
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".