Shadowing Practice: The No-Code Roadmap: How I Approach Prototyping - Learn English Speaking with Video

Elige un modo de práctica

Cada modo abre una sala de práctica a pantalla completa.

364 oraciones
Si las oraciones son demasiado cortas o largas, haz clic en Editar para ajustarlas.
1
Oh, this is so cool.
2
I love this.
3
Oh, cool.
4
Now we've got this modify button here.
5
This is perfect.
6
So I click modify.
7
Oh, yes, it's got this here.
8
This is amazing.
9
Awesome.
10
Oh, it even updates this helper text.
11
I love that.
12
I love that so much.
13
Now, I want to make one thing very clear.
14
I know how to code, but that doesn't mean you do.
15
And that's why you're here.
16
I'm going to teach you to build this stuff without even needing to code.
17
If you think you're going to walk away from this video figuring out how to build apps with AI, figure it out with Gemini,
18
and not learn anything, you can just turn this off.
19
Now, we're here to learn.
20
We're here to do some incredible stuff.
21
I want to change the game for you.
22
So if you're the type of person who's been thinking, I really want to build this stuff, but it all sounds a little hard.
23
I feel like I need to be able to code.
24
I don't know the tools.
25
I don't know where to start.
26
You're in the right place.
27
Hello, hello, hello.
28
Welcome everybody to the inaugural episode of Build It.
29
Without further ado, let's kick off our very first project.
30
This is something that is near and dear to my heart.
31
Fitness.
32
Well, when you work a lot, you got to take care of your body.
33
It's very important and I think I figured out the key to creating an agent.
34
The easiest way to spin up an agent, chatting it up in the Gemini web app.
35
Yeah, I know it sounds crazy.
36
And that, my friends, is what I did in order to spin up my very own customizable personal trainer application.
37
It was just chatting.
38
It was pretty sweet.
39
I'll show you.
40
Give me a workout plan for today.
41
This full body equipment free workout takes about 25 to 30 minutes and can be done anywhere.
42
Look at this workout.
43
This is great.
44
Got some weights.
45
Can you incorporate that into my workout?
46
This dumbbell focused full body workout takes about 30 to 35 minutes.
47
What is a dumbbell goblet?
48
A goblet refers to the specific way you hold a single dumbbell against your chest during exercises
49
so it resembles holding a large goblet or chalice.
50
Cheers.
51
I like the sound of that.
52
Hold up, hold up.
53
I also want to incorporate running into my weekly workout.
54
So are there any adjustments you'd make?
55
Adding running to your strength routine is great for cardiorespiratory fitness.
56
So we've got a weekly schedule.
57
All right, terrific.
58
Now, here's the thing.
59
I can go ahead and I can keep customizing this.
60
So I actually did this on my own and I did this in preparation for a Spartan race.
61
And if anyone knows what that is, it's a 5K obstacle course race.
62
I wanted to do it right.
63
And I found Gemini was such a helpful partner.
64
Here's the reason why.
65
Not only was I training for that, but I'm in a men's slow pitch softball league, which near and dear to my heart.
66
I didn't want my workouts to affect my performance.
67
You know, my like two at -bats when I'm out there trying to hit for power.
68
Or maybe, you know, my golf game, whatever it may be.
69
I don't want to have sore legs.
70
So it was very cool how I could tell Gemini all this different information about what I'm up to, what my goals are.
71
It'll fully customize my workouts here.
72
However, there were definitely some drawbacks of this agent.
73
It would often forget what day it is, what I did yesterday and it would get a little confused about timing.
74
But my biggest gripe was from a usability standpoint because if you're like me, when you're in the zone, you just want to keep going.
75
You want to keep doing your thing.
76
Got my music blasting and my headphones.
77
I'm grooving and I got to kind of go back and find, what was it?
78
All right, dumbbell, goblet, right here.
79
Got my focus.
80
So this user experience is not great.
81
The memory wasn't great.
82
And it was also very much over -indexing on the things I was trying to focus on.
83
Like, for example, oh, I've got a, I said one time, I said, I've got a double header in softball tomorrow.
84
Make sure my legs aren't too sore.
85
And for every other workout that I did, it always assumed I had a double header.
86
And, you know, this is very cool because think about this.
87
On the one hand, you've got an agent that's so smart
88
that it's able to take into account the things that you care about, remember them, incorporate them into all the future workouts that you get.
89
But on the other hand, the slightest mistake or misunderstanding about what day it is, when the doubleheader is, how did it actually go.
90
It seems to get a little bit in the way.
91
So I was thinking, rather than do this, why don't we build our own agent and our own app?
92
All right, let's get to it.
93
Let's get to it.
94
This is the way that I would approach this problem.
95
I use Google Antigravity.
96
I use AI Studio.
97
I use these different tools.
98
But I love the web app.
99
I really do.
100
I really do.
101
It's just an easy way to start, and I'll tell you why.
102
You know what's really cool about AI Studio and Google Antigravity?
103
They can do things, right?
104
These agents have tools that allow them to write code.
105
Pretty nifty.
106
But everything that the agent does can take its attention in a slightly different direction, right?
107
Because these agents, they're goal -oriented, right?
108
So if you're telling the agent, hey, I want to build an app, it's like an excited puppy who wants to go build the app.
109
So we got to slow down.
110
I'm a huge fan of leveraging AI as like an extension of my brain, a thinking partner.
111
So let's get started doing that.
112
Here is the prompt I concocted.
113
This is not some perfect prompt that creates the best plan or something like that.
114
I just paused the camera and I typed this all in real time.
115
All right, let's take a look at the response here.
116
Your core thesis is completely spot on.
117
Standard chat interfaces are fantastic for creative generation, broad reasoning, and fluid conversation, but they are fundamentally flawed for task execution,
118
reliable state management, and real -time tracking.
119
So if I were to break down this entire response, there are a few problems and a few things we want to solve for.
120
So number one, we need a separation of concerns, right?
121
We need one part of our application, which is the creative kind of brain of our personal trainer.
122
And then we have the other part of our application, which is kind of like your more traditional fitness tracking type apps.
123
Not really a surprise from my perspective, but I think this illuminates how to fit AI into an application.
124
And the key is knowing where to put it and how to use it.
125
I think this will be a lot better if I can kind of see and visualize it.
126
There's a tool called Stitch, which is really fun for creating these types of UIs.
127
It came up with two different types of views that we can use.
128
So we're going to start with those and then work out from there.
129
It seems like there are two main views in our application.
130
I'm going to use Google stitch to generate the interfaces can you provide a prompt
131
i can share with the agent and stitch
132
so this is google stitch a very cool product
133
and the whole premise of this is
134
that it's going to help us with the design side
135
and even though i love front end it's something
136
i've always worked on designs never really been my forte i like to think it is
137
but i've been told it's not so
138
So let's use the help of AI.
139
Go back to our prompt.
140
I'm not even going to read this.
141
I'm going to copy and paste it in, and I just want to see what happens.
142
Look at this.
143
This is awesome.
144
It's actually drawing these in real time.
145
Okay, so on the left, it's generating our screen that's in the kind of chat interface
146
and on the right it's got the tracker here
147
when you're working with AI one of the it's
148
so easy to just say let's grab these screenshots we'll just throw them in AI studio
149
and make our app but when you do
150
that you end up letting the agent make a lot of the decisions for you
151
which is why it's
152
so important to do this upfront this to me isn't very useful at all this card it says today's workout
153
and then it says five exercises and then I can launch it.
154
In this interface, I wanna be able to make changes to my workout, see what the changes were,
155
see what the results are without having to flip back and forth in my application.
156
So let's go ahead and ask for that.
157
All right, we've got our updated card here.
158
Now one of the things I'm wondering is what if somebody wants to like,
159
they wanna, to, they don't necessarily want to do the exercises in this order.
160
So one of the things that I love to do is switch off.
161
Like I'll do, you know, I'll group two exercises together and I'll alternate between those or something like that.
162
Let's see if we can give some feedback to get some alternate views for this.
163
Part of the benefit of doing this work here is that I am iterating on the design Then...
164
And it's a lot more cost efficient to iterate on the design
165
this way than to actually iterate it on it in AI Studio.
166
Because AI Studio has to build the entire application, run the application, make sure it works.
167
And that costs a lot of tokens to do that.
168
We don't need to write code for this part.
169
We're just kind of figuring out where things should go, what it should look like, and so forth.
170
Oh, this is now we're getting somewhere.
171
This is looking pretty, pretty cool.
172
Okay, supersets.
173
Yes, that was the word I was looking for.
174
So we've got primary strength, and then it's got a superset where we do these together, accessory.
175
All right, so here's the feedback that I'm providing to Stitch.
176
I'm not sure what the start button at the top is, this one.
177
And I don't know why it says 12 ,500 pounds.
178
So unless there's some benefit I don't realize, remove this subcard, hopefully it recognizes this as a subcard, containing 12 ,500 pounds in 50 minutes.
179
Instead, bring the 50 minutes to the header section.
180
In addition, remove the start button as it's unclear what it's for.
181
Finally, let's add a little non -intrusive button next to each workout, or rather each exercise, to learn more.
182
For example, something I'd click if I didn't know what an Arnold Press is.
183
All right, cool.
184
So it took care of that very easily.
185
Move the info button to the right of the row and ensure a bit of padding to its left.
186
That's more like it.
187
Let's add a new view that portrays what happens when you click this info button.
188
Oh, this is awesome.
189
I love this.
190
So now we have a few things here.
191
We have our workout preview, which we can adjust just with basic chatting, things like that.
192
And we've got also we've got the info button that that is how to perform it.
193
This is this is pretty much everything I need from the usability standpoint.
194
Now the last thing that we need to address, I wanna work on this.
195
We've made a number of changes to the workout preview, for example, incorporating workout structure.
196
Can you update this view to incorporate those changes?
197
It would also be nice to have access to the info button in this view,
198
in case I forget what the workout is while on mid exercise.
199
That is something that's actually happened to me.
200
So let's see if we can address this.
201
With that, we've got three pretty good views that kind of define the core of the app,
202
the usage part.
203
What I've done is I've grabbed three pictures from Stitch.
204
I pasted them back in my Gemini chat session, and I wrote, here are some of the views that I generated with your prompt plus iteration.
205
With that, I think it's time to move on to AI Studio.
206
Can you provide me with a prompt I can give to AI Studio to generate my app?
207
I've gone ahead and just taken that prompt, and let's hit build.
208
Build it!
209
So while this designs, it's actually given me a few awesome previews here.
210
Oh, this is cool.
211
All right, so I'm going to hit select this design.
212
With that, Gemini 3 .7 Flash ran for 128 seconds, and it generated a working app.
213
This looks pretty close to what we did.
214
Let's go ahead and make some changes, and I want to show you some cool tools that we can use.
215
So first off, we've got this edit tool, which is very awesome.
216
So I'm just going to say remove this.
217
Workout time should be listed underneath the workout title.
218
Perfect.
219
Move the hypertrophy badge, which is what we call this thing, spaced evenly vertically between the 50 min duration and the chest, shoulders, triceps.
220
This way, today's workout preview is only one line.
221
And while that works, we can actually just look at the app and see what else we might want to change.
222
So for example, what happens when we click this? oh, this is so cool.
223
I love this.
224
Back to workout.
225
So that worked out really well.
226
And that was one of those iterations that we got from Stitch Directly.
227
So that is super cool how that just worked.
228
This looks pretty fantastic, but there's one more view that I think we're missing.
229
When I was doing this, one of the things I like to do was kind of plan out my entire week at a time.
230
So we've got the workout preview card, but I want to see if we can add a weekly preview card.
231
So let's go ahead and do that.
232
As I'm looking through these changes and I'm looking at the app, one of the things I'm seeing is that this user experience could be better.
233
The challenge that I'm seeing now that we've added this kind of weekly preview tab here.
234
I don't really see these items fitting nicely inside of our chat.
235
So I want to try something here.
236
I want to try to see
237
if we can just pull out all of the workout and the weekly preview to this workouts tab.
238
And then we can just kind of get rid of this all together.
239
Because I don't really need a library of workouts.
240
That's kind of the whole reason why I have an AI personal trainer.
241
Like I don't need to go through this library and pick.
242
The trainer is going to do that for me.
243
So instead, we'll keep this view in order to keep track of all the workouts that we're going to do,
244
upcoming workouts, and that way we can organize and launch them.
245
I'd love a history of workouts elsewhere, but we're basically going to replace this section.
246
All right, this part feels like a lot of typing, so I'm going to speak this into existence.
247
So as I'm looking at the app, I'm noticing that I don't love this user experience of having the workout preview inside the app.
248
So instead, what I'd like to do is I'd like to replace the workouts tab.
249
And the workouts tab, instead of having kind of a library of workouts that I can go to,
250
I'd like it to list the current weeks list the current
251
weeks set of workouts and then
252
if I click any one of those workouts it'll open a workout preview just like this
253
and then I can hit back
254
and it'll go to the full week let's go ahead
255
and see what this generates on its own
256
and then we'll take it from there let's go to the full week view
257
I want to see what this looks like we have this chest shoulders
258
if i go preview comes in here launch active workout
259
so now we're cooking and we have this coach page the whole reason
260
that we have this chat is
261
because i want to be able to update anything here
262
but with natural language that includes the full week that also includes the individual day's workouts.
263
So I have a better solution for this.
264
So we're going to remove this card here, okay?
265
And this is going to be a pure chat.
266
Got these ask coach recommendations.
267
I'm fine with that.
268
It doesn't bother me.
269
What is more important, however,
270
I'd like to have a modify button that is in a fixed position at the bottom of this page and this page.
271
And when I click that modify button,
272
what it does is it takes me back to the coach tab and it attaches context from that workout to my prompt.
273
And that way, if I say I come in here and I don't like this Arnold press, I want to replace it,
274
all I would do is I'd hit modify and it would take me back here and I'd say,
275
can you replace the Arnold press with a standard bench press or something like that?
276
And the beauty of that is that by attaching that context to my prompt in the form of that modify button,
277
then the agent would go ahead and update the workout for me.
278
And in doing so, it knows exactly which workout to update
279
and it can kind of like attach whatever it is I'm doing.
280
So let's go ahead and try to prompt that into existence with my speak to text button.
281
All right, that was a great change.
282
Now we're making progress.
283
What I would like to do is on the workouts tab,
284
I'd like to add a fixed position modify button to the bottom of the page,
285
just above the bottom menu there.
286
The purpose of this is to be able to easily attach the current context of the page
287
that way I can I can give the agent my coach
288
whatever it context it needs in order to make updates
289
that I request when I send my chat the agent will know
290
that this is the exact workout I'm talking about
291
and then it'll go ahead and fix it I don't want to make any updates to the coach page just yet.
292
And when somebody clicks modify, what I'd like to do is,
293
well, first of all, I'd like to navigate to the coach page and then bring some sort of visual cue, maybe a chip with an X.
294
And that chip indicates which workout or which week I'm looking at.
295
And it's done.
296
Let's try it out.
297
So if we go over to our workouts tab.
298
Oh, cool.
299
Now we've got this modify button here.
300
This is perfect.
301
So I click modify.
302
Oh, yes, it's got this here.
303
This is amazing.
304
Awesome.
305
So now whenever I were to, oh, it even updates this helper text.
306
I love that.
307
I love that so much.
308
Okay, awesome.
309
So now, this is very cool.
310
So now whenever I type something, oh, it even gives me some, this is fantastic.
311
All right, cool.
312
So now when I type this in, it will make changes about the week.
313
All right.
314
All right.
315
So this is looking great.
316
Now, one of the things I want to change is the bottom navigation menu.
317
So currently we have coach workouts, progress settings.
318
let's change the label of workouts to week this is going to be our schedule
319
or if you think there's a better label for
320
that you could use that um and then i want a fifth item
321
which is kind of like a circle that's the main the main nav item
322
if you will and when you click that it brings up the active workout for the day.
323
It brings up the current day's workout.
324
Finally, we should remove the launch active workout button from the workout preview page.
325
All right, beautiful.
326
That worked out very well.
327
So you can see here we've got our today button.
328
However, there's one thing I forgot to do, which is hit record before my last prompt.
329
Basically, I asked for just the current set here, and then we've just got all the other exercises.
330
So that is, I think, a much nicer flow because basically all I care about is what I'm doing now.
331
And as you can see, this first one just goes through one, two, three.
332
But when I get to the fourth one, you'll notice it switches from the incline dumbbell press
333
because I do all three of those in a row and then it goes to the Arnold press.
334
Now what I'm curious about is, oh awesome!
335
So because this is a superset, it actually switches, which is perfect.
336
Oh this is rad!
337
Okay this is pretty much exactly how I wanted this to work.
338
And then down here we've got the other exercises in session
339
so I think for the other exercises in this section so
340
if we go back to this view I really like this setup
341
so what I would love to see is everything from here
342
primary strength down to the bottom of this card in the
343
today place over here all right beautiful looks like it finished let's out how it did
344
so we get over here moment of truth okay this is very cool oh oh
345
and it did this feature even though i didn't ask for it
346
which is actually what i wanted which is
347
when you click this it brings you uh
348
that one with the info info giving you the actual info this is
349
so awesome this is exactly how I wanted it to be.
350
All right.
351
Terrific.
352
All right.
353
And with that, this is where we're going to call it.
354
We learned a lot, right?
355
We went from design to prompt to stitch to AI studio to editing an AI studio.
356
But what I really want to do is take this app to the next level.
357
And the first part of that is really fleshing out the product, understanding it, and not just the features,
358
but we need to have a full understanding of both how it works and how it's supposed to work.
359
And I think we've now hit that critical milestone where we can take this to the next level.
360
I hope you stick around and join me for the next video when we do exactly that.
361
I'm Devin.
362
I hope you've enjoyed building with me.
363
See you the next time on Build It!
364
Thank you.

