Ionic.txt

* https://www.youtube.com/watch?v=3QPbBJgNF94
	-> https://ionicacademy.com/ionic-4-app-api-calls/
* http://www.omdbapi.com/  |  https://swapi.co/api/films
* information?.Genre => This means if 'information' object is null then it won't give errors.



* Install Ionic if you haven't before
npm install -g ionic
 
* Create a blank new Ionic 4 app with Angular support
ionic start movieApp blank --type=angular
cd movieApp
 
* Use the CLI to generate some pages and a service
ionic g page pages/movies
ionic g page pages/movieDetails
ionic g service services/movie

* ionic serve  | ionic lab

* Ionic uses '8100' port by default for local. Previously it was '8101'

* npm i @ionic/lab
* Ionic uses '8200' port by default for lab. Previously it was '8201'



*********************************************************************************************
Steps to Generate ANDROID APK file:
----------------------------------------------------------
* FMD about Generate ANDROID APK file refer below link:
	-> https://ionicframework.com/docs/v3/intro/deploying/


* First need to install Java's JDK & Android latest version
* Then install 'cordova' & 'native-run' globally using below commands
	-> npm install -g ionic cordova
	-> npm i -g native-run
* Then navigate to the project folder and then run below command
	-> ionic cordova run android
* 


* To ask permissions in App
* https://stackoverflow.com/questions/47648849/how-to-use-cordova-plugin-android-permissions-in-ionic-3
* https://developer.android.com/reference/android/Manifest.permission.html?hl=zh-tw
* https://stackoverflow.com/questions/35627210/my-app-is-asking-microphone-record-audio-permission-even-thought-i-am-not-usi

*********************************************************************************************



* Useful links to generate APK file:
----------------------------------------------------------
https://www.youtube.com/watch?v=_QlduRREVJI
https://www.youtube.com/watch?v=cP9SWMV4xKg













************************************** Learning - Max *******************************************
*************************************************************************************************
* We can build "Progressive web App", "Adroid", "ios" & "Electron App"(Desktop App) using one codebase(HTML + CSS + Javascript).
* We can create "Hybrid Apps".
* "Hybrid Apps" means runs as a Website & a Mobile App (Incl. Native Device features)

* 'Progressive web App' is web application to look and feel like native app.
* "Capacitor" is a tool which is used to convert 'Web App' to a 'Native App'
* iONIC web components are buit with a tools call "stencil"


Note: We can use IONIC with pure "Vanilla Javascript" also.
* If we want to use IONIC in basic HTML page then first we need to include IONIC's JS and CSS links.
	-> <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
	-> <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
	-> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

FMD: https://ionicframework.com/docs/installation/cdn



* Inside of "ionic.config.json" file there will be a property called "'type': 'angular'". This property lets IONIC CLI know that which kind of app you have - This is important for the right build commands.

* "packet.json" file also contains IONIC related packages.

* We use "@ionic/angular" package.

* "ionic serve" know that it should run "ng serve" because of "'type': 'angulae'" property in 'ionic.config.json' file.

* 




IONIC tags & Usage:
--------------------------------------------------------------------------------------------------
* <ion-app> -> This will be used only once in a HTML page just wrap some basic style to the app.
-> <ion-card>
-> <ion-avatar>
-> <ion-icon>
-> <ion-header>
-> <ion-toolbar>
-> <ion-title>
-> <ion-content>
-> <ion-button>
-> <ion-segment>  -> Just like tabs but not tabs

-> 	<ion-list>
		<ion-item> Item <ion-item>
	</ion-list>

-> 	<ion-select>
		<ion-select-option> Option <ion-select-option>
	</ion-select>

FMD => https://ionicframework.com/docs/components







9908918288
-----------------------------------  IONIC commands  -------------------------------------------
* ionic start
* ionic serve || ng serve
* ionic generate
* npm i -g cordova-res

* ionic cordova platform rm android
* ionic cordova platform add android

* ionic integrations enable cordova --add  => Used to create 'xml' & 'resources' folder
* ionic cordova resources  => To generate cutom and falsh screen

* ionic cordova platform add browser

* ionic cordova run android -l  => This will run 'ng build' command behind & starts our development server and opens Andoid AVD

* ionic cordova run android --device  => This command is used ti install the app in our connected device using USB. Make sure your device is conneted with 'adb devices' command in CMD before running the command.
https://medium.com/@coderonfleek/debugging-an-ionic-android-app-using-chrome-dev-tools-6e139b79e8d2

