=======================================
Website To Android APP by o1
=======================================

Devuan (or Debian) gui free -- still looking for a FreeBSD solution


=======================================
Install packages
---------------------------------------

# install the packages
# NOTE: some package versions were not available and this worked for me to grab them manually
root@devo:~# cd /tmp
root@devo:/tmp# apt install npm git curl ed
root@devo:/tmp# curl -fsSL https://deb.nodesource.com/setup_24.x | bash -
root@devo:/tmp# apt install nodejs
root@devo:/tmp# wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.deb
root@devo:/tmp# apt install ./jdk-21_linux-x64_bin.deb

---------------------------------------

root@devo:/tmp# uname -a
Linux devo 6.1.0-40-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.153-1 (2025-09-20) x86_64 GNU/Linux

root@devo:/tmp# cat /etc/debian_version
12.11

root@devo:/tmp# node --version
v24.11.0

root@devo:/tmp# npm --version
11.6.2

root@devo:/tmp# java --version
java 21.0.9 2025-10-21 LTS
Java(TM) SE Runtime Environment (build 21.0.9+7-LTS-338)
Java HotSpot(TM) 64-Bit Server VM (build 21.0.9+7-LTS-338, mixed mode, sharing)


=======================================
Setup
---------------------------------------

# setup SDK and agree to license

