我建造的

我已经开发了一个github操作，它允许您将任何JavaScript框架编写的Web应用程序转换为准备在Play Store上部署的生产的Android应用程序。

它使用了离子电容器，该电容器允许将本机功能集成到您的Web应用程序中，并简化了Web应用程序作为本机应用程序的包装。

类别提交：

DIY部署：
通过将网站转换为Android应用程序并生成必要的文件进行测试，该项目简化了开源项目或个人项目的部署过程，使开发人员能够轻松地将其网站作为生产Android应用程序播放。

应用链接

github存储库（动作）：https://github.com/Narottam04/action-capacitor-android

示例Web应用程序转换为Android应用程序：

Web应用程序：https://pokecards.pages.dev/

Android应用程序发布：https://github.com/Narottam04/PokeCards/releases/tag/2023-05-23-17_45_41%2B0000

屏幕截图

描述

Action-Capacitor Android提供了一种简化的解决方案，可将Web应用程序转换为生产Android应用程序。使用自定义GitHub操作，开发人员可以自动化转换过程，生成已签名的.AAB文件以进行部署以播放存储和.APK文件进行测试。这种自动化简化了想要为其Web应用程序拥有本机应用程序的开源项目或个人项目的部署工作流程，从而使开发人员能够轻松地将其Web应用程序转换为功能齐全的Android应用程序，从而加快其部署过程和开发人员的体验。

链接到源代码

github存储库（动作）：https://github.com/Narottam04/action-capacitor-android

允许许可证

什么

背景

我去年写了一篇文章，介绍了如何使用离子电容器将任何Web项目转换为Android应用程序。这个故事在开发人员上受到了很多关注，到目前为止，有12,389次观看，320个反应和57条评论。

这是文章的链接：Convert Your Website into an Android App using Capacitor

此外，我创建了一个带有电容器的应用程序，该应用程序在Play商店中有超过2,000个以上的下载。鉴于该应用程序的受欢迎程度，我认为是时候修复一些错误并改善用户的应用程序UX了。但是，更新该应用程序的过程很耗时，迫使我运行十个不同的CLI命令，并等待Android Studio在我的慢薯片笔记本电脑上启动。整个过程需要额外的10到20分钟才能获得5MB的构建。

虽然有第三方服务提供自动化的构建，但它们不是免费的。作为从事附带项目的开发人员，我发现成本不合理。结果，我决定创建此GITHUB操作，以改善我当前的工作流程，并可以更快地向用户分发更新。

我如何建造它

使用此github操作的说明是在存储库redme文件中

在黑客马拉松公告之后，我立即跳入文档中，并制定了一个基本动作，简单地回荡了几行。在此之后，我转到了电容器文档并开始创建动作。

让我们浏览代码并探索每个部分：

name: Build Android
run-name: Creating Production Ready Android App 🚀
on:
  push:
    branches:
      - master

• name 字段指定github操作工作流的名称。
• run-name 字段为工作流提供了描述或标题。
• on 部分定义了工作流程的触发因素。在这种情况下，当将事件推向 master 分支时，将触发工作流程。

yamlCopy code
jobs:
  build:
    name: Build APK
    runs-on: ubuntu-latest
    # TODO: add the default directory - COMMENT IF IT'S NOT IN SUBFOLDER
    # defaults:
    #   run:
    #     working-directory: ./frontend
    steps:

• jobs 部分指定要执行的任务作为工作流程的一部分。在这种情况下，有一个名为“ build apk”的作业。
• runs-on 字段指定工作将在其中运行的操作系统环境。在这种情况下，它设置为 ubuntu-latest ，表明该作业将在基于Linux的环境上运行。
• steps 部分包含在作业中将执行的单个步骤或任务的列表。

随后的步骤执行构建Android应用所需的各种措施：

