add bb tasks for mobile app development (logseq#5765)

* add bb tasks for mobile development * update mobile app development readme Co-authored-by: Andelf <[email protected]>
ofer1992 · Jun 24, 2022 · 459262c · 459262c
1 parent 76028fb
commit 459262c
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 104 deletions.
diff --git a/android/README.md b/android/README.md
diff --git a/bb.edn b/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
 

diff --git a/docs/develop-logseq-on-mobile.md b/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`.
diff --git a/docs/mobile.md b/docs/mobile.md
diff --git a/ios/README.md b/ios/README.md
diff --git a/scripts/set-system-env.sh b/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
diff --git a/scripts/src/logseq/tasks/dev.clj b/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