oscarrosete.com

IONIC

Study

Contacts

Call

Customizing

Ionic basics

Android basics

Run app

Deployment

icons

splash

Repository

navigation and modularity

shortcuts

open fb

step project

 

github step

Mac commands

Popover

CLI COMMANDS

oscarrosete.com

Specify emulator for cordova

From project location where package.json is located and build generated

cordova platform add android

cordova run --emulator android Pixel_3_API_29

Docs: https://cordova.apache.org/docs/en/latest/guide/platforms/android/

 

IONIC

CLI COMMANDS

oscarrosete.com

Run app on emulator

From project location where package.json is located

Ionic cordova run android Pixel_3_API_29

native-run android Pixel_3_API_29 -app platforms/android/build

Docs: https://github.com/ionic-team/native-run

IONIC

oscarrosete.com

IONIC

Expected result

Pre- requisites

Ionic related

Emulator

Make sure node-sass is compatible with your node version.

https://www.npmjs.com/package/node-sass

nvm use 15.3.0

CLI COMMANDS

oscarrosete.com

List node versions through nvm

nvm list

IONIC

CLI COMMANDS

oscarrosete.com

List node versions through nvm

nvm use 14.15.1

IONIC

CLI COMMANDS

oscarrosete.com

IONIC

Academind

https://pro.academind.com/p/react-native-the-practical-guide-2020

Udemy Fernando herrera

https://www.udemy.com/course/ionic-ios-android-pwa-appstore-playstore-push/learn/lecture/13733290#announcements​

profit with js

https://drive.google.com/drive/u/0/folders/1NLNH2SdFcOFtEOVCq4tG0I_t5NL1YzeC

CLI COMMANDS

oscarrosete.com

Buenas prácticas coding

https://www.carlosble.com/libro-tdd/?lang=es

https://www.facebook.com/softwarecrafters/

Libros js

https://drive.google.com/drive/u/0/folders/1HTfwKPaPXwAMCDnkhr-2qICWBGFdo1oB

IONIC

CLI COMMANDS

oscarrosete.com

Cheatsheets

https://www.facebook.com/fidevlopez/

https://www.facebook.com/javascript4u/

https://www.facebook.com/softwarecrafters/

IONIC

oscarrosete.com

IONIC

Contact management

Ionic, real device

ionic cordova plugin add cordova-plugin-contacts
npm install @ionic-native/contacts

Docs: https://ionicframework.com/docs/native/contacts

Reference: https://youtu.be/a8vOLMcOg68

 

 

CLI COMMANDS

oscarrosete.com

IONIC

Importing to project

Modify config for .plist modification on ios

import and add to providers on app module

CLI COMMANDS

oscarrosete.com

IONIC

Weird error

CLI COMMANDS

https://stackoverflow.com/questions/56342308/how-to-fix-cant-resolve-all-parameters-for-contactfield-ionic-nat

oscarrosete.com

IONIC

calling

Ionic, real device

ionic cordova plugin add call-number
npm install @ionic-native/call-number

Docs: https://ionicframework.com/docs/native/call-number

native angular: https://ionicframework.com/docs/native/community#angular

Reference: https://youtu.be/a8vOLMcOg68

 

 

CLI COMMANDS

oscarrosete.com

IONIC

Importing to project

import in app.modulle and provide

import and use directly where needed

 

CLI COMMANDS

oscarrosete.com

IONIC

Customizing

CLI COMMANDS

oscarrosete.com

IONIC

Change background and text

variables.scss

Docs:https://ionicframework.com/docs/theming/css-variables

https://ionicframework.com/docs/v3/theming/theming-your-app/

https://ionicframework.com/docs/theming/advanced

CLI COMMANDS

oscarrosete.com

IONIC

Add padding

CLI COMMANDS

oscarrosete.com

IONIC

CLI COMMANDS

Custom icons

Ionicons is included

previous versions

https://medium.com/@alexandrubereghici/ionic-the-easy-and-the-right-way-to-add-custom-icons-b15330a2173b

oscarrosete.com

IONIC

CLI COMMANDS

Custom icons

button only of icon with

https://stackoverflow.com/questions/46521280/ionic-ion-button-icon-only

oscarrosete.com

IONIC

CLI COMMANDS

Assigning colors to components

docs

https://blog.logrocket.com/theming-customization-with-ionic/

https://ionicframework.com/docs/theming/colors#adding-colors

 

oscarrosete.com

IONIC

CLI COMMANDS

flex ionic

Docs:

https://ionicframework.com/docs/layout/css-utilities

CLI COMMANDS

oscarrosete.com

Generate Ionic application with node js version you want(nvm)