# option 1: with command line tools
# download latest command line tools from https://developer.android.com/studio#command-line-tools-only
oeng@devo:~$ wget https://dl.google.com/android/repository/commandlinetools-linux-13114758_latest.zip
oeng@devo:~$ unzip commandlinetools-linux-13114758_latest.zip
oeng@devo:~$ mkdir -p android_sdk/cmdline-tools/latest
oeng@devo:~$ mv cmdline-tools/* android_sdk/cmdline-tools/latest
oeng@devo:~$ rm -rf cmdline-tools
oeng@devo:~$ yes | android_sdk/cmdline-tools/latest/bin/sdkmanager --licenses

# option 2: with android-studio gui you can exit once you have agreed to the licenses
# download and unpack android-studio... https://developer.android.com/studio
oeng@devo:~$ tar -xzf android-studio-2025.2.1.7-linux.tar.gz
oeng@devo:~$ android-studio/bin/studio

---------------------------------------

# create a directory root for all your apps
oeng@devo:~$ mkdir app
oeng@devo:~$ cd app


=======================================
Create an APP
---------------------------------------

# app creation starts here
oeng@devo:~/app$ npm init @capacitor/app@latest
> hello
> hello
> com.example.hello

# it completed with a recommendation so i followed it
oeng@devo:~/app$ npm install -g npm@11.6.2

oeng@devo:~/app$ cd hello

---------------------------------------

# create index.html etc by hand in ./dist or wget everything from a working url

# option 1: wget the page or site
oeng@devo:~/app/hello$ wget -p -k -E -H -nH -P dist https://site.example.com/hello.html

# option 2: wget the page or site from a subdirectory
oeng@devo:~/app/hello$ wget -p -k -E -H -nH -P dist --cut-dirs=2 https://site.example.com/subdir/hello.html

# rename the saved page to "index.html" if it is named something different
oeng@devo:~/app/hello$ mv dist/hello.html dist/index.html

---------------------------------------

oeng@devo:~/app/hello$ npm install @capacitor/core

# it completed with a recommendation so i followed it
oeng@devo:~/app/hello$ npm audit fix --force

oeng@devo:~/app/hello$ npm install @capacitor/cli

oeng@devo:~/app/hello$ npx cap init

oeng@devo:~/app/hello$ npm install @capacitor/android

oeng@devo:~/app/hello$ npx cap add android

---------------------------------------

# setup an environment variable for the SDK or put the path into local.properties

# option 1: when using command line tools
oeng@devo:~/app/hello$ echo "sdk.dir=/home/oeng/android_sdk" > /home/oeng/app/hello/android/local.properties

# option 2: when using android-studio gui
oeng@devo:~/app/hello$ echo "sdk.dir=/home/oeng/Android/Sdk" > /home/oeng/app/hello/android/local.properties

---------------------------------------

# auto hide the splash screen and (optional) enable capacitorhttp
oeng@devo:~/app/hello$ ed capacitor.config.json
  "plugins": {
    ...
    "SplashScreen": {
      "launchAutoHide": true
    },
    "CapacitorHttp": {
      "enabled": true
    }
  }

---------------------------------------

# (optional) set the app to always display in portrait mode
oeng@devo:~/app/hello$ ed android/app/src/main/AndroidManifest.xml
    <activity
        android:screenOrientation="portrait"
        ...>

oeng@devo:~/app/hello$ npm install @capacitor/screen-orientation

---------------------------------------

# (optional) add custom logo and splash with one image (2732x2732 minimum)
oeng@devo:~/app/hello$ mkdir assets
oeng@devo:~/app/hello$ cp /path/to/logo_3000.png assets/logo.png
oeng@devo:~/app/hello$ cp /path/to/logo_3000.png assets/logo-dark.png
oeng@devo:~/app/hello$ npm install @capacitor/assets --save-dev
oeng@devo:~/app/hello$ npx @capacitor/assets generate --iconBackgroundColor "#ffffff" --iconBackgroundColorDark "#003366" --splashBackgroundColor "#ffffff" --iconBackgroundColorDark "#003366"

---------------------------------------

oeng@devo:~/app/hello$ npx cap sync

oeng@devo:~/app/hello$ cd android

oeng@devo:~/app/hello/android$ ./gradlew assembleDebug


=======================================
Install your app
---------------------------------------

# once you have a "BUILD SUCCESSFUL" your apk will be here
/home/oeng/app/hello/android/app/build/outputs/apk/debug/app-debug.apk

# a way to transfer the .apk to your android device
oeng@devo:~/app/hello/android$ curl -F post=pastebin -F pastefile=@- https://www.oetec.com/post < /home/oeng/app/hello/android/app/build/outputs/apk/debug/app-debug.apk
https://www.oetec.com/pastebin/rgragofo
https://www.oetec.com/pastebin/lined/rgragofo
https://www.oetec.com/pastebin/plain/rgragofo

# after downloading rgragofo.zip to your android device you can rename it hello.apk and install it


=======================================
Managing builds
---------------------------------------

# do a clean if you have to build again
oeng@devo:~/app/hello/android$ ./gradlew clean

# to get rid of the app just remove the working directory
oeng@devo:~/app/hello$ cd ~/app
oeng@devo:~/app$ rm -rf hello

# to get rid of everything just remove it all
oeng@devo:~/app/hello$ cd
oeng@devo:~$ rm -rf app


=======================================
TIP: CapacitorHttp plugin fixed xhr issues
---------------------------------------

# sample index.html to test xhr requests to send $_POST variables and receive json responses

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>
<body>
  <h1>xhr test</h1>
  <button type="button" id="send">Send xhr request</button>
  <div id="response"></div>
  <script>
document.getElementById('send').addEventListener('click', function(e) {
  e.preventDefault();
  var formdata = new FormData();
  formdata.append('phrase', 'hello world');
  fetch('https://site.example.com/api.php', {
    method: 'POST',
    body: formdata
  }).then(response => response.json()).then(data => {
    document.getElementById('response').innerHTML = data.html || 'No data.html';
  }).catch(error => {
    document.getElementById('response').innerHTML = error;
  }).finally(() => {
    alert('did it work?');
  });
});
  </script>
</body>
</html>

# https://site.example.com/api.php should be set up for testing with something simple

<?php
  if(isset($_POST['phrase']) && !empty($_POST['phrase']) && $_POST['phrase'] == 'hello world') {
    $response['html'] = $_POST['phrase'];
  } else {
    $response['html'] = 'bad phrase';
  }
  date_default_timezone_set('America/Toronto');
  $response['html'] .= ' : '.date('Y-m-d H:i:s O T e');
  print(json_encode($response));
?>


=======================================
End
=======================================