Moderne Anwendungen werden vorzugsweise mit komponentenbasierten UI-Bibliotheken entwickelt. Angular und React sind derzeit besonders beliebt, aber auch der unscheinbare Browser mit seinen nativen APIs wird weiterhin gerne zur Anwendungsentwicklung genutzt. Webkomponenten gibt es seit 2011. Sie wurden damals eingeführt mit dem Ziel, einen komponentenbasierten Ansatz für die Webplattform zu schaffen.

Unter den verschiedenen Bibliotheken, die für die Entwicklung von Webkomponenten zur Verfügung stehen, sind insbesondere Polymer von Google, aber auch X-Tag und Bosonic erwähnenswert. Um die Möglichkeiten der Plattform aufzuzeigen, werde ich demonstrieren, wie man mithilfe der heute in Browsern verfügbaren APIs eine Webkomponente entwickeln kann. …

Es gibt viele Reibungspunkte, die sich auf die Benutzererfahrung bei der Anmeldung auswirken können, vor allem bei der Eingabe eines Codes für die Zwei-Faktor-Authentisierung. Unsere Aufgabe als Entwickler ist es, Anwendungen zu erstellen, die zwar die Kontosicherheit im Auge behalten, aber nicht die Benutzererfahrung beeinträchtigen. Manchmal erscheint es einem aber fast so, als ob sich diese beiden Anforderungen ausschließen.

In diesem Blog betrachten wir uns das bescheidene <input>-Element und die HTML-Attribute, die zu einer besseren Erfahrung unserer Benutzer bei der Zwei-Faktor-Authentisierung führen können.

Die Standarderfahrung

Wenn wir eine Zwei-Faktor-Authentisierung für eine Webanwendung implementieren, vielleicht sogar …

Throughout Asia The Apprentice has been back on TV screens, powered by Twilio as the official technology partner. The competition started with 16 candidates facing challenges, both business and physical, each week. The winner gets to work for a year as the apprentice of ONE Championship founder, chair and CEO Chatri Sityodtong.

While Twilio was being used to deliver messages to the candidates throughout the series and power a "Watch and Win" competition via Facebook Messenger bot, in episode 11 the final four candidates, Jessica, Louie, Irina, and Monica, came face-to-face with the Twilio APIs themselves as they were challenged to help non-profit organisations thrive with communication strategies that use Twilio's cloud communications platform. Let's take a look at what they built in the challenge and how they used Twilio to their advantage.

The challenge is set

Once the candidates had been given the challenge, they were …

Die meisten Smartphones sind mit einer Vorder- und Rückkamera ausgestattet. Wenn du eine Videoanwendung für Mobilgeräte erstellst, möchtest du möglicherweise zwischen ihnen wählen oder zwischen ihnen wechseln.

Wenn du eine Chat-App erstellst, möchtest du wahrscheinlich die Frontkamera, aber wenn du eine Kamera-App erstellst, interessierst du dich mehr für die Rückkamera. In diesem Beitrag erfährst du, wie du mit der mediaDevices-API und Medieneinschränkungen die Kamera wählst oder zwischen Kameras wechseln kannst.

Das brauchen wir

Um diesem Beitrag folgen zu können, benötigst du:

• ein iOS- oder Android-Gerät mit zwei Kameras zum Testen. Wenn du zwei Webcams hast, funktioniert dies …

Wir reden viel über das Senden von SMS-Nachrichten über Webanwendungen, aber wie sieht es aus, wenn wir SMS-Nachrichten über eine React-Anwendung senden möchten? Das ist zwar mit etwas mehr Aufwand verbunden, als sich nur um die serverseitige Version zu kümmern, wird aber auch nicht zu viel Zeit in Anspruch nehmen.

Warum eignet sich dazu nicht die Verwendung der REST-API auf Clientseite?

Eigentlich könnten wir eine SMS mit der Twilio-REST-API direkt über eine clientseitige JavaScript-Anwendung senden. Aber (und das ist ein großes Aber) wenn wir das tun, würden wir unsere Twilio-Anmeldeinformationen jedem Benutzer preisgeben, der unsere Seite …

Node.js-Anwendungen mit TypeScript zu schreiben, bedeutet, dass wir die Vorteile des Typsystems und der Tools von TypeScript nutzen können. In diesem Blog haben wir bereits erfahren, wie wir eine SMS-Nachricht mit Node.js senden. Hier sehen wir uns an, wie wir das mit TypeScript erledigen.

Das brauchen wir

Für dieses Tutorial benötigen wir Folgendes:

• Ein Twilio-Konto (wenn du noch keines hast, registriere dich hier für ein kostenloses Konto und du erhältst ein Guthaben von 10 $ bei einem Upgrade auf ein kostenpflichtiges Konto)
• Eine Twilio-Telefonnummer mit SMS-Nachrichtenfunktion
• Node.js

Sobald wir alle Voraussetzungen erfüllt haben, können …

Web Speech APIには、音声合成(テキスト読み上げ)と、音声認識(音声からテキストへの変換)という2つの機能があります。SpeechSynthesis APIを使用すると、ブラウザ上で音声を選択して任意のテキストを読み上げることができます。

アプリケーション内での音声アラートや、WebサイトでのAutopilot駆動のチャットボット利用など、Web Speech APIはWebインターフェースを強化する大きな可能性を秘めています。ここでは、Webアプリケーションでの音声読み上げの実行方法について説明します。

必要なもの

SpeechSynthesis APIについて学び、このアプリケーションを構築するには、次の準備が必要です。

• 最新のブラウザ(このAPIは、主なデスクトップブラウザとモバイルブラウザでサポートされています)
• テキストエディター

準備ができたら作業用のディレクトリを作成し、そのディレクトリにこのHTMLファイルとこのCSSファイルをダウンロードします。これらのファイルが同じフォルダにあり、CSSファイルの名前がstyle.cssであることを確認します。ブラウザでHTMLファイルを開くと、次の内容が表示されます。

では、このAPIを使用して、ブラウザでの読み上げを行いましょう。

Speech Synthesis API

この小さなアプリケーションでの作業を始める前に、ブラウザの開発ツールを使用して読み上げ …

Wir haben im Rahmen dieses Blogs bereits einen Videochat in React erstellt, aber mittlerweile wurden mit der Version 16.8 von React Hooks eingeführt. Mit Hooks können wir Zustands- oder andere React-Funktionen innerhalb von Funktionskomponenten nutzen, ohne dass wir eine Klasse schreiben müssen.

In diesem Post werden wir eine Videochat-Anwendung mit Twilio Video und React erstellen, die nur Funktionskomponenten enthält. Dazu nutzen wir die Hooks useState, useCallback, useEffect und useRef.

Das brauchen wir

Um diese Videochat-Anwendung zu erstellen, brauchen wir Folgendes:

• Node.js und npm
• Ein Twilio-Konto (Melde dich hier für ein kostenloses Twilio-Konto an.)

Sobald wir das …

The Apprentice is back on TV screens around Asia, and Twilio is the official technology partner. Throughout the series Twilio APIs have supported the show and candidates; delivering notification messages to the teams, powering their solutions in episode 11, and running a Watch & Win competition for the viewers.

The Watch & Win competition was implemented as a chatbot over Facebook Messenger. In this post we will look at how you can build your own competition bot using Twilio Autopilot, Twilio Functions and Airtable.

Defining the competition

To build a watch and win competition bot, we need a few parameters for how the bot will work:

• The competition will run every week that the show is broadcasting, with a new question per episode
• The question will include a phrase that was said during the week's episode and three options for who said it
• Viewers can enter …