ionic start nombre-app template --type language

Ejemplo: ionic start a-step blank --type angular

N (Cordova)

Y (Capacitor)

IONIC

CLI COMMANDS

oscarrosete.com

Start Ionic app

cd ./a-step  (previously generated project name directory)

ionic serve --host=localhost --port=3300

 

Docs: https://ionicframework.com/docs/cli/commands/serve

IONIC

oscarrosete.com

IONIC

Expected result

Pre- requisites

Make sure node-sass is compatible with your node version.

https://www.npmjs.com/package/node-sass

npm rebuild node-sass --force

https://stackoverflow.com/questions/37986800/node-sass-couldnt-find-a-binding-for-your-current-environment

nvm use 15.3.0

CLI COMMANDS

oscarrosete.com

Run android emulator
path: C:\Android\sdk\emulator
env variable: C:\Android\sdk\emulator\emulator
Cmd example: C:\Android\sdk\emulator\emulator -avd Pixel_3_API_29

expected cmd: emulator -avd Pixel_3_API_29

IONIC

oscarrosete.com

IONIC

Expected result

Pre requisites

 

CLI COMMANDS

oscarrosete.com

List emulators

native-run android --list

emulator -list-avds

IONIC

List emulators

oscarrosete.com

IONIC

Expected result

Pre- requisites

Ionic related

Emulator

CLI COMMANDS

oscarrosete.com

Build app from ionic and deploy to emulator

From project location where package.json is located

ionic cordova build android (around 5 mins)

cordova run android

Docs: https://ionicframework.com/docs/cli/commands/cordova-build

IONIC

Build app from ionic and deploy to real device

CLI COMMANDS

oscarrosete.com

Build app from ionic and deploy to emulator

From project location where package.json is located

ionic cordova build android (around 5 mins)

ionic cordova build android --emulator Pixel_3_API_29

Docs: https://ionicframework.com/docs/cli/commands/cordova-build

IONIC

Build app from ionic and deploy to emulator

oscarrosete.com

IONIC

Pre- requisites

Make sure android env are as follows:

https://developer.android.com/studio/command-line/variables

 

Gradle should be installed

  • Download gradle

https://gradle.org/releases/

  • create gradle folder and unzip

C:\Program Files (x86)\Gradle

  • Add to path env variables

C:\Program Files (x86)\Gradle\bin

  • Test gradle on cmd

oscarrosete.com

IONIC

Expected result

CLI COMMANDS

oscarrosete.com

Run app on emulator

From project location where package.json is located and build generated

cordova run --emulator

allow usb debugging on emulator

if adb daemon error on admin cmd: adb start-server

update platform-tools maybe needeed

Docs: https://cordova.apache.org/docs/en/latest/guide/platforms/android/

 

IONIC

Run app on emulator

CLI COMMANDS

oscarrosete.com

IONIC

weird error

stack over flow

https://stackoverflow.com/questions/52173657/android-studio-error-cannot-connect-to-daemon

https://stackoverflow.com/questions/36731277/adb-server-is-out-of-date-killing

oscarrosete.com

IONIC

Expected result cordova

CLI COMMANDS

oscarrosete.com

Run app on device

From project location where package.json is located and build generated

cordova run android

 

Docs: https://cordova.apache.org/docs/en/latest/guide/platforms/android/

 

IONIC

oscarrosete.com

IONIC

Expected result cordova

No device

Device connected

oscarrosete.com

IONIC

How to open from android studio

No device

Abrir carpeta android

Device connected

se verá en el celular

oscarrosete.com

IONIC

Icons and splash screen

Carpeta resources: C:\Users\oscar\Desktop\Personal\software_projects\a-step\resources

Docs: https://ionicframework.com/docs/cli/commands/cordova-resources

pre-req: npm i -g cordova-res

Splash (2732*2732)

 

Icono (1024*1024)

In project directory

ionic cordova platform add ios

ionic cordova platform add android

ionic cordova resources

Obligar a regenerar

ionic cordova resources --force

oscarrosete.com

IONIC

Splash animation

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

reference: https://youtu.be/dPUmskG_-y0

Docs: https://rxjs-dev.firebaseapp.com/api/index/function/timer

oscarrosete.com

IONIC

Splash animation

modify app.html

modify css

css animation: https://tobiasahlin.com/spinkit/

assets https://www.figma.com/file/7vMvOJWHdHMcqnAopWTNll/Salvatierra-Project?node-id=348%3A20

oscarrosete.com

IONIC

Nombre, Id, Versión

Existe en archivo config.xml

no puede ser version previa a la subida en playstore

1.0.0 versión producción ya desplegada a la playstore

