custom examples (#6979)

* custom examples

src/directory/directory.mjs

@@ -2109,6 +2109,18 @@ export const directory = {
                 },
                 {
                   path: 'src/pages/gen2/build-a-backend/add-aws-services/overriding-resources/index.mdx'
+                },
+                {
+                  path: 'src/pages/gen2/build-a-backend/add-aws-services/rest-api/index.mdx'
+                },
+                {
+                  path: 'src/pages/gen2/build-a-backend/add-aws-services/in-app-messaging/index.mdx'
+                },
+                {
+                  path: 'src/pages/gen2/build-a-backend/add-aws-services/analytics/index.mdx'
+                },
+                {
+                  path: 'src/pages/gen2/build-a-backend/add-aws-services/geo/index.mdx'
                 }
               ]
             }

src/pages/gen2/build-a-backend/add-aws-services/analytics/index.mdx

@@ -0,0 +1,76 @@
+export const meta = {
+  title: 'Analytics',
+  description: 'Learn how to set Analytics resource powered by Pinpoint'
+};
+
+export function getStaticProps(context) {
+  return {
+    props: {
+      meta
+    }
+  };
+}
+
+<Callout warning>
+
+**Under active development:** The `addOutput` method for Amplify (Gen 2) is under active development. The experience may change between versions of `@aws-amplify/backend`. Try it out and provide feedback at https://github.com/aws-amplify/amplify-backend/issues/new/choose
+
+</Callout>
+
+Amplify enables you to collect analytics data for your app. The Analytics category uses Amazon Cognito Identity pools to _identify_ users in your app.
+The following is an example utilizing the [AWS Cloud Development Kit (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) to create the an Analytics resource powered by [Amazon Pinpoint](https://aws.amazon.com/pinpoint/).
+
+```ts title="amplify/backend.ts"
+import { Policy, PolicyStatement } from "aws-cdk-lib/aws-iam";
+import { CfnApp } from "aws-cdk-lib/aws-pinpoint";
+
+const backend = defineBackend({
+  auth, 
+  data,
+  // additional resources 
+});
+
+const analyticsStack = backend.createStack("analytics-stack");
+
+// create a Pinpoint app
+const pinpoint = new CfnApp(analyticsStack, "Pinpoint", {
+  name: "myPinpointApp",
+});
+
+// create an IAM policy to allow interacting with Pinpoint
+const pinpointPolicy = new Policy(analyticsStack, "PinpointPolicy", {
+  policyName: "PinpointPolicy",
+  statements: [
+    new PolicyStatement({
+      actions: ["mobiletargeting:UpdateEndpoint", "mobiletargeting:PutEvents"],
+      resources: [pinpoint.attrArn + "/*"],
+    }),
+  ],
+});
+
+// apply the policy to the authenticated and unauthenticated roles
+backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
+backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
+
+// patch the custom Pinpoint resource to the expected output configuration
+backend.addOutput({
+  Analytics: {
+    AWSPinpoint: {
+      appId: pinpoint.ref,
+      region: Stack.of(pinpoint).region,
+    },
+  },
+});
+```
+
+### Initialize Analytics
+
+To initialize Analytics you need to configure Amplify with `Amplify.configure()`
+
+### Working with Analytics
+
+Refer to the [Analytics documentation](/react/build-a-backend/more-features/analytics/) to learn how to track events and user sessions in your app.
+
+### References
+
+[Amazon Pinpoint Construct Library](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_pinpoint-readme.html)

src/pages/gen2/build-a-backend/add-aws-services/custom-resources/index.mdx

@@ -103,19 +103,20 @@ type CustomNotificationsProps = {
 };
 
 export class CustomNotifications extends Construct {
+  public readonly topic: sns.Topic;
   constructor(scope: Construct, id: string, props: CustomNotificationsProps) {
     super(scope, id);
 
     const { sourceAddress } = props;
 
     // Create SNS topic
-    const topic = new sns.Topic(this, 'NotificationTopic');
+    this.topic = new sns.Topic(this, 'NotificationTopic');
 
     // Create Lambda to publish messages to SNS topic
     const publisher = new lambda.NodejsFunction(this, 'Publisher', {
       entry: url.fileURLToPath(new URL('publisher.ts', import.meta.url)),
       environment: {
-        SNS_TOPIC_ARN: topic.topicArn
+        SNS_TOPIC_ARN: this.topic.topicArn
       },
       runtime: Runtime.NODEJS_18_X
     });
@@ -130,10 +131,10 @@ export class CustomNotifications extends Construct {
     });
 
     // Subscribe emailer Lambda to SNS topic
-    topic.addSubscription(new subscriptions.LambdaSubscription(emailer));
+    this.topic.addSubscription(new subscriptions.LambdaSubscription(emailer));
 
     // Allow publisher to publish to SNS topic
-    topic.grantPublish(publisher);
+    this.topic.grantPublish(publisher);
   }
 }
 ```
@@ -229,11 +230,18 @@ const backend = defineBackend({
   data
 });
 
-new CustomNotifications(
+const customNotifications = new CustomNotifications(
   backend.createStack('CustomNotifications'),
   'CustomNotifications',
   { sourceAddress: 'sender@example.com' }
 );
+
+backend.addOutput({
+  custom: {
+    topicArn: customNotifications.topic.topicArn,
+    topicName: customNotifications.topic.topicName,
+  },
+});
 ```
 
 ## Community CDK resources

src/pages/gen2/build-a-backend/add-aws-services/geo/index.mdx

@@ -0,0 +1,97 @@
+export const meta = {
+  title: 'Geo',
+  description: 'Learn how to set up Geo resource powered by Amazon Location Services.'
+};
+
+export function getStaticProps(context) {
+  return {
+    props: {
+      meta
+    }
+  };
+}
+
+<Callout warning>
+
+**Under active development:** The `addOutput` method for Amplify (Gen 2) is under active development. The experience may change between versions of `@aws-amplify/backend`. Try it out and provide feedback at https://github.com/aws-amplify/amplify-backend/issues/new/choose
+
+</Callout>
+
+Amplify provides APIs and map UI components for maps and location search for your web apps. The following is an example utilizing the [AWS Cloud Development Kit (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) to create a Geo resource powered by [Amazon Location Services](https://aws.amazon.com/location/).
+
+```ts title="amplify/backend.ts"
+import { CfnMap } from "aws-cdk-lib/aws-location";
+
+const backend = defineBackend({
+  auth, 
+  data,
+  // additional resources 
+});
+
+const geoStack = backend.createStack("geo-stack");
+
+// create a location services map
+const map = new CfnMap(geoStack, "Map", {
+  mapName: "myMap",
+  description: "Map",
+  configuration: {
+    style: "VectorEsriNavigation",
+  },
+  pricingPlan: "RequestBasedUsage",
+  tags: [
+    {
+      key: "name",
+      value: "myMap",
+    },
+  ],
+});
+
+// create an IAM policy to allow interacting with geo resource
+const myGeoPolicy = new Policy(geoStack, "AuthenticatedUserIamRolePolicy", {
+  policyName: "GeoPolicy",
+  statements: [
+    new PolicyStatement({
+      actions: [
+        "geo:GetMapTile",
+        "geo:GetMapSprites",
+        "geo:GetMapGlyphs",
+        "geo:GetMapStyleDescriptor",
+      ],
+      resources: [map.attrArn],
+    }),
+  ],
+});
+
+// apply the policy to the authenticated and unauthenticated roles
+backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
+backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
+
+// patch the custom map resource to the expected output configuration
+backend.addOutput({
+  geo: {
+    amazon_location_service: {
+      region: Stack.of(geoStack).region,
+      maps: {
+        items: {
+          [map.mapName]: {
+            style: "VectorEsriNavigation",
+          },
+        },
+        default: map.mapName,
+      },
+    },
+  },
+});
+```
+
+### Initialize Geo
+
+To initialize Geo you need to configure Amplify with `Amplify.configure()`
+
+### Working with Maps
+
+To display a map in your React app, you can use the [Amplify React MapView component](https://ui.docs.amplify.aws/react/components/geo) or the [MapLibre GL](https://github.com/maplibre/maplibre-gl-js) with `maplibre-gl-js-amplify` libraries are required. Refer to the [Amplify Geo documentation](/react/build-a-backend/more-features/geo/maps/) for more information.
+
+### References
+
+[Location Construct Library](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_location-readme.html)

src/pages/gen2/build-a-backend/add-aws-services/in-app-messaging/index.mdx

@@ -0,0 +1,136 @@
+export const meta = {
+  title: 'In-App Messaging',
+  description: 'Learn how to set up In-App Messaging resource powered by Pinpoint'
+};
+
+export function getStaticProps(context) {
+  return {
+    props: {
+      meta
+    }
+  };
+}
+
+<Callout warning>
+
+**Under active development:** The `addOutput` method for Amplify (Gen 2) is under active development. The experience may change between versions of `@aws-amplify/backend`. Try it out and provide feedback at https://github.com/aws-amplify/amplify-backend/issues/new/choose
+
+</Callout>
+
+Amplify allows interacting with In-App Messaging APIs, which enables you to send messages to your app users. In-App Messaging is a powerful tool to engage with your users and provide them with relevant information. The following is an example utilizing the [AWS Cloud Development Kit (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) to create the In-App Messaging resource powered by [Amazon Pinpoint](https://aws.amazon.com/pinpoint/).
+
+```ts title="amplify/backend.ts"
+import {
+  CfnApp,
+  CfnInAppTemplate,
+  CfnCampaign,
+  CfnSegment,
+} from "aws-cdk-lib/aws-pinpoint";
+import { Policy, PolicyStatement } from "aws-cdk-lib/aws-iam";
+import { Stack } from "aws-cdk-lib";
+
+const backend = defineBackend({
+  auth, 
+  data,
+  // additional resources 
+});
+
+const inAppMessagingStack = backend.createStack("inAppMessaging-stack");
+
+// create a Pinpoint app
+const pinpoint = new CfnApp(inAppMessagingStack, "Pinpoint", {
+  name: "myPinpointApp",
+});
+
+// create a segment 
+const mySegment = new CfnSegment(inAppMessagingStack, "Segment", {
+  applicationId: pinpoint.ref,
+  name: "mySegment",
+});
+
+// create a campaign with event and in-app message template
+new CfnCampaign(inAppMessagingStack, "MyCampaign", {
+  applicationId: pinpoint.ref,
+  name: "MyCampaign",
+  segmentId: mySegment.attrSegmentId,
+  schedule: {
+    // ensure the start and end time are in the future
+    startTime: "2024-02-23T14:39:34Z", 
+    endTime: "2024-02-29T14:32:40Z",
+    frequency: "IN_APP_EVENT",
+    eventFilter: {
+      dimensions: {
+        eventType: {
+          dimensionType: "INCLUSIVE",
+          values: ["PURCHASE"],
+        },
+      },
+      filterType: "ENDPOINT",
+    },
+  },
+
+  messageConfiguration: {
+    inAppMessage: {
+      layout: "TOP_BANNER",
+      content: [
+        {
+          // define the content of the in-app message
+          bodyConfig: {
+            alignment: "CENTER",
+            body: "This is an example in-app message.",
+            textColor: "#FFFFFF",
+          },
+          backgroundColor: "#000000",
+          headerConfig: {
+            alignment: "CENTER",
+            header: "Welcome!",
+            textColor: "#FFFFFF",
+          },
+          // optionally, define buttons, images, etc.
+        },
+      ],
+    },
+  },
+});
+
+//create an IAM policy to allow interacting with Pinpoint in-app messaging
+const pinpointPolicy = new Policy(inAppMessagingStack, "PinpointPolicy", {
+  policyName: "PinpointPolicy",
+  statements: [
+    new PolicyStatement({
+      actions: ["mobiletargeting:GetInAppMessages"],
+      resources: [pinpoint.attrArn + "/*"],
+    }),
+  ],
+});
+
+// apply the policy to the authenticated and unauthenticated roles
+backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
+backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
+
+// patch the custom Pinpoint resource to the expected output configuration
+backend.addOutput({
+  Notifications: {
+    InAppMessaging: {
+      AWSPinpoint: {
+        appId: pinpoint.ref,
+        region: Stack.of(pinpoint).region,
+      },
+    },
+  },
+});
+```
+
+
+### Initialize In-App Messaging
+
+To initialize In-App Messaging you need to configure Amplify with `Amplify.configure()`
+
+
+### Working with In-App Messaging
+
+Refer to the [Amplify In-App Messaging documentation](/react/build-a-backend/more-features/in-app-messaging/) to learn how to send in-app messages to your app users.
+
+### References
+
+[Amazon Pinpoint Construct Library](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_pinpoint-readme.html)