ng-amplify Angular Fullstack App with AWS Amplify Gen 2

#devchallenge #awschallenge #amplify #fullstack

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

I have built and deployed a secure and scalable Angular Jira full-stack application with AWS Amplify Gen 2, leveraging built-in authentication functionalities and UI components for a streamlined user experience and implementing add, update, and delete tickets using AWS Amplify Gen 2 data. This includes building a real-time API and database using TypeScript to define data models and securing API with authorization rules.

Demo

main.d3tpprgiim9ho3.amplifyapp.com

Journey

Here's a breakdown of how to build and deploy an Angular fullstack application with AWS Amplify Gen 2, integrating user authentication and leveraging Amplify connected components:

1. Setting Up the Project:

Prerequisites: Node.js, npm (or yarn), AWS account with IAM user configured.
Create Angular Project: set up a basic Angular project.
Install Amplify CLI: npm install -g @aws-amplify/cli

2. Initialize Amplify in your project:

amplify init

3: Add Authentication

amplify add auth

Choose the default configuration or customize it according to your needs.

4: Install Amplify Angular Library

npm add @aws-amplify/ui-angular

5: Implement Authentication

//app.component.html
<amplify-authenticator>
    <ng-template amplifySlot="authenticated" let-user="user" let-signOut="signOut">
        <app-home></app-home>
        <button (click)="signOut()">Sign Out</button>
    </ng-template>
</amplify-authenticator>

//app.component.ts
//import code
import { Amplify } from 'aws-amplify';
import outputs from '../../amplify_outputs.json';
import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular';

Amplify.configure(outputs);

@Component({
//other code
  imports: [RouterOutlet, TodosComponent, AmplifyAuthenticatorModule],
})
export class AppComponent {    
  constructor(public authenticator: AuthenticatorService) {
    Amplify.configure(outputs);
  }
}

6: Building your data backend

You should see an amplify/data/resource.ts file, which is the central location to configure your data backend.

Define schema for as per your requirements

a.schema({
  Ticket: a.model({
    title: a.string(),
    // other required fields
    priority: a.enum(['low', 'medium', 'high']),
  }),
});

CRUD operation:

import type { Schema } from '../../../amplify/data/resource';
const client = generateClient<Schema>();
//fetch
const fetchTickets = async () => {
  const { data: tickets, errors } = await client.models.Ticket.list();
};
//create
const { errors, data: newTicket } = await client.models.Ticket.create({
  title: "My new ticket"
});
//update 
const { data: updatedTodo, errors } = await client.models.Ticket.update({
  id: 'ticket_id',
  title: "updated title"
})
const { data: deletedTicket, errors } = await client.models.Ticket.delete({
  id: 'ticket_id'
})

Connected Components and/or Feature Full

Sets up an Angular application with AWS Amplify Gen 2, integrating authentication and using Amplify connected components for UX patterns and working on implementing other features. With Amplify Data, you can build a secure, real-time API backed by a database in minutes. After you define your data model using TypeScript, Amplify will deploy a real-time API for you.