Як портувати HTML та JS проект в APK застосунок?

luxalok (68)Author | 🇺🇦in Ukraine on Steem • 5 days ago (edited)

Нещодавно мені відкрився цікавий світ, де можна реалізуати деякія можливості застосунків без професійних та спеціалізованих знань. Це звичайно ШІ що клепає на ваш запит щось цікавеньке використовуючи p5.js бібліотеку й HTML код. Всякі простенькі ігри, чи ще щось, душе файно й швидко перестрибують із у віконце браузера й там дають готовий результат. За лічені хвилини. Залежить від запиту. Але шось поклацать можна дуже швидко ніж че колись було раніше, й потрібно було чекати милості великих розробників і людей знаючих шось зробити чи шукати продукт власноруч, якщо воно було. Хоча до чогось крутого і якісного шлях не близький. Проте свої творчі фантазії можна спробувати втілити. Й цими простими інструментами, аж раптом вийде хороший прототип і можна буде шось розвивати далі. А тепер до діла.

HTML у парі із p5.js файно бігає у браузері пк, ймовіно на мобільних пристроях, але там чогось не захотіло запускатись як слід (мо ума не хватає). Тож захотілось че перенести на андроїд платфомру, щоб був застосунок під рукою. Хоча б ту гру про духа, котрий садить квіти та дерева. Проте скажу відразу, воно то вийшло, але на екрані великої роздільної розгортки, це вельми глючно. Бо, як виявляється, дуже багато подій які постійно відмальовуються ресурсами системи чи процесора, й це все проходить через декількох посередникий, у моєму випадку сворення застосунку. Або воно скріз так буде. Проте щось статичне як, нарпиклад, власний варіант заменитого вгадування слів, українська версія має назву “Кобза”. Доступна на багатьох платформах, онлайн через web-переглядач теж.

І шо робить, шоб із двох файлів html та p5.min.js вийшов повноцінний apk файл для андроїда. ШІ накидав мені багато варіантів. І пошук теж. Як і прості рішення на хмарних сервісах, але деякі свою рекламу вшивають. Ще шось було. Але мені чомусь видалось найпростішим, шоб не проходити різні реєстрації. Скористатись проєктом із відкритим кодом Android JS. Якщо встановлені потрібні бібліотеки, окрім нього, то все доволі просто, зводиться до декількох команд в терміналі й копіювання фалів із легким редагуванням.

Покроковий шлях для Linux OS від робочого html коду до готового apk

0 крок – додаткові бібліотеки та Androdi JS

Мають бути встановлені Node.js та Java Development Kit (JDK).

Нюанси:

Node.js – в репозиторію можуть бути різні версії, і деякі із них замість стандартних імен які працюватимуть в системі нормально, матимуть імена замість ‘node’ і додованням номеру версії, типу node-22. Тому краще встановлювати ту версію, яка буде встановлюватись автоматично через команду терміналу як прийнятна для системи. Може таке бути на деяких дистрибутивах, або просто перебором.
Java Development Kit (JDK) – якщо після встановлення не показується в системі, то вона є, але не підключена до операційного віділу, тобто не буде виконуватись автоматичкно коли його покличуть. Тому потрібно вручну один раз подружити їх, щоб система його бачила як треба. Подібна інфомрація зазвичай є на сайтах дистрибутивів, а ШІ все підкаже. Там легко.

Android JS – відритий проєкт, є сторінка на гітхабі. В терміналі вводиться команда:

npm install -g androidjs-builder

1 крок – Створення проєкту Android JS

Cтворити папку для проєкту і в ній відкрити термінал (бо то профі ходять з терміналу куди за хочуть), а нам той довгий шлях простіше мишкою подолати))
Виконати команду в терміналі

androidjs init

Запропонує ввести ім’я проєкту та обрати його тип (створить із цим ім’ям ще одну папку).

Всередині буде створено структуру й додано деякі файли. Нижче приклад що потрібно у нашому випадку, тобто інше й не буде цікавити:

Papka/
├── views/
│ └── index.html
├── assets/
│ └── icon/
├── main.js
└── package.json

* views/: Тут зберігаються ваші HTML-файли. index.html — це головний екран вашого застосунку. * assets/: Сюди слід помістити всі допоміжні файли: JavaScript-бібліотеки (включно з p5.js), файли стилів (CSS), зображення, шрифти тощо. *icon: іконка застосунку, яку буде видно після встановлення. * main.js: Це основний файл процесу (бекенд), який працює на Node.js. Для простого проєкту p5.js його можна не чіпати. * package.json: Файл конфігурації проєкту, де
зберігається інформація про нього, залежності та налаштування для збирання.

2 крок - Копіювання файлів

index.html (основна HTML-сторінка) – якщо ім’я вашого файлу інше, то потрібно перейменувати саме в index.html

p5.min.js або p5.js (сама бібліотека p5.js)

Дії:  
1.Скопіюйте бібліотеку p5.js: Помістіть ваш файл p5.min.js (або p5.js) у папку papka/assets/.

Скопіюйте ваш index.html файл у папку проєкут papka/views/index.htm і погодитись із заміною чи перезаписом

Відредагуйте index.html: Відкрийте файл papka/views/index.html і змініть його вміст, щоб він підключав ваші скрипти

В рядочку коду дрежело, він в першій половині коду, треба правильну адресу вказати, щоб бачило локальну бібліотеку:

 <script src="../assets/p5.min.js"></script>

3 крок – внесення даних

В принципі якщо застосунок для себе, то можна й нічого не редагувати, буде усталено працювати й мати ім’я проєкту, бо воно на самому початку задається, проте коли будуть створюватись інші застосунки, то всіх їх може сприймати як оновлення. Що не годитья, якщо один є гра в слова, а інше судоку, чи ще щось, тому потрібно відкрити файле package.json і змінити назву в рядочку:

"package-name": "потрібна назва латиницею",

Бо буде в кожному проєкті, усталено штампувать там webview, а також інше відредагувати, якщо є потреба. Поля вже будуть заповенні. Тож якщо для заміни іконки, достатньо покласти у відповідну пааку із таким іменем із заміною.