我們聽到開發人員一次又一次地表達同樣的痛點：很難將應用程式的前端與後端集成，您需要在日常工作負載中解決不斷擴大的技術範圍，並且很難駕馭廣泛的雲端產品。雖然後端即服務產品提供了一個簡單的入口，但它們通常要求開發人員隨著公司規模的擴大而遷移。這就是我們從頭開始重建AWS Amplify 的原因，以直接解決前端開發人員每天在工作中面臨的這些挑戰。
我們非常高興地宣布推出全新的 Amplify 體驗，旨在讓前端開發人員僅使用 TypeScript 即可建立全端、雲端驅動的應用程式。讓我們更深入地了解第二代 Amplify 的樣子！
https://www.youtube.com/watch?v=BCXdLx6xHmc
只需幾分鐘即可將您的前端運送到全球
您可以使用 Amplify Hosting 透過幾個快速簡單的步驟部署您的應用程式前端。首先前往 AWS 控制台，選擇您的 Git 供應商，選擇您的儲存庫和分支，更新您想要自訂的任何建置設置，然後「儲存並部署」。幾分鐘後，您的應用程式將在全球部署！您可以使用下列步驟託管使用 Next.js、Nuxt、Astro 和 Vite 等框架建立的靜態或伺服器端渲染應用程式。
快速從前端到全端
當您建立新的 Amplify 應用程式時，您將獲得一些為您建立的文件，您可以在其中保存後端程式碼。
├── amplify/
│ ├── auth/
│ │ └── resource.ts
│ ├── data/
│ │ └── resource.ts
在這些檔案中，您可以編寫 TypeScript 程式碼來建立應用程式後端。您可以使用以下程式碼建立資料模型，該程式碼還為您的資料設定授權規則。
// amplify/data/resource.ts
import { a, defineData, type ClientSchema } from '@aws-amplify/backend';
// Create a data model with two fields, `content` and `done`. The default authorization mode is apiKey -- meaning anyone authenticated using an API key can create, read, update, and delete todos.
const schema = a.schema({
Todo: a.model({
content: a.string(),
isDone: a.boolean()
})
.authorization(allow => [allow.publicApiKey()])
});
// Used for code completion / highlighting when making requests from frontend
export type Schema = ClientSchema<typeof schema>;
// defines the data resource to be deployed
export const data = defineData({
schema,
authorizationModes: {
defaultAuthorizationMode: 'apiKey',
apiKeyAuthorizationMode: { expiresInDays: 30 }
}
});
然後，您可以使用 Amplify 用戶端庫與應用程式前端的資料模型進行交互，例如要列出所有待辦事項，您可以編寫如下程式碼：
import type { Schema } from "../amplify/data/resource";
import { generateClient } from "aws-amplify/data";
const client = generateClient<Schema>();
const fetchTodos = async () => {
const { data: items, errors } = await client.models.Todo.list();
};
Amplify 擁有為許多不同框架和語言編寫的程式庫 - 從適用於行動開發人員的 Swift、Android 和 Flutter 到適用於 Next.js 應用程式的 SSR 功能。
您可以執行類似的身份驗證操作！下面的程式碼定義並配置了一個身分驗證資源，向新使用者發送一封主題行為「Welcome to Amplify 🚀」的驗證電子郵件。
import { defineAuth } from "@aws-amplify/backend"
export const auth = defineAuth({
loginWith: {
email: {
verificationEmailSubject: "Welcome to Amplify 🚀"
},
},
})
然後，您可以使用withAuthenticator高階 React 元件建立完整的使用者驗證流程，包括登入和註冊！
import { Authenticator } from '@aws-amplify/ui-react'
function App() {
return (
<Authenticator>
<h1>You can't see this until you log in!</h1>
</Authenticator>
)
}
export default App
您可以執行類似的操作來在應用程式中建立無伺服器函數和檔案儲存資源。部署所需要做的就是git push您的程式碼！
與您的團隊合作，而不是對抗
在本機開發 Amplify 應用程式時，您可以執行沙箱，每次變更後端程式碼時，該沙箱都會自動快速重新部署雲端資源。您團隊中的每個開發人員都將擁有自己的沙箱，因此您在迭代時不會相互覆蓋。
npx ampx sandbox
您也可以為專案中的每個 Git 分支設定部署環境 - 例如dev 、 prod和my-new-feature 。您可以在交付生產之前在隔離環境中測試變更！
Amplify 現在建立在 AWS 雲端開發套件 (AWS CDK) 之上，因此您可以連接到 Amplify 本身不支援的服務 - 例如用於 AI/ML 的 Amazon Bedrock！
試試看！
要了解有關 Amplify 的更多訊息，請嘗試我們的快速入門教程之一，該教程將指導您完成建立全端 Amplify 應用程式的步驟。
原文出處：https://dev.to/aws/introducing-a-new-fullstack-typescript-dx-for-aws-1ap9
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
