aws-amplify · rachelnabors · Oct 21, 2022 · Oct 8, 2022 · Oct 20, 2022 · Oct 20, 2022
@@ -86,7 +86,6 @@
  "amplifyconfiguration",
  "AmplifyEventBus",
  "amplifyframework",
- "AmplifyIonicModule",
  "amplifyjsapp",
  "amplifyMeta.json",
  "AmplifyModules",
@@ -713,7 +712,6 @@
  "Intelli",
  "interceptApplication",
  "Inventorys",
- "Ionicons",
  "IOPS",
  "ios",
  "IoT",

@@ -34,9 +34,6 @@ function generatePathMap(
  '/start/q/integration/react-native': {
  page: '/start/q/integration/[integration]'
  },
- '/start/q/integration/ionic': {
- page: '/start/q/integration/[integration]'
- },
  '/start/q/integration/ios': {
  page: '/start/q/integration/[integration]'
  },
@@ -70,9 +67,6 @@ function generatePathMap(
  '/ui/q/framework/vue': {
  page: '/ui/q/framework/[framework]'
  },
- '/ui/q/framework/ionic': {
- page: '/ui/q/framework/[framework]'
- },
  '/ui/q/framework/flutter': {
  page: '/ui/q/framework/[framework]'
  },
@@ -91,9 +85,6 @@ function generatePathMap(
  '/ui-legacy/q/framework/vue': {
  page: '/ui-legacy/q/framework/[framework]'
  },
- '/ui-legacy/q/framework/ionic': {
- page: '/ui-legacy/q/framework/[framework]'
- },
  '/ui-legacy/q/framework/next': {
  page: '/ui-legacy/q/framework/[framework]'
  },
@@ -210,7 +201,6 @@ function generatePathMap(
  'react-native',
  'angular',
  'vue',
- 'ionic',
  'next'
  ];
  }

@@ -79,11 +79,6 @@ export const VUE = {
  alt: "Vue Icon",
 };
 
-export const IONIC = {
- src: "/assets/integrations/ionic.svg",
- alt: "Ionic Icon",
-};
-
 export const NEXT = {
  src: "/assets/integrations/next.svg",
  alt: "Next.js Icon",

@@ -2079,7 +2079,6 @@ const directory = {
  'next',
  'android',
  'ios',
- 'ionic',
  'flutter'
  ],
  items: []
@@ -2099,7 +2098,6 @@ const directory = {
  'next',
  'android',
  'ios',
- 'ionic',
  'flutter'
  ]
  },
@@ -2115,7 +2113,6 @@ const directory = {
  'next',
  'android',
  'ios',
- 'ionic',
  'flutter'
  ]
  },
@@ -2137,17 +2134,17 @@ const directory = {
  {
  title: 'Connect API and database to the app',
  route: '/start/getting-started/data-model',
- filters: ['js', 'react', 'angular', 'vue', 'next', 'ionic']
+ filters: ['js', 'react', 'angular', 'vue', 'next']
  },
  {
  title: 'Add authentication',
  route: '/start/getting-started/auth',
- filters: ['react', 'angular', 'vue', 'ionic']
+ filters: ['react', 'angular', 'vue']
  },
  {
  title: 'Deploy and host app',
  route: '/start/getting-started/hosting',
- filters: ['js', 'react', 'angular', 'vue', 'next', 'ionic']
+ filters: ['js', 'react', 'angular', 'vue', 'next']
  },
  {
  title: 'Next steps',
@@ -2161,7 +2158,6 @@ const directory = {
  'next',
  'android',
  'ios',
- 'ionic',
  'flutter'
  ]
  }

@@ -5,8 +5,8 @@ In this example we will be deploying a __React__ app, but you can also also use
 1. Static HTML
 2. Vue
 3. Angular
-4. Ionic
-5. Gatsby
+4. Solid
+5. Svelte
 
 ## 1. Create a new application
 

@@ -5,8 +5,8 @@ In this example you will be deploying a React app, but you can also also use any
 1. Static HTML
 2. Vue
 3. Angular
-4. Ionic
-5. Gatsby
+4. Solid
+5. Svelte
 
 ## 1. Create a new web app and change into the directory
 

@@ -65,7 +65,7 @@ npm install aws-amplify
 
 > **Note:** Make sure that version `4.3.0` or above is installed.
 
-Import and load the configuration file generated in previous step using Amplify CLI in your app. It’s recommended you add the Amplify configuration step to your app’s root entry point. For example `src/index.js` in a `create-react-app` generated React application or `main.ts` in Angular or Ionic.
+Import and load the configuration file generated in previous step using Amplify CLI in your app. It’s recommended you add the Amplify configuration step to your app’s root entry point. For example `src/index.js` in a `create-react-app` generated React application or `main.ts` in Angular.
 
 ```javascript
 import { Amplify } from 'aws-amplify';

@@ -1,6 +1,6 @@
 ## Amplify JavaScript
 
-The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, Ionic, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
+The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
 
 What's next? Here are some things you can add to your app:
 

@@ -22,7 +22,7 @@ A configuration file called `aws-exports.js` will be copied to your configured s
 
 ## Configure the frontend
 
-Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular or Ionic.
+Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular.
 
 ```javascript
 import { Amplify } from 'aws-amplify';

@@ -460,170 +460,4 @@ function App() {
 export default App;
 ```
 
-Now run `yarn start` and press the buttons to demo the app.
-
-## Sample Ionic app
-
-First, be sure you have the latest Ionic CLI installed, then generate a new app (for this example you can use any template, but it's simplest to start with the Blank template to start):
-
-```bash
-npm i -g ionic
-ionic start predictions blank # the first argument is your project name, the second the template
-```
-
-Update the `src/polyfills.ts` and add to the top of the file `(window as any).global = window;`. Then, update the `src/tsconfig.app.json` file and add the "node" types:
-
-```
-{
- "extends": "../tsconfig.json",
- "compilerOptions": {
- "outDir": "../out-tsc/app",
- "types": ["node"]
- },
- "exclude": [
- "test.ts",
- "**/*.spec.ts"
- ]
-}
-
-```
-
-`src/app/home/home.page.ts`
-
-```javascript
-import { Component } from '@angular/core';
-import Predictions from '@aws-amplify/predictions';
-import { TextToSpeechOutput } from '@aws-amplify/predictions/lib-v1/types';
-
-@Component({
- selector: 'app-home',
- templateUrl: 'home.page.html',
- styleUrls: ['home.page.scss'],
-})
-export class HomePage {
-
- public textToTranslate = "Hello Amplify";
- public translateResult = "";
- public srcLang = "en";
- public targetLang = "de";
- public voiceId = "Salli";
- public speechUrl:string;
- public speakResult:boolean;
-
- constructor() {}
-
- public async translate() {
- const result = await Predictions.convert({
- translateText: {
- source: {
- text: this.textToTranslate,
- language : this.srcLang
- },
- targetLanguage: this.targetLang
- }
- });
- this.translateResult = result.text || "Error";
- if (this.speakResult) {
- this.generateSpeech(result.text);
- }
- }
-
- public async generateSpeech(textToGenerateSpeech: string) {
- const result:TextToSpeechOutput = await Predictions.convert({
- textToSpeech: {
- source: {
- text: textToGenerateSpeech,
- },
- voiceId: this.voiceId
- }
- });
- const audioCtx = new ((window as any).AudioContext || (window as any).webkitAudioContext)();
- const source = audioCtx.createBufferSource();
- audioCtx.decodeAudioData(result.audioStream, (buffer) => {
- source.buffer = buffer;
- source.connect(audioCtx.destination);
- source.start(audioCtx.currentTime);
- }, (err) => console.log({err}));
- }
-
- public selectSource(value: string) {
- this.srcLang = value;
- }
-
- public selectTarget(value: string) {
- this.targetLang = value;
- }
-
-}
-
-```
-
-#### `src/app/home/home.page.html`
-
-```html
-<ion-header>
- <ion-toolbar>
- <ion-title>
- Amplify Predictions
- </ion-title>
- </ion-toolbar>
-</ion-header>
-
-<ion-content>
- <ion-card class="welcome-card">
- <ion-card-header>
- <ion-card-title>Convert</ion-card-title>
- <ion-card-subtitle>Translate languages</ion-card-subtitle>
- </ion-card-header>
- <ion-card-content>
-
- <ion-list> 
- <ion-item>
- <ion-label>Source Language</ion-label>
- <ion-select #srcLang placeholder="Source Language" (ionChange)="selectSource(srcLang.value)">
- <ion-select-option value="en" selected>English</ion-select-option>
- <ion-select-option value="es">Spanish</ion-select-option>
- <ion-select-option value="de">German</ion-select-option>
- <ion-select-option value="no">Norwegian</ion-select-option>
- </ion-select>
- </ion-item>
-
- <ion-item>
- <ion-label>Target Language</ion-label>
- <ion-select #targetLang placeholder="Target Language" (ionChange)="selectTarget(targetLang.value)">
- <ion-select-option value="en">English</ion-select-option>
- <ion-select-option value="es">Spanish</ion-select-option>
- <ion-select-option value="de" selected>German</ion-select-option>
- <ion-select-option value="no">Norwegian</ion-select-option>
- </ion-select>
- </ion-item> 
- </ion-list>
-
- <ion-grid>
- <ion-row>
- <ion-col align-self-center>
- <textarea placeholder="Text to translate" [(ngModel)]="textToTranslate" rows="5" cols="30"></textarea>
- </ion-col>
- </ion-row>
- <ion-row>
- <ion-col size="6">
- <ion-button (click)="translate()" [disabled]="!textToTranslate">Translate</ion-button>
- </ion-col>
- <ion-col size="6" align-self-center>
- <ion-checkbox color="primary" [(ngModel)]="speakResult"></ion-checkbox> &nbsp;
- <ion-label>Speak Result</ion-label>
- </ion-col>
- </ion-row>
- <ion-row>
- <ion-col align-self-center>
- <textarea placeholder="Translation will display here" [value]="translateResult" rows="5" cols="30"></textarea>
- </ion-col>
- </ion-row>
- </ion-grid>
-
- </ion-card-content>
- </ion-card>
-
-</ion-content>
-
-```
+Now run `yarn start` and press the buttons to demo the app.
@@ -65,7 +65,7 @@ npm install aws-amplify
 
 > **Note:** Make sure that version `4.3.0` or above is installed.
 
-Import and load the configuration file generated in previous step using Amplify CLI in your app. It’s recommended you add the Amplify configuration step to your app’s root entry point. For example `src/index.js` in a `create-react-app` generated React application or `main.ts` in Angular or Ionic.
+Import and load the configuration file generated in previous step using Amplify CLI in your app. It’s recommended you add the Amplify configuration step to your app’s root entry point. For example `src/index.js` in a `create-react-app` generated React application or `main.ts` in Angular.
 
 ```javascript
 import { Amplify } from 'aws-amplify';

@@ -1,6 +1,6 @@
 ## Amplify JavaScript
 
-The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, Ionic, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
+The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, Solid, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript.
 
 What's next? Here are some things you can add to your app:
 

@@ -22,7 +22,7 @@ A configuration file called `aws-exports.js` will be copied to your configured s
 
 ## Configure the frontend
 
-Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular or Ionic.
+Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular.
 
 ```javascript
 import { Amplify } from 'aws-amplify';