Some time ago I had the goal to implement a web application to be able to write what I’m speaking automatically and allow to execute actions through my voice commands. I thought it was a good idea to provide a way to listen to some feedback from the application too. After doing quick research I discovered a couple of Web APIs to solve this problem.

In this post, I will explain how you can use modern Web APIs to add the nice capability to speak to your web application and allow it to respond to you. We will implement the app from scratch.

What is an API?

API is the acronym for Application Programming Interface. According to MDN website:

APIs are constructs made available in programming languages to allow developers to create complex functionality more easily.

In simple words, APIs provide a way to create complex applications without having to learn or implement the details.

Let’s describe an example, you just bought a camera and you only need to press buttons to turn-on, turn-off, activate the Bluetooth, and start recording. As you can see, we’re talking about a device that has a complex circuit that involves sensors, lenses, power management, and other details. You don’t need to work through these wiring or manage the circuit itself.

Web APIs

Have you ever used fetch or a Service Worker? Maybe you used or accessed the DOM from JavaScript?

Well, you can accomplish complex tasks based on those features since they are part of an extensive list of Web APIs. These APIs are not part of JavaScript, however, you can use them through this programming language(or any other JavaScript-based library/framework).

On the other hand, you may need to make sure a Web API is fully supported by your web browser before to start building an application based on it. For example, if you are planning to work with fetch, you can see what browsers or JavaScript engines support it.

The Web Speech API

As you can see in the previous image, this Web API can help you with the following:

• Generate speech-to-text output
• Uses speech recognition as input
• Supports continuous dictation(You can write a complete letter)
• Control interface for web browsers

For more details, please see the Web Speech API specification.

The SpeechSynthesis Interface

You got the idea with the above image. The Web Speech Synthesis interface can generate a text-to-speech output.

Please refer to the specification to learn more about this interface.

Watch The Video

Implement the Web Application

The application will be based on HTML, CSS, and TypeScript as the programming language. We’ll use the latest Angular version through Angular Material components. Also, We will define a reactive programming approach using Observables and the AsyncPipe from Angular. Finally, we will provide a Strategy pattern implementation among other features.

Read the full story, try the live demo and access to the source code here: https://luixaviles.com/2020/07/build-your-first-voice-driven-web-app/

Originally published at https://luixaviles.com.

Más ligero, rápido, simple y compatible hacia atrás

La versión 9.0.0 de Angular finalmente ha visto la luz. Este lanzamiento se convierte en algo muy importante para el ecosistema Angular, ya que abarca toda la plataforma, incluyendo el framework, Angular Material y Angular CLI. Esta versión hace uso de Angular Ivy por defecto e introduce mecanismos mejorados para probar componentes.

El lanzamiento de esta nueva versión se convierte en una de las actualizaciones más importantes en los últimos 3 años.

¿Cómo Actualizar a la versión 9?

Para tener una mejor experiencia, se recomienda actualizar primero a Angular 8.

ng update @angular/cli@8 @angular/core@8

Luego, actualiza a la versión 9

ng update @angular/cli @angular/core

Visita update.angular.io para encontrar información detallada sobre el proceso de actualización.

Angular Ivy

La versión 9 mueve todas las aplicaciones para usar el motor de compilación-ejecución denominado “Ivy”. Este motor reemplaza el anteriormente conocido como “View Engine”.

Este cambio es transparente para los desarrolladores y además ofrece numerosas ventajas:

• Tamaños en los bundles más reducidos
• Pruebas más rápidas
• Mejor mecanismo de depuración(debugging)
• Un mejorado binding CSS por class y style
• Validación de tipos mejorada
• Errores en compilación mejorados
• Tiempos de compilación mejorados, que habilitan AOT(Ahead of Time) por defecto
• Internacionalización mejorada

Otras mejoras en la versión 9

El equipo Angular también ha estado trabajando para mejorar la experiencia completa de desarrollo.

Actualizaciones más confiables

Se han realizado cambios en el funcionamiento deng update para que sea más confiable e informativo.

• Usa siempre la última versión de CLI. Empezando con la versión 8.3.19 de Angular CLI, ahora usa el CLI de la versión de actualización TARGET durante el proceso de actualización. Esto significa que las actualizaciones serán manejadas por la última versión de CLI automáticamente.
• Progreso de actualización más claro. ng update ahora hace más para decirte lo que sucede en el fondo.
• Depuración de actualizaciones más simple. De forma predeterminada, ng update ejecuta todas las migraciones y deja los cambios adicionales visibles en disco, para que puedas revisarlos. Con la versión 9 también se introduce el parámetro --create-commits . Cuando ejecutas ng update --create-commits , la herramienta confirma el estado del código después de cada migración, para que se pueda entender o depurar cada uno de los cambios que se están produciendo en tu código.

Nuevas opciones para 'providedIn'

Cuando creas un servicio como @Injectable en Angular, se debe elegir dónde agregar al inyector. Además de las opciones actuales root y módulo, se tienen las siguientes:

• platform — Especificando provideIn: 'platform' hace que el servicio esté disponible en un inyector de plataforma singleton, el cual es compartido por todas las aplicaciones en la página.
• any — Provee una instancia única en cada módulo(incluyendo en módulos diferidos, lazy modules) que inyectan el token.

