تبدیل یکپارچه برنامه های وب به برنامه اندروید: خودکار کردن با خازن و اقدامات GitHub

چیزی که من ساختم

من یک اکشن GitHub را توسعه داده ام که به شما امکان می دهد یک برنامه وب را که در هر چارچوب جاوا اسکریپت نوشته شده است، به یک برنامه اندروید آماده برای تولید تبدیل کنید که برای استقرار در فروشگاه Play آماده شده است.

این از خازن Ionic استفاده می کند، که امکان ادغام عملکردهای بومی را در برنامه وب شما فراهم می کند و بسته بندی برنامه وب شما را به عنوان برنامه های بومی ساده می کند.

ارسال دسته:

استقرار DIY:
با تبدیل خودکار وب‌سایت‌ها به برنامه‌های اندروید و تولید فایل‌های لازم برای آزمایش، این پروژه روند استقرار پروژه‌های منبع باز یا پروژه‌های شخصی را ساده‌تر می‌کند و به توسعه‌دهندگان این امکان را می‌دهد تا به راحتی وب‌سایت‌های خود را به عنوان برنامه‌های اندروید تولیدی در فروشگاه پخش کنند.

لینک برنامه

مخزن Github (Action): https://github.com/Narottam04/action-capacitor-android

نمونه برنامه وب تبدیل شده به برنامه اندروید:

برنامه وب: https://pokecards.pages.dev/

انتشار برنامه اندروید: https://github.com/Narottam04/PokeCards/releases/tag/2023-05-23-17_45_41%2B0000

اسکرین شات ها

شرح

action-capacitor-android یک راه حل ساده برای تبدیل برنامه های وب شما به برنامه های تولیدی اندروید ارائه می دهد. با اقدام سفارشی GitHub، توسعه‌دهندگان می‌توانند فرآیند تبدیل را خودکار کرده و فایل aab. امضا شده را برای استقرار برای پخش فروشگاه و فایل‌های apk. برای آزمایش تولید کنند. این اتوماسیون گردش کار استقرار پروژه‌های منبع باز یا پروژه‌های شخصی را که می‌خواهند یک برنامه بومی برای برنامه‌های وب خود داشته باشند، ساده می‌کند، و به توسعه‌دهندگان این امکان را می‌دهد تا بدون زحمت برنامه‌های وب خود را به برنامه‌های Android کاملاً کاربردی تبدیل کنند، روند استقرار و تجربه توسعه‌دهنده‌شان را تسریع بخشد.

پیوند به کد منبع

مخزن Github (Action): https://github.com/Narottam04/action-capacitor-android

مجوز مجاز

با

زمینه

من سال گذشته مقاله ای در مورد نحوه استفاده از Ionic Capacitor برای تبدیل هر پروژه وب به یک برنامه اندروید نوشتم. این داستان در DEV با 12389 بازدید، 320 واکنش و 57 نظر تا کنون مورد توجه بسیاری قرار گرفته است.

این لینک مقاله است: وب سایت خود را با استفاده از خازن به یک برنامه اندروید تبدیل کنید

علاوه بر این، من یک برنامه با Capacitor ایجاد کردم که بیش از 2000 دانلود در فروشگاه Play دارد. با توجه به محبوبیت برنامه، تصمیم گرفتم که زمان رفع برخی از باگ ها و بهبود UX برنامه برای کاربران رسیده است. با این حال، فرآیند به‌روزرسانی برنامه زمان‌بر بوده و من را مجبور کرد که ده دستور مختلف CLI را اجرا کنم و منتظر بمانم تا Android Studio روی لپ‌تاپ کند سیب زمینی من راه‌اندازی شود. کل این فرآیند 10 تا 20 دقیقه بیشتر از کار من را صرف می کند تا یک ساخت 5 مگابایتی داشته باشم.

در حالی که خدمات شخص ثالثی وجود دارد که ساخت‌های خودکار را ارائه می‌کنند، اما رایگان نیستند. به عنوان توسعه‌دهنده‌ای که روی پروژه‌های جانبی کار می‌کنم، هزینه را غیرقابل توجیه دیدم. در نتیجه، تصمیم گرفتم این اکشن GitHub را ایجاد کنم تا گردش کار فعلی خود را بهبود بخشم و به‌روزرسانی‌ها را سریع‌تر برای کاربرانم توزیع کنم.

