CREARE APP IBRIDE (Android & iOS) FACILE - Progressive Web Apps

Per creare un'applicazione per iOS devo utilizzare Objective-C oppure Swift. Se invece volessi creare un'applicazione per Android devo imparare Java. Se io invece volessi creare un'applicazione che funzioni su entrambi i sistemi operativi senza dover imparare mille linguaggi di programmazione, nessun problema, risolviamo tutto con le Progressive Web Apps. Ciao a tutti e benvenuti in questo nuovo video. Io sono Gian e oggi vediamo insieme il modo più semplice e veloce per creare un'applicazione cross-platform, ovvero che funziona sia su iOS che su Android. Come sempre prima di cominciare vi chiedo di iscrivervi al canale per altri video come questo e tanto altro sul mondo della tecnologia. Mi raccomando ricordatevi di attivare la campanella per essere sempre notificati ogni volta che pubblico un nuovo video. Fateci un giro sul mio canale di Telegram che si chiama Gianstech, esattamente come il canale YouTube. Qui pubblico tutte le date di uscita dei prossimi video e i progetti ai quali sto lavorando in anteprima. Che cosa sono queste Progressive Web Apps? Sono delle applicazioni scritte in un unico linguaggio di programmazione che può essere interpretato sia su iOS che su Android. Ma che stregoneria è mai questa? Per creare queste applicazioni ci serve soltanto sapere un po' di HTML che è un linguaggio di programmazione utilizzato tipicamente per creare pagine web. Per seguire questo tutorial non è nemmeno necessario conoscere questo linguaggio di programmazione. Vi lascio infatti tutto il codice che utilizzo nella descrizione del video. In questo modo avrete un ottimo punto di partenza per creare la vostra prima applicazione. Modificare poi il mio codice non è così complicato. In questo tutorial andremo a creare una vera e propria pagina web e dopo di che andremo a convertirla in un'applicazione utilizzando Adobe PhoneGap che è un sito completamente gratuito di Adobe che ci permette di trasformare una pagina web in un'applicazione nativa. Vedremo insieme ogni singolo step dalla creazione della pagina HTML anche se poi potete effettivamente utilizzare il mio codice alla conversione di questa in un'applicazione al test di questa applicazione utilizzando uno smartphone. La cosa più figa di tutte è che faremo questo in meno di 10 minuti. Quindi se in meno di 10 minuti riusciamo a creare un'applicazione bruttina ma funzionante immaginatevi che cosa potremo fare con una settimana di tempo. Passiamo subito al Mac ed iniziamo il tutorial. Eccoci qua sul Mac. La prima cosa che dobbiamo andare a fare è creare una nuova cartella per mettere dentro tutti i file della nostra applicazione e io la chiamerò mia app. Perfetto. Apriamo adesso il nostro browser e andiamo su questo sito di cui vi lascio il link in descrizione. Il file che ci serve è config.xml, questo file di esempio. Premiamo quindi su questo link e arriveremo a questa sezione. Ora dobbiamo andare a copiare questo codice in un file di testo. Il programma per editare il file di testo che andrò ad utilizzare si chiama Atom che è un software open source disponibile sia per Mac che per Windows. Creo quindi un nuovo documento premendo su cmd N o ctrl N se siamo su Windows e vado a incollare dentro il nostro codice. Come vedete il codice è tutto nero e nel caso specifico di Atom vado qua in basso dove c'è scritto plain text e vado a selezionare XML. Premendo invio, come vedete, vengono aggiunti dei colori che sono quelli relativi al linguaggio di programmazione. Andiamo a fare un paio di modifiche. Cambiamo il nome dell'applicazione in mia app e cambiamo la descrizione in prova per video tutorial. Possiamo anche andare a cambiare l'autore dell'applicazione. In questo caso mettiamo John Steck. Ovviamente possiamo anche andare a cambiare l'email e il sito se ne abbiamo uno. Io in questo caso vado a lasciare il valore di default. Andiamo quindi a salvare il nostro file nella famosa cartella che abbiamo creato sulla scrivania all'interno di mia app e salviamo il file come config.xml. Perfetto, abbiamo già fatto gran parte del lavoro. Ora dobbiamo andare a creare la nostra pagina web che andremo poi a convertire in un'applicazione. Per fare questo passaggio vi consiglio di andare su quest'altro sito di cui vi lascio il link in descrizione, andare a copiare questo codice di esempio e copiarlo in un nuovo documento di Atom. Questo nuovo documento, come vedete, è un documento HTML quindi possiamo andare a cambiare ancora il linguaggio di programmazione scrivendo HTML e dando invio. Questa è una vera e propria pagina HTML. Un po' spoglia, però è effettivamente completa. Andiamo quindi a salvarla e vediamo che aspetto ha. Andiamo all'interno della nostra cartella, mia app, e scriviamo index.html e salviamo il nostro file. A questo punto possiamo andare all'interno della nostra cartella e aprire il file index.html. Questa è la nostra pagina web con, come vedete, soltanto un titolo e un paragrafo. Niente di difficile. Per andare a modificare questa pagina web vi consiglio di procedere come segue. Andate a restringere la finestra e tenete su un lato Atom e sull'altro lato la nostra pagina web. A questo punto, se andiamo a fare una modifica alla nostra pagina web e salviamo il nostro documento, basterà fare un refresh su Chrome e vedremo le modifiche. Andiamo a fare una prova e scriviamo, al posto del titolo, questa è la mia app. Salviamo il documento, Command S o Ctrl S se siete su Windows, dopodiché andiamo sulla pagina web e facciamo un refresh. Come vedete viene scritto questa è la mia app. Convertire questa pagina web in un'applicazione è fattibile ma, come vedete, è un po' spoglia. Quindi vado a prendere un codice HTML che ho scritto qualche minuto fa e andremo a convertire poi quello in un'applicazione. Ora ve lo faccio vedere e vi spiego un attimo come andare a modificarlo. Ovviamente il link a questo codice lo trovate nella descrizione del video. Selezioniamo quindi tutto questo codice HTML di base, andiamo a toglierlo e andiamo ad incollare il codice che trovate nel file che avrete scaricato. Ancora una volta andiamo a salvare, quindi premiamo su Command S o Ctrl S e andiamo a refreshare la pagina. Lo so, non è niente di spettacolare, io non sono un mago della programmazione HTML, semplicemente questa schermata adesso è un pelo meno spoglia di prima. Come vedete c'è l'icona di un'immagine che non è riuscito a caricare perché quando ho creato questo HTML avevo nella cartella dove c'era il file anche un'immagine che si chiama rispa.jpg, questa qui. Ora vado a prenderla e a metterla nella cartella mia app. Eccola qui, la copio, vado sul desktop, vado su mia app e la incollo. A questo punto se vado a refreshare la nostra pagina dovremmo vedere anche l'immagine. Eccola qui. Questa, se vogliamo, è la nostra versione completa dell'applicazione. Questa è la visualizzazione web, poi vedremo come si vede sul nostro telefono. Come vedete all'interno del codice HTML ci sono tutti i testi presenti nella nostra pagina. Quindi se vogliamo andare a cambiare già stack con mia e poi sotto app lo possiamo fare senza nessun problema. Andiamo a salvare il file, refresciamo ed ecco che abbiamo scritto mia app. Prima di continuare vi voglio parlare di offertepertutti.it un sito davvero fantastico che ci permette di risparmiare acquistando su Amazon. Utilizzarlo è davvero semplicissimo. Basta copiare il link del prodotto Amazon che ci interessa all'interno del sito e premere su cerca ora. A questo punto ci sarà aperta una nuova scheda con tutte le migliori offerte di Amazon applicate al prodotto che stiamo cercando. Non ci resta quindi che selezionare il prodotto che ci interessa con l'offerta migliore e risparmiare qualcosa. Se acquisterete a partire da questa pagina aiuterete il canale a crescere. Proprio per questo vi voglio chiedere di salvare il link ad offertepertutti.it nei preferiti e di utilizzarlo ogni volta che vorrete acquistare qualcosa su Amazon. Da oggi è disponibile offerte per tutti bot. Un bot di Telegram che fa la stessa e identica cosa del sito. Basta inviare il link del prodotto Amazon che ci interessa nella chat e il link che il nostro bot ci manderà indietro sarà il link che ci porterà a tutte le migliori offerte di Amazon legate al prodotto che stiamo cercando. Vi ringrazio tantissimo e torniamo al tutorial. Quindi tutto quello che vedete all'interno di questa schermata è modificabile. Basta cambiare il testo che vedete all'interno del codice HTML. La stessa cosa vale anche per l'immagine. Invece di rispa.jpeg potete scrivere qualcos'altro e mettere la vostra immagine all'interno della cartella mia app. In questo caso 543 visualizzazioni me lo sono inventato. Non è davvero in qualche modo collegato a YouTube. L'ho scritto io soltanto per dare una parvenza di applicazione seria a questa schermata. In realtà è tutto statico. Sarà sempre così ogni volta che andiamo ad aprirla. Ok, fantastico. Abbiamo la nostra schermata dell'applicazione però ci manca ancora una cosa importante ovvero l'icona della nostra applicazione. Quest'icona non è altro che un'immagine in PNG. Apriamo quindi Photoshop o qualunque software di video editing in grado di esportare immagini in PNG con sfondo trasparente e creiamo un'immagine di risoluzione 512x512 pixel. Non deve essere niente di incredibile. Magari una lettera arancione su uno sfondo blu o su uno sfondo verde. Siate creativi, create la vostra icona. Non deve essere niente di incredibile. È soltanto una prova. Perfetta. Questa potrebbe già essere un'icona. Io ne ho fatta una un pelo meno brutta che è questa qui. Vado a togliere il filo AG. Jamstack con sotto il circuitino anche se in realtà poi essendo l'icona davvero piccola comunque non si vede però era un'idea che mi piaceva e quindi l'ho realizzata così. Ma è soltanto una prova. A questo punto salviamo quindi la nostra icona andando su file, esporta, esportazione rapida come PNG e andiamo a salvare la nostra icona all'interno della cappella dell'app e vado a scrivere icona.png Perfetto. A questo punto andiamo all'interno di Atom e dove avevamo il nostro file di configurazione .xml andiamo ad aggiungere una riga sotto author, icon, src uguale, aperte virgolette e dentro ci mettiamo icona.png A questo punto non ci resta che salvare. A questo punto all'interno della nostra cartella dell'applicazione abbiamo un file .xml, un file .html l'immagine utilizzata nel file .html e la nostra icona. Abbiamo tutto quello che ci serve. Andiamo quindi a selezionare questi 4 file premiamo col tasto destro e premiamo su comprimi 4 elementi insomma creiamo una cartella zip che contenga questi 4 elementi in questo caso archivio.zip Ok, abbiamo quasi finito. Dobbiamo andare a convertire questo archivio.zip in un'applicazione. E come facciamo? Andiamo di nuovo sul nostro browser riportiamolo a una dimensione normale e andiamo su Adobe PhoneGap entriamo all'interno del sito andiamo a fare il login ovviamente è possibile farlo utilizzando un account gratuito quindi basta registrarsi come vedete qua c'è già l'applicazione che ho caricato premo su new app per andare ad aggiungere un'altra vado su private e vado a selezionare upload file .zip purtroppo non lo posso fare insieme a voi perché si può fare soltanto per un'applicazione per volta con la versione gratuita di questo tool. Andiamo quindi all'interno dell'applicazione che ho già creato questa sarà la visualizzazione finale una volta che avrete caricato il vostro file .zip per provare questa applicazione sul vostro dispositivo iOS purtroppo serve un codice sviluppatori che noi non abbiamo quindi andremo a fare la nostra prova utilizzando un dispositivo Android nello specifico un Samsung Galaxy S10 per installare l'applicazione non vi resta che inquadrare questo QR code con il vostro telefono ovviamente il vostro dispositivo Android vi dirà che non è un'applicazione sicura voi permette su installa comunque e potrete poi dopo vedere il risultato finale è davvero molto semplice abbiamo la nostra applicazione installata sul telefono con la sua icona e ogni volta che andiamo a prenderci sopra vediamo la schermata che abbiamo visto prima all'interno del nostro browser web è tecnicamente tutto qui perché la nostra applicazione web era davvero semplice possiamo però andare a convertire anche applicazioni web molto più complesse quindi il potenziale è davvero altissimo spero quindi che siete riusciti a creare la vostra prima applicazione senza problemi se questo video vi è piaciuto e vi è stato utile lasciate un like e iscrivetevi al canale per altri video come questo e tanto altro sul mondo della tecnologia come sempre all'interno della descrizione troverete tutti i link a miei social ovvero facebook, telegram ed instagram mi raccomando seguitemi questo video è finito, noi ci vediamo al prossimo e ciao a tutti