Vea más información sobre provideIn en la documentación oficial.

Nuevos componentes

Ahora se pueden agregar el soporte de YouTube y Google Maps en tus aplicaciones.

Componente YouTube

Ahora es posible renderizar un reproductor de YouTube en línea dentro de tu aplicación con el nuevo youtube-player.

Para agregar este componente, debes instalarlo:

npm install @angular/youtube-player

Este componente provee un componente wrapper que simplifica el uso de YouTube player API.

Componente Google Maps

También se presentan componentes google-maps, los cuales tienen por objeto facilitar la renderización de mapas, marcadores, y conectar la interactividad como si fuera un componente Angular convencional, lo cual evita tener que aprender el API de Google Maps.

Este nuevo componente implementa el denominado Maps JavaScript API

Para agregar este soporte, debes instalar:

npm install @angular/google-maps

De esta forma, podremos renderizar un mapa con unas cuantas líneas de código

IDE y mejoras con language service

Se han realizado mejoras significativas en la extensión Angular language service(disponible en el Visual Studio Marketplace). Junto con una importante revisión de arquitectura para abordar problemas de rendimiento y estabilidad, también se han solucionado errores.

Soporte de TypeScript 3.7

Angular se ha actualizado para que use TypeScript 3.6 y 3.7, incluyendo el extremadamente popular optional chaining de TypeScript 3.7

let x = foo?.bar.baz();

Que llega a ser una versión más legible y simplificada del siguiente código:

let x = (foo === null || foo === undefined) ? undefined :     foo.bar.baz();

También se han actualizado las versiones para otras dependencias del ecosistema, como Zone.JS y RxJS.

Agradecimientos

El lanzamiento de la versión estable de Angular 9 supone la culminación exitosa demás de 2 años de trabajo. Las posibilidades que ofrecen estos cambios llenan de entusiasmo a la comunidad y no habría sido posible sin el aporte de cientos de personas que forman parte de la misma, además de un equipo increíble que lidera el rumbo de nuestro framework favorito.

Para conocer más sobre el lanzamiento de esta nueva versión, puedes visitar la historia el blog oficial de Angular.

Nota. Este post es una traducción parcial del post “https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3” escrito por Stephen Fluin, miembro del Equipo Angular.
Si te gustaron las novedades en torno a Angular 9, conoce al equipo que contribuye con su desarrollo y síguelos en sus redes.

Si te gustó el post, compártelo con tus amigos y dale un aplauso 👏🏼

Puedes seguirme en Twitter y GitHub para conocer más de mi trabajo.

¡Gracias por leer!
 — Luis Aviles

Some time ago I implemented a simple chat application using TypeScript language only. The main goal was to write a demo to explain how you can use this programming language on the client side and on the server. The client app is using latest Angular features.

In this post I will show you how I implemented the app from scratch.

What is a Real Time Application?

According this Wikipedia definition, a real-time application allows information to be received as soon as it is published, rather than requiring a source to be checked periodically for updates. Therefore, this kind of app should give a feeling to users that events and actions happen immediately.

WebSockets

WebSockets is a protocol that provides a bi-directional communication channel. This means that a browser and web server can maintain real-time comms, sending messages back and forth while the connection is open.

Application Structure

We will separate server related code and client code. I will go into details when most important files will are explained. For now, this is the expected structure of our application:

server/
|- src/
|- package.json
|- tsconfig.json
|- gulpfile.js

client/
|- src/
|- package.json
|- tsconfig.json
|- .angular-cli.json

Server Code

Since WebSockets is a specification, we can find several implementations about it. We can choose J̶a̶v̶a̶S̶c̶r̶i̶p̶t̶ TypeScript or any other programming language.

In this case we’ll use Socket.IO, which is one of the fastest and most reliable real-time engines.

Why use TypeScript on server side code?

TypeScript comes with really cool features and it is updated very often. It can prevent about 15% of bugs. Do you need more reasons? 😄

Initializing server application

Create a package.json file and then install the following dependencies:

npm install --save express socket.io @types/express @types/socket.io

We’ll need to install some devDependencies to allow integrate gulp and typescript so that we can define build tasks easily with these tools later:

npm install --save-dev typescript gulp gulp-typescript

TypeScript Compiler Configuration

Create a tsconfig.json file with the following content:

Data Model definition

Taking advantage of static typing, let’s define a small data model as follows:

..let’s see further details into our server/src directory:

server/
|- src/
   |- model/
      |- message.model.ts
      |- user.model.ts
   |- index.ts
   |- server.ts
|- package.json
|- tsconfig.json
|- gulpfile.js

Chat Server Implementation

The main files in server directory are index.ts and chat-server.ts. The first one allows us to create and export our ChatServer app, while the last one contains express and socket.IO configurations:

Server Classes

The previous code will give a result of the following classes and relationships:

Build and Run the Server

In order to have JavaScript files needed by the V8 engine of Node.js, we can add a build task into our gulpfile.js file:

As you can see, the output of build process(JavaScript files) will be located indist directory. To perform this action, you’ll need to run:

