From fdde52dfded03ddd4f2c5fc193ced218fac76b62 Mon Sep 17 00:00:00 2001 From: SheetJS Date: Sun, 2 Jun 2024 23:25:20 -0400 Subject: [PATCH] CapacitorJS Mobile demo refresh --- docz/docs/03-demos/02-frontend/05-svelte.md | 2 +- .../docs/03-demos/17-mobile/01-reactnative.md | 28 +-- .../03-demos/17-mobile/02-nativescript.md | 14 +- docz/docs/03-demos/17-mobile/04-ionic.md | 58 +++++- docz/docs/03-demos/17-mobile/05-capacitor.md | 191 ++++++++++++++---- docz/docs/03-demos/17-mobile/06-flutter.md | 14 +- docz/static/cap/App.svelte | 14 +- docz/static/cap/and.png | Bin 90710 -> 81994 bytes docz/static/cap/ios.png | Bin 100691 -> 91062 bytes 9 files changed, 244 insertions(+), 77 deletions(-) diff --git a/docz/docs/03-demos/02-frontend/05-svelte.md b/docz/docs/03-demos/02-frontend/05-svelte.md index f5bd106..e59dbd8 100644 --- a/docz/docs/03-demos/02-frontend/05-svelte.md +++ b/docz/docs/03-demos/02-frontend/05-svelte.md @@ -25,7 +25,7 @@ models and data flow strategies. This demo focuses on Svelte concepts. Other demos cover general deployments: - [Static Site Generation powered by SvelteKit](/docs/demos/static/svelte) -- [iOS applications powered by CapacitorJS](/docs/demos/mobile/capacitor) +- [iOS and Android applications powered by CapacitorJS](/docs/demos/mobile/capacitor) - [Desktop application powered by Wails](/docs/demos/desktop/wails) ::: diff --git a/docz/docs/03-demos/17-mobile/01-reactnative.md b/docz/docs/03-demos/17-mobile/01-reactnative.md index c8aa3b9..130f631 100644 --- a/docz/docs/03-demos/17-mobile/01-reactnative.md +++ b/docz/docs/03-demos/17-mobile/01-reactnative.md @@ -222,6 +222,13 @@ const wb = XLSX.read(ab); This demo was tested in the following environments: +**Real Devices** + +| OS | Device | RN | Date | +|:-----------|:------------------|:---------|:-----------| +| iOS 15.1 | iPhone 12 Pro Max | `0.73.6` | 2024-03-13 | +| Android 29 | NVIDIA Shield | `0.73.6` | 2024-03-13 | + **Simulators** | OS | Device | RN | Dev Platform | Date | @@ -231,13 +238,6 @@ This demo was tested in the following environments: | Android 34 | Pixel 3a | `0.73.5` | `win10-x64` | 2024-03-05 | | Android 34 | Pixel 3a | `0.73.7` | `linux-x64` | 2024-04-29 | -**Real Devices** - -| OS | Device | RN | Date | -|:-----------|:------------------|:---------|:-----------| -| iOS 15.1 | iPhone 12 Pro Max | `0.73.6` | 2024-03-13 | -| Android 29 | NVIDIA Shield | `0.73.6` | 2024-03-13 | - ::: 0) Install React Native dependencies @@ -1004,6 +1004,13 @@ try { This demo was tested in the following environments: +**Real Devices** + +| OS | Device | RN | Date | +|:-----------|:------------------|:---------|:-----------| +| iOS 15.5 | iPhone 13 Pro Max | `0.73.6` | 2024-03-31 | +| Android 29 | NVIDIA Shield | `0.73.6` | 2024-03-31 | + **Simulators** | OS | Device | RN | Dev Platform | Date | @@ -1013,13 +1020,6 @@ This demo was tested in the following environments: | Android 34 | Pixel 3a | `0.73.6` | `win10-x64` | 2024-03-31 | | Android 34 | Pixel 3a | `0.73.6` | `linux-x64` | 2024-03-31 | -**Real Devices** - -| OS | Device | RN | Date | -|:-----------|:------------------|:---------|:-----------| -| iOS 15.5 | iPhone 13 Pro Max | `0.73.6` | 2024-03-31 | -| Android 29 | NVIDIA Shield | `0.73.6` | 2024-03-31 | - ::: :::danger pass diff --git a/docz/docs/03-demos/17-mobile/02-nativescript.md b/docz/docs/03-demos/17-mobile/02-nativescript.md index 83831f7..a4e40ee 100644 --- a/docz/docs/03-demos/17-mobile/02-nativescript.md +++ b/docz/docs/03-demos/17-mobile/02-nativescript.md @@ -52,6 +52,13 @@ Angular and TypeScript is assumed. This demo was tested in the following environments: +**Real Devices** + +| OS | Device | NS | Date | +|:-----------|:--------------------|:---------|:-----------| +| Android 30 | NVIDIA Shield | `8.6.5` | 2024-04-07 | +| iOS 15.1 | iPad Pro | `8.6.1` | 2023-12-04 | + **Simulators** | OS | Device | NS | Dev Platform | Date | @@ -60,13 +67,6 @@ This demo was tested in the following environments: | iOS 17.0.1 | iPhone SE (3rd gen) | `8.6.1` | `darwin-x64` | 2023-12-04 | | Android 34 | Pixel 3a | `8.6.5` | `win10-x64` | 2024-04-07 | -**Real Devices** - -| OS | Device | NS | Date | -|:-----------|:--------------------|:---------|:-----------| -| Android 30 | NVIDIA Shield | `8.6.5` | 2024-04-07 | -| iOS 15.1 | iPad Pro | `8.6.1` | 2023-12-04 | - ::: :::danger Telemetry diff --git a/docz/docs/03-demos/17-mobile/04-ionic.md b/docz/docs/03-demos/17-mobile/04-ionic.md index 533f5cf..9b24977 100644 --- a/docz/docs/03-demos/17-mobile/04-ionic.md +++ b/docz/docs/03-demos/17-mobile/04-ionic.md @@ -49,12 +49,21 @@ The [CapacitorJS demo](/docs/demos/mobile/capacitor) covers CapacitorJS apps. This demo was tested in the following environments: -**Simulators** +**Real Devices** | OS | Device | Config | Date | |:-----------|:--------------------|:-------|:-----------| -| Android 34 | Pixel 3a | A | 2023-12-04 | -| iOS 17.0.1 | iPhone SE (3rd gen) | A | 2023-12-04 | +| Android 30 | NVIDIA Shield | B | 2024-05-30 | +| iOS 15.1 | iPad Pro | B | 2024-05-30 | + +**Simulators** + +| OS | Device | Config | Dev Platform | Date | +|:-----------|:--------------------|:-------|:-------------|:-----------| +| Android 34 | Pixel 3a | A | `darwin-x64` | 2023-12-04 | +| iOS 17.0.1 | iPhone SE (3rd gen) | A | `darwin-x64` | 2023-12-04 | +| Android 34 | Pixel 3a | B | `darwin-arm` | 2024-05-30 | +| iOS 17.5 | iPhone SE (3rd gen) | B | `darwin-arm` | 2024-05-30 |
Configurations (click to show) @@ -65,6 +74,12 @@ Configuration A: - Cordova: `cordova-lib@12.0.1`, `android 12.0.1, ios 7.0.1` - File Integration: `@awesome-cordova-plugins/file` version `6.4.0` +Configuration B: + +- Ionic: `@ionic/angular 8.2.0`, `@ionic/angular-toolkit 11.0.1` +- Cordova: `cordova-lib@12.0.1`, `android 13.0.0, ios 7.1.0` +- File Integration: `@awesome-cordova-plugins/file` version `6.7.0` +
::: @@ -138,7 +153,18 @@ simplifies iteration over the array of arrays: ### File Operations -`@awesome-cordova-plugins/file` reads and writes files on devices. +The `cordova-plugin-file` plugin reads and writes files on devices. + +:::caution pass + +For Android 30+, due to scoped storage rules, the standard file module writes +private files that cannot be accessed from the Files app. + +A Storage Access Framework plugin must be used to write external files. + +::: + +`@awesome-cordova-plugins/file` is a wrapper designed for Ionic + Angular apps. :::info pass @@ -217,12 +243,29 @@ known location. After writing, an alert will display the location of the file. 1) Follow the official instructions for iOS and Android development[^9]. +
+ Installation Notes (click to show) + +Ionic requires Java 17. + +
+ 2) Install required global dependencies: ```bash npm i -g cordova cordova-res @angular/cli native-run @ionic/cli ``` +:::note pass + +In some systems, the command must be run as the root user: + +```bash +sudo npm i -g cordova cordova-res @angular/cli native-run @ionic/cli +``` + +::: + ### Base Project 3) Create a new project: @@ -239,9 +282,9 @@ If a prompt asks about creating an Ionic account, enter `N` to opt out. :::caution pass -Due to conflicts in the dependency tree, the command failed in the last test. +Due to conflicts in the dependency tree, the command failed in some test runs. -The fix is to force install all modules: +If the package installation fails, forcefully install all modules: ```bash cd SheetJSIonic @@ -494,4 +537,5 @@ However, the generated files were not externally visible from the Files app. [^6]: See [`aoa_to_sheet` in "Utilities"](/docs/api/utilities/array#array-of-arrays-input) [^7]: See ["Workbook Helpers" in "Utilities"](/docs/api/utilities/wb) for details on `book_new` and `book_append_sheet`. [^8]: See [`write` in "Writing Files"](/docs/api/write-options) -[^9]: See ["Developing for iOS"](https://ionicframework.com/docs/v6/developing/ios) and ["Developing for Android"](https://ionicframework.com/docs/v6/developing/android) in the v6 Ionic framework documentation. \ No newline at end of file +[^9]: See ["Developing for iOS"](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/ios) and ["Developing for Android"](https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v6/developing/android). The Ionic team removed these pages from the official docs site and recommend the `vercel.app` docs site. +[^10]: See the [JDK Archive](https://jdk.java.net/archive/) for Java 17 JDK download links. diff --git a/docz/docs/03-demos/17-mobile/05-capacitor.md b/docz/docs/03-demos/17-mobile/05-capacitor.md index 92651ab..fb427e2 100644 --- a/docz/docs/03-demos/17-mobile/05-capacitor.md +++ b/docz/docs/03-demos/17-mobile/05-capacitor.md @@ -1,5 +1,6 @@ --- -title: CapacitorJS +title: Storing Sheets with CapacitorJS +sidebar_label: CapacitorJS pagination_prev: demos/static/index pagination_next: demos/desktop/index sidebar_position: 5 @@ -10,10 +11,17 @@ sidebar_custom_props: import current from '/version.js'; import CodeBlock from '@theme/CodeBlock'; -The [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) can be -imported from any component or script in the app. +[CapacitorJS](https://capacitorjs.com/) is a mobile app runtime for building iOS +and Android apps. -The "Complete Example" creates an app that looks like the screenshots below: +[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing +data from spreadsheets. + +This demo uses CapacitorJS and SheetJS to process data and export spreadsheets. +We'll explore how to load SheetJS in an CapacitorJS app and use APIs and plugins +to extract data from, and write data to, spreadsheet files on the device. + +The ["Demo"](#demo) creates an app that looks like the screenshots below: @@ -32,20 +40,22 @@ The "Complete Example" creates an app that looks like the screenshots below: This demo was tested in the following environments: -**Simulators** - -| OS | Device | CapacitorJS + FS | Dev Platform | Date | -|:-----------|:--------------------|:------------------|:-------------|:-----------| -| Android 34 | Pixel 3a | `5.5.1` / `5.1.4` | `darwin-x64` | 2023-12-04 | -| iOS 17.0.1 | iPhone 15 Pro Max | `5.5.1` / `5.1.4` | `darwin-x64` | 2023-12-04 | -| Android 34 | Pixel 3a | `6.0.0` / `6.0.0` | `win10-x64` | 2024-05-28 | - **Real Devices** | OS | Device | CapacitorJS + FS | Date | |:-----------|:--------------------|:------------------|:-----------| -| Android 29 | NVIDIA Shield | `5.5.1` / `5.1.4` | 2023-12-04 | -| iOS 15.1 | iPad Pro | `5.5.1` / `5.1.4` | 2023-12-04 | +| Android 30 | NVIDIA Shield | `6.0.0` / `6.0.0` | 2024-06-02 | +| iOS 15.1 | iPad Pro | `6.0.0` / `6.0.0` | 2024-06-02 | + +**Simulators** + +| OS | Device | CapacitorJS + FS | Dev Platform | Date | +|:-----------|:--------------------|:------------------|:-------------|:-----------| +| Android 34 | Pixel 3a | `6.0.0` / `6.0.0` | `darwin-x64` | 2024-06-02 | +| iOS 17.5 | iPhone 15 Pro Max | `6.0.0` / `6.0.0` | `darwin-x64` | 2024-06-02 | +| Android 34 | Pixel 3a | `6.0.0` / `6.0.0` | `darwin-arm` | 2024-06-02 | +| iOS 17.5 | iPhone 15 Pro Max | `6.0.0` / `6.0.0` | `darwin-arm` | 2024-06-02 | +| Android 34 | Pixel 3a | `6.0.0` / `6.0.0` | `win10-x64` | 2024-05-28 | ::: @@ -67,13 +77,26 @@ npx @capacitor/cli telemetry ## Integration Details -This example uses Svelte, but the same principles apply to other frameworks. +The [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) can be +imported from any component or script in the app. + +This demo uses [SvelteJS](/docs/demos/frontend/svelte), but the same principles +apply to other frameworks. #### Reading data -The standard HTML5 File Input element logic works in CapacitorJS: +The standard [HTML5 File Input](/docs/demos/local/file#file-api) API works as +expected in CapacitorJS. -```html +Apps will typically include an `input type="file"` element. When the element is +activated, CapacitorJS will show a file picker. After the user selects a file, +the element will receive a `change` event. + +The following example parses the selected file using the SheetJS `read`[^1] +method, generates a HTML table from the first sheet using `sheet_to_html`[^2], +and displays the table by setting the `innerHTML` attribute of a `div` element: + +```html title="Sample component for data import"
iOS