add bb tasks for mobile app development (#5765)

* add bb tasks for mobile development
* update mobile app development readme

Co-authored-by: Andelf <[email protected]>

android/README.md

@@ -1,46 +0,0 @@
-## Set up development environment 
-* Install Android studio [^1] and SDK (newer than 30) tools
-   Note: for M1 MacBook users.
-   - Download version **Mac with Apple Chip** 
-   - unzip it and move **Android Studio.app** file to **Applications**, or you will get the following error later.
-     ```
-     [error] Unable to launch Android Studio. Is it installed?
-        Attempted to open Android Studio at: /Applications/Android Studio.app
-        You can configure this with the CAPACITOR_ANDROID_STUDIO_PATH environment variable.
-     ```
-* In Android Studio, open **Tools** -> **SDK Manager** to install other SDK tools [^2].
-  > In the SDK Tools tab, make sure to install at least the following:
-  >> - Android SDK Build-Tools
-  >> - Android SDK Command-line Tools
-  >> - Android Emulator
-  >> - Android SDK Platform-Tools
-
-## Build the development app in Android emulator
-* Replace `server url` with your local-ip-address:3001 (run ifconfig to check) in *capacitor.config.ts*.
-* Run `yarn && yarn app-watch` from the logseq project root directory in terminal.
-* Run `npx cap sync android` in another termimal (all-in-one cmd).
-* In Android Studio, open **Tools** -> **AVD Manager** to create Android Virtual Device (AVD), and lanuch it in the emulator.
-* In Android Studio, open **Run** -> **Run** to run Logseq.
-* After logseq startup in Android virtual device, repl should be able to connect
-* For browser console print and devtool remote debug, open chrome, type url chrome://inspect/#devices, you should see your device there, click inspect
-
-## Build a release and install it to your android device 
-* Comment in `server url` in *capacitor.config.ts*.
-* Connect your device to PC.
-* Run `yarn clean && yarn release-app && rm -rf ./public/static && rm -rf ./static/js/*.map && mv static ./public && npx cap sync android && npx cap run android`
-
-## Build a apk
-* Comment out `server url` in *capacitor.config.ts*.
-* Run `yarn clean && yarn release-app && rm -rf ./public/static && rm -rf ./static/js/*.map && mv static ./public && npx cap sync android`.
-* In Android Studio, open **Build** -> **Build Bundles / APKs** -> **Build APKs**.
-* Get your apk in `android/app/build/apk/debug`.
-
-[^1] https://developer.android.com/studio/index.html
-
-[^2] https://capacitorjs.com/docs/getting-started/environment-setup
-
-## Develop without opening Android Studio
-1. brew install gradle
-2. make sure java version using 11
-3. cd web/android && gradle wrapper
-4. install android sdk 30

bb.edn

@@ -27,6 +27,35 @@
    ;; Parallel execution - https://book.babashka.org/#parallel
    :task (run '-dev:electron-start {:parallel true})}
 
+  dev:app-watch
+  logseq.tasks.dev/app-watch
+
+  dev:npx-cap-run-ios
+  logseq.tasks.dev/npx-cap-run-ios
+
+  -dev:ios-app
+  {:depends [dev:app-watch dev:npx-cap-run-ios]}
+  
+  dev:ios-app
+  {:doc "iOS development environment"
+   :task (run '-dev:ios-app {:parallel true})}
+
+  release:ios-app
+  logseq.tasks.dev/run-ios-release
+
+  dev:npx-cap-run-android
+  logseq.tasks.dev/npx-cap-run-android
+
+  -dev:android-app
+  {:depends [dev:app-watch dev:npx-cap-run-android]}
+  
+  dev:android-app
+  {:doc "Android development environment"
+   :task (run '-dev:android-app {:parallel true})}
+  
+  release:android-app
+  logseq.tasks.dev/run-android-release
+  
   dev:validate-local-storage
   logseq.tasks.spec/validate-local-storage
 

docs/develop-logseq-on-mobile.md

@@ -0,0 +1,96 @@
+# iOS development
+
+## Installation
+- Install Xcode 13 from App Store.
+- Install [CocoaPods](https://cocoapods.org/)
+  ```shell
+  sudo gem install cocoapods
+  ```
+  Note: use the following commands from *ios/App* directory to fix **ffi_c.bundle** related issue for M1 MacBook [^1].
+  ```shell
+  sudo arch -x86_64 gem install ffi
+  arch -x86_64 pod install
+  ```
+ 
+## Set up development environment
+### Build the development app
+- comment in `server` section in **capacitor.config.ts**, and replace `process.env.LOGSEQ_APP_ASERVER_URL` with your `http://your-local-ip-address:3001` (run `ifconfig` to check).
+    ```typescript
+    server: {
+        url: "process.env.LOGSEQ_APP_ASERVER_URL",
+        cleartext: true
+        } 
+    ```
+- Run `yarn && yarn app-watch` from the logseq project root directory in terminal.
+- Run `npx cap sync ios` in another termimal to copy web assets from public to *ios/App/App/public*, and create *capacitor.config.json* in *ios/App/App*, and update iOS plugins.
+- Connect your iOS device to MacBook.
+- Run `npx cap open ios` to open Logseq project in Xcode, and build the app there.
+
+or, you can run `bb dev:ios-app` to do those steps with one command if you are on MacOS. To download bb, see https://github.com/babashka/babashka#installation. Also, in order to use mobile bb tasks on macOS, `gsed` needs to be installed in your system (run `brew install gnu-sed` to install).
+
+### Build the release app
+- Comment out `server` section above in **capacitor.config.ts**.
+- Connect your iOS device to MacBook.
+- Run `yarn run-ios-release` to install the release app to your iOS device.
+
+or, you can run `bb release:ios-app` to do those steps with one command.
+
+[^1] https://github.com/CocoaPods/CocoaPods/issues/10220#issuecomment-730963835
+
+
+# Android development  
+## Installation
+- Install Android studio [^1] and SDK (newer than 30) tools
+  Note: for M1 MacBook users.
+  - Download version **Mac with Apple Chip** 
+  - unzip it and move **Android Studio.app** file to **Applications**, or you will get the following error later.
+    ```
+     [error] Unable to launch Android Studio. Is it installed?
+        Attempted to open Android Studio at: /Applications/Android Studio.app
+        You can configure this with the CAPACITOR_ANDROID_STUDIO_PATH environment variable.
+     ```
+- In Android Studio, open **Tools** -> **SDK Manager** to install other SDK tools [^2].
+  > In the SDK Tools tab, make sure to install at least the following:
+  >> - Android SDK Build-Tools
+  >> - Android SDK Command-line Tools
+  >> - Android Emulator
+  >> - Android SDK Platform-Tools
+
+## Set up development environment
+### Build the development app
+- comment in `server` section in **capacitor.config.ts**, and replace `process.env.LOGSEQ_APP_ASERVER_URL` with your `http://your-local-ip-address:3001` (run `ifconfig` to check).
+    ```typescript
+    server: {
+        url: "process.env.LOGSEQ_APP_ASERVER_URL",
+        cleartext: true
+        } 
+    ```
+- Run `yarn && yarn app-watch` from the logseq project root directory in terminal.
+- Run `npx cap sync android` in another termimal.
+- Run `npx cap run android` to install app into your device.
+
+or, you can run `bb dev:android-app` to do those steps with one command if you are on macOS.
+
+Then,
+- In Android Studio, open **Tools** -> **AVD Manager** to create Android Virtual Device (AVD), and lanuch it in the emulator.
+- In Android Studio, open **Run** -> **Run** to run Logseq.
+- After logseq startup in Android virtual device, repl should be able to connect
+- For browser console print and devtool remote debug, open chrome, type url chrome://inspect/#devices, you should see your device there, click inspect
+
+
+### Build a release and install it to your android device 
+- Comment out `server` section above in **capacitor.config.ts**.
+- Connect your device to PC.
+- Run `yarn run-android-release`.
+
+or, you can run `bb release:android-app` to do those steps with one command.
+
+### Build an apk
+- Comment out `server` section above in **capacitor.config.ts**.
+- Run `yarn run-android-release`
+
+or, you can run `bb release:android-app` to do those steps with one command.
+
+Then,
+- In Android Studio, open **Build** -> **Build Bundles / APKs** -> **Build APKs**.
+- Get your apk in `android/app/build/apk/debug`.

docs/mobile.md

@@ -1,18 +0,0 @@
-## install list:
-* Android studio
-* SDK 30
-* other sdk tools in Android studio preference setting https://capacitorjs.com/docs/getting-started/environment-setup
-* change the server url in `capacitor.config.ts` with your local ip:3001 (run ifconfig to check)
-* run `yarn && yarn app-watch`
-* in another console, run `npx cap open android`
-* create Android virtual device in Android studio
-* click the run button in Android stutio to run the project
-* after logseq startup in Android virtual device, repl should be able to connect
-* for browser console print and devtool remote debug, open chrome, type url chrome://inspect/#devices, you should see your device there, click inspect
-
-
-## Develop without opening Android Studio
-1. brew install gradle
-2. make sure java version using 11
-3. cd web/android && gradle wrapper
-4. install android sdk 30

ios/README.md

@@ -1,33 +0,0 @@
-Installation:
-
-* Install Xcode 13 from App Store.
-* Install [CocoaPods](https://cocoapods.org/)
-  ```shell
-  sudo gem install cocoapods
-  ```
-  Note: use the following commands from *ios/App* directory to fix **ffi_c.bundle** related issue for M1 MacBook [^1].
-  ```shell
-  sudo arch -x86_64 gem install ffi
-  arch -x86_64 pod install
-  ```
-* Run `yarn && yarn app-watch` from the logseq project root directory in terminal.
-* Open Logseq project in Xcode by running the following command in termimal.
-  ```shell
-  npx cap open ios
-  ```
-  Note: for the first time after a fresh clone.
-  - Run `npx cap copy ios` to copy web assets from public to *ios/App/App/public*, and create *capacitor.config.json* in *ios/App/App*.
-  - Run `npx cap update ios` to update iOS plugins.
-  - Add the following code to *ios/App/App/capacitor.config.json*, and replace `server url` with your local-ip-address:3001 (run ifconfig to check)
-    ```json
-    "server": {
-        "url": "http://your-own-id-address:3001",
-        "cleartext": true} 
-    ```
-* Run logseq 
-  ```shell
-  npx cap run ios
-  ```
-  
-[^1] https://github.com/CocoaPods/CocoaPods/issues/10220#issuecomment-730963835
-  

scripts/set-system-env.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+if uname -s | grep -q Darwin; then
+  SED=gsed
+else
+  SED=sed
+fi
+
+PROTOCOL="http"
+IP=$(ipconfig getifaddr en0)
+PORT="3001"
+LOGSEQ_APP_SERVER_URL="${PROTOCOL}://${IP}:${PORT}"
+echo -e "Server URL: ${LOGSEQ_APP_SERVER_URL}"
+
+git checkout capacitor.config.ts
+$SED -i 's#// , server:# , server:#g' capacitor.config.ts
+$SED -i 's#//    url:#    url:#g' capacitor.config.ts
+$SED -i 's#process.env.LOGSEQ_APP_SERVER_URL#"'${LOGSEQ_APP_SERVER_URL}'"#g' capacitor.config.ts
+$SED -i 's#//    cleartext:#    cleartext:#g' capacitor.config.ts
+$SED -i 's#// }# }#g' capacitor.config.ts

scripts/src/logseq/tasks/dev.clj

@@ -14,17 +14,59 @@
                     comparison-instant)))
 
 ;; Works whether yarn clean has been run before or not
+(defn open-dev-app
+  "Opens dev app when watch process has built main.js"
+  [cmd]
+  (let [start-time (java.time.Instant/now)]
+    (loop [n 1000]
+      (if (and (fs/exists? "static/js/main.js")
+               (file-modified-later-than? "static/js/main.js" start-time))
+        (shell cmd)
+        (println "Waiting for app to build..."))
+      (Thread/sleep 1000)
+      (when-not (or (and (fs/exists? "ios/App/App/public/static/js/main.js")
+                      (file-modified-later-than? "ios/App/App/public/static/js/main.js" start-time))
+                    (and (fs/exists? "android/App/src/main/assets/public/static/js/main.js")
+                      (file-modified-later-than? "android/App/src/main/assets/public/static/js/main.js" start-time)))
+        (recur (dec n))))))
+
 (defn open-dev-electron-app
   "Opens dev-electron-app when watch process has built main.js"
   []
-  (let [start-time (java.time.Instant/now)]
-    (dotimes [_n 1000]
-             (if (and (fs/exists? "static/js/main.js")
-                      (file-modified-later-than? "static/js/main.js" start-time))
-               (shell "yarn dev-electron-app")
-               (println "Waiting for app to build..."))
-             (Thread/sleep 1000))))
+  (open-dev-app "yarn dev-electron-app"))
+
+(defn app-watch
+  "Watches environment to reload cljs, css and other assets for mobile"
+  []
+  (doseq [cmd ["bash scripts/set-system-env.sh"
+               "yarn clean"
+               "yarn app-watch"]]
+    (println cmd)
+    (shell cmd)))
 
+(defn npx-cap-run-ios
+  "Copy assets files to iOS build directory, and run app in Xcode"
+  []
+  (open-dev-app "npx cap sync ios")
+  (shell "npx cap open ios"))
+
+(defn npx-cap-run-android
+  "Copy assets files to Android build directory, and run app in Android Studio"
+  []
+  (open-dev-app "npx cap sync android")
+  (shell "npx cap open android"))
+
+(defn run-ios-release
+  "Build iOS app release"
+  []
+  (shell "git checkout capacitor.config.ts")
+  (shell "yarn run-ios-release"))
+
+(defn run-android-release
+  "Build Android app release"
+  []
+  (shell "git checkout capacitor.config.ts")
+  (shell "yarn run-android-release"))
 
 (defn lint
   "Run all lint tasks