Descargar app

Todo lo que necesitas para hablar con fluidez

Pronunciación con IAEvalúa cada oración
Práctica de IPADomina cada sonido
VocabularioConstruye tu banco de palabras
Juego de vocabularioAprende mientras juegas

Mismo canal

FOR YOU

Recomendar Video

Vocabulario y notas de pronunciación para esta lección

Esta lección de conversación se basa en el vídeo “The No-Code Roadmap: How I Approach Prototyping”. Las palabras que más se repiten: workout, button, app, cool. Este vídeo tiene 364 frases y 3893 palabras para practicar shadowing. La parte hablada dura 24:35. El hablante habla a un ritmo natural de unas 158 palabras por minuto, cercano a una conversación cotidiana. El 85 % de las palabras está entre las 3.000 más comunes del inglés; conviene repasar el resto antes de empezar.

Vocabulario clave de este vídeo

15 palabras del vídeo que vale la pena aprender, con su pronunciación y significado:

PalabraPronunciaciónSignificado
workout sustantivo/ˈwɝk.aʊ̯t/entrenamiento
preview sustantivo/ˈpɹiːvjuː/preestreno, premier
prompt verbo/pɹɑmpt/llevar a, concitar
modify verbo/ˈmɑ.dɪˌfaɪ/modificar
stitch sustantivo/stɪt͡ʃ/puntada, punto
generate verbo/ˈd͡ʒɛn.ə.ɹeɪt/generar
incorporate verbo/ɪŋˈkɔɹ.pɚ.eɪt/incorporar
interface sustantivo/ˈɪn(t)ɚˌfeɪs/interfaz
trainer sustantivo/ˈtɹeɪnɚ/entrenador, entrenadora
attach verbo/əˈtæt͡ʃ/adjuntar, atachar
fitness sustantivo/ˈfɪt.nəs/ámbito, fitness
header sustantivo/ˈhɛdɚ/encabezado, encabezamiento
label sustantivo/ˈleɪ.bəl/etiqueta, rótulo
spin verbo/spɪn/girar, rotar
feedback sustantivo/ˈfiːdˌbæk/valoración, comentario

