Part 1
How to build a “Profile App” with AWS Amplify
Building a User Profile with Angular Step by Step
Part 02 is available here.
This blog post is connected to the following youtube video. I would recommend you to watch the video first and use this blog post to copy the code snippets and build the application by yourself.
Creating the Angular App
Let’s start a new angular application using ng new command.
ng new profileAppSelect YES for angular routing and select SCSS when prompted from the CLI. After the project is created, change directory into the profileApp folder by,
cd profileAppNow let’s create two components for Login page and Profile landing page.
ng g c auth
ng g c profileInstalling Amplify Libraries
It’s time to add amplify and aws-appsync libraries. Firstly, install the amplify cli globally and configure it with your AWS account.
npm install -g @aws-amplify/cli
amplify configureAfterwards, we need to install amplify, amplify-angular, app-sync and graphql-tag libraries as we are to use them in our profile app.
npm install --save aws-amplify
npm install --save aws-amplify-angularAdditional configuration for the Angular App
We need to add some polyfills and additional configurations to get amplify and appsync work with our angular application. Otherwise, you’ll waste much time troubleshooting errors.
In the polyfills.ts file (src/polyfills.ts) add the following two lines on top of the file.
(window as any).global = window;
(window as any).process = { browser: true };Also, goto index.html (src/index.html) and add the following script within the head tags.
<script>
if(global === undefined) {
var global = window;
}
</script>Now goto tsconfig.app.json (src/tsconfig.app.json) and add “node” as the compilerOptions type.
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["node"]
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}Initializing an Amplify Project on Cloud
At this point, we can initialize an amplify project using the amplify cli.
amplify init
## Provide following answers when prompted? Enter a name for the project profileApp
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project? What javascript framework are you using angular
? Source Directory Path: src
? Distribution Directory Path: dist/profileApp
? Build Command: npm run-script build
? Start Command: ng serve
## Choose your aws profile when prompted as well
After the process is completed, let’s add two amplify categories for auth and api.
amplify add auth
## Provide following answer for the promptDo you want to use the default authentication and security configuration? Yes, use the default configuration.amplify add api
## Provide following answers for the prompts? Please select from one of the below mentioned services GraphQL
? Provide API name: profileapp
? Choose an authorization type for the API Amazon Cognito User Pool
Use a Cognito user pool configured as a part of this project
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? Yes
Now, amplify will open the schema.graphql file with sample model. While command prompt is open, replace the content with the following graphql model and save the file and press enter to continue in the command prompt.
type User @model {
id: ID!
username: String!
firstName: String
lastName: String
bio: String
image: String
}At this point, we have created the templates for all the AWS resources locally. We need to push the template and actually create the services. To do that type,
amplify push
## Provide following answers when prompted? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target angular
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/*/.graphql
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/app/API.service.ts
It will take a few minutes to provision the resources on AWS. Be patient :)
Configuring Amplify Libraries with the App
Now that we have configured the resources on AWS, it creates a new file i.e. aws-exports.js file with all the configuration details of those services in the frontend directory structure.
Let’s use that file and set up the initiate connection from Angular frontend to AWS backend.
Goto main.ts (/src/main.ts) file and configure amplify.
import Amplify from 'aws-amplify';
import amplify from './aws-exports';Amplify.configure(amplify);
Now let’s import amplify-angular library to use the already configured higher order components for our login.
Goto app.module.js and import AmplifyAngularModule and AmplifyService.
import {AmplifyAngularModule, AmplifyService} from 'aws-amplify-angular';@NgModule({
declarations: [
AppComponent
...
],
imports: [
...
AmplifyAngularModule
],
providers: [AmplifyService]
})
Now we can use <amplify-authenticator></amplify-authenticator> component directly in the auth component html and implement a complete login functionality. (Magical!)
But before that let’s set up our routes in app-routing.module.js file. We have two basic routes. One for the login screen and the other for our profile component.
In the app-routing.module.ts file add the routes.
const routes: Routes = [{
path: "profile",
component: ProfileComponent
},
{
path: "login",
component: AuthComponent
},
{
path: '**',
redirectTo: 'login',
pathMatch: 'full'
}
];Adding the Login Component
It’s time to add the login screen. Goto auth.component.html and add this code. It will turn in to a login screen.
<amplify-authenticator></amplify-authenticator>Before running the application to check the login screen, you need to update the styles in of amplify-authenticator in styles.scss file.
Add this line of css in the style.scss file (src/styles.scss)
@import '~aws-amplify-angular/theme.css';We need to remove the default content that angular has added in app.component.html file. So let’s do that too. Your app.component.html should look like this when you remove the default code
<router-outlet></router-outlet>Okay. Now let’ run ng serve and check the output!
Styling with MDBootStrap
Now we need to build the Profile component. But before that, let’s configure MDBootStrap with our project to add styles to the profile component easily.
npm i angular-bootstrap-md --savenpm install -–save chart.js@2.5.0 @types/chart.js @types/chart.js @fortawesome/fontawesome-free hammerjs
To app.module.ts add,
import { MDBBootstrapModule } from 'angular-bootstrap-md'; @NgModule({ imports: [ MDBBootstrapModule.forRoot() ] });
In the angular.json file replace styles and scripts sections with,
"styles": [
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
"node_modules/angular-bootstrap-md/scss/mdb-free.scss",
"src/styles.scss"
],
"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/hammerjs/hammer.min.js"
]Adding the Profile Component
Now let’s edit the profile component. In profile.component.html, add following html code,
<!-- Navigation Bar -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark default-color">
<a class="navbar-brand" href="#"><strong>Profile</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"> Hello {{userName}}!</a>
</li>
<li class="nav-item active">
<a class="nav-link"> Logout <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</header><!-- Main Content -->
<main class="text-center my-5">
<div class="container">
<h2>My Profile</h2>
<form>
<div class="form-group row">
<label for="firstName" class="col-sm-2 col-form-label">First Name</label>
<div class="col-sm-10">
<div class="md-form mt-0">
<input type="text" class="form-control" id="firstName" name="firstName" [(ngModel)]="user.firstName">
</div>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-sm-2 col-form-label">Last Name</label>
<div class="col-sm-10">
<div class="md-form mt-0">
<input type="text" class="form-control" id="lastName" name="lastName" [(ngModel)]="user.lastName">
</div>
</div>
</div>
<div class="form-group row">
<label for="aboutMe" class="col-sm-2 col-form-label">About Me</label>
<div class="col-sm-10">
<div class="md-form mt-0">
<textarea id="aboutMe" name="aboutMe" [(ngModel)]="user.aboutMe" class="form-control md-textarea" length="120"
rows="3"></textarea>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg" (click)="updateProfile()">Update</button>
</div>
</div>
</form>
</div>
</main>
In the form, we data binding to a model called user. Let’s add that model and import it to the profile.component.ts file.
// Generate a typescript class
ng g class UserAdd the following code to user.ts,
Since we need to use ngModel in the profile component, we should import FormsModule into the app.module.js
import { FormsModule} from '@angular/forms';@NgModule({
imports: [
FormsModule,
...
]
)
Okay, now we need to implement updateProfile() function to grab the data from the form and store the data in the DynamoDB table.
export class User {
constructor(
public id: string,
public username: string,
public firstName: string,
public lastName: string,
public aboutMe: string,
public imageUrl: string
){}
}In the profile.component.js file add,
import { Component, OnInit } from '@angular/core';
import { APIService } from '../API.service';
import { User } from '../user';
import { Auth } from 'aws-amplify';@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})export class ProfileComponent implements OnInit {
userId: string;
userName: string;
user = new User('', '', '', '', '', ''); constructor(private api: APIService) {} ngOnInit() {
Auth.currentAuthenticatedUser({
bypassCache: false
}).then(async user => {
this.userId = user.attributes.sub;
this.userName = user.username;
})
.catch(err => console.log(err));
}
async updateProfile() {
const user = {
id: this.userId,
username: this.user.firstName + '_' + this.user.lastName,
firstName: this.user.firstName,
lastName: this.user.lastName,
bio: this.user.aboutMe
}
await this.api.CreateUser(user);
}
}
updateProfile function will get the firstName, userName, lastName, and bio information from the form inputs.
But the “id” attribute has to be taken from the currently authenticated user.
Now, let’s run ng serve and goto “/profile” path to view our profile page.
In the second part of this blog, we are going to add the following functionalities to our profile app.
- Loading the saved user data
- Ability to securely upload the profile image
- Adding auth guard for the profile component so that unauthorized users will not have access to a profile page
- Automatically redirecting to profile page after a successful login
So guys, I hope this has been useful to you. I’ll see you in the next part.
Stay tuned!
