Creating an Image Gallery App with React, AWS Amplify, & Amazon CodeWhisperer

Aug 16, 2023

Creating an Image Gallery App with React, AWS Amplify, & Amazon CodeWhisperer

Discover the power of CodeWhisperer, your AI coding companion, as we guide you through the process of creating a dynamic Image Gallery app using React and AWS Amplify. Join us in this comprehensive tutorial to master the art of app development with cutting-edge AI assistance.

☁️ Learn about Generative AI: https://community.aws/generative-ai

Resources:
🔗 Follow along on GitHub: https://github.com/tagazok/amplify-ga…
🔗 Amplify documentation: https://docs.amplify.aws/start/
🔗 Get started with Amazon CodeWhisperer: https://aws.amazon.com/codewhisperer/

Follow AWS Developers:
👾 Twitch: https://twitch.tv/aws
🐦 Twitter: https://twitter.com/awsdevelopers
💻 LinkedIn: https://www.linkedin.com/showcase/aws…

Follow Olivier!
🐦 Twitter: https://twitter.com/olivierleplus
💻 LinkedIn: https://www.linkedin.com/in/olivierle…

00:00 - Introduction
00:32 - Project presentation
00:42 - Check CodeWhisperer status in VSCode
00:54 - Configure my Amplify project
02:20 - List images on an Amazon S3 using Amplify
03:28 - Get Amazon S3 signed URL
04:35 - Delete files from Amazon S3 and how to use CodeWhiperer in html
06:00 - Upload images to Amazon S3
07:31 - CodeWhisperer helps me make bytes size more human readable
08:56 - Conclusion

#GenerativeAI #CodeWhisperer #developertools

Content

2.179 -> Advocate at AWS and in this video we're

5.52 -> going to see how to build an image

7.02 -> gallery app in react and host it on AWS

9.72 -> amplifier using my best AI friend card

11.7 -> whisper the code Whisperer is a

14.099 -> generative AI codic companion that you

16.08 -> can install your IDE

17.82 -> in this video we're going to use vs code

19.619 -> but it also works in other ideas like

21.48 -> intelligent for example

23.34 -> and it's impossible variety of languages

25.439 -> such as python Java JavaScript c-sharp

29.939 -> and type fruit let's begin so here is my

33.42 -> vs code where I have bootstrapped a very

35.579 -> basic application which is using react

38.1 -> and I've already set up the

39.48 -> authenticator here so we don't have to

40.98 -> do it later the other thing I want to do

43.44 -> is to make sure that code Whisperer is

45.12 -> installed and activated so I'm gonna go

48 -> in the AWS extension here and click on

50.76 -> the resume Auto suggestion to activate

52.92 -> card whisper

54.66 -> now this is an amplify project so what I

57.84 -> want to do is I want to start by

59.28 -> configuring my project so I'm going to

60.78 -> go in the index.js here

62.76 -> and loop what I'm going to do is I'm

64.739 -> going to write a comment

66.96 -> and a goal is that cartoon Whisperer

69 -> will take this comment and then propose

70.74 -> me some code okay so let's write import

73.439 -> the relevant packages and bootstrap and

75.42 -> amplify app and as soon as I type enter

78.72 -> can't Whisperer will analyze these

80.88 -> comments and then propose me some code

82.74 -> so let's type enter and proposing me

84.96 -> import MP5 just type tab to validate

88.56 -> typing Android continues as soon as I

91.08 -> mean as long as I type enter it'll

92.58 -> continue to propose me some code so now

94.38 -> you're proposing it to import the

96.06 -> configure file okay and then to

99.299 -> configure my project so that's what I

101.159 -> wanted to so let's save and see if it

103.02 -> works let's look at my browser and okay

105.84 -> no error my application works it's

107.88 -> pretty ugly but this is the synapse page

110.34 -> so let's go if you can fix this

113.399 -> ugly page I want to go in my ad.gs here

115.799 -> and I'm going to say okay I want to

117.6 -> import write UI CSS and proposing me to

120.84 -> yeah that sounds good to me let's save

123.119 -> and check I have this beautiful signing

126.119 -> page so that works okay let's sign in to

