Web/Mobile/ Progressive

App Development - Part 4

ECMAscript 6 & Typescript

Super set di JavaScript, contiene funzionalità già proprie di ES6, con la possibilità di aggiungere variabili tipizzate.

Angular 2+

Angular è un framework per lo sviluppo di web app, basato sulla logica a componenti.
Creato in collaborazione tra Google e Microsoft.

Apache Cordova & IonicFramework 3+

Ionic Framework è un framework per la creazione di interfacce mobile/desktop, basato su TS / ng2+. Con l'aiuto di Apache Cordova, andremo a creare un app mobile ibrida.

Pubblichiamo!

2. Rimuovere il plugin della console

ionic cordova plugin remove cordova-plugin-console

3. Icone e splash screen

Bisogna prima preparare icona e splash:

resources/icon.png : formato .png, dimensione 1024 x 1024

resources/splash.png : formato .png, dimensione 2732 x 2732

ionic cordova resources

1. Account su PlayStore

Visitate https://play.google.com/apps/publish/, acquistate un account da sviluppatore e create una nuova app.

Compilate tutti i campi richiesti (testo, icone, ecc.).

4. Aggiungere la piattaforma e generare l'APK Android

ionic cordova platform add android
ionic cordova build android --release --prod

5. Generare la signing key

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

// compilate poi i dati che vi verranno richiesti, troveremo nella cartella il file my-release-key.keystore

Questi 2 comandi aggiungono la piattaforma nativa e creano la versione android, che però bisogna firmare con un certificato.

6. Firmare l'APK

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk alias_name

// ci verrà richiesta la password, e avremo il file android-release-unsigned.apk firmato
// non ci resta che effettuare il comando ZIP align

zipalign -v 4 /percorso-di/android-release-unsigned.apk MyApp.apk

Caricate l'APK su Play Store e pubblicate la vostra app!

1. Account su Apple Store

Visitate https://developer.apple.com/, acquistate un account da sviluppatore e create un nuovo App ID.

Poi registrate i vostri dispositivi, nella sezione "Devices".

Create il provisioning profile, selezionando App Id, Certificato di Produzione e dispositivi.

2. Rimuovere il plugin della console

ionic cordova plugin remove cordova-plugin-console

3. Icone e splash screen

Bisogna prima preparare icona e splash:

resources/icon.png : formato .png, dimensione 1024 x 1024

resources/splash.png : formato .png, dimensione 2732 x 2732

ionic cordova resources

4. Aggiungere la piattaforma e fare la build

ionic cordova platform add ios
ionic cordova build ios --release --prod

5. Archiviare

Questi 2 comandi aggiungono la piattaforma nativa e creano la versione ios per la produzione.

6. Finite di compilare la richiesta di pubblicazione

Andate su appstoreconnect.apple.com e compilate gli ultimi dettagli dell'app, e poi inviate la richiesta di pubblicazione ad Apple.

Aprite il progetto (il file .xcworkspace) tramite xCode, dalla cartella platforms/ios.

Poi su Product > Archive e infine su "Upload to App Store".

Link e risorse utili

Ionic Framework: https://ionicframework.com

Cordova: https://cordova.apache.org/

Devdactic: https://devdactic.com/

It's time for a test!

Realizzare un app mobile con 2 tabs.

I tabs dovranno presentare:

  • lista degli utenti
    • dettaglio dell'utente
  • lista dei posts
    • dettaglio del post

Per realizzare l'esercizio si dovranno usare le API presenti su

https://jsonplaceholder.typicode.com/

 

Usare come strumenti:

Ionic Framework: https://ionicframework.com

Cordova: https://cordova.apache.org/

Angular: https://angular.io/

Orario Fine Test: 17.00

Web/Mobile/Progressive Web App Development - Part 4

By Filippo Matteo Riggio

Made with Slides.com

Web/Mobile/Progressive Web App Development - Part 4

  • 394

More from Filippo Matteo Riggio