gulp build

Now we can run node dist/index.js command to have the server running.

Client Code

Let’s generate our client directory using the latest Angular CLI version:

ng new typescript-chat-client --routing --prefix tcc --skip-install

Then install your dependencies running npm install(I prefer to use Yarn for this step):

cd typescript-chat-client
yarn install

Adding Angular Material

Find and follow the latest guide to install Angular Material inside your Angular CLI project.

As part of using best practices in our project structure, we can create shared and materialmodules:

client/
|- src/
   |- app/
      |- chat/
      |- shared/
         |- material/
            |- material.module.ts
         |- shared.module.ts
      |-app.module.ts

We can do that from the command line interface:

ng generate module shared --module app
ng generate module shared/material --module shared

Check the changes inside app.module.ts and shared.module.ts to see the relationships created between these modules.

Adding express and socket.IO

We’ll need to add express and socket.io modules into our client App:

npm install express socket.io --save

Chat Modules and Components

Let’s create a new module before starting to create components for our chat application:

ng generate module chat --module app

Now add a component into newest module:

ng generate component chat --module chat

In order to use web-sockets and custom models, let’s create another shared folder. This time inside chat directory:

ng generate service chat/shared/services/socket --module chat
ng generate class chat/shared/model/user
ng generate class chat/shared/model/message

We’ll be ending with a structure similar to:

client/
|- src/
   |- app/
      |- chat/
         |- shared/
           |- model/
              |- user.ts
              |- message.ts
           |- services/
              |- socket.service.ts
      |- shared/
      |-app.module.ts

Observables and Web Sockets

Since our Angular app comes with RxJS, we can use Observables to catch Socket.IO events:

We’ll need to define some enums to manage Actions and Events in the App:

Now we’re ready to listen to messages from the server:

Once ChatComponent gets initialized, the component is going to subscribe to SocketService observables in order to start to receive connection events or incoming messages.

The sendMessage and sendNotification functions are going to send the respective content through the same service. Notifications sent at this time are Rename User and User Joined.

Chat Application features

• Angular CLI
• Angular 5
• Angular Material
• Validation Forms

Source Code

Find the complete project in this GitHub repository:

github.com/luixaviles/socket-io-typescript-chat

Live Demo

Go through to typescript-chat.firebaseapp.com and open two or more tabs in your favorite browser and start a conversation.

If you liked this post, be sure to share it with your friends or give it a clap. 👏

You can follow me on Twitter and GitHub to see more about my work.

Thank you for reading!
— Luis Aviles

Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular was originally published in DailyJS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Getting Ready to start with Angular

Angular is definitely in a great stage and every new version comes with awesome features. The project itself comes with great tools that will allow you to start to develop web applications from scratch.

A common question, from the people that I know, is about the tools they need in their environments before starting to develop with the framework, and that’s why I decided to write this post.

From my point of view, you’ll need to install the following tools in your local environment.

Git

According Understanding Git:

The purpose of Git is to manage a project, or a set of files, as they change over time. Git stores this information in a data structure called a repository.

Find and download latest version of this version control system here.

NVM(Node Version Manager)

A recommendation is to use the latest LTS version, especially in production environments. However, instead of having Node installed directly on your system, I suggest to install it through NVM.

• macOS or GNU/Linux users, take a look here.
• Windows users, take a look here.

NVM is a great tool that will allow you to manage multiple Node versions in your local environment. You can move forward with it even for Node projects.

Once you have installed NVM, you should be able to see its version using following command:

nvm --version

If the command result shows any error message, please take a look on registered GitHub issues for your NVM choice.

If you still have problems running nvm in your environment, you can move forward and download Node installer and continue with next steps.

Installing Node, using NVM

macOS and GNU/Linux users

Just type the following commands:

nvm install --lts 
nvm use --lts 
node --version

Windows users

You’ll have to take a look on the Node.js website to know the version number of latest LTS. After that, you can install it using the following command:

nvm install 10.15.0 
nvm use 10.15.0
node --version

Yarn

Yarn defines itself as a fast, reliable and secure dependency management tool(and I believe them). That’s why I prefer to use this awesome tool to manage node modules into Angular projects.

Your can find the steps to install Yarn on your platform here.

If you have any problem with the installation process you can try to move on with this command:

npm install -g yarn

Whatever method you used to install Yarn, you should be able to verify it by doing:

yarn --version

Visual Studio Code

According to the Visual Studio Code website, it combines the simplicity of a source code editor with a powerful developer tooling, like IntelliSense code completion and debugging.

It is available for macOS, Linux, and Windows. Aditionally, it’s a very active Open Source project. I highly recommend it to work with any Angular, Node or TypeScript project.

You can find the installer here.

HTTP Server

This is a command-line http server, which allows you to serving up static files in a simple way. You can use it for testing purposes and local development. Http server can be installed doing:

npm install -g http-server

Take a look on the GitHub repository to learn more about this powerful tool.

If you liked this post, be sure to share it with your friends or give it a clap.

You can follow me on Twitter and GitHub to see more about my work.

Thank you for reading!
 — Luis Aviles