1 00:00:00,610 --> 00:00:03,310 ‫So let's practice using Amplify. 2 00:00:03,310 --> 00:00:06,810 ‫And the Amplify console takes us in different directions 3 00:00:06,810 --> 00:00:10,330 ‫so we get started and here we have multiple options, 4 00:00:10,330 --> 00:00:13,120 ‫we can either do Amplify Studio to build an app 5 00:00:13,120 --> 00:00:15,560 ‫or Amplify Hosting to host an app. 6 00:00:15,560 --> 00:00:19,090 ‫And so currently we're going to build an app using here. 7 00:00:19,090 --> 00:00:21,280 ‫So I'll just click on, I call it DemoApp 8 00:00:22,890 --> 00:00:24,910 ‫and then confirm the deployment. 9 00:00:24,910 --> 00:00:27,210 ‫So this is going to create an Amplify app 10 00:00:27,210 --> 00:00:29,060 ‫using Amplify Studio. 11 00:00:29,060 --> 00:00:32,660 ‫And this will be similar to what we did if we used the CLI, 12 00:00:32,660 --> 00:00:35,440 ‫the Amplify CLI to set up our Amplify app, 13 00:00:35,440 --> 00:00:37,900 ‫but I like the console in the Studio because well, 14 00:00:37,900 --> 00:00:39,170 ‫it shows you what is happening 15 00:00:39,170 --> 00:00:40,700 ‫and it will help you understand 16 00:00:40,700 --> 00:00:43,760 ‫what the Amplify service is about. 17 00:00:43,760 --> 00:00:46,640 ‫So we are now in our DemoApp 18 00:00:46,640 --> 00:00:48,640 ‫and we have actually two things. 19 00:00:48,640 --> 00:00:50,660 ‫So we have the backend environments and this is staging, 20 00:00:50,660 --> 00:00:52,880 ‫and this is where we're going to set up everything. 21 00:00:52,880 --> 00:00:54,810 ‫And we'll launch the Studio 22 00:00:54,810 --> 00:00:57,810 ‫to go into the staging environments 23 00:00:57,810 --> 00:00:59,450 ‫but also you can get hosting environments 24 00:00:59,450 --> 00:01:01,080 ‫and you can connect actually your source code 25 00:01:01,080 --> 00:01:02,400 ‫from a Git Repo, 26 00:01:02,400 --> 00:01:05,060 ‫and then you're going to host these as a web app in minutes. 27 00:01:05,060 --> 00:01:07,860 ‫Okay so it could be GitHub, Bitbucket, GitLab, CodeCommit 28 00:01:07,860 --> 00:01:10,930 ‫or without a Git provider. 29 00:01:10,930 --> 00:01:12,790 ‫So we are in the backend environment 30 00:01:12,790 --> 00:01:15,550 ‫and I launched my Amplify Studio. 31 00:01:15,550 --> 00:01:16,500 ‫And the idea is that 32 00:01:16,500 --> 00:01:19,510 ‫here you can set-up a lot of things for Amplify. 33 00:01:19,510 --> 00:01:22,500 ‫So as I said remember, Amplify allows you to integrate 34 00:01:22,500 --> 00:01:26,300 ‫with different services in the backend of AWS. 35 00:01:26,300 --> 00:01:27,910 ‫And this is where we see it. 36 00:01:27,910 --> 00:01:29,280 ‫So I'm just going to do an overview, 37 00:01:29,280 --> 00:01:31,760 ‫I won't go into each of those one by one, 38 00:01:31,760 --> 00:01:33,970 ‫as you can see we can manage the content 39 00:01:33,970 --> 00:01:36,840 ‫and for this we can edit the data model. 40 00:01:36,840 --> 00:01:38,450 ‫So if we add a model 41 00:01:38,450 --> 00:01:42,050 ‫for example, I call these ones Users and there is an ID 42 00:01:42,050 --> 00:01:44,500 ‫and then there is for example, a name it's a string, 43 00:01:44,500 --> 00:01:47,033 ‫and then an age, it's an int. 44 00:01:47,890 --> 00:01:50,850 ‫Okay and then we Save and Deploy. 45 00:01:50,850 --> 00:01:55,850 ‫So this is actually going to create for us a DynamoDB table. 46 00:01:57,160 --> 00:02:00,060 ‫So if I go back into my content, 47 00:02:00,060 --> 00:02:02,493 ‫I go here and I'll open DynamoDB. 48 00:02:06,040 --> 00:02:09,920 ‫And go to my tables, let's just wait a little bit. 49 00:02:09,920 --> 00:02:11,020 ‫So while this is deploying, 50 00:02:11,020 --> 00:02:12,270 ‫let me show you what is happening. 51 00:02:12,270 --> 00:02:14,720 ‫So if you go in CloudFormation, 52 00:02:14,720 --> 00:02:17,080 ‫it turns out that your Amplify deployments 53 00:02:17,080 --> 00:02:19,690 ‫are going to be powered by CloudFormation. 54 00:02:19,690 --> 00:02:23,510 ‫And as you can see here, my Amplify Stacks can be nested 55 00:02:23,510 --> 00:02:26,920 ‫within my main Amplify Demo App Station Stack. 56 00:02:26,920 --> 00:02:27,950 ‫And there are a lot of things 57 00:02:27,950 --> 00:02:30,290 ‫that can be happening at the same time, okay? 58 00:02:30,290 --> 00:02:32,030 ‫But here it is and you can look at the events, 59 00:02:32,030 --> 00:02:35,200 ‫and see the fact that well some updates 60 00:02:35,200 --> 00:02:36,340 ‫are happening over time. 61 00:02:36,340 --> 00:02:41,047 ‫Okay so let's have a look at DynamoDB now. 62 00:02:41,950 --> 00:02:43,100 ‫And as you can see, 63 00:02:43,100 --> 00:02:45,810 ‫two tables were created by CloudFormation 64 00:02:45,810 --> 00:02:47,130 ‫and therefore Amplify. 65 00:02:47,130 --> 00:02:49,010 ‫And we have the AmplifyDataStore, 66 00:02:49,010 --> 00:02:52,710 ‫which is representing data for the Amplify service, 67 00:02:52,710 --> 00:02:54,540 ‫as well as the Users table, 68 00:02:54,540 --> 00:02:56,360 ‫which should the user table I created, 69 00:02:56,360 --> 00:03:00,380 ‫which contains my partition key to be id(String) okay? 70 00:03:00,380 --> 00:03:02,473 ‫And so it's going to take some time until it shows. 71 00:03:02,473 --> 00:03:04,320 ‫And the last thing I want to show you here 72 00:03:04,320 --> 00:03:09,310 ‫is the fact that alongside the DynamoDB table that we have, 73 00:03:09,310 --> 00:03:13,330 ‫there is the appsync service that has been created. 74 00:03:13,330 --> 00:03:15,650 ‫And this appsync service is actually 75 00:03:15,650 --> 00:03:18,174 ‫getting an API called DemoApp-staging 76 00:03:18,174 --> 00:03:20,550 ‫and if we look at this API itself 77 00:03:20,550 --> 00:03:23,580 ‫the Schema has been defined as my users, 78 00:03:23,580 --> 00:03:26,210 ‫which has an ID, a name, and an age. 79 00:03:26,210 --> 00:03:29,293 ‫So this is where we defined it in our Amplify Studio. 80 00:03:30,180 --> 00:03:31,300 ‫And in terms of data sources, 81 00:03:31,300 --> 00:03:33,020 ‫you can see that it is connected 82 00:03:33,020 --> 00:03:34,781 ‫to the Amazon DynamoDB table. 83 00:03:34,781 --> 00:03:36,730 ‫So from within Amplify 84 00:03:36,730 --> 00:03:40,300 ‫and if you go to contents right now, this is done. 85 00:03:40,300 --> 00:03:44,180 ‫Okay so if you go to the data from within Amplify 86 00:03:44,180 --> 00:03:47,140 ‫we know that we were creating a DynamoDB table, 87 00:03:47,140 --> 00:03:50,680 ‫a GraphQL schema for appsync and so on. 88 00:03:50,680 --> 00:03:54,110 ‫And so therefore we can start to manage our app data, okay? 89 00:03:54,110 --> 00:03:56,090 ‫And if you wanted to you could create, 90 00:03:56,090 --> 00:03:57,510 ‫and Users is just a user table. 91 00:03:57,510 --> 00:03:59,860 ‫Obviously we have a better way of managing users, 92 00:03:59,860 --> 00:04:02,540 ‫which is user management but you could go ahead here 93 00:04:02,540 --> 00:04:05,430 ‫and actually add some data into Users table. 94 00:04:05,430 --> 00:04:08,700 ‫For example, I click here and I say name is Stephane, 95 00:04:08,700 --> 00:04:12,252 ‫and age is, hey you don't know, let's say 40. 96 00:04:12,252 --> 00:04:13,085 ‫(Instructor chuckles) 97 00:04:13,085 --> 00:04:14,543 ‫Then we save this user. 98 00:04:16,030 --> 00:04:18,380 ‫And as you can see, the user is created. 99 00:04:18,380 --> 00:04:21,270 ‫Okay and if you go into our DynamoDB table, 100 00:04:21,270 --> 00:04:23,080 ‫and we do Explore Table Items, 101 00:04:23,080 --> 00:04:25,350 ‫the User is appearing right here. 102 00:04:25,350 --> 00:04:27,060 ‫And we have more fields than what we know. 103 00:04:27,060 --> 00:04:30,060 ‫We have the type name, we have the last change date, 104 00:04:30,060 --> 00:04:32,830 ‫the version, the age, the created date, 105 00:04:32,830 --> 00:04:34,220 ‫the name, and the updated date. 106 00:04:34,220 --> 00:04:37,240 ‫So a lot more complex than what we're doing 107 00:04:37,240 --> 00:04:40,770 ‫if you were to create our DynamoDB table on our own. 108 00:04:40,770 --> 00:04:43,040 ‫So this is for the content and the data, 109 00:04:43,040 --> 00:04:44,250 ‫then we have user management 110 00:04:44,250 --> 00:04:46,280 ‫and so if we set up authentication, 111 00:04:46,280 --> 00:04:48,140 ‫this is actually going to either 112 00:04:48,140 --> 00:04:52,600 ‫set up from scratch Cognito or we can reuse a Cognito. 113 00:04:52,600 --> 00:04:54,700 ‫But we can just set up from scratch 114 00:04:54,700 --> 00:04:55,670 ‫and therefore you can say, 115 00:04:55,670 --> 00:04:57,440 ‫okay how do you want people to log in? 116 00:04:57,440 --> 00:04:59,510 ‫So people have login by email, 117 00:04:59,510 --> 00:05:00,500 ‫but we can have phone number, 118 00:05:00,500 --> 00:05:02,580 ‫Facebook, Google, Amazon, or Apple. 119 00:05:02,580 --> 00:05:05,360 ‫Whether or not we want multifactor authentication. 120 00:05:05,360 --> 00:05:06,580 ‫And setting up the sign up 121 00:05:06,580 --> 00:05:08,750 ‫so which attributes do we want to capture? 122 00:05:08,750 --> 00:05:10,929 ‫Whether it be email address and so on. 123 00:05:10,929 --> 00:05:13,900 ‫And then once we do deploy, as you can expect 124 00:05:13,900 --> 00:05:15,452 ‫it is going to use CloudFormation 125 00:05:15,452 --> 00:05:18,556 ‫to create a Cognito user pool for us. 126 00:05:18,556 --> 00:05:21,080 ‫For storage, well you can set it up 127 00:05:21,080 --> 00:05:22,410 ‫and it's going to set up storage 128 00:05:22,410 --> 00:05:24,700 ‫backed up Amazon S3. 129 00:05:24,700 --> 00:05:27,300 ‫So again, this would be a setup for you to do. 130 00:05:27,300 --> 00:05:29,420 ‫Functions would create Lambda functions 131 00:05:29,420 --> 00:05:31,410 ‫directly from within Amplify. 132 00:05:31,410 --> 00:05:33,500 ‫GraphQL API is appsync. 133 00:05:33,500 --> 00:05:37,300 ‫REST API is going to be Lambda functions on DynamoDB. 134 00:05:37,300 --> 00:05:39,560 ‫Analytics is going to use other services 135 00:05:39,560 --> 00:05:43,490 ‫such as Kinesis or Pinpoint to capture some data. 136 00:05:43,490 --> 00:05:45,680 ‫Predictions using machine learning. 137 00:05:45,680 --> 00:05:49,430 ‫Interaction using the chatbot service from AWS. 138 00:05:49,430 --> 00:05:51,990 ‫Notifications is going to use Pinpoints 139 00:05:51,990 --> 00:05:55,010 ‫and SNS in the end, okay? 140 00:05:55,010 --> 00:05:57,490 ‫So as you can see, this is all from Amplify Studio 141 00:05:57,490 --> 00:06:01,888 ‫and then we can also create UI tools using Amplify. 142 00:06:01,888 --> 00:06:05,240 ‫And the idea is that you just design your Amplify file. 143 00:06:05,240 --> 00:06:07,300 ‫And then for example, your login, your buttons 144 00:06:07,300 --> 00:06:11,180 ‫your data interaction are contained within these libraries. 145 00:06:11,180 --> 00:06:12,150 ‫So just to give you an overview 146 00:06:12,150 --> 00:06:13,460 ‫but you can see Amplify Studio 147 00:06:13,460 --> 00:06:16,780 ‫and Amplify contains a lot of different things 148 00:06:16,780 --> 00:06:18,760 ‫that allow us to really integrate 149 00:06:18,760 --> 00:06:20,660 ‫all these AWS services together 150 00:06:20,660 --> 00:06:22,950 ‫and speed up the time to go in production. 151 00:06:22,950 --> 00:06:23,970 ‫And so as you can see, 152 00:06:23,970 --> 00:06:25,080 ‫data model is done, 153 00:06:25,080 --> 00:06:26,076 ‫we could edit and app. 154 00:06:26,076 --> 00:06:28,370 ‫Edit and do the app content. 155 00:06:28,370 --> 00:06:29,830 ‫We can configure login and sign up, 156 00:06:29,830 --> 00:06:32,730 ‫and then we do the UI, and then we will deploy. 157 00:06:32,730 --> 00:06:34,200 ‫But obviously I won't do all these things, 158 00:06:34,200 --> 00:06:35,860 ‫this was just and overview 159 00:06:35,860 --> 00:06:39,220 ‫and Amplify takes a lot of time to learn just on its own 160 00:06:39,220 --> 00:06:41,947 ‫Okay so when you're done, you can just delete the app. 161 00:06:41,947 --> 00:06:43,830 ‫You just type the delete keyword. 162 00:06:43,830 --> 00:06:44,663 ‫And what's going to happen 163 00:06:44,663 --> 00:06:46,950 ‫is that the app is going to be deleted. 164 00:06:46,950 --> 00:06:49,640 ‫And the CloudFormation Stack itself is going to be deleted 165 00:06:49,640 --> 00:06:52,320 ‫and everything will be clean up for us okay? 166 00:06:52,320 --> 00:06:53,630 ‫So that's it for this lecture, 167 00:06:53,630 --> 00:06:56,580 ‫I hope you liked it and I will see you in the next lecture.