Phrasal verbs que vas a escuchar

PalabraPronunciaciónSignificado
go ahead verbo/ˌɡoʊ əˈhɛd/venga, adelante
figure out verboaveriguar, captar
bring up verbolevantar, alzar
go through verboatravesar
hold up verboaguaitar, esperar
break down verbodescomponerse, averiarse
come up with verboingeniar, ingeniarse
end up verboterminar, ir a parar

Frases que vale la pena repetir

Frases cortas y completas del vídeo que puedes reutilizar en la conversación diaria:

  • We're here to do some incredible stuff.
  • I don't know the tools.
  • I don't know where to start.
  • Can you incorporate that into my workout?
  • Can you update this view to incorporate those changes?

Gramática en este vídeo

Las estructuras que más usa el hablante, con las palabras exactas del vídeo:

EstructuraEn el vídeo
Present perfect have/has + participio pasado — una acción pasada que sigue importando ahorai've always worked · i've been told · We've made
Oraciones de relativo who / which + oración — información extra sobre una persona o cosaapplication, which is · Stitch, which is · tool, which is
Voz pasiva be + participio pasado — importa lo que ocurre, no quién lo hacecan be done · i've been told · should be listed

Pronunciación a tener en cuenta

El hablante usa 124 contracciones y formas reducidas, como I'm, we've, don't. Dilas en su forma corta, tal como las oyes.

  • Los sonidos de “th”: bother /ˈbɑðɚ/, underneath /ˌʌndɚˈniθ/, thesis /ˈθisɪs/
  • Los sonidos de “sh” y “zh”: extension /ɪkˈstɛnʃən/, efficient /ɪˈfɪʃənt/, preparation /ˌpɹɛpəˈɹeɪʃ(ə)n/, execution /ˌɛk.sɪˈkjuː.ʃən/, flesh /flɛʃ/
  • Palabras largas — cuida el acento: incorporate /ɪŋˈkɔɹ.pɚ.eɪt/, necessarily /ˌnɛs.əˈsɛɹ.ə.li/, preparation /ˌpɹɛpəˈɹeɪʃ(ə)n/, execution /ˌɛk.sɪˈkjuː.ʃən/, separation /ˌsɛp.əˈɹeɪ.ʃən/

