在技术和软件开发之外,我过去五年的热情一直是学习法语。在我的语言之旅中,我使用了许多不同的工具。从 Rosetta Stone 到 Duolingo,然后再到 Memrise。每个工具都是我流利之路上的又一步。

但是,这些工具中的每一个都只真正帮助我提高了我的词汇量和记忆力。两者对于学习一门语言都至关重要。但随着我的进步和在家说更多的法语,我了解到这些工具并没有专注于我需要的东西。

随着我法语的进步,我发现我需要练习的是动词变位。学习不同的动词并记住时态结构。 Duolingo 和 Memrise 等工具主要关注词汇。他们很少花时间在何时使用动词的每个时态或该时态的结构上。

因此,作为开发人员,我决定制作一个工具来帮助我处理各种时态的动词变位。如果您想跳转并查看该应用程序,可以查看my french verb conjugator。

结合两种激情

[](https://res.cloudinary.com/practicaldev/image/fetch/s--QSXVg-Sf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/i/4p19dma3vfpx03iabzty.jpg)

当您有很多热情并且他们可以集中在一个项目上时,这总是很有趣。学习法语是我最大的非技术爱好。教人们如何利用 Amazon Web Services 在 AWS 中构建有趣的想法是我最大的技术热情。

所以我很自然地在 AWS 内构建了French Verb Practice完全无服务器。

对于这个项目,我想通过它的步伐AWS Amplify。为什么?你可能会问。答案很简单,Amplify 是我想熟悉的 AWS 生态系统中的一个框架。我相信学习 AWS 的最佳方法之一就是卷起袖子开始用它构建一些东西。事实上,我创建了一个完整的学习 AWS 课程正是这样做的。

也就是说,这篇文章不会介绍我如何使用 AWS Amplify 创建整个项目。还有许多其他帖子介绍了 Amplify 的入门。但是,我将谈谈 Amplify 背后的基本概念。但我想专注于我如何使用它向我的语言学习应用程序添加两个关键功能,语言翻译和文本到语音。

法语动词练习介绍

法语动词练习的核心概念是提供一个练习法语动词各种变位的场所。因此,整个 React 应用程序中只有两个组件。有Start组件,这是您在上面看到的登录页面。然后是Verb组件,您可以在其中实际练习共轭,见下文。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--e2XDOl8b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/ofvfsw079tvh5skyil7p.png)

这个想法是用户来到这里,他们看到动词 expprimer 并且他们需要以 first person present 时态共轭它。解决后,他们在输入中输入 expprime 并得到正确答案。

但作为一个语言学习者,我总是喜欢看动词的翻译,也喜欢听它说话。这就是 AWS Amplify 的强大功能和简单性的亮点所在。

利用 AWS Amplify

我不会涵盖如何设置 AWS Amplify 的所有内容。但是,基本概念是 Amplify 为您提供了一个用于部署和管理 AWS 资源的界面。它消除了了解底层服务所有细节的需要。

例如,当我想将 GraphQL API 添加到我的项目时,只需在命令行上执行几个简单的步骤。

$ amplify api add
? Please select from one of the below mentioned services: GraphQL
? Provide API name: kyle
? Choose the default authorization type for the API API key
? Enter a description for the API key: 
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? No
? Provide a custom type name MyType
Creating a base schema for you...

The following types do not have '@auth' enabled. Consider using @auth with @model
     - MyType
Learn more about @auth here: https://aws-amplify.github.io/docs/cli-toolchain/graphql#auth 


GraphQL schema compiled successfully.

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

进入全屏模式 退出全屏模式

通过一个命令行调用amplify api add和一个部署amplify push,我在我的 AWS 账户中预置了一个 GraphQL API。在幕后它使用 AWS AppSync 和 DynamoDB,但您实际上并不需要知道这一事实。您可以开始实现您的 GraphQL API 和应用程序。

这就是我眼中 AWS Amplify 的力量。它通过提供高质量的工具降低进入 AWS 的门槛,让您可以专注于构建应用程序而无需考虑底层服务。

目前法语动词练习中内置的每个后端功能都在利用 AWS Amplify。存储由 DynamoDB 提供支持。 API 是使用 AWS AppSync 的 GraphQL。身份验证由 Cognito 处理。

使用 AWS Amplify 添加语言翻译

如果您还记得之前的屏幕截图,用户会在法语版本下方看到英文翻译。这个小功能也由 AWS Amplify 提供支持!

