IONIC Framework Web and Mobile Technologies | My Assignment Tutor

05/01/20211IONIC Framework Web and Mobile TechnologiesLecture 91ObjectivesDevice EventsPreparing an App that Implements GestureHandlersCodeSigningPreparing a production build for the Apps2DeviceEvents305/01/20212DeviceEventsSo far, we have looked at the (click) andadded handlers for itA (click) in html translates to a touch/tap onMobile DevicesBut, what if you want to perform differenttype of functionality on various types oftouch events?4DeviceEvents– So, what are other eventsthat we can bind to ourevents?– There are a number ofthem, but let’s talk aboutsome of the common events– A user can interact with amobile device in a numberof ways, and a device willtrigger various events forthese interactions5Device Events– We are going to talk about:– press: fired when an element is pressed on thescreen– swipe: fired when a swipe gesture is performedon an element– pan: fired when a pan gesture is performed on anelement– pinch: fired when a pinch gesture is performed onan element– rotate: fired when the device is rotated605/01/20213DeviceEventsThe list we have discussedis a very brief list of eventsThere are a lot more eventsthat are fired by a devicee.g. keyboard events etc.As an application developeryou’ll add handlers forevents that are relevant toyour application7BroadcastEventsIn addition to normal events,a device will trigger someevents as broadcasts as wellThese events allow you toalter the functionality of yourapp in accordance with theevent that’s broadcastedYou’ll need to implementbroadcast receivers in orderto pick these broadcasts inyour app8BroadcastEvents– A network status change is a type of a broadcast eventtriggered by the mobile device– Not only would they inform you about the status change butalso what they’re connected to after this change– You might, for instance, need to implement a receiver for thisbroadcast if you need to inform a user that a feed cannot beupdated until the user is connected to a network with internetconnectivity905/01/20214Apps withGestureHandling10SwipeGesture andHandling it– Swipe gesture is one of the most widely gestures that is usedin mobile applications– There are a number of use cases, from displaying menus, toarchiving an element from a thread, and so on– We will look at a demo application that uses swipe gesturesto create onboarding slides11OnBoardingSlides– A number of applications use onboarding slides, to let usersknow what are they signing up to– These are quite handy when you want to give a brief intro tothe user and highlight the main features of your application– This is also a very good use case of swipe gesture handlersand we will implement an app that adds an onboarding page1205/01/20215Creating theApp– As discussed in lecture 6, let’s initialise a new app for thepurposes of this demo. Let’s call this app onboardingdemoionic start onboardingdemo blank13Adding thePage– We need to add a new page to our app flow, let’s call thispage main– Let’s use, the CLI for this additionionic g page main14Adding thePage Contd.1505/01/20216Building theSlidesAdding the slides in Ionicis quite easyWe can use the ion-slidesfor the container and ionslide for individual slidesSo, lets add these slidesto our hom e.htm l16Markup forSlides12317Building theSlides– You should be able to see the result in the ionic lab, andwould be able to drag between various slides– However, this is only numbers. Let’s make this a little pretty– First let’s add the markup for individual slides1805/01/20217Markup forSlide 1Track Progress of Your Stafftrack and rate the performance of your staff,with a single click19Markup forSlide 2Reward Your Staffreward your staff, based on their performances.let them work for it20Markup forSlide 3Message Your Staffsend direct messages to your staff, if theirperformance is dipping2105/01/20218Styling OurSlides– Styles for [email protected](‘,700’);ion-content {background-color: #EFEFEF !important;font-family:’Raleway’;}22Styling OurSlides– Styles for app.scss$colors: (primary: #C400FF,…);23Styling OurSlides.diag {position: absolute;z-index: 1; width:100%;top: 0;height:66%;}h2 {margin-top:80% !important;font-weight:bold;font-size:1em;}p{width:80%;display:block;margin: 0 auto;font-size:.9em;}ion-icon {margin-top: 40%;font-size:7em;}.swiper-pagination-bullet-active{background:#C400FF;} .swiper-pagination {bottom: 12% !important;}#skip {position:absolute;bottom: 20px;width:100%;background:none !important;text-align:center;cursor:pointer;z-index:5;}2405/01/20219Making theSkip ButtonWork– We will add the skip button to our OnBoarding Slides, andmade it direct to our Main page that we created using the CLIearlier{{skipMsg}}– But before we can do that, we will need the main page to beadded to app.module.ts (we will need to follow the lecture 8for this, I will skip this and you can do it later)25Making theSkip ButtonWork– We will need to add the MainPage to our home.tsimport { MainPage } from ‘../main/main’;– We will also need the property skipMsgskipMsg: string = “Skip”;– And the skip functionskip() {this.navCtrl.push(MainPage);}26Animations– Ionic provides triggers for slides being changed, and you canadd events to add animations for transition between slides– You can do this as a part of the tutorial after this lecture– And add custom animations for slide change event2705/01/202110ProductionBuilds andCodeSigning28Pre-requisites– The pre-requisites for the production builds are the same asthe debug builds– We looked at them last week, and prepared a debug build forour application– We need to add the platform, and configure the platformbefore we can build the project29Addingplatform– For this I have added both iOS and Android platform to thedemo appionic cordova platform add androidionic cordova platform add ios3005/01/202111Configuringthe Platform– As mentioned in last lecture, you will need to install relevantSKDs for both the platforms before you can start building yourprojects– I have both of these added, so we can continue to the build– Lecture 8 has instructions on how to configure iOS andAndroid platforms31Starting thebuild– The build will use the same command as last weekionic cordova build androidionic cordova build ios– This will throw an error, if it’s the first project build for iOS– To fix it run the following:– sudo xcode-select -s /Applications/– The iOS build will produce an xcode project, and the rest willhave to be done using xcode– The android build will give us a debug build as a default, solets change the command for productionionic cordova build –release android3305/01/202112ProductionBuild– Running the last command for android will generate anunsigned release build for your project– However, you cannot submit an unsigned build to play store– So, let’s try to codesign this build34CodeSigningAndroid Build– First, we need a private key for the app, we can use thekeytool for this purposekeytool -genkey -v -keystore demo.keystore –alias demoApp -keyalg RSA -keysize 2048 –validity 10000– You will be prompted to enter a keystore password for thiskey– The tool would ask for some additional information after this, buta demo.keystore will be added to the current directory at the end35CodeSigningAndroid Build– Once the keystore is created, make sure you keep it in a safedirectory. You will need this to publish apps, and updates– Next we will use the jarsigner utility to sign our apkjarsigner -verbose -sigalg SHA1withRSA –digestalg SHA1 -keystore demo.keystore apprelease-unsigned.apk demoApp– You will be prompted to enter a keystore password for thiskey3605/01/202113CodeSigningAndroid Build– Once the app is signed, we will use the zipalign tool inandroid SDK to align our apk– This will be inside Android/sdk/build-tools/version/zipalign– I have copied that into my release folder so, I can run:./zipalign -v 4 app-release-unsigned.apkdemoApp.apk– And this will give me my final demoApp.apk (The rest is onGoogle Console)37CodeSigningiOS Build– You will run the build command with the –release flag to get arelease build added to you app– Then you will open the generated .xcodeproj in Xcode– Add the signing cert, and archive the app (rest of the demoon XCode)38In the End– Submitting apps to the Stores– Going through any Final Topics– Revision for CA23905/01/202114Questions?40


Leave a Reply

Your email address will not be published.