چگونه آن را ساختم

دستورالعمل استفاده از این عمل github در فایل README مخزن است

پس از اعلام هکاتون، من بلافاصله به مستندات پرداختم و یک اقدام اساسی ایجاد کردم که به سادگی چند خط را تکرار می کند. به دنبال آن، به مستندات خازن مراجعه کردم و شروع به ایجاد اکشن کردم.

بیایید کد را مرور کنیم و هر بخش را بررسی کنیم:

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

• را name فیلد نام گردش کار GitHub Actions را مشخص می کند.
• را 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، نشان می دهد که کار بر روی یک محیط مبتنی بر لینوکس اجرا می شود.
• را steps بخش شامل فهرستی از مراحل یا وظایف فردی است که در داخل کار اجرا می شود.

مراحل بعدی اقدامات مختلفی را که برای ساخت برنامه اندروید لازم است انجام می دهد:

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 Actions.
2. جاوا را راه اندازی کنید: این مرحله محیط جاوا را با استفاده از actions/setup-java اقدام GitHub Actions. توزیع زولو جاوا 11 را نصب می کند.
3. Node.js را راه اندازی کنید: این مرحله محیط Node.js را با استفاده از actions/setup-node اقدام GitHub Actions. Node.js نسخه 19.x را نصب می کند.
4. وابستگی ها را نصب کنید: این مرحله با استفاده از وابستگی های پروژه نصب می شود npm ci، که نصب تمیز بر اساس را تضمین می کند package-lock.json فایل.
5. پوشه ساخت را ایجاد کنید: این مرحله دستور را اجرا می کند npm run build برای ایجاد پوشه build برای پروژه.
6. اگر پوشه اندروید موجود نیست اضافه کنید: این مرحله بررسی می کند که آیا android پوشه در پروژه وجود دارد. اگر این کار را نکرد، پلتفرم اندروید را با استفاده از آن اضافه می کند npx cap add android.
7. به روز رسانی خازن: این مرحله پیکربندی خازن و وابستگی ها را با استفاده از آن به روز می کند npx cap update.
8. کپی خازن: این مرحله با استفاده از فایل های برنامه وب را در پروژه اصلی کپی می کند npx cap copy.
9. ایجاد آیکون و پخش صفحه نمایش به پوشه اندروید: این مرحله بررسی می کند که آیا resources پوشه در پروژه وجود دارد. اگر این کار را کرد، آن را نصب می کند @capacitor/assets بسته به عنوان یک وابستگی توسعه و تولید آیکون ها و صفحه نمایش اسپلش برای پلتفرم اندروید با استفاده از npx capacitor-assets generate --android.
10. ساخت بسته نرم افزاری: این مرحله به android دایرکتوری و وظایف Gradle را اجرا می کند bundle و assembleDebug استفاده كردن ./gradlew. این وظایف بسته نرم افزاری را ایجاد می کنند و APK را اشکال زدایی می کنند.
11. کلید امضای اندروید را از env استخراج کنید: این مرحله مقدار the را می گیرد RELEASE_KEYSTORE Secret، که فرض می شود کدگذاری شده با base64 است، و آن را رمزگشایی می کند تا فایل کلید امضا را به دست آورد (release.jks). فایل کلید به عنوان ذخیره می شود android/release.decrypted.jks.
12. ثبت برنامه توسعه: بیلد اشکال زدایی برنامه را با استفاده از فروشگاه کلید و رمز عبور ارائه شده در مخازن اقدامات github امضا کنید.
13. محتوای پوشه خروجی اندروید را بررسی کنید: محتویات فهرست خروجی را فهرست کنید تا وجود بسته برنامه امضا شده را تأیید کنید.
14. تنظیم برچسب: تاریخ و زمان فعلی را به عنوان یک برچسب برای انتشار تنظیم کنید.
15. انتشار ساخت: یک نسخه GitHub با نام و پیام برچسب، شامل بسته برنامه امضا شده و اشکال زدایی APK به عنوان دارایی انتشار ایجاد کنید.

منابع/اطلاعات اضافی