Web and Mobile Technologies | My Assignment Tutor

01/12/20201IONIC FrameworkWeb and Mobile TechnologiesLecture 71ObjectivesUNDERSTANDINGWHAT’S IONICSETTING UP IONIC HOW TO START ANIONIC PROJECTIONICCOMPONENTSAPP NAVIGATION2What’s Ionic?301/12/20202What’s Ionic– Ionic is an open source SDK for building Hybrid Mobileapplications for iOS, Android, and Windows Phone– You can use the standard web technologies knowledge(HTML, CSS/SASS, JS) to implement an app– You can also harness the power of Apache Cordova to addnative functionality4IonicPrerequisitesYou need to have node installed, before youcan start using ionicYou will also need to ensure that the NodePackage Manager (npm) is included in theinstallationVisit https://nodejs.org/en/download/ todownload node and for instructions oninstallation of node5Setting upIonic601/12/20203Ionic SetupYou will need to install ionic and cordova onyour computerThis can be done as a global install or as aproject installInstalling a node package globally will meanthat you don’t have to do it every time youhave to start a new project7Ionic SetupOpen the console of yourchoice if you’re using awindows machine (cmdercan be an option)If you’re using Linux orMacOS, you can useterminalRun : npm install -g ioniccordova-g means you’re installingit globally8Starting YourIonic Project901/12/20204Ionic ProjectInitialisationOnce you’ve installed ionic and cordova, goto the folder where you want to initialiseyour ionic projectRun : ionic start projectName blankThis will initialise a new ionic project for you10UnderstandingProjectInitialisationionic: This is how you access the ionic CLI, and issue variouscommands to itstart: This is the command you issue to ionic CLI to start anew projectprojectName: This is the path, and this is the nameassociated with your projectblank: This is optional, this signifies you want to start ablank project. There are some quick starter templates tostart from as well11Serving yourIonic App– Once the app has been initialised, you need tobe able to see and test this app– Change your current directory to the projectdirectoryRun : ionic serve– This will setup a development server on yourcomputer, and let you preview the app in abrowser1201/12/20205Serving your IonicApp13Serving yourIonic AppThe ionic serve command accepts a number of other arguments, use ionic -h to seeall optionsSome of the most notable arguments are:–port: allows you to specify the port (default is 8100)–nolivereload: this specifies that the browser shall not reload every time you savethe files (it’s enabled by default)–browser: allows you to specify the browser you want to use-lab or -l: allows you to run the app with various platforms simultaneously–platform: allows you to serve the app with a specific platform build14Serving your IonicApp1501/12/20206IonicDirectoryStructure– Bulk of your work will happen in the/src directory– For those familiar with Angular,there’s no huge difference here– You have the pages, assets, andthemes folder and we will discussthere usage– Also you may notice that instead ofCSS we have a SASS (.scss) file16IonicComponents17IonicComponentsIonic documentation is available at https://ionicframework.com/docs/ and itprovides a comprehensive documentation for the framework as well as thecomponentsIonic components are simple building blocks for your applicationThere are 28 of them to be exactWe cannot discuss all of them in the classBut we will try to understand how to use them, and you can learn about the rest ofthem using the documentation1801/12/20207Types of IonicComponentsThere are two different types of ionic components:Components that are composed of just HTML and CSS, let’srefer to these as template componentsComponents that have interactive, dynamic functionality,let’s refer to these as dynamic componentsThe documentation will provide the information on how toimplement these components in your mobile application19TemplateComponentsThere are 20 different template componentsOut of 20, only 3 templatecomponents do not have anyattributes associated withthemCardGridButtonThe remaining 17 components have attributes, whichadd unique characteristics to these components20TemplateComponentsContd.Let’s look at an example that will allow us to add a simple card to ourapp:– First, we will need to open the home.html– After this we are going to add the card markup to the home.htmlThis is the TitleThis is some demo content of our first demo card2101/12/20208Template Components Contd.22TemplateComponentsContd.N ow let’s look at an exam pleof the button com ponent andthe docum entation for it:The button com ponent inionic is the button com ponentfrom H TM L w hich has beenenhanced w ith the ion-buttondirectiveTo m arkup to add a basicbutton to your ionic app isDemo Button23TemplateComponentsContd.Let’s add a button to our demo card thatwe added to our app earlier:We are going to add thefollowing markup to ourcard contentDemoButton2401/12/20209Template Components Contd.– ion-button: this will identify that we want to turn the button into ionic button– block: attribute will specify that we want our button to be a block level element (it’s aninline-block by default)– outline: attribute will specify whether we want the button to be an outline button or asolid button– color: attribute will identify the color we want to use for our button (the default optionsare light, secondary, danger, dark and the default style)25TemplateComponentsContd.N ow let’s look at anexam ple of the FABcom ponent and thedocum entation for it:Floating Action Buttons(FABs) are standardm aterial designcom ponentsW hen pressed the FABscan have m ore relatedactions, or perform justone prom oted action26TemplateComponentsContd.Let’s add a FAB to our demo app• • • • • • 2701/12/202010TemplateComponentsContd.28Navigation29Adding TabsMarkupWe are going to add the markup to the app.html for thenavigation for this demo (this will vary depending on the appconfiguration) We will use the tab components of ionic framework to achievethis purpose Now let’s add a navigation to our app, that will allow us tonavigate through various pages of the app 3001/12/202011Adding TabsMarkupContd.We will add the following markup to theapp.html to add three tabs to our app• • • 31Adding TabsMarkup Contd.32Adding TabsMarkupContd.For now all the tabs are linked to therootPage, let’s add more rootPages calledroot2Page, and root3Page3301/12/202012Adding TabsMarkup Contd.34Adding TabsMarkup Contd.35Adding Page Markup The .ts file for the pageThe updates forapp.components.ts 3601/12/202013Adding PageMarkupThe updated app.module.ts file37What’s in nextlecture?GESTURES ADDING PLUGINS TOTHE APPWORKING WITHSASSA LITTLE BIT ONCUSTOMDIRECTIVES38Questions?39


Leave a Reply

Your email address will not be published.