Sonidos difíciles para hispanohablantes:

  • s + consonante al inicio — sin añadir una “e” delante: stitch /stɪt͡ʃ/, spin /spɪn/, standpoint /ˈstændpɔɪnt/, slight /slaɪt/, screenshot /ˈskriːn.ʃɑt/
  • /v/ — no es /b/: los dientes tocan el labio inferior: preview /ˈpɹiːvjuː/, solve /sɒlv/, navigation /nævɪˈɡeɪʃən/, leverage /ˈlɛv.(ə.)ɹɪd͡ʒ/, groove /ɡɹuv/
  • /z/ — sonora, no /s/: confused /kənˈfjuːzd/, cheers /t͡ʃɪəz/, pause /pɔːz/, organize /ˈɔɹɡənaɪz/, headphones /ˈhɛdfoʊnz/

Cómo practicar con este vídeo

  1. Escucha el vídeo entero una vez sin hablar y anota las palabras que no conoces.
  2. Empieza a velocidad 0,75×, haz shadowing frase por frase y vuelve a la velocidad normal cuando te resulte fácil.
  3. Grábate y compara con el original, prestando atención a palabras como workout, preview, prompt.

¿Qué es la Técnica de Shadowing?

Shadowing es una técnica de aprendizaje de idiomas respaldada por la ciencia, desarrollada originalmente para la formación de intérpretes profesionales y popularizada por el políglota Dr. Alexander Arguelles. El método es simple pero poderoso: escuchas audio en inglés nativo y lo repites en voz alta de inmediato, como una sombra que sigue al hablante con solo 1-2 segundos de retraso. A diferencia de la escucha pasiva o los ejercicios de gramática, el shadowing obliga a tu cerebro y músculos de la boca a procesar y reproducir simultáneamente patrones de habla reales. Las investigaciones muestran que mejora significativamente la precisión de la pronunciación, la entonación, el ritmo, el habla conectada, la comprensión auditiva y la fluidez al hablar, convirtiéndola en una de las metodologías más efectivas para la preparación del IELTS Speaking y la comunicación en inglés en el mundo real.

Técnica de shadowing: lee la guía completa paso a paso →