ChatGPT ha creato la mia APP in meno di 10 minuti ... 📱🤖 — Transcript

Full transcript

1. 0:00oggi Vi mostro Come creare un'app per il
2. 0:02vostro telefono senza scrivere nemmeno
3. 0:04una riga di codice vedremo insieme tutto
4. 0:06quanto il processo a partire dall'idea
5. 0:08fino ad arrivare all'App funzionante sul
6. 0:10nostro smartphone e ovviamente ci faremo
7. 0:12aiutare dall'intelligenza artificiale in
8. 0:15particolare da chat GPT che scriverà
9. 0:17tutto quanto il codice al posto nostro
10. 0:19Eccoci quindi su chat GPT vi lascio il
11. 0:21link qui sotto in descrizione la prima
12. 0:23cosa che dobbiamo fare è spiegare
13. 0:25all'intelligenza artificiale che tipo di
14. 0:27App vogliamo creare facciamo quindi una
15. 0:29domanda di questo tipo iniziamo dicendo
16. 0:31Sei un software ingegnere esperto vuoi
17. 0:33aiutarmi a creare la mia app voglio
18. 0:35creare un'app in JavaScript
19. 0:37Specifichiamo poi che l'App sarà
20. 0:39composta da questi tre file
21. 0:44index.html.gz di queste righe fate un
22. 0:47copia incolla perché tanto vanno sempre
23. 0:49bene così come sono proseguiamo poi
24. 0:52spiegando che tipo di App vogliamo
25. 0:54creare Io ad esempio voglio un'app che
26. 0:56sia una sorta di tut list quindi unapp
27. 0:58che mi aiuti a gestire un elenco di
28. 1:00attività da fare spiego come funziona
29. 1:02l'app e chiudo poi la domanda scrivendo
30. 1:04rispondi spunta verde se hai capito che
31. 1:07app voglio creare a questo punto quindi
32. 1:09premo invio Aspetto che chat GPT
33. 1:12risponda come vedete ha risposto spunta
34. 1:14verde quindi effettivamente ha capito
35. 1:16che cosa voglio fare a questo punto
36. 1:18Quindi chat GPT ha capito che app voglio
37. 1:20creare quello che faremo è chiederle di
38. 1:22scrivere il codice al posto nostro ci
39. 1:24servono tre blocchi di codice del codice
40. 1:26HTML del codice CSS e del codice
41. 1:29JavaScript
42. 1:30se non sapete che cosa sono non vi
43. 1:31preoccupate perché tanto sarà
44. 1:33l'intelligenza artificiale a scrivere
45. 1:35tutto questo codice al posto nostro il
46. 1:37primo blocco di codice che faremo creare
47. 1:39a chat GPT è il codice HTML quando
48. 1:41chiediamo a chat GPT di creare il codice
49. 1:43HTML le spieghiamo anche come vogliamo
50. 1:46che sia strutturata la nostra app Io ad
51. 1:49esempio ho spiegato che voglio tre
52. 1:50sezioni una sezione per aggiungere le
53. 1:52nuove attività una sezione Dove vedo le
54. 1:55attività che ancora devo fare e infine
55. 1:57una sezione Dove vedo le attività che ho
56. 1:59completato anche in questo caso quindi
57. 2:01premiamo invio e aspettiamo che chat GPT
58. 2:03scriva tutto quanto il codice al posto
59. 2:05nostro Ecco quindi che chat GPT ha
60. 2:07scritto il codice HTML Per noi quello
61. 2:10che facciamo adesso è chiederle di
62. 2:12scrivere anche il secondo blocco di
63. 2:13codice quindi il codice CSS come vedete
64. 2:16la domanda è già pronta prosegui
65. 2:18scrivendo il codice CSS quando chiediamo
66. 2:21di scrivere il codice CSS andiamo anche
67. 2:23a specificare come vogliamo che sia la
68. 2:25nostra app dal punto di vista estetico
69. 2:28ad esempio io ho scritto voglio che la
70. 2:30mia app abbia uno sfondo verde acqua
71. 2:32anche in questo caso premiamo invio e
72. 2:34aspettiamo che chat GPT scriva il codice
73. 2:36mentre chat GPT scrive il codice per noi
74. 2:39ragazzi Vi ricordo come sempre di
75. 2:40lasciare un Like a questo video e
76. 2:42soprattutto di iscrivervi al canale Così
77. 2:44non vi perdete tutti quanti i prossimi
78. 2:45video a tema intelligenza artificiale
79. 2:47Inoltre se avete dubbi domande oppure
80. 2:49curiosità scrivete tutto quanto qui
81. 2:51sotto nei commenti e io poi vi rispondo
82. 2:53chat GPT ha scritto anche il codice CSS
83. 2:56come vedete a questo punto ci manca
84. 2:58soltanto l'ultimo blocco di codice
85. 3:00quindi il file.js il file JavaScript
86. 3:03quello che facciamo quindi è fare una
87. 3:05domanda di questo tipo prosegui
88. 3:06scrivendo il codice JavaScript
89. 3:08semplicemente andiamo a ricordare a chat
90. 3:10GPT Come funziona la nostra applicazione
91. 3:13Quindi facciamo un copia incolla di
92. 3:15quello che abbiamo già scritto nella
93. 3:16primissima domanda anche in questo caso
94. 3:18premiamo invio e chat GPT scriverà tutto
95. 3:21quanto il codice per noi Ecco quindi che
96. 3:23chat GPT ha scritto anche il codice
97. 3:25JavaScript quindi l'ultimo blocco di
98. 3:27codice che ci mancava quello che
99. 3:28facciamo a questo punto è andare a
100. 3:30controllare che tutto quanto il codice
101. 3:32funzioni e quindi che l'App sia
102. 3:34effettivamente come la vogliamo per
103. 3:36farlo utilizziamo un sito chiamato
104. 3:38codepen vi lascio il link qui sotto in
105. 3:40descrizione questo sito ci permette di
106. 3:42provare gratuitamente la nostra app così
107. 3:45da assicurarci che sia effettivamente
108. 3:46tutto ok Eccoci quindi su codepen vi
109. 3:49lascio il link qui sotto in descrizione
110. 3:51davvero semplicissimo da utilizzare
111. 3:53quello che dobbiamo fare sono dei
112. 3:55Semplici copia incolla Infatti noi
113. 3:57andiamo su chat GPT Copiamo il codice
114. 4:00HTML e poi lo incolliamo qui sulla
115. 4:02sinistra su codepen dove c'è scritto
116. 4:04appunto HTML torniamo poi su chat GPT
117. 4:07Copiamo il codice CSS lo incolliamo qui
118. 4:10al centro su codepen e infine torniamo
119. 4:13su chat GPT Copiamo il codice JavaScript
120. 4:16e lo incolliamo qui sulla destra su
121. 4:18codepen una volta che abbiamo fatto il
122. 4:20copia incolla dei tre blocchi di codice
123. 4:22quello che vediamo qui in basso è
124. 4:23un'anteprima funzionante della nostra
125. 4:25app quindi possiamo vedere se funziona e
126. 4:27se ci piace Facciamo un esperimento
127. 4:30Aggiungo una tasca ad esempio iscriviti
128. 4:32al canale e lascia like premo invio e
129. 4:37come vedete la task risulta to do Quindi
130. 4:39da fare se io clicco sulla Task risulta
131. 4:42done E quindi che è stata completata a
132. 4:44questo punto quindi abbiamo il nostro
133. 4:46codice siamo sicuri che l'App funziona
134. 4:48da qui in poi ragazzi è tutto quanto
135. 4:50facilissimo il grosso Lo abbiamo fatto
136. 4:52che cosa facciamo Andiamo su una
137. 4:54qualsiasi cartella del nostro PC ad
138. 4:56esempio il desktop tasto destro nuovo
139. 4:59creiamo una nuova cartella la chiamiamo
140. 5:01app chat GPT Chiamatela Come volete
141. 5:05apriamo Quindi questa cartella doppio
142. 5:07clic di nuovo tasto destro nuovo
143. 5:10documento di testo che cosa sto facendo
144. 5:13Praticamente il nostro obiettivo adesso
145. 5:14è andare a fare un copia incolla dei tre
146. 5:17file che abbiamo creato HTML CSS
147. 5:19JavaScript all'interno di questa
148. 5:21cartella Così da avere questi file sul
149. 5:23nostro PC anche in questo caso
150. 5:25semplicemente dei copie incolla quindi
151. 5:27ho creato il mio documento di testo
152. 5:29doppio click lo apro Faccio un copia
153. 5:31incolla del codice HTML vado poi a
154. 5:34salvarlo con ctrl S chiudo il documento
155. 5:38e poi clicco F2 per rinominarlo lo
156. 5:41chiamiamo ind
157. 5:43Index
158. 5:45HTML molto semplice semplicemente si
159. 5:48tratta di un copia incolla Facciamo la
160. 5:50stessa cosa anche col file CSS
161. 5:52chiamandolo styles.css e col file
162. 5:55JavaScript chiamandolo script.js Ecco
163. 5:59quindi che ho ho finito coi copia
164. 6:00incolla davvero semplicissimo come vi ho
165. 6:02mostrato per il file
166. 6:09index.html.gz A questo punto quindi noi
167. 6:12abbiamo la nostra cartella che contiene
168. 6:14i tre file con i tre blocchi di codice
169. 6:16scritti da chat GPT tasto destro e
170. 6:20clicchiamo su comprimi nel file zip ci
171. 6:23mette pochissimi secondi abbiamo app
172. 6:25chat GPT Zip per andare avanti ci serve
173. 6:28il sito Tiny host anche questo gratis vi
174. 6:32lascio il link qui sotto in descrizione
175. 6:34una volta che siamo sul sito che è
176. 6:35questo qui clicchiamo su upload e poi
177. 6:38qui in alto su Zip clicchiamo quindi su
178. 6:41upload file e andiamo a selezionare la
179. 6:44cartella puntozip che vi ho appena fatto
180. 6:46creare quindi app chat GPT zip
181. 6:49clicchiamo su apri e poi clicchiamo su
182. 6:51publish dopo qualche secondo il
183. 6:53caricamento sarà completato possiamo
184. 6:55quindi cliccare su questo link che ci
185. 6:57hanno creato ci clicchiamo e come vedete
186. 7:00abbiamo la nostra app all'interno del
187. 7:02browser Quindi ad esempio posso scrivere
188. 7:04non so fare la pizza premo invio e come
189. 7:07vedete l'app funziona torniamo quindi su
190. 7:09Tiny host andiamo Qui in basso
191. 7:11clicchiamo su Copy link andiamo poi su
192. 7:14un altro sito web che si chiama web into
193. 7:16app anche questo è gratis vi lascio il
194. 7:18link qui sotto in descrizione cosa ci
195. 7:20permette di fare questo sito partendo
196. 7:22dal link di Tiny host quindi il link
197. 7:25della nostra pagina web dove abbiamo la
198. 7:27nostra applicazione possiamo creare la
199. 7:29versione per smartphone di quella
200. 7:31applicazione il tutto in modo automatico
201. 7:34Basta inserire il link che cosa facciamo
202. 7:36quindi andiamo qui dove c'è scritto URL
203. 7:38incolliamo il link di teny host che
204. 7:40abbiamo appena copiato Poi scegliamo un
205. 7:43nome per la nostra app ad esempio app
206. 7:45YouTube ai nome a caso clicchiamo poi su
207. 7:49Next possiamo modificare l'icona quindi
208. 7:52l'icona della nostra app scegliamo ad
209. 7:54esempio questo simbolo ok E poi
210. 7:57clicchiamo qui in basso sulla destra su
211. 8:00Make app dopo circa un minuto la nostra
212. 8:02app è pronta la vediamo qui app YouTube
213. 8:05ai quello che facciamo è cliccare su
214. 8:07questa nuvoletta con la freccia in basso
215. 8:09ci clicchiamo download free download all
216. 8:13files e andiamo quindi a scaricare la
217. 8:16cartella ZIP con dentro la nostra app
218. 8:18andiamo quindi sul nostro PC nella
219. 8:20cartella Download come vedete abbiamo
220. 8:22Questa cartella che abbiamo appena
221. 8:24scaricato app YouTube ai 1.0 tasto
222. 8:27destro estrai tut estrai e aspettiamo
223. 8:32quindi che si completi l'estrazione c'è
224. 8:34voluto davvero pochissimo clicchiamo
225. 8:36quindi su Android e poi vediamo questo
226. 8:39file
227. 8:40appelee apk questo qua è il file che ci
228. 8:44interessa e che ci permetterà di
229. 8:46installare la nostra applicazione sul
230. 8:47telefono quello che facciamo a questo
231. 8:49punto è prendere questo file apk e
232. 8:51trasferirlo sul telefono si può fare in
233. 8:54diversi modi Io ad esempio lo faccio
234. 8:55aiutandomi col Drive quindi qui sulla
235. 8:58destra ho il mio Google Drive qui sulla
236. 9:00sinistra ho il mio file apk trascino il
237. 9:04file all'interno di Google Drive e
238. 9:06aspetto che si completi il caricamento
239. 9:08Eccomi quindi sul telefono anche in
240. 9:10questo caso sono su Drive perché devo
241. 9:12andare a recuperare il file apk che mi
242. 9:14permetterà di installare la mia
243. 9:15applicazione come vedete il file apk è
244. 9:18il primo a release.apk semplicemente ci
245. 9:21clicco sopra ci vuole qualche secondo
246. 9:24dice che l'autore è sconosciuto ma in
247. 9:25realtà sono io a questo punto clicchiamo
248. 9:28su installa Ci vuole davvero pochissimo
249. 9:30la nostra app verrà installata Ecco che
250. 9:33è pronta clicchiamo su
251. 9:35Apri come vedete Quindi abbiamo la
252. 9:38nostra app funzionante sul telefono
253. 9:40Facciamo una prova ad esempio iscriversi
254. 9:43al canale premo invio e come vedete
255. 9:48questa attività è nella sezione Todo Se
256. 9:50ci clicco sopra è nella sezione done
257. 9:52abbiamo creato Quindi la nostra app è
258. 9:54stato davvero facilissimo ci abbiamo
259. 9:56messo meno di 20 minuti ovviamente
260. 9:58ragazzi non possiamo creare app
261. 10:00stratosferiche tipo WhatsApp Però
262. 10:02possiamo creare un'ottima base per la
263. 10:04nostra app e andare poi ad arricchirla
264. 10:07complicarla e così via magari facendo
265. 10:09scrivere sempre il codice a chat GPT
266. 10:11Come sempre vi ricordo di lasciare un
267. 10:13Like a questo video mi aiutate
268. 10:14tantissimo a far crescere il canale a
269. 10:16portare nuovi contenuti Ovviamente se
270. 10:18volete Fatemi sapere qui sotto nei
271. 10:20commenti Quali altri video vorreste
272. 10:22vedere sul canale Detto questo io ho
273. 10:24davvero detto tutto vi saluto e ci
274. 10:25vediamo a un prossimo video