Como utilizar TTS (Text To Speech) en IONIC

Como utilizar TTS (Text To Speech) en IONIC

Poderoso y sencillo tutorial para implementar TTS de Cordova en nuestros proyectos de IONIC. Link con el código fuente: https://gitlab.com/edisonjsapps/tts-i...

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Convert Speech to Text in Python using Google Speech

How to Convert Speech to Text in Python using Google Speech

In this Python tutorial I want to show you Python Speech Recognition, and how you can Convert Speech to Text in Python using Google Speech. Speech Recognition is a library for performing speech recognition, with support for several engines and APIs, online and offline. The Ultimate Guide To Speech Recognition With Python: How speech recognition works, What packages are available on PyPI, How to install and use the SpeechRecognition package—a full-featured and easy-to-use Python speech recognition library.

In this article i want to show you an example of Python With Google Speech, so Speech Recognition is a library for performing speech recognition, with support for several engines and APIs, online and offline.

Speech recognition engine/API support

So now for this first of all you need to install speechRecognition Library in Python ,

First, make sure you have all the requirements listed in the “Requirements” section.

The easiest way to install this is using pip install SpeechRecognition.

Otherwise, download the source distribution from PyPI, and extract the archive.

In the folder, run python setup.py install.

Requirements

  • Python 2.6, 2.7, or 3.3+ (required)
  • PyAudio 0.2.11+ (required only if you need to use microphone input, Microphone)
  • PocketSphinx (required only if you need to use the Sphinx recognizer, recognizer_instance.recognize_sphinx)
  • Google API Client Library for Python (required only if you need to use the Google Cloud Speech API, recognizer_instance.recognize_google_cloud)
  • FLAC encoder (required only if the system is not x86-based Windows/Linux/OS X)

So now this is the complete code for Python Speech Recognition With Google Speech

import speech_recognition as sr



def main():

    r = sr.Recognizer()

    with sr.Microphone() as source:
        r.adjust_for_ambient_noise(source)

        print("Please say something")

        audio = r.listen(source)

        print("Recognizing Now .... ")


        # recognize speech using google

        try:
            print("You have said \n" + r.recognize_google(audio))
            print("Audio Recorded Successfully \n ")


        except Exception as e:
            print("Error :  " + str(e))




        # write audio

        with open("recorded.wav", "wb") as f:
            f.write(audio.get_wav_data())


if __name__ == "__main__":
    main()

So at the top first we have created a recognizer object, also for removing noises we need to add this line of code

r.adjust_for_ambient_noise(source)

And in here we are recognizing the speech using Google Speech

print("You have said \n" + r.recognize_google(audio))

In here we are going to record the audio

        with open("recorded.wav", "wb") as f:
            f.write(audio.get_wav_data())

Now run the code and this will be the result

Comparison Between Ionic 4 Vs Ionic 3

Comparison Between Ionic 4 Vs Ionic 3

Ionic 3 vs ionic 4 By rebuilding all of our UI components on web components your codebase will be more stable since they are built on open web tech.As mentioned above, migrating from Ionic 3 to Ionic 4 does not mean rewriting your application as it did in the migration from Ionic 1 to Ionic 2

About Ionic 4

After more than a year of work, the Ionic Framework team has released version 4. The new version offers us significant changes in performance, compatibility with multiple frameworks (not only with Angular as previous versions), new documentation and many other improvements that we will analyze in this article.

Surely you will have many doubts?—?and perhaps fear?—?about this version change. But the good news is that despite the great improvements offered by Ionic 4, migrating from Ionic 3 to Ionic 4 is super simple!

In this article, I want to explain the comparison between Ionic 4 and Ionic 3, as well as the novelties and new concepts of this new version. Let’s see practical examples of how to use the new Ionic CLI, and the new Router. Then at the end, I will guide you on how to migrate your applications from Ionic 3 to Ionic 4.

Web Components

Ionic Framework 4 was completely rewritten to use the Web APIs and each component is packaged as a Web Component. This allows the framework to be projected into the future. To help create the Web Components, the team created a tool called Stencil.

What are Web Components?

Web components are a set of web APIs that allow you to create HTML tags that are reusable and encapsulated. One way to explain the Web Components is to imagine them as reusable user interface widgets that are created using open web technologies. They are part of the browser, and therefore do not need external libraries. With Web Components, you can create almost anything that can be done with HTML, CSS, and JavaScript. In this way, you can create a portable component that can be easily reused. Web components make the browser the one who does more work and in this way, they provide important improvements in the performance and load times of modern applications.

