Flutter Mobile demo refresh

This commit is contained in:
SheetJS 2024-06-09 17:48:23 -04:00
parent 55ce74bf8c
commit 201f3d48fc
9 changed files with 230 additions and 39 deletions

@ -40,6 +40,24 @@ pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`
yarn remove xlsx
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
:::caution pass
Newer releases of Yarn may throw an error:
```
Usage Error: It seems you are trying to add a package using a https:... url; we now require package names to be explicitly specified.
Try running the command again with the package name prefixed: yarn add my-package@https:...
```
The workaround is to prepend the URL with `xlsx@`:
<CodeBlock language="bash">{`\
yarn add xlsx@https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
:::
</TabItem>
</Tabs>
@ -67,7 +85,7 @@ Snyk security tooling may report errors involving "Prototype Pollution":
Prototype Pollution [Medium Severity][https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926]
```
As noted in the [Snyk report](https://web.archive.org/web/20231129100639/https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926):
As noted in the [Snyk report](https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926):
> The issue is resolved in version 0.19.3
@ -176,6 +194,23 @@ pnpm install --save file:vendor/xlsx-${current}.tgz`}
<CodeBlock language="bash">{`\
yarn add file:vendor/xlsx-${current}.tgz`}
</CodeBlock>
:::caution pass
Newer releases of Yarn may throw an error:
```
Usage Error: The file:vendor/xlsx-0.20.2.tgz string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?
```
The workaround is to prepend the URI with `xlsx@`:
<CodeBlock language="bash">{`\
yarn add xlsx@file:vendor/xlsx-${current}.tgz`}
</CodeBlock>
:::
</TabItem>
</Tabs>

@ -38,6 +38,24 @@ pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`
yarn remove xlsx
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
:::caution pass
Newer releases of Yarn may throw an error:
```
Usage Error: It seems you are trying to add a package using a https:... url; we now require package names to be explicitly specified.
Try running the command again with the package name prefixed: yarn add my-package@https:...
```
The workaround is to prepend the URL with `xlsx@`:
<CodeBlock language="bash">{`\
yarn add xlsx@https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
:::
</TabItem>
</Tabs>
@ -57,7 +75,7 @@ Snyk security tooling may report errors involving "Prototype Pollution":
Prototype Pollution [Medium Severity][https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926]
```
As noted in the [Snyk report](https://web.archive.org/web/20231129100639/https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926):
As noted in the [Snyk report](https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926):
> The issue is resolved in version 0.19.3
@ -165,6 +183,23 @@ pnpm install --save file:vendor/xlsx-${current}.tgz`}
<CodeBlock language="bash">{`\
yarn add file:vendor/xlsx-${current}.tgz`}
</CodeBlock>
:::caution pass
Newer releases of Yarn may throw an error:
```
Usage Error: The file:vendor/xlsx-0.20.2.tgz string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?
```
The workaround is to prepend the URI with `xlsx@`:
<CodeBlock language="bash">{`\
yarn add xlsx@file:vendor/xlsx-${current}.tgz`}
</CodeBlock>
:::
</TabItem>
</Tabs>