* cordova requirements android --verbose

* ionic cordova build android

* ionic cordova run android --prod

* ionic cordova resources

* ionic cordova build android --prod --release

* https://ionicframework.com/docs/deployment/play-store



Runnig the App in the Browser:
---------------------------------------------------
* npm i
* ionic integrations enable cordova --add
* ionic cordova platform add browser
* ionic cordova build browser
* ionic cordova plugin add cordova-plugin-camera
* ionic cordova emulate browser

* https://stackoverflow.com/questions/44640802/ionic-build-run-for-browser
* https://www.npmjs.com/package/cordova-sqlite-storage
-------------------------------------------------------------------------------------------------
-----------------------------------  Packages & Usage  ------------------------------------------
* To use Sqlite database
	-> npm install @ionic-native/sqlite
	-> ionic cordova plugin add cordova-sqlite-storage

* To import some data into the Sqlite database first time
	-> npm install @ionic-native/sqlite-porter
	-> ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter

FMD  -> https://devdactic.com/ionic-4-sqlite-queries/








IONIC lifecycle hooks:
----------------------------------------------------------------------------
* ngOnInit()
* ionViewWillEnter()
* ionViewDidEnter()
* ionViewWillLeave()
* ionViewDidLeave()










* To change the background of 'ion-content' in all page, add below css inside of 'global.scss' file.
	-> ion-content {
	  		--ion-background-color: #dedede;
	   }
* To change the background & font-color of 'ion-header' in all page, add below css inside of 'global.scss' file.
	-> ion-toolbar {
		  --background: #3b4bad;
		  --color: #fff;
	   }











Useful sites:
----------------------------------------------------------------------------
* https://ioncheatsheet.com/
* http://www.developerslearnit.com/2018/09/creating-ionic-3-landing-and-login-page-pop-up-with-css3.html
* https://stackoverflow.com/questions/55687695/how-to-give-alert-controller-css-in-ionic-4
* https://stackoverflow.com/questions/43606619/ionic-2-modal-make-50-of-the-width
* https://www.freakyjolly.com/ionic-4-show-native-like-toast-messages-in-ionic-application-in-2-steps-without-any-plugin/#more-2028
* https://devdactic.com/ionic-4-sqlite-queries/
* https://ionicthemes.com/tutorials
* https://www.freakyjolly.com/ionic-4-use-camera-using-ionic-native-plugin-in-ionic-4-latest-version/
* https://enappd.com/blog/image-picker-in-ionic-4-app/67/
* https://www.youtube.com/watch?reload=9&v=PZVyE6LXu50  -> Cordova Not Available in ionic serve fixed Ionic Framework Cool Trick
* https://www.youtube.com/watch?v=CGiqPTK7EoM&list=PLz5rnvLVJX5UEDbxBypmXHdxlReX47Qdn
* https://stackoverflow.com/questions/51828017/navcontroller-doesnt-work-in-ionic-4
* https://www.youtube.com/watch?v=za5NaFavux4  --> Using a component inside of a component
* https://www.youtube.com/watch?v=c3CrC9lL53k  --> Ionic 4 Grid Tutorial
* https://forum.ionicframework.com/t/how-to-detect-platform-using-ionic-4/138189/6
* https://stackoverflow.com/questions/52574448/ionic-4-loading-controller-dismiss-is-called-before-present-which-will-ke
* https://www.freakyjolly.com/ionic-4-complete-sqlite-crud-tutorial-for-ionic-4-angular-applications/
* https://ionicframework.com/docs/angular/platform

* https://forum.ionicframework.com/t/ionic-sqlite-example/101174/4  -> https://www.youtube.com/watch?v=Nn5RQpZBDsg

* https://medium.com/@coderonfleek/debugging-an-ionic-android-app-using-chrome-dev-tools-6e139b79e8d2
* https://geekyminds.co.in/exit-app-on-back-press-ionic-4/
* https://stackoverflow.com/questions/39662400/how-can-i-serve-ionic-app-on-a-different-port
* https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59/
* https://stackoverflow.com/questions/42470781/insert-date-and-time-in-textbox-when-button-is-clicked
* https://www.freakyjolly.com/ionic-4-add-date-time-picker-in-ionic-4-application-without-native-plugin/#more-2430
* https://www.geeksforgeeks.org/how-to-generate-random-number-in-given-range-using-javascript/
* https://stackoverflow.com/questions/43756290/how-to-detect-onfocus-and-blur-event-of-ion-searchbar-in-ionic2
* https://stackoverflow.com/questions/30181226/how-to-insert-multiple-rows-with-a-parameter/30232457