email

name con el que aparece

url que tenga

ponerle firma digital para desplegarlo en playstore

ionic cordova build android

cordova run android

oscarrosete.com

IONIC

Nombre, Id, Versión

ionic cordova build android --device

https://ionicframework.com/docs/cli/commands/cordova-build

oscarrosete.com

IONIC

Weird error on build

 

to solve delete and cordova build android again

cordova run android

https://stackoverflow.com/questions/20266951/no-java-files-found-which-extend-cordovaactivity-when-use-cordova-build

 

oscarrosete.com

IONIC

Repository management

 

First upload

git init

git status (modified files should be in red)

git add -A --dry-run(mock up)

git add -A

git status (modified files should be in green "stage")

git commit -m

 

CLI COMMANDS

oscarrosete.com

IONIC

Repository management

 

First upload

git branch -M main

git remote add origin https://github.com/oarb-projects/AstepApp.git

git push -u origin main

Docs:

https://mijingo.com/blog/dry-run-before-adding-to-git-repository

https://coderwall.com/p/8dyicg/dry-run-in-git

 

 

CLI COMMANDS

oscarrosete.com

IONIC

Add pages

 

CLI COMMANDS

Add pages

ionic g page pages/recipebook --spec=false --dry-run (mock)

ionic g page pages/recipebook

ionic g page pages/phonebook --spec=false

ionic g page pages/notetaking --spec=false

modificara app-routing y agregara router a page

oscarrosete.com

IONIC

Modular header y shared modules

CLI COMMANDS

declarado y exportado

ionic g m shared --dry-run

ionic g c shared/components/header --export  --spec=false --dry-run (mock)

ionic g m shared

ionic g c shared/components/header --export  --spec=false

Docs: https://angular.io/guide/sharing-ngmodules

oscarrosete.com

IONIC

Modular header

CLI COMMANDS

declara y exporta headercomponent en shared module

importar ionic module

oscarrosete.com

IONIC

Modular header

CLI COMMANDS

Recibir datos

input title

y string interpolation

enviar del papa

oscarrosete.com

IONIC

Back button not workint on partial

https://forum.ionicframework.com/t/ionic-v4-ion-back-button-not-working-inside-custom-header-component-directive/146335

oscarrosete.com

IONIC

Modular header

CLI COMMANDS

importa en cada pagina sharedmodule en el modulo

utiliza con el selector

oscarrosete.com

IONIC

Return

CLI COMMANDS

Add pages

ionic backbutton

https://ionicframework.com/docs/api/back-button

oscarrosete.com

IONIC

navigate

CLI COMMANDS

Add pages

ionic routerlink

https://ionicframework.com/docs/angular/navigation

oscarrosete.com

IONIC

Shortcuts

Ionic hub https://dashboard.ionicframework.com/personal/hub

i-butt tab tab write

CLI COMMANDS

oscarrosete.com

IONIC

quick buttons

 

ipadding

CLI COMMANDS

oscarrosete.com

IONIC

Open url

CLI COMMANDS

Add pages

ionic cordova plugin add cordova-plugin-inappbrowser

npm install @ionic-native/in-app-browser

Docs: https://ionicframework.com/docs/native/in-app-browser/

cordova plugin:https://github.com/apache/cordova-plugin-inappbrowser

https://stackoverflow.com/questions/35562745/ionic-application-open-link-in-system-browser

oscarrosete.com

IONIC

Open url

CLI COMMANDS

Import and provide in app module

 

 

import inject and use in home page

oscarrosete.com

IONIC

Open url

CLI COMMANDS

Import and provide in app module

 

 

import inject and use in home page

oscarrosete.com

IONIC

Mac cli commands

CLI COMMANDS

ls -la (long listing format -l, -a for hidden files)

rwx owner of file

3 group owner

3 everyone else

d directory, - file

links, owner, group owner

docs https://linoxide.com/linux-command/20-ls-command-linux/

 

oscarrosete.com

IONIC

Mac cli commands

CLI COMMANDS

mac model

https://support.apple.com/kb/SP776?locale=es_MX

https://www.amazon.com.mx/Apple-pantalla-Procesador-Intel-Core-i5-generaci%C3%B3n/dp/B08CZ4JWDT/ref=asc_df_B08CZ4JWDT/?tag=gledskshopmx-20&linkCode=df0&hvadid=476015571764&hvpos=&hvnetw=g&hvrand=14880888421897192007&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1010005&hvtargid=pla-1028207328676&psc=1

oscarrosete.com

IONIC

Mac cli commands

CLI COMMANDS

pwd: current location

oscarrosete.com

IONIC

Mac commands