The Web Components are based on the following specifications:

  • Custom Elements: Defines the bases and the fundamentals to design and use new types of DOM elements.
  • Shadow DOM: Defines how to use encapsulated styles and code within a web component.
  • HTML imports: Basically defines how to include and reuse the HTML document in another HTML document.
  • HTML Template: Defines how to declare code fragments that will not be used while the page is loading but could be later instantiated at runtime.

Compatibility with other Frameworks

Since its inception, Ionic Framework was built using Angular. But now with the popularity and support of web components, this has changed.

One of the great changes of this new version of Ionic is that it is completely independent of the base framework (previously this place was occupied only by Angular).

Since the components of the Ionic Framework, such as , are now encapsulated as Web Components, it is no longer necessary to bind to a base framework. Web components work with any framework, in fact, if you prefer you can not use any Framework.

**What the Ionic Framework team intends with this change is that Ionic is a UI Framework that can work with whatever technology the programmers choose. **This opens the door to future applications that can be created in Vue or in React using the Ionic web components.

Ionic CLI on Ionic 4 The CLI 4.0 has been totally improved both in the features it offers and in its speed and ease of use.

In order to use it, we must have the latest version of the CLI in our development environment. We can install it by running the following command:

npm install -g ionic @ latest

To use the latest version of the CLI we must have installed node 8.9 or higher.
Once the new CLI is installed, we can now create our first application with ionic 4. Running the following command, the CLI will create a new application with the basic structure of Ionic 4:

ionic start appName blank --type = angular

appName is the name of your project

blank is the template that we choose to create the skeleton of the application

type = angular is the type of project

Then to test your application in the browser you can run the same command that we used before in Ionic version 3.

ionic serve

This is the structure of our new Ionic 4 application generated with the CLI:

With this new CLI, we have the possibility to use console commands to create new pages, components, directives, and services. Let’s see some examples:Create page :

ionic g page User

Create a new Service :

ionic g service Item

**These are just some of the new functionalities that the new CLI, explore the ****new Ionic documentation& features **for details.

Navigation on Ionic 4

There are great changes in the navigation and the Router, which in my opinion makes it much simpler and more understandable. Ionic 4 now uses the Angular Router.

Ionic 3 used navigation based on a simple stack where the new pages were placed on top of the stack doing push and when we wanted to navigate backward we simply made a pop of the last page.

Traditional websites use a linear history, which means that the user navigates to a page and can press the Back button to navigate.In Ionic Framework, applications can take this a step further by allowing parallel navigation. Which means that it is possible to have multiple navigation batteries and exchange them at any time. An example of this would be having navigation with tabs on one page and another with a side menu.

Something important to mention is that NavController and ion-nav in Ionic 4 have become obsolete.You can still use them, but only if your application does not use Lazy Loading.

Instead of ion-nav and NavController , Ionic 4 now uses @ angular / router.

As we already said, when creating an angular type application, Ionic 4 uses the navigation of Angular6. That is why when creating our ionic 4 application of angular type we are automatically created an app-routing.module.ts file located in src / app.

Let’s see what this file has and what are the differences with an application in Ionic 3.

In Ionic 4:

import {NgModule} from '@ angular / core';
 import {Routes, RouterModule} from '@ angular / router';
const routes: Routes = [ 
 	{path: '', redirectTo: 'home', pathMatch: 'full'},
 	{path: 'home', loadChildren: './pages/home/home.module#HomePageModule'},
  ] ;
  @NgModule ({ 
  imports: [RouterModule.forRoot (routes)],
  exports: [RouterModule]
  })
  export class AppRoutingModule {}

To navigate to the HomePage we must do the following:

import {Router} from '@ angular / router';
constructor (private router: Router) {}
	navigateToHome () { 
		this.router.navigate (['/ home']);
	}

In Ionic 3:

import {NavController} from 'ionic-angular';
import {HomePage} from './pages/home/home'
constructor (public navCtrl: NavController) {}
 navigateToHome () { 
 this.navCtrl.push (HomePage);
}

It is important to understand that in Ionic 4, navController is no longer used to navigate the application.

Example navigation on Ionic 4

Let’s take a step further and see how to pass information between two pages in Ionic 4.

// item is an object of the style: {title: "Some title",
 description: "Some description"}
 itemSelected (item) {
  this.router.navigate (["/ home", item]);
}

Then, to obtain the item object in our HomePage, we use the ActivatedRoute.

import {ActivatedRoute} from '@ angular / router';
export class HomePage implements OnInit {
item: any;
constructor (private route: ActivatedRoute) {}

ngOnInit () {
     this.route.params.subscribe (data => {
          this.item = data;
          
})     
} 
}