@ -34,10 +34,10 @@ models and data flow strategies.
This demo was tested in the following environments:
| Version | Date |
|:------------------|:-----------|
| `1.8.2` (latest) | 2023-12-04 |
| `1.2.32` (legacy) | 2023-12-04 |
| Browser | Version | Date |
|:-------------|:------------------|:-----------|
| Chromiun 125 | `1.8.2` (latest) | 2024-06-09 |
| Chromium 125 | `1.2.32` (legacy) | 2024-06-09 |
:::
@ -238,7 +238,7 @@ $scope.exportSheetJS = function() {
```
<details>
<summary><b>Complete Example</b> (click to show)</summary>
<summary open><b>How to run the example</b> (click to hide)</summary>
1) Save the following to `index.html`:
@ -291,6 +291,10 @@ app.controller('sheetjs', function($scope, $http) {
2) Start a local web server with `npx http-server .` and access the displayed
URL with a web browser (typically `http://localhost:8080`)
When the page loads, the app will fetch https://docs.sheetjs.com/pres.xlsx and
store an array of objects in state. When the "Export Table" button is clicked,
a worksheet is created and exported to XLSX.
</details>
### HTML
@ -340,7 +344,7 @@ The HTML table can be directly exported with [`table_to_book`](/docs/api/utiliti
```
<details>
<summary><b>Complete Example</b> (click to show)</summary>
<summary open><b>How to run the example</b> (click to hide)</summary>
1) Save the following to `index.html`:
@ -386,6 +390,10 @@ app.controller('sheetjs', function($scope, $http) {
2) Start a local web server with `npx http-server .` and access the displayed
URL with a web browser (typically `http://localhost:8080`)
When the page loads, the app will fetch https://docs.sheetjs.com/pres.xlsx and
store the HTML string in state. When the "Export Table" button is clicked, a
worksheet is created and exported to XLSX.
</details>
[^1]: See [`$http`](https://docs.angularjs.org/api/ng/service/$http) in the AngularJS documentation.

@ -26,7 +26,11 @@ user-supplied sheets and exports data to XLSX workbooks:
:::note Tested Deployments
This demo was last tested on 2023 December 04 with Glide Data Grid 5.3.2
This demo was tested in the following environments:
| Browser | Version | Date |
|:-------------|:--------|:-----------|
| Chromiun 125 | `5.3.2` | 2024-06-09 |
:::
@ -384,7 +388,8 @@ values should be 41, 42, 43, 44, and 45, as shown in the screenshot below:
![glide-data-grid after edits](pathname:///gdg/post.png)
7) Click on the "Export" button to create a XLSX file (`sheetjs-gdg.xlsx`).
7) Click on the "Export" button. The browser should attempt to download a XLSX
file (`sheetjs-gdg.xlsx`). Save the file.
Open the generated file and verify the contents match the grid.

@ -28,15 +28,15 @@ This demo was tested in the following environments:
| Version | Date | Notes |
|:----------------|:-----------|:---------------------|
| `7.0.0-beta.19` | 2023-12-04 | |
| `7.0.0-beta.41` | 2023-12-04 | Editing did not work |
| `7.0.0-beta.19` | 2024-06-09 | |
| `7.0.0-beta.44` | 2024-06-09 | Editing did not work |
:::
:::danger pass
When this demo was last tested, the grid correctly displayed data but could not
be edited by the user.
When this demo was last tested against the latest version, the grid correctly
displayed data but data could not be edited by the user.
The current recommendation is to use version `7.0.0-beta.19`.
@ -50,7 +50,7 @@ installation with Yarn and other package managers.
Using the `npm` tool, this command installs SheetJS and React Data Grid:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.41`}
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.19`}
</CodeBlock>
Methods and components in both libraries can be loaded in pages using `import`:
@ -146,17 +146,17 @@ function rdg_to_ws(rows: Row[]): WorkSheet {
## Demo
1) Create a new TypeScript `create-react-app` app:
1) Create a new ViteJS app using the `react-ts` template:
```bash
npx create-react-app sheetjs-rdg --template typescript
npm create vite@latest -- sheetjs-rdg --template react-ts
cd sheetjs-rdg
```
2) Install dependencies:
<CodeBlock language="bash">{`\
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.41`}
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.19`}
</CodeBlock>
3) Download [`App.tsx`](pathname:///rdg/App.tsx) and replace `src/App.tsx`.
@ -168,12 +168,24 @@ curl -L -o src/App.tsx https://docs.sheetjs.com/rdg/App.tsx
4) Start the development server:
```bash
npm start
npm run dev
```
The terminal window will display a URL (typically `http://localhost:5173`).
Open the URL with a web browser and confirm that a page loads.
#### Testing
5) When the page loads, it will fetch https://docs.sheetjs.com/pres.numbers,
parse with SheetJS, and load the data in the data grid.
5) Confirm the table shows a list of Presidents.
6) Click one of the "export" buttons to export the grid data to file.
When the page loads, it will fetch https://docs.sheetjs.com/pres.numbers, parse
with SheetJS, and load the data in the data grid.
6) Click the "export [.xlsx]" button to export the grid data to XLSX. It should
attempt to download `SheetJSRDG.xlsx`.
7) Open the generated file in a spreadsheet editor. Set cell A7 to "SheetJS Dev"
and set cell B7 to 47. Save the file.
8) Use the file picker to select the modified file. The table will refresh and
show the new data.