CLI COMMANDS

right click on a Mac is to press the Ctrl (or Control) key when you tap mouse button

multi touch gestures

https://support.apple.com/en-us/HT204895

snapshot: cmd shift 4

 

oscarrosete.com

IONIC

Let Mac see your folder in sidebar on finder

 

open finder, go to preferences

CLI COMMANDS

oscarrosete.com

IONIC

Weird error

CLI COMMANDS

https://medium.com/codespace69/react-native-xcrun-error-unable-to-find-utility-simctl-not-a-developer-tool-or-in-path-bd908d3551be

 

open new trial project, open preferences go to locations

 

oscarrosete.com

IONIC

Mac commands

CLI COMMANDS

start Xcode simulator from cmd

simctl

xcrun simctl: list available subcommands

xcrun simctl list : LIST ALL DEVICES

xcrun simctl list --json devices available

https://stackoverflow.com/questions/58806843/how-to-get-list-of-available-ios-simulators

oscarrosete.com

IONIC

Mac commands

CLI COMMANDS

simctl boot device

xcrun simctl boot $UUID: boots device (from shutdown to activated)

xcrun simctl boot 4CF54B03-C15F-4060-8B17-A66942EA0196

see booted devices:  xcrun simctl list | grep Booted

open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/

 

https://nshipster.com/simctl/

 

oscarrosete.com

IONIC

Specific version needed of eclipse

CLI COMMANDS

need the .jar generated

https://www.eclipse.org/downloads/packages/release/2018-09/r/eclipse-ide-java-developers

 

eclipse-java-2018-09-macosx-cocoa-x86_64

/Users/oscar/eclipse-workspace

oscarrosete.com

IONIC

Import projects to eclipse

CLI COMMANDS

oscarrosete.com

IONIC

Import projects to eclipse

project exp: https://www.tutorialspoint.com/How-to-find-package-explorer-in-Java-eclipse-project

oscarrosete.com

IONIC

Import projects to eclipse

project exp: https://www.tutorialspoint.com/How-to-find-package-explorer-in-Java-eclipse-project

 

 

 

 

 

 

javac -version

should be 1.8

oscarrosete.com

IONIC

Reinstalling jdk

 

jdk-8u221-macosx-x64.dmg

https://www.oracle.com/java/technologies/javase/javase8u211-later-archive-downloads.html#license-lightbox

debes crear una cuenta de oracle, usa cualquier cuenta que quieras

change jdk

https://superuser.com/questions/1419753/how-to-change-java-jdk-version

change eclipse version

https://www.codejava.net/ides/eclipse/change-java-compiler-version-for-eclipse-project

oscarrosete.com

IONIC

oscarrosete.com

IONIC

References

CLI COMMANDS

Bash profile

https://drive.google.com/file/d/1q93QEgLaMFEpe7GsEDKXSfbtQGbrLnoK/view?ts=5fbe7e0f

 

windows setup

https://drive.google.com/file/d/1CfV1j0vmf7eLY9aA57E44QFb_hKZZPQB/view?ts=5fbeb5fc

 

ubuntu setup

https://drive.google.com/file/d/1lAjnEoFM5hblLb-Z9u9Hda631iyIzOZt/view

https://docs.google.com/document/d/1QOVXEBdrW1y1h3C-bWClcYreJ1BhLbzX4244xUazOvM/edit

oscarrosete.com

IONIC

References

CLI COMMANDS

asvn

https://asvn/aviddev/venue/trunk/projects/apps/core.framework/trunk/

swift sample client

https://alm.rockwellcollins.com/git/projects/VENUEG/repos/sampleclientswift/browse

venue app

https://alm.rockwellcollins.com/git/projects/VENUEG/repos/venueapp/browse

venunext

https://asvn/venuenext/

oscarrosete.com

IONIC

about project

CLI COMMANDS

system dashboard

https://alm.rockwellcollins.com/issues/secure/Dashboard.jspa

epic

https://alm.rockwellcollins.com/issues/browse/VENUE-2775

 

https://epedia.rockwellcollins.com/wiki/Rockwell_Proxy_Server_Configuration#Regional_Proxies

​

Venuestatus app

conf venustatus

/Users/oscar/Features/projects/venuestatus/conf/custom


before

??srjava.util.TreeMap??>-%j?L

comparatortLjava/util/Comparator;xppwtlru lcp dirt8C:\Project_Files\VenueDev\venuestatus\conf\custom\deu.10x


after

lru lcp dirt8/Users/oscar/Features/projects/venuestatus/conf/custom/deu.10x

lru lcp dirt8/Users/oscar/Features/projects/venuestatus/conf/custom/deu.10