128.039 -> see my application now

130.44 -> password

131.819 -> sign in okay and this is my application

134.4 -> so right now that is nothing but the

135.9 -> goal is that I want to see my images

137.58 -> here and I also want to be able to do

139.319 -> things like upload new images for

141.06 -> example so let's see how we can do that

142.62 -> so I'm going to use amplify to connect

145.92 -> to my store right so I want to import

148.62 -> that first so that's why I recommend to

150.48 -> say impulse storage from amplify tapping

153.3 -> enter and that sounds good to me

156.18 -> but now I need a function to retrieve my

158.76 -> images so let's write a function so

160.98 -> let's just take a comment and say I want

163.26 -> a function to list all the files from

165.599 -> amazon3 I want to put the results in the

167.519 -> files variable we see the variables I

168.9 -> created earlier so let's type enter

171.9 -> so right now it's just proposing me the

173.94 -> the name of the function but I can

175.739 -> continue and type enter after that I

177.84 -> proposing me the rest of the function

179.64 -> now there's a little bit of adjustment

181.14 -> we need to do like for example it

182.58 -> doesn't know that it's result.results

184.8 -> that I need but that should work now and

187.319 -> I'm going to call this list file

189.599 -> function here in my user effects so I

191.58 -> have my list when I load the component

193.44 -> and let's go see in my browser if it

195.78 -> worked

197.819 -> see I have my three files well I don't

200.7 -> see the images because I only have the

202.14 -> keys of the images and I need the signed

204.48 -> URL so let's see if I can fix that too

207.72 -> so let's let's say we want a function to

210.54 -> get this tiny URL for my images so I'm

213.18 -> going to write a comment say I want a

214.62 -> function that returns a sign URL for F5

217.44 -> for my A3 storage and using the amplify

219.659 -> storage typing enter and here provides

222.959 -> me a function that sounds good to me so

225.06 -> now we see how to create function but

227.04 -> let's see if we can add comment inside

229.319 -> an existing function because I want to

230.94 -> retrieve the sun URL for all the files

232.86 -> in my storage so let's go inside my list

235.379 -> files function and said I want for each

238.26 -> result or results create a new property

240.239 -> that course gets Android and assign the

242.34 -> result to the new property called sign

244.44 -> your app sounds pretty easy and let's

246.18 -> type enter

247.379 -> so it's probably need to do like a loop

249.42 -> yeah that's good and then to call the

251.58 -> gets an URL uh for every uh result so

255.299 -> I'm going to type tabs to validate that

257.699 -> and you can see that it's calling the

259.859 -> good function so now let's go see in my

262.8 -> browser if it worked and I have my

264.54 -> beautiful images that's perfect well now

267.24 -> let's say there is one of the images I

269.16 -> don't really like and I want to delete

270.54 -> it so let's see where how we can add

272.34 -> this feature to my code so I'm gonna

274.979 -> need a function to delete files so again

277.46 -> a function to delete all files from

280.44 -> amazon3 using M5 storage you can see I

283.139 -> didn't even type Android already

284.4 -> proposing me the the functions so I

286.44 -> propose you need to do this delete

287.94 -> function and I love it because it even

289.68 -> proposes me to release the file options

291.54 -> when I delete the file it knows that I

293.34 -> want to refresh my list that's perfect

295.08 -> that we enter okay that's what it

297.72 -> proposes it's something you should know

299.1 -> that you don't need to accept every

301.08 -> proposition that photo Express does you

303.06 -> can just ignore it and say okay I don't

304.68 -> need that so now I want to

307.44 -> I mean call that function and I told you

310.8 -> that color if I optimized for JavaScript

313.199 -> but it is also works with other

314.46 -> languages like for example with the HTML

316.5 -> let's see how it works so I go to my

318.24 -> template here and I said I want a bet on

320.58 -> that course delete file with the

322.08 -> item.key as an argument let's type enter

325.44 -> can't Whisperer doesn't propose you

327.12 -> anything you can force it by using the

329.46 -> shortcut option C on Mac or alt C on

332.4 -> Windows and so we'll triggered code

334.08 -> Whisperer for you directly so here