Life cycles of navigation (LifeCycles)

The lifecycles (known as lifecycles in English) that were used in Ionic 3 as for example ionWillLoad willno longer be used in Ionic 4. Now we will use the Angular life cycles such as ngOnInit and ngAfterViewInit .

If you have already programmed at Angular, this will sound familiar to you. If you want to learn more about Angular, I suggest you **read **this post .

Router Link

In Ionic 3 the event (click) is used to navigate between pages from the HTML. In Ionic 4 we will use the routerLink, as it is used in the Angular applications.

An example would be:

<ion-button [routerLink] = "['/ product / 123']"> Go to Product 123 </ ion-button>

Modules

It is important to mention that it is no longer necessary to import the pages and services in the app.module.ts file, which in my opinion makes the project much simpler and more organized.

For each page, there will be a module of that page. For example, if we want to use Reactive Forms on any page, we only import ReactiveFormsModule on the page or pages that will use it.

The code below is from the src / app / pages / new-item / new-item.module.ts of our example application in Ionic 4 that you can download for free.

import {NgModule} from ' @ angular / core ';
import {CommonModule} from ' @ angular / common ';
import {FormsModule, ReactiveFormsModule} from ' @ angular / forms ';
import {Routes, RouterModule} from ' @ angular / router ';
import {IonicModule} from ' @ ionic / angular ';
import {NewItemPage} from './new-item.page';
const routes: Routes = [
      {
  path: '',
       
component: NewItemPage      
}
]
 @NgModule ({
  imports: [
      CommonModule,
      FormsModule,
      ReactiveFormsModule,
      IonicModule,
      RouterModule.forChild (routes)
      ],
      declarations: [NewItemPage]
 })
 export class NewItemPageModule {}

How to migrate your application from Ionic 3 to Ionic 4?

You are probably wondering how to migrate an existing application from Ionic 3 to one from Ionic 4. The Ionic Framework team has written super detailed documentation with the steps for migration .

The truth is that the migration process is quite simple and personally has not generated any problems.
You can also use the migration linter which is a tool that automatically checks your code and tells you what changes you should make.

Conclusion on Ionic 3 vs ionic 4

In this article, we talk about the main differences between Ionic 4 and Ionic 3 as well as the new concepts proposed by Ionic Framework 4.0. It has built-in performance boosts, is easier to work with, and most importantly is “future proof.” By rebuilding all of our UI components on web components & your codebase will be more stable since they are built on open web tech.

Now, if your Ionic 3 app is nearly complete and/or is being built for a company/business, then perhaps it’s not the best time to update. I hope it has helped you to understand more about the new version of Ionic Framework and above all to calm fears about migration. As mentioned above, migrating from Ionic 3 to Ionic 4 does not mean rewriting your application (as it did in the migration from Ionic 1 to Ionic 2).

Further reading:

Free Ionic UI-UX Starter Mobile App Open Source - Download

Using NoSQL PouchDB and SQLite with Ionic 4 & Angular: A CRUD Example

Ionic 4 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js Server

How to use the Ionic 4 radio button and checkbox in Angular 8 FormArray

How to Create a CRUD To-do App Using Ionic 4

Adding one-to-one rooms to your Ionic 4 chat app

Build Android/iOS Mobile Apps with Capacitor, React.js and Ionic 4

How to Upgrade from Ionic 4 Apps to Ionic 5

How to Upgrade from Ionic 4 Apps to Ionic 5

In this Ionic 5 tutorial, we will show you an upgrade process of existing Ionic 4 and Ionic 5 with the latest Angular 8 update. We will add the new core update feature of Ionic 5 to the upgraded Ionic apps. While this tutorial was written, the Ionic 5 still in the RC version.

The comprehensive step by step upgrade process of the existing Ionic 4 and Ionic 5 with the latest Angular 8 update

In this tutorial, we will show you an upgrade process of existing Ionic 4 and Ionic 5 with the latest Angular 8 update. You will see what will change and what still use after the upgrade completes. Also, we will add the new core update feature of Ionic 5 to the upgraded Ionic apps. While this tutorial was written, the Ionic 5 still in the RC version.

Table of Contents:

  • Prepare the Ionic 4 app
  • Upgrade to Ionic 5
  • Check the Upgraded Ionic App
  • Add a New Core Ionic 5 Feature
  • Run and Test the Upgraded Ionic App

The following tools, frameworks, libraries, and modules are required for this tutorial:

  1. Node.js
  2. Ionic Framework
  3. Angular
  4. Existing Ionic 4
  5. Terminal or Node Command Line
  6. Text Editor or IDE