@ -10,6 +10,8 @@ sidebar_custom_props:
---
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
Dart[^1] + Flutter[^2] is a popular cross-platform app framework. JavaScript
@ -45,15 +47,15 @@ This demo was tested in the following environments:
| OS | Device | Dart | Flutter | Date |
|:-----------|:------------------|:--------|:---------|:-----------|
| Android 29 | NVIDIA Shield | `3.2.2` | `3.16.2` | 2023-12-04 |
| iOS 15.1 | iPad Pro | `3.2.2` | `3.16.2` | 2023-12-04 |
| Android 30 | NVIDIA Shield | `3.4.3` | `3.22.2` | 2024-06-09 |
| iOS 15.1 | iPad Pro | `3.4.3` | `3.22.2` | 2024-06-09 |
**Simulators**
| OS | Device | Dart | Flutter | Dev Platform | Date |
|:-----------|:------------------|:--------|:---------|:-------------|:-----------|
| Android 34 | Pixel 3a | `3.2.2` | `3.16.2` | `darwin-x64` | 2023-12-04 |
| iOS 17.0.1 | iPhone 15 Pro Max | `3.2.2` | `3.16.2` | `darwin-x64` | 2023-12-04 |
| Android 34 | Pixel 3a | `3.4.3` | `3.22.2` | `darwin-x64` | 2024-06-09 |
| iOS 17.5 | iPhone 15 Pro Max | `3.4.3` | `3.22.2` | `darwin-x64` | 2024-06-09 |
:::
@ -219,12 +221,31 @@ class SheetJSFlutterState extends State<SheetJSFlutter> {
Run `flutter doctor` and confirm the following items are checked:
<Tabs groupId="os">
<TabItem value="linux" label="Linux">
```
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
[✓] Android Studio (version 2022.3)
```
</TabItem>
<TabItem value="macos" label="macOS" default>
```
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
```
</TabItem>
<TabItem value="win" label="Windows">
```
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
```
</TabItem>
</Tabs>
(the actual version numbers may differ)
<details open>
@ -290,6 +311,22 @@ If Chromium is installed, the environment variable should be manually assigned:
export CHROME_EXECUTABLE=/Applications/Chromium.app/Contents/MacOS/Chromium
```
<Tabs groupId="os">
<TabItem value="linux" label="Linux">
</TabItem>
<TabItem value="macos" label="macOS">
```bash
export CHROME_EXECUTABLE=/Applications/Chromium.app/Contents/MacOS/Chromium
```
</TabItem>
<TabItem value="win" label="Windows">
</TabItem>
</Tabs>
:::
</details>
@ -297,17 +334,18 @@ export CHROME_EXECUTABLE=/Applications/Chromium.app/Contents/MacOS/Chromium
Run `flutter emulators` and check for both `ios` and `android` emulators:
```
apple_ios_simulator • iOS Simulator • Apple • ios
Pixel_3a_API_34 • Pixel 3a API 34 • Google • android
Id • Name • Manufacturer • Platform
apple_ios_simulator • iOS Simulator • Apple • ios
Pixel_3a_API_34 • Pixel 3a API 34 • Google • android
```
1) Disable telemetry.
1) Disable telemetry. The following commands were confirmed to work:
```bash
dart --disable-telemetry
dart --disable-analytics
flutter config --no-analytics
flutter config --disable-telemetry
```
### Base Project
@ -453,9 +491,9 @@ flutter run
The app fetches https://docs.sheetjs.com/pres.numbers, parses, converts data to
an array of arrays, and presents the data in a Flutter `Table` widget.
:::caution pass
:::info pass
When the demo was last run, there was a build error:
In some demo runs, the build failed with an Android SDK error:
```
│ The plugin flutter_js requires a higher Android SDK version. │
@ -513,7 +551,7 @@ flutter devices
The list should include the device:
```
SheetJS (mobile) • 1234567890 • android-arm64 • Android 10 (API 29)
SheetJS (mobile) • 726272627262726272 • android-arm64 • Android 11 (API 30)
^^^^^^^--- the first column is the name
```
@ -529,7 +567,9 @@ flutter build apk --release
flutter install
```
The script will ask for a device:
:::note pass
The script may ask for a device:
```
[1]: SheetJS (1234567890)
@ -541,7 +581,9 @@ Please choose one (or "q" to quit):
Select the number corresponding to the device.
18) Launch the installed `sheetjs_flutter` app on the device
:::
18) Launch the installed `sheetjs_flutter` app on the device.
:::caution pass
@ -564,7 +606,7 @@ flutter devices
The list should include the device:
```
SheetPad (mobile) • 00000000-0000000000000000 ios • iOS 15.1 19B74
SheetPad (mobile) • 00000000-0000000000000000 • ios • iOS 15.1 19B74
^^^^^^^^--- the first column is the name
```
@ -574,6 +616,55 @@ The list should include the device:
flutter run -d SheetPad
```
In debug mode, "Flutter tools" will attempt to connect to the running app. The
device will ask for permission:
> "Sheetjs Flutter" would like to find and connect to devices on your local network.
Tap "OK" to continue.
:::caution pass
When this demo was last tested, the build failed with an error:
```text
Could not build the precompiled application for the device.
Error (Xcode): No profiles for 'com.example.sheetjsFlutter' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.example.sheetjsFlutter'. Automatic signing is disabled and unable to generate a profile. To enable automatic signing, pass -allowProvisioningUpdates to xcodebuild.
```
The message includes a hint:
```
Verify that the Bundle Identifier in your project is your signing id in Xcode
open ios/Runner.xcworkspace
```
Open the workspace and select the "Runner" project in the Navigator. In the main
pane, select "Signing &amp; Capabilities" and ensure a Team is selected. From
the menu bar, select "Product" > "Run" to run the app.
:::
:::info pass
If there is an "Untrusted Developer" error, the certificate must be trusted on
the device. The following steps were verified in iOS 15.1:
1) Open the "Settings" app on the device
In the "APPS FROM DEVELOPER" section of the new screen, "Sheetjs Flutter" should
be displayed. If it is missing, tap the "&lt;" button near the top of the screen
and select a different certificate from the list.
2) Select "General" > "VPN &amp; Device Management".
3) In the "DEVELOPER APP" section, tap the certificate that is "Not Trusted".
4) After confirming "Sheetjs Flutter" is in the list, tap the "Trust" button and
tap "Trust" in the popup.
:::
[^1]: https://dart.dev/ is the official site for the Dart Programming Language.
[^2]: https://flutter.dev/ is the official site for the Flutter Framework.
[^3]: [The `flutter_js` package](https://pub.dev/packages/flutter_js) is hosted on the Dart package repository.

@ -23,7 +23,12 @@ spreadsheets into simple XLSX files for MATLAB.
:::note Tested Deployments
This demo was last tested by SheetJS users on 2023 November 27 in MATLAB R2023a.
This demo was tested by SheetJS users in the following deployments:
| Architecture | Version | Date |
|:-------------|:--------|:-----------|
| `darwin-x64` | R2024a | 2024-06-09 |
| `win10-x64` | R2024a | 2024-06-09 |
:::

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 80 KiB