custom examples

src/directory/directory.mjs

@@ -2103,6 +2103,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/restapi/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,58 @@
+export const meta = {
+  title: 'Analytics',
+  description: 'Learn how to set Analytics resource powered by Pinpoint'
+};
+
+export function getStaticProps(context) {
+  return {
+    props: {
+      meta
+    }
+  };
+}
+
+Amplify enables you to collect analytics data for your App. The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App. 
+We can use AWS CDK to create the necessary resources for analytics.
+
+```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");
+const pinpoint = new CfnApp(analyticsStack, "Pinpoint", {
+  name: "myPinpointApp",
+});
+
+const pinpointPolicy = new Policy(analyticsStack, "PinpointPolicy", {
+  policyName: "PinpointPolicy",
+  statements: [
+    new PolicyStatement({
+      actions: ["mobiletargeting:UpdateEndpoint", "mobiletargeting:PutEvents"],
+      resources: [pinpoint.attrArn + "/*"],
+    }),
+  ],
+});
+
+backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
+backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
+
+backend.addOutput({
+  Analytics: {
+    AWSPinpoint: {
+      appId: pinpoint.ref,
+      region: "us-east-1",
+    },
+  },
+});
+```
+
+
+### Initialize In-App Messaging
+
+To initialize In-App Messaging you need to configure Amplify with `Amplify.configure()`

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,79 @@
+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
+    }
+  };
+}
+
+
+Amplify provides APIs and map UI components for maps and location search for JavaScript-based web apps. We can utilize AWS CDK to add the Geo resource and configurations.
+
+```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");
+
+const map = new CfnMap(geoStack, "Map", {
+  mapName: "myMap",
+  description: "Map",
+  configuration: {
+    style: "VectorEsriNavigation",
+  },
+  pricingPlan: "RequestBasedUsage",
+  tags: [
+    {
+      key: "name",
+      value: "myMap",
+    },
+  ],
+});
+
+const myGeoPolicy = new Policy(geoStack, "AuthenticatedUserIamRolePolicy", {
+  policyName: "GeoPolicy",
+  statements: [
+    new PolicyStatement({
+      actions: [
+        "geo:GetMapTile",
+        "geo:GetMapSprites",
+        "geo:GetMapGlyphs",
+        "geo:GetMapStyleDescriptor",
+      ],
+      resources: [map.attrArn],
+    }),
+  ],
+});
+
+backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
+
+backend.addOutput({
+  geo: {
+    amazon_location_service: {
+      region: "us-east-1",
+      maps: {
+        items: {
+          [map.mapName]: {
+            style: "VectorEsriNavigation",
+          },
+        },
+        default: map.mapName,
+      },
+    },
+  },
+});
+```
+
+### Initialize In-App Messaging
+
+To initialize In-App Messaging you need to configure Amplify with `Amplify.configure()`

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

@@ -0,0 +1,112 @@
+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
+    }
+  };
+}
+
+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. 
+
+```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";
+
+const backend = defineBackend({
+  auth, 
+  data,
+  // additional resources 
+});
+
+const inAppMessagingStack = backend.createStack("inAppMessaging-stack");
+const pinpoint = new CfnApp(inAppMessagingStack, "Pinpoint", {
+  name: "myPinpointApp",
+});
+
+const mySegment = new CfnSegment(inAppMessagingStack, "Segment", {
+  applicationId: pinpoint.ref,
+  name: "mySegment",
+});
+
+new CfnCampaign(inAppMessagingStack, "MyCampaign", {
+  applicationId: pinpoint.ref,
+  name: "MyCampaign",
+  segmentId: mySegment.attrSegmentId,
+  schedule: {
+    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.
+        },
+      ],
+    },
+  },
+});
+
+const pinpointPolicy = new Policy(inAppMessagingStack, "PinpointPolicy", {
+  policyName: "PinpointPolicy",
+  statements: [
+    new PolicyStatement({
+      actions: ["mobiletargeting:GetInAppMessages"],
+      resources: [pinpoint.attrArn + "/*"],
+    }),
+  ],
+});
+
+backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
+backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
+
+backend.addOutput({
+  Notifications: {
+    InAppMessaging: {
+      AWSPinpoint: {
+        appId: pinpoint.ref,
+        region: "us-east-1",
+      },
+    },
+  },
+});
+```
+
+
+### Initialize In-App Messaging
+
+To initialize In-App Messaging you need to configure Amplify with `Amplify.configure()`