336.3 -> proposing me like this button on click

338.1 -> delete file that sounds good for me

339.84 -> let's give it a label and then let's go

343.68 -> to my browser to see how it works so I

344.94 -> have my battery here so let's click C

346.8 -> and it works I mean my image is deleted

350.699 -> and it's refreshing delete perfect

352.68 -> that's what I wanted to now I mean maybe

355.02 -> I want my image back so let's see if I

357.18 -> can you know add a function to upload

359.22 -> images

361.02 -> so I'm gonna use the UI amplify

363.539 -> component here so I'm going to ask it to

366.539 -> import it so it's called fire products

369.18 -> import file uploader from amplifier UI

371.16 -> react okay that's the one and then I

374.88 -> don't need JavaScript I just need to

376.44 -> edit in my HTML so it's a bit more

378.78 -> complicated here for this component but

380.28 -> let's say I want to say if I open a

383.34 -> component with access file type images

385.199 -> because I only want images to be

387.12 -> uploaded and to S3 with acceptable

390.12 -> public and and then I want to call the

392.759 -> list files again so it refreshes my uh

395.34 -> my list of images okay let's see what it

397.8 -> proposes you want to type enter

400.259 -> so fire product that sounds good access

403.68 -> level public that sounds good too and

406.319 -> it's calling my list file afterwards so

408.18 -> perfect it doesn't need to be again a

410.58 -> little bit of adjustment here for the

412.08 -> image just to add forward slash star but

415.319 -> that should work now so let's go see my

417.24 -> browser if it works so I have this

418.979 -> beautiful UI look at this component okay

421.68 -> let's browse a file to re-add the images

424.74 -> I deleted here so I'm going to select it

427.94 -> click on upload file and my images

431.16 -> appears and the list is refreshed I just

433.979 -> show you how this company is amazing I

435.72 -> mean I can upload multiple files at once

437.58 -> so I'm going to upload like three files

439.199 -> for example

440.16 -> here open

442.62 -> I have the three images and they are

444.84 -> added to my list and that's perfect I

446.699 -> mean I love it

448.08 -> so now you have an application I mean

449.819 -> what can we do more you can you may

452.58 -> notice that we have this I tended size

454.919 -> so that's the side of the image which is

456.539 -> in bytes now that's not very nice so

459.18 -> let's try to make it more human readable

460.86 -> and see we can do a function for that

463.319 -> so here again I'm gonna say I want to

465.84 -> create a new film function right

467.88 -> so let's write a command and say

470.58 -> I want a function named format bytes

475.4 -> that uh forget that I mean and cutter is

479.94 -> even proposing me the rest of the

482.699 -> comment that will then be used to

484.979 -> generate the code I love it so it takes

487.08 -> the number as a parameter and returns a

489.06 -> string with the number rounded to to

492.12 -> decimal okay let's let's see what it

493.979 -> comes with that

496.38 -> um so I have uh this function okay give

499.44 -> me the whole function

501.06 -> well okay I'm gonna trust it for the

503.16 -> demo here I mean he does some math.log

505.5 -> things so let's just call the format

508.139 -> byte function so I'm going to change my

509.94 -> templates here remove the item.size and

512.58 -> call the format look at that card

514.62 -> whisper it even knows that I want to

516.539 -> call the function with what was there

518.039 -> before

518.94 -> okay let's save it and go in my

520.68 -> interface

521.64 -> that's brilliant look at that I have

523.38 -> this very nice looking uh image size now

527.339 -> so I think we've done we've done a great

529.019 -> job and we have a working application

531.12 -> here to list delayed and add new images

534.899 -> to my application

536.519 -> switches on how starting from a basic

539.16 -> project we built an image Gary

541.08 -> application in react with AWS amplifier

543.48 -> using card Whisperer and we just saw a

545.76 -> few features like whisper it can also

547.98 -> help you with things like security scan

550.08 -> or writing tests so if you want to learn

552.6 -> more about it check in the link in the

554.519 -> description below but if you want to see

556.38 -> more video like this one don't forget to

558.6 -> subscribe happy coding

Source: https://www.youtube.com/watch?v=jk7r8nMPnjY