steps:
      - name: Checkout source
        uses: actions/checkout@v3
        # TODO: add your branch to checkout
        with:
          ref: master

      - name: Setup java
        uses: actions/setup-java@v3
        with:
          distribution: "zulu"
          java-version: "11"

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 19.x

      - name: install dependencies
        run: npm ci

      - name: Create Build Folder
        run: npm run build

      - name: Add android folder if not present
        run: if [ ! -d "./android" ]; then npx cap add android; fi

      - name: Capacitor update
        run: npx cap update

      - name: Capacitor copy
        run: npx cap copy

      # TODO: Check for folder structure in README for generating splash screen 
      - name: Generate icons and splash screen to android folder 
        run:  if [ -d "./resources" ]; then npm install @capacitor/assets --save-dev && npx capacitor-assets generate --android; fi

      - name: Build app bundle
        run: cd android && ./gradlew bundle && ./gradlew assembleDebug

      - name: Extract Android signing key from env
        run: |
          echo "${{ secrets.RELEASE_KEYSTORE }}" > android/release.jks.base64
          base64 -d android/release.jks.base64 > android/release.decrypted.jks

      - name: Sign dev build
        run: jarsigner -keystore android/release.decrypted.jks -storepass "${{ secrets.RELEASE_KEYSTORE_PASSWORD }}" -signedjar ./android/app/build/outputs/bundle/release/app-release-signed.aab ./android/app/build/outputs/bundle/release/app-release.aab release

      - name: Check folder content of android output
        run: ls ./android/app/build/outputs/bundle/release

      - name: Set Tag
        id: current-datetime
        run: echo "CURRENT_DATETIME=$(date +'%Y-%m-%d-%H_%M_%S%z')" >> "$GITHUB_OUTPUT"

      - name: Build Release
        shell: bash
        run: |
          hub release create ${{ steps.current-datetime.outputs.CURRENT_DATETIME }} \
          -m ${{ steps.current-datetime.outputs.CURRENT_DATETIME }} \
          -a ./android/app/build/outputs/bundle/release/app-release-signed.aab \
          -a ./android/app/build/outputs/apk/debug/app-debug.apk
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

1. 结帐源：此步骤使用 actions/checkout github Action Action。
2. 设置Java ：此步骤使用 actions/setup-java github Action Action设置Java环境。它安装了Java的Zulu分布11。
3. 设置node.js ：此步骤使用 actions/setup-node github动作来设置node.js环境。它安装了node.js版本19.x。
4. 安装依赖项：此步骤使用 npm ci 安装项目依赖项，该步骤可确保基于 package-lock.json 文件的清洁安装。
5. 创建构建文件夹：此步骤运行命令 npm run build 为项目创建构建文件夹。
6. 添加Android文件夹（如果不存在）：此步骤检查项目中是否存在 android 文件夹。如果没有，它会使用 npx cap add android 。
添加Android平台
7. 电容器更新：此步骤使用 npx cap update 。
更新电容器配置和依赖项。
8. 电容器复制：此步骤使用 npx cap copy 。
将Web应用程序文件复制到本机项目中
9. 生成图标和飞溅屏幕到Android文件夹：此步骤检查项目中是否存在 resources 文件夹。如果是这样，它将安装 @capacitor/assets 软件包作为开发依赖性，并使用 npx capacitor-assets generate --android 。
10. 构建应用程序捆绑包：此步骤导航到 android 目录并运行Gradle任务 bundle 和 assembleDebug 使用 ./gradlew 。这些任务生成应用程序捆绑包和调试APK。
11. 提取的android签名密钥：此步骤采用 RELEASE_KEYSTORE 秘密的值，该秘密被认为是基本64编码，并解码它以获取签名密钥文件（ release.jks ）。密钥文件保存为 android/release.decrypted.jks 。
12. 标志开发构建：使用GitHub Actions Secret中提供的密钥库和密码签名应用程序的调试构建。
13. 检查Android输出的文件夹内容：列出输出目录的内容，以验证签名的应用程序捆绑包的存在。
14. 设置标签：将当前日期和时间设置为发行版的标签。
15. 构建版本：创建带有标签名称和消息的GitHub版本，包括签名的应用程序捆绑包和调试APK作为发行资产。

其他资源/信息

• Action Docs
• Capcitor Docs
• Cryptocademy Android App, Created by me using React and Capcitor