ionic

docz/docs/03-demos/05-mobile/04-ionic.md

@@ -10,6 +10,17 @@ sidebar_custom_props:
 The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported
 from the main entrypoint or any script in the project.
 
+The "Complete Example" creates an app that looks like the screenshots below:
+
+<table><thead><tr>
+  <th><a href="#demo">iOS</a></th>
+</tr></thead><tbody><tr><td>
+
+![iOS screenshot](pathname:///ionic/ios.png)
+
+</td></tr></tbody></table>
+
+
 :::warning Telemetry
 
 Before starting this demo, manually disable telemetry.  On Linux and MacOS:
@@ -36,7 +47,7 @@ npx @capacitor/cli telemetry
 
 :::
 
-## Cordova
+## Integration Details
 
 :::caution
 
@@ -44,6 +55,8 @@ The latest version of Ionic uses CapacitorJS. These notes are for Cordova apps.
 
 :::
 
+### Angular
+
 `Array<Array<any>>` neatly maps to a table with `ngFor`:
 
 ```html
@@ -56,15 +69,26 @@ The latest version of Ionic uses CapacitorJS. These notes are for Cordova apps.
 </ion-grid>
 ```
 
-`@ionic-native/file` reads and writes files on devices. `readAsArrayBuffer`
-returns `ArrayBuffer` objects suitable for `array` type, and `array` type can
-be converted to blobs that can be exported with `writeFile`:
+### Cordova
+
+`@ionic-native/file` reads and writes files on devices.
+
+_Reading Files_
+
+`readAsArrayBuffer` returns `ArrayBuffer` objects suitable for `array` type:
 
 ```ts
 /* read a workbook */
 const ab: ArrayBuffer = await this.file.readAsArrayBuffer(url, filename);
-const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'array'});
+const wb: XLSX.WorkBook = XLSX.read(ab, {type: 'array'});
+```
 
+_Writing Files_
+
+`array` type can be converted to blobs that can be exported with `writeFile`:
+
+
+```ts
 /* write a workbook */
 const wbout: ArrayBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
 let blob = new Blob([wbout], {type: 'application/octet-stream'});
@@ -75,15 +99,13 @@ this.file.writeFile(url, filename, blob, {replace: true});
 
 :::note
 
-This demo was tested on an Intel Mac on 2022 August 18 with Cordova.
+This demo was tested on an Intel Mac on 2023 March 19 with Cordova.
 The file integration uses `@ionic-native/file` version `5.36.0`.
 
-The iOS simulator runs iOS 15.5 on an iPod Touch 7th Gen.
+The iOS simulator runs iOS 16.5 on an iPhone SE (3rd Generation).
 
 :::
 
-<details><summary><b>Complete Example</b> (click to show)</summary>
-
 0) Disable telemetry as noted in the warning.
 
 Install required global dependencies:
@@ -92,7 +114,7 @@ Install required global dependencies:
 npm i -g cordova-res @angular/cli native-run
 ```
 
-Follow the [React Native demo](#demo) to ensure iOS and Android sims are ready.
+Follow the [React Native demo](/docs/demos/mobile/reactnative) to ensure iOS and Android sims are ready.
 
 
 1) Create a new project:
@@ -101,18 +123,36 @@ Follow the [React Native demo](#demo) to ensure iOS and Android sims are ready.
 npx @ionic/cli start SheetJSIonic blank --type angular --cordova --quiet --no-git --no-link --confirm
 ```
 
-If a prompt discusses Cordova and Capacitor, enter `Yes` to continue.
+If a prompt asks to confirm Cordova use, enter `Yes` to continue.
 
 If a prompt asks about creating an Ionic account, enter `N` to opt out.
 
 2) Set up Cordova:
 
 ```bash
+cd SheetJSIonic
 npx @ionic/cli cordova platform add ios --confirm
 npx @ionic/cli cordova plugin add cordova-plugin-file
 npm install --save @ionic-native/core @ionic-native/file @ionic/cordova-builders
 ```
 
+:::caution
+
+In some test runs, the `plugin add cordova-plugin-file` step reported an error:
+
+```
+CordovaError: Could not load API for ios project
+```
+
+This was resolved by removing and reinstalling the `ios` platform:
+
+```bash
+npx @ionic/cli cordova platform rm ios
+npx @ionic/cli cordova platform add ios --confirm
+```
+
+:::
+
 3) Install dependencies:
 
 ```bash
@@ -145,11 +185,25 @@ export class AppModule {}
 curl -o src/app/home/home.page.ts -L https://docs.sheetjs.com/ionic/home.page.ts
 ```
 
-6) Test the app:
+**iOS Testing**
 
 ```bash
 npx @ionic/cli cordova emulate ios
 ```
 
-</details>
+:::caution
 
+In some test runs, the `cordova build ios --emulator` step failed with error:
+
+```
+> cordova build ios --emulator
+Could not load API for ios project
+```
+
+This was resolved by forcefully installing `cordova-ios`:
+
+```bash
+npm i --save cordova-ios
+```
+
+:::

docz/static/ionic/home.page.ts

@@ -1,6 +1,6 @@
 /* sheetjs (C) 2013-present SheetJS -- https://sheetjs.com */
 /* vim: set ts=2: */
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { File } from '@ionic-native/file/ngx';
 import * as XLSX from 'xlsx';
 
@@ -41,10 +41,16 @@ type AOA = any[][];
 `
 })
 
-export class HomePage {
+export class HomePage implements OnInit {
   data: any[][] = [[1,2,3],[4,5,6]];
   constructor(public file: File) {}
 
+  async ngOnInit(): Promise<void> {
+    const res: Response = await fetch("https://sheetjs.com/pres.numbers");
+    const ab: ArrayBuffer = await res.arrayBuffer();
+    this.read(ab);
+  }
+
   read(ab: ArrayBuffer) {
     /* read workbook */
     const wb: XLSX.WorkBook = XLSX.read(new Uint8Array(ab), {type: 'array'});
@@ -91,7 +97,7 @@ export class HomePage {
       const ab: ArrayBuffer = await this.file.readAsArrayBuffer(url, 'SheetJSIonic.xlsx');
       this.read(ab);
     } catch(e) {
-      const m: string = e.message;
+      const m: string = (e as Error).message;
       alert(m.match(/It was determined/) ? 'Use File Input control' : `Error: ${m}`);
     }
   };
@@ -113,11 +119,11 @@ export class HomePage {
       await this.file.writeFile(url, filename, wbout, {replace: true});
       alert(`Wrote to SheetJSIonic.xlsx in ${url}`);
     } catch(e) {
-      if(e.message.match(/It was determined/)) {
+      if((e as Error).message.match(/It was determined/)) {
         /* in the browser, use writeFile */
         XLSX.writeFile(wb, filename);
       } else {
-        alert(`Error: ${e.message}`);
+        alert(`Error: ${(e as Error).message}`);
       }
     }
   };