You can watch and follow the practical guide on our YouTube channel. Please like, share, comment and subscribe to our channel.

Prepare the Ionic 4 app

We will use the working apps that created from the last Ionic tutorial. Here are the steps to prepare the Ionic 4 app before upgrading to Ionic 5:

Step #1 Clone the existing Ionic 4 app.

git clone https://github.com/didinj/ionic-tutorial.git

*Step #2* Go to the newly cloned Ionic app.

cd ionic-tutorial

*Step #3* Install all require NPM and run every required NPM command.

npm i
npm fund
npm audit fix
npm audit fix --force

*Step #4* Run this Ionic app to check everything is working.

ionic serve -l

*Step #5* Add the platforms and run to the device after stop the running Ionic 4 lab by press CTRL + C.

ionic cordova platform add ios
ionic cordova platform add android

*Step #6* Run iOS and Android to device or emulator.

ionic cordova run ios
ionic cordova run android

Upgrade to Ionic 5

We will upgrade everything that related to Ionic 5 including updating the Ionic CLI and Angular. Follow these steps to upgrade to Ionic 5 and the latest stable Angular:

*Step #1* Update the Ionic CLI globally.

sudo npm i -g ionic

*Step #2* Update the @ionic/angular for this project.

npm i @ionic/angular

*Step #3* If required run this NPM command.

npm fund

*Step #4* Upgrade the Ionic 4 to Ionic 5.

npm install @ionic/[email protected]

*Step #5* Open this Ionic app using your IDE or text editor. To use VSCode type this.

code .
Check the Upgraded Ionic App

We need to check the upgraded Ionic app to make sure everything is working as expected. Follow these steps to checks:

*Step #1* Open the package.json with your IDE or Text Editor and see if there is the latest version of @ionic/angular.

  "dependencies": {
    ...
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0-rc.3",
    ...
  },

*Step #2* Run again the newly upgraded Ionic App.

ionic serve -l

*Step #3* It seems everything is working, except the list-icon disappears. That because the new Ionicons version deleted the list-box. So, we need to change that icon to this icon that renamed in the new Ionicons version by open and edit "src/app/tab1/tab1.page.html" then replace the list-box icon with this.

<ion-icon slot="icon-only" name="newspaper"></ion-icon>

*Step #4* Centering the header content using the new Ionic 5 CSS utilities. Add this CSS class to every tab page header and

<ion-header class="ion-text-center">
...
<ion-card [routerLink]="['/tabs/tab2/', p.id]" class="ion-text-center">

*Step #5* Give a padding to the content.

<img src="{{p.photo}}" class="ion-padding" />
<ion-card-header class="ion-padding">

*Step #6* Change the text in to wrapped text by in order to get the proper styling of the new design.

<ion-list-header>
    <ion-label>Premier League Legend</ion-label>
</ion-list-header> 
Add a New Core Ionic 5 Feature

One of the key improvements of Ionic 5 is Public Animations and Gesture API. Now, we will implement the Animation to the image in the detail tab. Do these steps to add the animation:

**Step #1**. Open and edit "src/app/tab2/tab2.page.ts" then add or modify these import.

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { AnimationController } from '@ionic/angular';

**Step #2**. Declare elements that will animate using @ViewChild.

@ViewChild('avatar', { read: ElementRef, static: true }) avatar: ElementRef;

**Step #3**. Inject the AnimationController to the constructor.

  constructor(
    public route: ActivatedRoute,
    public router: Router,
    public animationCtrl: AnimationController) {}

**Step #4**. Add this animation API to the NgOnInit function.

  ngOnInit() {
    ...
    const animatedAvatar = this.animationCtrl
      .create()
      .addElement(this.avatar.nativeElement)
      .duration(3000)
      .iterations(Infinity)
      .direction('alternate')
      .fromTo('transform', 'rotate(0deg)', 'rotate(360deg)');

    animatedAvatar.play();

  }

*Step #5* Open and edit "src/app/tab2/tab2.page.html" then replace the tag with this.

<img #avatar src="{{details.photo}}" class="ion-padding" />
Run and Test the Upgraded Ionic App

This new Ionic 5 apps now can test using browser by type this command.

ionic serve -l

You will see a rotating image on the details page. Next, run to the Android and iOS device or simulator.

ionic run android
ionic run ios

Here they are the final Ionic 5 apps on Android and iOS.


That it's, upgrade the existing Ionic 4 app to Ionic 5 and Add New Feature. You can get the full source code from our GitHub.

Thanks!