AWS Amplify is a set of products and tools that enable mobile and front-end web developers to build and deploy secure, scalable full-stack applications, powered by AWS.
Step 1: Set Up Your Development Environment
- Install Node.js and npm from https://nodejs.org/.
- Install Git (optional but recommended) from https://git-scm.com/.
- Install AWS Amplify CLI:
npm install -g @aws-amplify/cli
Step 2: Create a New React App
- Create a new React app:
npx create-react-app linkedin-learning-tracker
cd linkedin-learning-tracker
Step 3: Set Up AWS Amplify
- Configure Amplify:
amplify configure
- Initialize Amplify in your React app:
amplify init
Step 4: Create GraphQL API
- Add API:
amplify add api
Choose "GraphQL" as the service and configure your API:
API name: LinkedLearningTrackerAPI
Authorization type: API key (for simplicity in this example)
Schema: Use default schema or edit as needed
Step 5: Create DynamoDB Backend
- Add storage:
amplify add storage
- Choose "Amazon DynamoDB" as the service and configure your table.
Step 6: Deploy Backend Resources
- Deploy the backend:
amplify push
Step 7: Create React Components
- In the 'src' directory, create 'CourseForm.js':
import React, { useState } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { createCourse } from './graphql/mutations';
function CourseForm() {
const [courseData, setCourseData] = useState({ title: '', source: '' });
const handleSubmit = async e => {
e.preventDefault();
try {
await API.graphql(graphqlOperation(createCourse, { input: courseData }));
console.log('Course created successfully');
setCourseData({ title: '', source: '' });
} catch (error) {
console.error('Error creating course:', error);
}
};
const handleInputChange = e => {
const { name, value } = e.target;
setCourseData(prevData => ({ ...prevData, [name]: value }));
};
return (
<form onSubmit={handleSubmit}>
<label>
Course Title:
<input type="text" name="title" value={courseData.title} onChange={handleInputChange} />
</label>
<label>
Course Source:
<input type="text" name="source" value={courseData.source} onChange={handleInputChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
export default CourseForm;
- In 'src/App.js':
import React from 'react';
import './App.css';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import CourseForm from './CourseForm';
Amplify.configure(awsconfig);
function App() {
return (
<div className="App">
<h1>LinkedIn Learning Tracker</h1>
<CourseForm />
</div>
);
}
export default App;
Step 8: Run Your Application
- Install the required dependencies:
npm install aws-amplify aws-amplify-react
- Start your application:
npm start
- Open your browser and navigate to 'http://localhost:3000'.
Step 9: Test Your Application
- Fill out the course form in the web application and submit.
- Check the AWS AppSync console to verify that the data is being stored in DynamoDB.
Congratulations! You've successfully set up an end-to-end project that allows employees to submit completed courses and sources using AWS Amplify, React, GraphQL, and DynamoDB. You can further enhance this project by adding user authentication, displaying a list of completed courses, and improving the user interface.
Top comments (0)