* https://forum.ionicframework.com/t/fcm-notification-not-working-when-app-is-kill-closed/125629

* https://blog.mestwin.net/get-your-simple-push-notifications-app-with-ionic-4-and-firebase-cloud-messaging/

* https://www.joshmorony.com/getting-familiar-with-local-notifications-in-ionic-2/

* https://www.freecodecamp.org/news/how-to-get-push-notifications-working-with-ionic-4-and-firebase-ad87cc92394e/

* https://forum.ionicframework.com/t/background-service-in-ionic/91212/21 ***

* https://stackoverflow.com/questions/52671334/angular-6-run-a-function-in-every-x-seconds

* https://medium.com/@christof.thalmann/convert-angular-project-to-android-apk-in-10-steps-c49e2fddd29

* https://stackoverflow.com/questions/23095341/how-to-rename-ionic-app-from-hellocordova

* https://stackoverflow.com/questions/40111073/change-the-width-of-ionic-popup

* https://forum.ionicframework.com/t/alertcontroller-with-line-breaks-and-bullet-points-in-it-is-it-possible/61972/2

* https://demo.mobiscroll.com/angular/popup/basic#theme=material  --> ***

* https://www.youtube.com/watch?v=Bs_NnfyRFmk --> Ionic 4 Alert Tutorial
* https://www.tutorialsplane.com/ionic-popup/
* https://codesundar.com/ionic-action-sheet

* https://blog.angulartraining.com/whats-the-difference-between-style-and-ngstyle-in-angular-68a3301c2ae6

* https://ionicframework.com/docs/deployment/play-store


Learnables:
----------------------------------------------------------------------------
* Building a Swipeable Tabs - Like Whatsapp
https://www.youtube.com/watch?v=8qUywCzR-vo
* https://www.freakyjolly.com/ionic-4-keep-it-running-in-background-using-cordova-and-ionic-native-plugins/
* https://stackoverflow.com/questions/55813237/how-to-change-default-app-icon-and-splash-screen-in-ionic-4-application
* Custom Ionic Splash + Animation
https://www.youtube.com/watch?v=dPUmskG_-y0
* https://github.com/katzer/cordova-plugin-background-mode  |  https://www.techiediaries.com/ionic-background-mode/
* https://www.freakyjolly.com/ionic-4-set-screen-orientation-in-landscape-portrait-and-lock-unlock-using-ionic-native-plugin/
* https://stackoverflow.com/questions/27755208/how-to-restrict-app-to-portrait-mode-only-in-ionic-for-all-platforms
* https://devdactic.com/push-notifications-ionic-onesignal/
* https://enappd.com/blog/local-notifications-in-ionic-4/69/ *** Special ***

* https://forum.ionicframework.com/t/how-to-make-a-background-process-when-app-is-not-running/41859/9  
	-> https://github.com/katzer/cordova-plugin-local-notifications/  
	-> https://forum.ionicframework.com/t/how-to-make-a-background-process-when-app-is-not-running/41859/14  
	-> https://www.gajotres.net/prevent-ionic-application-from-going-to-sleep-in-background/

* https://enappd.com/blog/implement-ionic-4-firebase-push/34/
* https://market.ionicframework.com/starters/full-ionic-application-for-messaging-mobile-application-hichat

* https://medium.com/hirewithparam/independent-notification-service-using-ionic-node-fcm-5cdde219480a

* https://devdactic.com/ionic-4-socket-io/

* IONIC4 BACKGROUND GEOLOCATION  --> https://www.youtube.com/watch?v=o_HWlQPcgmY

* Ionic4 109 videos --> https://www.youtube.com/watch?v=ZXt1kzEc7zg&list=PL_HWG-SJYqpyTurpB-davCiJv-AkNCH_U

* https://medium.com/@surajair/ionic-native-sqlite-with-browser-development-6847b7f9611

* https://www.freakyjolly.com/ionic-4-3-native-like-select-box-wheel-selector-in-ionic-application/

* https://stackoverflow.com/questions/53643587/i-want-a-ionic3-simple-wheel-picker

* https://stackoverflow.com/questions/34747259/ionic-age-number-spinner-component