这来自 Amplify 提供的predictions类别。您可以通过以下步骤将该类别添加到您自己的应用程序中:

$ amplify predictions add
? Please select from one of the categories below Convert
? What would you like to convert? Translate text into a different language
? Provide a friendly name for your resource translateTexta54aee3f
? What is the source language? French
? What is the target language? English
? Who should have access? Auth and Guest users
Successfully added resource translateTexta54aee3f locally

进入全屏模式 退出全屏模式

上述步骤告诉 Amplify 在后台预置 AWS 服务,以支持在我们的应用程序中将法语文本转换为英语。

现在我们如何将我的Verb组件中的文本实际转换为英文?这比您想象的要容易得多。

import Predictions, { AmazonAIPredictionsProvider } from "@aws-amplify/predictions";

Amplify.addPluggable(new AmazonAIPredictionsProvider());
Amplify.configure(awsmobile);

function Verb(props: any) {
  const loadTranslation = async (infinitiveVerb: string) => {
    let result = await Predictions.convert({
      translateText: {
        source: {
          text: infinitiveVerb
        }
      }
    });

    setTranslation(result.text);
  };
}

进入全屏模式 退出全屏模式

💥 不到十行代码,这个函数就能把法语infinitiveVerb翻译成英语。它通过利用@aws-amplify/predictions包提供的AmazonAIPredictionsProvider来实现。一旦我们配置了提供者,我们所要做的就是使用适当的参数调用Predictions.convert🎉

但是等等,用户可以听到法语动词的功能呢?这也由 AWS Amplify 处理。

使用 AWS Amplify 在语音中添加文本

与我们上面为翻译文本所做的类似,我们需要为文本到语音添加预测。

$ amplify predictions add
? Please select from one of the categories below Convert
? What would you like to convert? Generate speech audio from text
? Provide a friendly name for your resource speechGenerator7f0c7e00
? What is the source language? French
? Select a speaker Mathieu - Male
? Who should have access? Auth and Guest users
Successfully added resource speechGenerator7f0c7e00 locally

进入全屏模式 退出全屏模式

注意,这次我们选择了问题二中的Generate speech audio from text。然后我们可以配置源语言,甚至我们想要的声音。

要将文本到语音功能添加到法语动词练习中,我们可以从另一个名为playTextInFrench的函数上方附加到我们的代码中。

import Predictions, { AmazonAIPredictionsProvider } from "@aws-amplify/predictions";

Amplify.addPluggable(new AmazonAIPredictionsProvider());
Amplify.configure(awsmobile);

function Verb(props: any) {
  const loadTranslation = async (infinitiveVerb: string) => {
    let result = await Predictions.convert({
      translateText: {
        source: {
          text: infinitiveVerb
        }
      }
    });

    setTranslation(result.text);
  };

  const playTextInFrench = async () => {
    let result = await Predictions.convert({
      textToSpeech: {
        source: {
          text: (verb as VerbForm).infinitive
        }
      }
    });

    var audio = new Audio();
    audio.src = result.speech.url;
    audio.play();
  };
}

进入全屏模式 退出全屏模式

🇫🇷 现在我们可以听到法语动词的发音了!在playTextInFrench中,我们使用相同的Predictions提供程序和convert函数。只有这一次我们通过设置textToSpeech属性来指定我们想要将文本转换为音频。我们得到的是语音的 url,然后我们可以通过浏览器Audio对象播放它。

就像有两个函数和不到 20 行代码一样,我们有文本翻译和文本到语音。这显示了 AWS Amplify 提供的工具的强大功能。我们不需要知道正在利用哪些 AWS 服务来执行此操作,我们可以专注于构建我们的应用程序。

结论

随着 Amazon Web Services 的不断增长,对可靠工具的需求仍然至关重要。出色的工具可以带来更好、更简单的平台利用方式。那些 AWS 专家可能不需要像 Amplify 提供的接口。没关系,使用适合您的。

根据我自己的经验,我可以看到精通 AWS 的人超越了 Amplify 之类的工具。通常,一旦您的应用程序构建并运行,您就希望针对您的用例对其进行优化。这就是了解底层服务是什么以及如何利用它们很重要的地方。

但是,如果您刚刚开始涉足 AWS 并希望继续专注于构建您的应用程序,那么 Amplify 是一件很难拒绝的事情。它可能并不完美。但它会让你在构建应用程序时做最重要的事情,构建功能。