Manual conf

Modify unit.xml-->checked

venuestatus/conf/custom/deu.10/components/Unit.xml,

 

Modify LCPConf.xml-->checked

venuestatus/conf/custom/<lru>/LCPConfig.xml,

 

Modify StateManagerService.xml-->checked

venuestatus/conf/custom/<lru>/components/services/StateManagerService.xml,

 

Add briefinghandlers.xml-->checked

venuestatus/conf/custom/<lru>/components/handlers.

 

Modify UXStateHandler.xml-->checked

venuestatus/conf/custom/<lru>/components/handlers/UXStateHandler.xml,

Manual conf

Pod

sudo gem install cocoapods -v 1.6.1

 

GIT_SSL_NO_VERIFY=true pod install

 

2. Add your Private Spec Repo to your CocoaPods installation

pod repo add rcpodspecs http://alm.rockwellcollins.com/git/scm/venueg/rcpodspecs.git

 

https://stackoverflow.com/questions/20939105/pod-install-returns-fatal-error-ssl-certificate-issue

 

https://guides.cocoapods.org/making/private-cocoapods.html

Cabin management system

cd /Users/oscar/Features/androidclient

svn co http://asvn/venuenext/trunk/clientApps/trunk/Android/cms/

svn co http://asvn/venuenext/trunk/clientApps/trunk/Android/val/

svn co https://asvn/venuenext/trunk/clientApps/trunk/Android/VenueNextSampleClient/

Gradle installation

Gradle installation

 

 

 

proxy installation

 

Accept sdk licenses

sdkmanager --licenses

 

sh /Users/oscar/Library/Android/sdk/cmdline-tools/latest/bin/sdkmanager --licenses

https://apple.stackexchange.com/questions/235128/how-do-i-run-a-sh-or-command-file-in-terminal

docs: https://developer.android.com/studio/command-line

Accept sdk licenses

Modify path
export PATH=<path_to_android_sdk>/platform-tools:<path_to_android_sdk>/tools:$PATH

https://stackoverflow.com/questions/19832803/bash-android-command-not-found-on-mac-osx

 

Run emulator

/Users/oscar/Library/Android/sdk/emulator/emulator

 

/Users/oscar/Library/Android/sdk/emulator/emulator -avd Pixel_3a_API_30_x86 -no-boot-anim

 

/Users/oscar/Library/Android/sdk/emulator/emulator -list-avds

 

Run emulator

/Users/oscar/Library/Android/sdk/emulator/emulator -avd Pixel_3a_API_30_x86 -no-boot-anim
Docs: https://developer.android.com/studio/run/emulator-commandline?authuser=1

 

real device

connect

debugging activated

Running app

Just click on run on android

Pending

Access confluence
https://alm.rockwellcollins.com/wiki/pages/viewpage.action?spaceKey=VENUEW&title=Venue+Development+Environment+Setup

 

TP DEVICE

 

oscarrosete.com

IONIC

popover

CLI COMMANDS

ionic g page pages/popover --spec=false --dry-run

ionic g c components/notetakingPopover --spec=false --dry-run

Docs: https://ionicframework.com/docs/api/popover

oscarrosete.com

IONIC

popover

CLI COMMANDS

Replace popover component with what you want to present

el metodo create lo carga con lazy load

oscarrosete.com

IONIC

popover

CLI COMMANDS

para posicionamiento relativo al boton que se presiono se le envia el evneto click

oscarrosete.com

IONIC

popover

CLI COMMANDS

Obtener información del popover, llamar al dismiss y enviar params

onwill dismiss obtienes la info en el padre

 

oscarrosete.com

IONIC

Ion input

CLI COMMANDS

 

 

Docs: https://ionicframework.com/docs/api/input

oscarrosete.com

IONIC

Creando un servicio

CLI COMMANDS

 

ionic g service services/data --skip-tests --dry-run

Docs: https://ionicframework.com/docs/api/input

https://angular.io/cli/generate

oscarrosete.com

IONIC

Creando un servicio

CLI COMMANDS

Data service

import http clientmodules

oscarrosete.com

IONIC

Creando un servicio

CLI COMMANDS

Data service

inyectamos el httpclient

oscarrosete.com

IONIC

Creando un servicio

CLI COMMANDS

Data service

inyectamos el servicio al ts del page

oscarrosete.com

IONIC

leer informacion

CLI COMMANDS

Generas el tipo de dato observable, lo igualamos, usamos ngfor con pipe async

 

Ionic Cheatsheet

By Oscar Rosete

Made with Slides.com

Ionic Cheatsheet

  • 234

More from Oscar Rosete