AI-Prompt-From-2020.md

The prompt:

give me an ecommerce website and mobile app that uses native AWS services

I asked this to perplexity.ai and got back this wordy response:

To build an ecommerce website and mobile app using native AWS services, you can leverage the >following AWS offerings:

AWS Amplify

AWS Amplify is a comprehensive development platform that provides a set of tools and services for >building secure, scalable, and high-performing web and mobile applications. It includes the >following key components:

• AWS Amplify CLI: A command-line toolchain for creating and managing AWS resources for your >application.
• AWS Amplify Libraries: Client libraries for adding cloud capabilities like authentication, >analytics, API interactions, and storage to your web or mobile app.
• AWS Amplify Admin UI: A Git-based workflow for deploying and hosting full-stack serverless >web apps.

With Amplify, you can quickly set up authentication (via Amazon Cognito), API (using AWS AppSync >and GraphQL), storage (Amazon S3), and other services for your ecommerce app.[1][2]

Amazon API Gateway

Amazon API Gateway is a fully managed service that makes it easy to create, publish, maintain, >monitor, and secure APIs at any scale. You can use API Gateway to create RESTful APIs that act as >the "front door" for your ecommerce application, allowing client applications to securely access >data, business logic, or functionality from your backend services.[1]

AWS AppSync

AWS AppSync is a managed GraphQL service that simplifies application development by letting you >create a flexible API to securely access, manipulate, and combine data from one or more data >sources.[1] It can be used to build the GraphQL API layer for your ecommerce app, interacting with >databases, microservices, and other data sources.

Amazon DynamoDB

Amazon DynamoDB is a key-value and document database that delivers single-digit millisecond >performance at any scale. It can be used as the primary database for storing product catalogs, >user profiles, shopping carts, and other ecommerce data.[3]

Amazon S3

Amazon Simple Storage Service (S3) is an object storage service that can be used to store and >serve static website content, product images, and other media assets for your ecommerce >application.[1]

Amazon Cognito

Amazon Cognito provides authentication, authorization, and user management for your web and mobile >apps. It can handle user sign-up, sign-in, access control, and guest access for your ecommerce >application.[1]

By combining these AWS services through AWS Amplify, you can rapidly build and deploy a scalable, >secure ecommerce web and mobile application with serverless backends.[2][5]

Citations: [1] https://aws.amazon.com/products/frontend-web-mobile/ [2] https://www.youtube.com/watch?v=anfFscX3Z4Y [3] https://aws.amazon.com/web-mobile-social/ [4] https://aws.amazon.com/solutions/retail/web-store/ [5] https://dev.to/gelopfalcon/e-commerce-app-with-reactnative-and-amplify-part-1-18pb

I then asked it to give me the code. This wasn't in the original article, true, but I tried to be as minimially helpful to the AI as possible while still getting some kind of code.

Ok, give me code for it

Response:

Sure, here's an example of how you can use AWS Amplify to build an ecommerce web application with React and a mobile app with React Native:

React Web App

// src/App.js
import React, { useEffect, useState } from 'react';
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import awsconfig from './aws-exports';
import { listProducts } from './graphql/queries';

Amplify.configure(awsconfig);

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchProducts();
  }, []);

  async function fetchProducts() {
    try {
      const productData = await API.graphql(graphqlOperation(listProducts));
      setProducts(productData.data.listProducts.items);
    } catch (err) {
      console.log('error fetching products...', err);
    }
  }

  return (
    <div>
      <h1>Products</h1>
      {products.map((product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.description}</p>
          <p>Price: ${product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

React Native Mobile App

// App.js
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import awsconfig from './aws-exports';
import { listProducts } from './graphql/queries';

Amplify.configure(awsconfig);

export default function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchProducts();
  }, []);

  async function fetchProducts() {
    try {
      const productData = await API.graphql(graphqlOperation(listProducts));
      setProducts(productData.data.listProducts.items);
    } catch (err) {
      console.log('error fetching products...', err);
    }
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={products}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.productContainer}>
            <Text style={styles.productName}>{item.name}</Text>
            <Text style={styles.productDescription}>{item.description}</Text>
            <Text style={styles.productPrice}>${item.price}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  productContainer: {
    padding: 20,
    borderWidth: 1,
    borderColor: '#ccc',
    marginVertical: 10,
  },
  productName: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  productDescription: {
    fontSize: 16,
    marginVertical: 5,
  },
  productPrice: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

In both examples, we're using AWS Amplify to configure and interact with AWS services like AppSync (GraphQL API) and DynamoDB (database). The listProducts query is defined in the graphql/queries.js file and executed using the API.graphql method from Amplify.

The React web app displays the product list in a simple UI, while the React Native app uses a FlatList component to render the products on a mobile device.

Note that you'll need to set up the necessary AWS services (AppSync, DynamoDB, etc.) and configure the Amplify project accordingly. The aws-exports.js file contains the configuration details for your AWS resources.

AI isn't quite there yet with understanding the intention that I had back in 2020: "give me a cloudformation template inclusive of all of the code required for all of the ecommerce website to run." AI still needs more guidance to be successful than I thought. But one day, I bet we get there.