* https://www.djamware.com/post/5c9361e080aca754f7a9d1ef/ionic-4-angular-7-and-cordova-crop-and-upload-image ***

* https://www.youtube.com/watch?v=dPUmskG_-y0 - Custom Ionic Splash + Animation






Firebase with Ionic:
----------------------------------------------------------------------------

	keytool -exportcert -list -v -alias androiddebugkey -keystore -/ .android/debug.keystore

* https://www.youtube.com/watch?v=aakXkUY6MYU --> How to get the SHA1 fingerprint certificate in android studio for debug mode
(
keytool -list -v -keystore C:\Users\USERNAME\.android\debug.keystore -alias androiddebugkey -storepass android -keypass android
)



* https://www.youtube.com/watch?v=FwS9XlUc75A --> Ionic 4 CRUD Using Firebase Database
* https://www.youtube.com/watch?v=OCV2W2DZDSI&list=PLYxzS__5yYQnpK36-GJjm7IEAuHR7IExa --> #0: [Kickstart] Creating a Social Media App - Ionic + Firebase + Angular + Uploadcare

* https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step


* https://www.youtube.com/watch?v=H20l9ofyR54 --> How to Create a Simple Ionic 4 Firebase App with AngularFire
* https://www.youtube.com/watch?v=SHRjQA3lvNk --> How to Build An Ionic 4 App with Firebase and AngularFire 5
* 

* https://www.youtube.com/watch?v=tS4irXVdQ08 --> IONIC FACEBOOK LOGIN FOR MOBILE APP

* 



To build Signed APK to upload to PlayStore:
-----------------------------------------------------------------------------------
* https://ionicframework.com/docs/deployment/play-store
* https://stackoverflow.com/questions/35173542/unable-to-sign-the-unsigned-apk

Steps to build Signed APK file:
----------------------------------------------------------------------------------------
* Navigate to Project root directory 
* Run 'ionic cordova build android --prod --release'
* Then run 'keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000'
	-> Above command generates 'my-release-key.keystore' file in root folder.
* Then run 'jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore C:\Users\manoj\Downloads\Doctors-frontend-final\frontend\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk alias_name'

* Then navigate to 'C:\Users\USERNAME\local\Android\SDK\build-tools\29.0.2' folder. There you need to find a file named 'zipalign'

* Then run 'C:\Users\manoj\AppData\Local\Android\Sdk\build-tools\29.0.2>zipalign -v 4 C:\Use
rs\manoj\Downloads\Doctors-frontend-final\frontend\platforms\android\app\build\o
utputs\apk\release\app-release-unsigned.apk app-release.apk' from there itself

---------------- AAB file generation ------------------
* After running 'ionic cordova build android --prod --release' command
* change into the '/platforms/android' folder in terminal and run 'gradlew bundleRelease'. On Windows, the file might be called gradlew.bat instead.

* jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore D:\My-Practice-things\Ionic\Ionic-Mine\Homeotel\platforms\android\app\build\outputs\bundle\release\app.aab alias_name

	Note: This outputs the bundle at /platforms/android/app/build/outputs/bundle/release/app.aab

* Then navigate to 'C:\Users\USERNAME\local\Android\SDK\build-tools\29.0.2' folder. There you need to find a file named 'zipalign'

* Then run 'zipalign -v 4 D:\My-Practice-things\Ionic\Ionic-Mine\Homeotel\platforms\android\app\build\outputs\bundle\release\app.aab Homeotel-Patient-Signed-AAB.aab' from there itself

FMD --> https://stackoverflow.com/questions/55556201/how-to-make-use-of-android-app-bundle-in-ionic-applications





Ionic sites:
----------------------------------------------------------------------------
* https://drissas.com/ionic-whatsapp/ <-> https://www.youtube.com/watch?v=kBb81eHcr2c
* 









Links which helped to solve the errors I faced:
----------------------------------------------------------------------------
* https://forum.ionicframework.com/t/how-to-resolve-babel-error-when-installing-geolocation-in-ionic-app/185542/2

* https://github.com/ionic-team/ionic-cli/issues/2635
* https://stackoverflow.com/questions/43598311/component-is-part-of-the-declaration-of-2-modules



My practice project skeleton:
----------------------------------------------------------------------------
* Home
	-> All Developers
		-> Upon clicking it will take to details page
		--> Here we will show only name of the user in a box with 'View', 'Edit' & 'Delete' buttons
	-> Add Developer
		-> "Add Developer" form page