Mobile App Development with Ionic and Angular - Idea to App Store

1. Getting Started: Hi, this is my Callahan. I've been using Ionic for mobile application development since 2014 before was even officially released. Since then, Ionic has been my go to technology for building Mobile APS. With the release of Version four in 2019 Ionic grew beyond its humble origins as an angular based framework for making mobile APS. Today, Ionic works with a variety of Web technologies. It has become a first class citizen for building all manner of Web applications. In this course, we're gonna focus on angular, going from zero code all the way to the APP and play stores. Throughout this course, we're going to cover the important aspects of development with Ionic and angular. This lesson will cover the absolute basics, setting up your development environment to be as effective as possible. We'll end with a simple hello Ionic application. We'll jump right into the application structure, explaining how an ionic application is laid out. We'll introduce some of the simple you I components and create a basic side menu for the demo application. The next lesson is all about applications storage. Ionic provides a simple storage mechanism that works across Web browsers and devices will use this to maintain persistent application data that will survive device restarts If you don't need specific hardware capabilities other than the ones available through the Web browser, you can choose to release your application is a progressive Web app or P w. A. While the Web is getting more and more capable every day, some functions still require access to the underlying device your APP is running on. This lesson will be an introduction to device integration with Capacitor in the final lesson will bundle the application to be released to the Apple App store and the Google Play Store. I'm going to make some assumptions about some things you should already be familiar with. I expect you to know how to write programs and at least a single programming language. You should understand at least the basics of Web page layout with HTML. If you know what it did, is how to create an HTML button. You should be just fine. We will make heavy use of javascript and typescript, and it will help if you have at least beginner level knowledge. You're also gonna want a text editor or integrated development environment I use and recommend visual studio code. B s code is a free and open source and cross platform development environment from Microsoft, designed from the ground up toe work with all of the technologies will be using, Of course, you're free to use whatever tool you're comfortable with. One more thing I should make clear this is not a course on angular. While I will cover some of the basics of angular as it pertains to Ionic, I won't go any deeper than I have to To make the demo application work up Next will install the tools needed for you to complete the demo application on providing instructions from Mac OS at this time, I'm running Catalina, but the process should be identical on any recent version of Mac OS Windows 10. These instructions should also work if you're on Windows Server or even win to seven or eight and finally, Oman to Lennox. But you should be able to follow along with any limits distribution. Don't feel that you need to watch all three lessons. Pick the one closest to your system and watch that one 2. Intro to Tooling - macOS: Ionic is supported on a variety of desktop platforms. In this lesson, I'm gonna focus on Mac OS. I'll show you how to install the tools that I use and get the basics up and running as quickly as possible. Will want to ensure you have all the command line and build tools installed before you write any code. That's what will take care of here. Ionic makes heavy use of know J S, a Java script based runtime environment you'll need get and its related bill tools on a Mac . You probably already have it, but we'll make sure. And of course, you'll also need Ionic installing these items pretty straightforward. You should be able to follow right along on a Mac. Most of the tools you need if you don't already have them, could be installed there. Homebrew Homebrew bills itself as the Max Missing package manager. There are a lot of tools and runtime packages available through homebrew, so I recommend installing it. If you don't already have it, you can install it by copying and pasting the command shown on a tone page into any terminal window. Once we have home brew, we can look into installing git, assuming you don't really have it. So first, let's see if you have it, which you can do with the git Dash dash version command. If it's installed, you'll see a version number probably two point something. If you have a version that says Apple, get it probably means that you installed it through X codes. Command line tools and this should be OK. If you don't have get or you'd like to upgrade it, you can install through Homebrew. Simply issue the brew installed. Get command. This will give you the latest appropriate version for your system When it comes to note and node package Manager or NPM, my recommendation is to install a tool called the Node version Manager or envy. M. It's a little more involved, but far more flexible in the long run. N V M is an elegance at a shell. Script functions to enable the most flexible use of note. You can imagine its primary purpose is to enable you to install and switch between multiple versions of note on NPM instantly. So if you happen to have one project that requires no date but another that requires No 12 for example, it's easy to keep them both installed, yet still independent from one another. The more important features of note revolve around route or administrator access or super user. Once you commit to envy M, there's no reason ever to use Sudo. In fact, you don't even need root access to install in V M. This is the recommended method use on Mac OS as it requires no commands, not already on a stock Mac system. Once you've in stone, envy em. You can use it to install any version of No do you want, in this case will install the latest stable version. Simply execute the command shown here to download and install the latest long term support , or LTs version of note. Because I'm using the Z shell on Catalina, I have to put this in quotes. Otherwise, it thinks it's a file name. There are other envy M commands available to you, allowing you to install and use different versions of note. The most common ones are shown here, and I describe them in more detail on the course lesson page just below this video. That's all there is to it. At this point, you've got all these tools installed and available to you. Next up will install Ionic and create our very first application. I hope you're as excited as I am. 3. Intro to Tooling - Windows: Ionic is supported on a variety of desktop platforms. In this lesson, I'm gonna focus on Windows. I'll show you how to install the tools that I use and get the basics up and running as quickly as possible. Will want to ensure you have all the command line and build tools installed before you write any code. That's what will take care of here. Ionic makes heavy use of node Js, a Java script based runtime environment you'll need get and its related bill tools. And of course, you'll also need Ionic installing these items pretty straightforward. You should be able to follow right along on windows, if you don't already have. Note, I recommend heading over to node.js dot org's. When you get there, click the big green button to download the latest LTs or long term support version for me at this time. That version is 12 about 16.1, but it may be different from you, which is fine. Once it's downloaded, you should be able to install it, accepting all the defaults. Next up is get. We won't be doing a lot with get at least not right away, but Ionic uses it so you should have it head over to get dash SCM dot com. Look for the download button and click it. Once downloaded, just like with note, you should be able to accept the defaults once you've installed. Get an note you have a choice to make. During this course, we will occasionally make use of the command line. Get installed a version of the popular Lennix Bash shell called Git Bash. You can also use the normal Windows Command prompt or Windows Power show use, whichever you feel most comfortable with. I promise I'll try not to use any commands that are unique to any one of them. Using your preferred command show, enter the note command with the dash dash version switch and the gift command. Also with the dash dash version switch, you should see something similar to what I'm showing here. If not, then something went wrong and you'll need to try the installers again. And really, that's all there is to it. At this point, you should have all of these tools installed and available. Next up will install Ionic and create our very first application 4. Intro to Tooling - Linux: Ionic is supported on a variety of desktop platforms. In this section, I'm going to focus on a bun to limit, but you should be able to follow along with any modern Linux distribution. We'll show you how to install the tools that I use and get the basics up and running as quickly as possible. Will want to ensure you have all the command line and build tools installed before you write any code. That's what will take care of here. Ionic makes heavy use of node Js, a Java script based runtime environment you'll need get and its related bill tools. And of course, you'll also need Ionic installing these items pretty straightforward. You should be able to follow right along limits. Users tend to be all about choices, so I'm going to provide three different options for installing these tools you can choose to, and so everything directly from the providers websites you can use your distributions package manager for no. There's 1/3 option that will discuss the note version manager. Most if not all these options should work for you, regardless of which Lennox distribution you use before you decide which method is right for you. Let's see whether or not you already have get installed. It's possible you do open a terminal and enter the command knowed dash dash version. If you already have it, your system will respond with a version number. If not as is my case will install it in a moment. The bun tube helpfully provides the command we need to install it. Let's see what happens when we try that with. Get into the command, get dash dash version again. I don't have it. But if you do, you'll see a version listed here and again. You want to helpfully tells me how to go about installing through the package manager. I'm gonna show you the other two ways, but right now let's do the package manager method. So all I need to do is enter the command that was provided for me because I'm using pseudo . I have to use my password, and that's really all there is to it. Let's look at that command. Forget again. Now that the process complete, I should be able to do those commands again and you'll see that I meant node version eight . That's not where I want to be so there's a better way to do this. Let's check the get version, get versions a little old as well, but it'll do just fine. The note version concerns me, though, so let's look at the alternative methods Lennox users can install no directly from the no Js site. If you can't or don't want to use your distributions package manager head over to know J. S don't work When you get there, click the big green button to download the LTs or long term support version for me at this time. That version is 12 about 16.1, but it may be different for you, which is fine. Once downloaded, you should be able to install it, accepting the defaults the same information applies to get. We won't be doing a lot with get at least not right away. But Ionic uses it, so you should have it head over to get dash SCM dot com. Look for the download button and click it once downloaded, just like with note, you should be able to accept the defaults. Let me show you one more option for a note. My recommendation is to install a tool called the node version manager or envy em. It's a little more involved, but far more flexible in the long run. N V M is an elegant set of shell script functions to enable the most flexible use of note imaginable. The primary purpose of N B. M is to enable you to install and switch between multiple versions of note and NPM instantly. So if you happen to have one project that requires no date but another that requires No. 12 it's easy to keep them both installed, yet still independent from one another. To me, the more important features of NPM revolve around root access. Many NPM package installation instructions you'll find on the Web instructed to use the pseudo command to install packages globally because the default location for those global packages are system protected directories. Though unlikely, it's possible that you might have rued access on your Lennox machine, making those instructions worthless. Once you commit to envy M, there's no reason ever to use to do. In fact, you don't even need root access to install in B M. Everything gets installed under own user account, so let's see how that works. This is the recommended method to install in VM on Lennox simply enter either of these two commands depending on whether or not your system has curl or w get already installed. I want to go ahead and pace the w get command into my terminal. I've already uninstalled the other node version, so I'm gonna let envy m handle everything from here on out. As you can see, it was really quick. There is a warning that tells me that I need to reopen my terminal. That's because it added paths and functions to my basho. Let me do that right now. Now, I don't have note because I only installed and VM But if I want to now I can install using envy m any version of know that I want. I'm gonna install the latest LTs version, which again is 12 16.1. And that's all there is to that. There are other envy, um, commands available to you allowing you to install and use different versions of note. The most common ones are shown here, and I'm described them in more detail in the course lesson page just below this video, and that's all there is to it. At this point, you should have all these tools installed in available Next up will install Ionic and create our very first application 5. Your First Ionic App: The final thing we need to do is install the latest version of the Ionic CLI, and we'll do that with NPM. Once we finished will be able to use this Eli to create our very first app. I'm going to run these commands on my Mac, but you should be able to follow along on any operating system that we've discussed so far . One of the things I like to do in my home directory is I have a folder called Get You Can Call It Anything You Want Projects My projects Ionic. It doesn't really matter, but I'm going to go into my git folder now and I'm going to run NPM install dash G for Global at ionic slash cli at latest. Not surprisingly, this will ensure that we get the absolute latest version that there is for us and it installed version 6.3, and that's gonna be important in a moment through the rest of this course, I'm going to stick to the command line. But Ionic has a graphic tool web based tool for building bionic projects rapidly called the Ionic app wizard. So I'm gonna give that a try right now and see what kind of project to give us. So here it is at ionic framework dot com slash start. So it's gonna ask me for a name. Let's try. Hello, Ionic. I'm partial Purple. So I'm gonna pick purple. I want to select angular and the side menu. So let's continue. So because I already had an account, I was able to sign in quickly. I ended it out that part for you. So now what it does is it gives us a custom install command for the Ionics, Eli, and it warns us that we need to have Ionics Eli 6.3 or above, Which is why I said it would be important later. So back in my terminal, I've pasted the command that the Ionic apples or gave us. So now I'm going to run it and see what it does for us. It wants to know if I want to integrate the app with capacitor. I do. But I don't want to do it yet, so I'm gonna take the default of no. And now it's gonna run an NPM install for me Shouldn't take too long, but I'll edit out the longest part for us so you don't have to sit through it. Don't you just love the magic of editing at this point? Wants to know if I want to create a free Ionic account. I already have an Ionic account, but I'm not going toe connected to this time. So I'm just going to say no. So it's done everything I need pretty straightforward, and the next thing it wants me to do is CD into that directory. You could see it already created a git repository, and we're at the Master Branch. Well, without further ado, let's fire it up and see what it looks like. We do that with an ionic serve, and you should be aware of that. Most of the things that Ionics Eli does force it's simply delegating it to the angular Seelye behind the scenes. As you can see here, it's running N G run, app, serve, and it automatically open a browser window using my default browser to local host Port 8100 . The application of built force looks kind of like an email box. In fact, that's what it says. It's an inbox opening up the chrome developer tools. I can show you a cool thing about the default side menu template from Ionic. It's actually using something called an ion split view, which gives us a fixed side menu on wider screens. But as the screen gets narrower, like on mobile devices, it collapses to a standard hamburger menu. Pretty cool, don't you think? So that will do it for this. We just created an app from pretty much nothing. We installed the Ionic Seelye, and we used the brand new Ionic AF wizard to get that app built in the next segment. We're gonna take a look at the code behind this and see how it's all put together. 6. A Gentle Introduction to Angular: as I mentioned before. This is not a course on angular, however. There are some patterns and syntax idioms I want to introduce early. Before we get into the code. I like to think of them as angular ISMs. Yes, I just made up that word. There are a few key concepts peculiar toe angular, but I want to show you before we need to use them. One of the things about angular is that it encourages a strict separation of concerns. Your HTML styling, an excusable code are kept separate from one another. These concerns can communicate with each other, to share data and events through binding expressions and to angular directives, N g four and MGF, which enable you to render multiple copies of an element or decide whether to render it at all. To work through the examples in this section, you might want to open a browser to stack blitz dot com slash fork slash angular. This will provide you with an immediate sandbox, for you can follow along. Let's start by. Talking about angular is concept of separation of concerns in angular you. I functionality is encapsulated and components a component can represent anything from piece of text, a button ah form or even an entire page. Components can contain other components, and they can communicate with each other through very well defined interfaces. To specify that a typescript class is component, use the component decorator. That's the word component. With that at sign, decorators provide additional information by annotating or modifying classes or class members. In this case, the component decorator specifies additional metadata toe angular about how the class will behave. The selector tells angular to expose this component using the HTML tag. My APP template u R l indicates that the HTML markup can be found in the file specified. Likewise with the style your ills. Notice that this value is an array, which means you can provide more than one CSS file. The execute herbal portion of the component code is found inside the class definition. This one contains a single line of code, meaning it isn't really doing much. But this is what we mean by separation of concerns. The code, the markup in the styles are all separated from one another. Let's take a look at the markup. This is found in the template file. This file is pure html containing the visual content. The first line is a tag referencing a custom component named Hello. You can see in the output that it displays the value of the name variable from the APP component, which is the word angular. The power of using components is that you can reuse them, extracting out the common elements and vary them based just on what changes. In this case, the name being passed in those curly braces are an example of an angular, binding expression at render time. The value inside the curly braces is retrieved from the variable name inside the component glass and passed into the hello component through its name. Attributes. Using the word name for both the variable and the attributes is unfortunate and may lead to a little unnecessary confusion. I can change the component variable to something else like person named, and that might make it less confusing. If I change it in the markup, I have to change it in the component, return to the component code and changed the name variable to person name and then change its value from angular to something else and look at the result. Angular watches for changes to these variables. It will re render the component whenever these changes occur. To see an example of component re use inaction simply make multiple copies of the helo tech . However, now we have a problem. We only have one variable called person A. We can hard code, the other names that will work, but it's not very useful. What if we had a bunch of names? Let's change the person named Variable on the component and make it an array called People will add a few people. The cool thing about reason, components this ways. We don't have to change that low component at all. We simply need to change the tag where we use it to include N G four, an angular directive used to create multiple instances of the hello component. Based on the number of elements in the Reference array, you use an N G four by providing it as an attribute to the element you want replicated. The value inside the quote is the looping expression. It consists of the keyword, let followed by the variable name to be used inside of the element and any of its Children . The keyword off and the name of the array on the component toe loop over the asterisk, which is required, is an indication to angular that this directive will manipulate the dom where the pages document object model in some way. There is an alternative bindings in tax that works with HTML attributes. If you want to set the value of an attribute to a value on your component instead of the currently braces, you can surround the attribute name with square brackets and provide the variable name in quotes. Here, the first incidents of name in square brackets refers to the HTML attributes of the custom . Hello component. The second, the word person in quotes is the name of the variable in the energy for expression. Personally, I prefer this method. I find it a little easier to read the next type of by now. Want to discuss his event binding? Any HTML event can become a trigger to execute a function on the component. The simplest way to illustrate that is to create a button and provide a click handler. Then, inside the quotes, call the component function you want to execute. In this case, let's call toggle back inside the component. We need to implement the taco function. Adam is toggled variable at the top of the APP component and set its initial value to false create the toggle function, which will simply negate the value of whatever is toggled happens to be. Now, when you click the toggle button, the value of the is toggled variable will flip between true and false. Theis toggled variable is useless to us until we do something with it. Let's add a new paragraph tag inside. The template file in this case will add an N G if directive and said it value to is toggled Engy. If will conditionally render the HTML tag. If the value inside the quotes of violets to a truth e value so as we toggle is toggled on and off the paragraph tag will appear and disappear. Finally, let's open that hello component. It's pretty cool that we haven't had to do this up to this point. It's a great illustration of an alternative method of creating a component. The component decorator's still defines a selector, which again is the name of the HTML tech. But instead of referring to the template and styles inside of external files, this component divided them directly in this file itself with the template and styles properties. I don't recommend this pattern except for the most trivial of components. As this is notice, though, that even in this example there still a general separation of concerns. The template, styles and executed all code are all in separate parts of the file. Well, with that out of the way, let's go ahead and build our first ionic app. 7. Guided Tour of the App: Now I want to spend some time reviewing the code that was generated for us. Consider this a guided tour of the Ionic could that the APP was or just gave us back in my terminal. There's a couple of commands that I'm gonna enter now that you might want to make note off . 1st 1 opens visual studio code in the current directory, and I'll do that with code dot DOT being the current directory, and the next one is an option to Ionic serve. That does not cause the browser to be open automatically. And that's the Dash B switch. While that's getting set up in rooming, let's go ahead and look at some of the code that was generated for us. First Stop is gonna be the Ionic Config. Jason file. There's not much in here. We have the name of the application and empty object of integrations and integrations is like Cordova or capacitor, and you can see the type is angular. Let's take a look at the index dot html file. At the top, we have a bunch of Met attacks. Most of these men attacks have to do with how the application will appear on mobile devices . The Ionic team has spent years getting these right. I don't recommend you mess with him down in the HTML body tag, there is a single custom html element af route. That's how the APP was created. So let's take a look at where uproot is defined. It's here under source app in a file called app dot component that ts. The first thing to notice is that component decorator near the top. It defined some information about the component and how it should be rendered. Selector tells angular what the tag name should be, so that's where uproot comes from. It's HTML Markup is in a file called app dot component that HTML, which we'll see in a moment. And it's custom styles or an app dot component that s CSS at the top of the class person variables. There's an array of pages. So now you know where those come from next to the labels that we can see in the menu below the list of pages. It's traditional in an angular app to define all of the class level variables and fields near the top, followed by the class constructor, which is what we see here in the parameter list to the constructor is where we can inject various services that the component will require. Platform and Ionic service provides various pieces of information about the device or platform. The APP is running on the next to splash screen and status bar are hold overs from Ionic native and is specific to running on physical devices, which we won't cover at this time. Initialize app is a bit of boilerplate that I'm going to ignore for now. Nd on in it is what's known as an angular lifecycle hook. There are a bunch of them, but this one is pretty often angular will call NGO on an it once the component and all of its Children have been initialized. It's checking the oral of the current page to try to determine which page from the pages of Ray is currently being rendered. Next, let's talk about those pages and how to navigate between them. All of the main application router to find here, think of a route is a euro. The routing module defines an array of routes and describes the pattern of your L to match and describes which page modules get rid of for each. The first round has an empty string for a path with a redirect to field. This means that if there's no path specified in the application, it will default to folder slash inbox next. Any time the route starts with the word folder Slash, followed by an i. D or a page name, the application will import the folder module and followed that model's own routing rules. From there, I promise this will start to make sense as we build our own half. Now it's open folder dot page dot ts and look at something a little more interesting. The folder page component doesn't have a lot of code on it. It has a constructor in which is injected and activated route service. This is an angular service that lets you get information about the route that caused the page to appear inside the N G on an IT function. The page uses that service to get the I. D or the name of that part of the route. That idea is gonna map to inbox outbox, etcetera. Now let's open folded up paged ivy html. This is the mark up, and this is where the real magic happens for this page. Most Ionic pages will contain an ion header tag. This defines that fixed header at the top of the page. Inside of that is an ion toolbar, a container for buttons, menus, titles, etcetera to add buttons to a toolbar. We can use it. I on buttons tag the slot attributes indicates where in the header, the buttons will go traditionally started on the left and end is on the right. This is reversed in right to left operating systems. The ion menu button is that hamburger menu we saw when we made the application. Narrower by default, it shows and hides itself as needed. Next to the buttons isn't ion title with the word folder surrounded by two curly braces. This is an angular, binding expression, and it tells angular to replace that expression with the actual value of the folder variable. Next is the ion content. This is where most of your pages content will live. Contains another header and toolbar containing just title. Finally, we can see an HTML def tag with another binding expression and a paragraph with a hyperlink in. Believe it or not, that's really a good chunk of the functionality. Sure, there are a bunch of other files, but the ones I've showed you are the ones you really need to be familiar with at this stage . The rest will be described as needed. Now, before we leave this little tour, I want to do a couple of fun things, but I'll leave that for the next lesson. 8. One More Thing: Now, before we leave this hello Ionic app, let's do a couple of fun things. How do you think you might customize that page list? If you said modify the at pages array, give yourself a pat on the back. I noticed that there is no sent mail page, so let's create one real quick and see what happens. What I'll do is copy and paste the outbox object. Now we have two of them now, the second instance of the word outbox. Let's change it to sent items and change the or l two folders Life sent. Let's leave the icon alone for a moment. Microsoft Outlook uses that paper airplane for sent items. Let's go ahead and save the page, because here's where it gets fun. As soon as you save these changes, the application will be rebuilt automatically and the browser will reload to reflect these changes. So now let's change the out box icon and we'll set it to albums. Let it rebuild and see the icon change. What do you think will happen now if you click on the new sent menu? We didn't create a new page or a route, so we'll get a 404 No, the folder component will still render with its name said to the I. D or name portion of the route, which is sent. This is because the folder component is a pretty generic object. Not every page will be that clean, but we will make use of this pattern in later chapters of the course. If you want to see where those icons came from, visit I am icons dot com for more information on the components, you can click the components link right in the middle of the hello Ionic app itself, and that's a wrap for this lesson and this chapter. You should have a completely installed ionic development environment know how to create a new ionic app and even do some minor custom is ations. So go forth, rejoice in your newfound power, play around a bit between now and the next lesson. I hope to see you there soon 9. @10Dance - The Demo App: Hi, this is Mike Callahan. In this chapter, we're going to build a U I. Using HTML and the Ionic framework. I'll start by showing you a demo of the finished application and then gradually build it from scratch over the next few lessons the application will be building throughout. The course is called a 10 dance. It is an attendance application originally designed to help Sunday school teachers keep track of the students in their classes. Initially, the Apple consists of three pages home page, a class roster page and a student detail. Page aside, Menu will let the users easily navigate between the home in class roster pages. We'll review how the menu is built and how navigation is configured to move from page to page. Naturally, the home pages where the application will start. There isn't much here but an ion card component. We'll go over the basics of this component to display an image and some text information about the application. The roster page displays the student's registered to the class and contains the majority of the Ionic opponents will use. The students are collectively displayed using an ion list, with each list item consisting of ion items i n buttons, I am icons and more. We'll spend most of our time in the chapter covering this page as we flesh out its functionality with action sheets, alerts and toast notifications. Finally, the student detail page is where we can view and edit various details about a single student will eventually use this page to discuss Ionic forms. In this chapter, All we'll do is lay out the components and buying some data to them. At each step of the way, I will explain the components I've selected and then provide the code that implements them . I hope you're as eager as I am, so let's get started. 10. Creating the New Project: Okay, now that you've seen what we're going to build, let's dive right in and get the project up and running before I start any new Ionic project . I like to make sure that I'm on the latest dynamics, Eli. So let's do that First. In the terminal of your choice, enter the Command and PM Install Dash G for Global at ionic slash eli At latest. If you're already on the latest version, nothing will get installed. Next run the Ionic Start Command when asked. Select the framework will be using next. Provide the name of the project. I'm calling it 10 Dance. It's a play on words I know, and it's horrible. Select the blank template for this one will be implementing a side menu, but I'd rather have us build it from scratch. Besides, this way will be deleting a lot less boilerplate code. You shouldn't get after about capacitor. But if you do, go ahead and answer. Yes, I won't be working with that flow, so all inter node connecting it to Maionica count. Once the project is created, we can open it in the I d to have a look around. There isn't much here because we used the blank template. There's really just a home page that's okay, because we'll build it up pretty quickly. We can also go back into the terminal and fire up a quick Ionic serve command and take a look at how it will render. Here I have chrome showing me what it might look like running on an iPhone again. There isn't much content to speak off, so let's go ahead and take care of that right away. 11. Modifying the Home Page: The first thing I want to do is flesh out the home page as it's the apse landing page. There won't be much content, just some texts and an image inside an ion card. And I on Card is a component designed to wrap basic pieces of information by default. A card has a gray border, rounded edges and a subtle drop shadow. As with all Ionic components, it's visual style will change lightly when rendered on an android versus an IOS device. Cards can be as simple or as complex as you want them to be. The card I envision for the home page well look similar to this one, consisting of an image followed by a card header containing both of subtitle and a title. And finally, a brief intra paragraph. Let's get that page built right now alongside this lesson is an image I'll be using on the home page. Download that image now and drop it into a new folder. Source. Assets Images, coma, classroom dot jp G or J Peg. Open the home page, which is the HTML file in source. App. Home. Delete everything inside the eye on content tag. Change the value inside the ion title tag from blank toe home in the now empty ion content at an ion card component inside the ion card at a standard HTML image tag with the source set to that file you just downloaded, which should be assets images, classroom Dodge, APEC. To be a good citizen, you should also provide an altar attributes. I'm using the word classroom. Let's pause here and see what it looks like. Then we'll take advantage of live reloading as we finish the page. I want to show you a really cool feature of the S code, assuming you're using it. If not, enter the commands on whatever terminal you prefer. V s code has a built in terminal which you can access by pressing control Back tick. That should be the key next to the one. I'll keep this terminal open for most of the course, so we don't have to bounce around so much inside the terminal. Enter the command NPM. Start up till now, we've been using Ionics serve, but I want you to start getting used to using NPM is your script runner. It doesn't matter so much right now, but we'll eventually rely on in PM to do more complex tasks. Fourth, for convenience. I'm also going to try to keep the browser open and have everything whirling in full screen . Together you can see the home page rendered with its new title, the Ion Card and the image Back in the code and an ion card header component by itself. This won't do much so immediately inside that at an ion card. Subtitle with the text Classroom attendance manager and immediately after that and I on card title with the text at 10 Dance. You don't have to spell it in the silly way I've done. If you don't want to save the file and make sure it renders if it didn't make sure the ion card header wraps the subtitle entitled Elements and Look for unclos html tax After the ion card headers closing tag at an ion card content tag. And inside of that a normal HTML paragraph tag. You can put anything you want inside of that, save the file and check the results. It should mostly resemble what I have here. Let's do one more thing now before we leave the homepage, let's put in a link to the roster page, which will build shortly after the paragraph tag at an HTML anchor tag with two attributes . A router link set to roster and arounder direction set to forward. Inside of the tag provides him texts such as Go to Roster. This will create a button with declared of navigation so that we can go to the roster page once it exists. The reason we use router link instead of the typical a tree of attributes is so that Ionic will enhance the navigation animation. For us, the router direction means to use the platforms typical forward animation direction. We could have also specified back a route which would have given us a slightly different animation. Saving the page. You can see the link rendered. However clicking on it won't do anything. We haven't built the roster page yet, so we'll do that next 12. Adding the Roster Page: By now, you should be comfortable adding Ionic tags into a page, but we haven't created a new page from scratch it. We'll tackle that now, but creating what will arguably be the most complicated page in the application to create a new ionic page. We can use the Ionics, Eli or the Angular Seelye. One of things I like best about using angular with Ionic is the rich template ing that angular brings to the table. As we've already seen, Ionic delegates much of its command line operations to the underlying angular cli augmenting it where appropriate, creating pages is one of these appropriate times in the terminal. I'm going to stop the NPM start command and I'm gonna under the command Ionic Generate page roster, the Death Stash Dry Dash Run option. I like using the dry run option as I get a chance to see what will happen in tweak things if I don't like what I see. The upper they get shows me two things here, one that it will create a new roster folder, a page, a separate module for that page, some unit tests and styles. Plus it automatically adds the page into the apse routing system so you can see much of the grunt work has done for you. I also have a message that the Ionic CLI is ready to be updated itself and I'll go ahead and do that. But I won't make you watch. I'm gonna go ahead and rerun that same command this time without the dry run option, because I'm happy with what it's going to get me. Because I stopped the server. I'm gonna go ahead and run it again with NPM start. Now that it's finished building, I can re render the home page. Once I click that roster link, the default roster page just grand will be displayed. There's not much there, but we can take care of that shortly. 13. Student Service: before we flesh out the roster page. We need to get some students to display later will want to tie the list into a day to store some sort, but we don't need to do that just to get the David displayed on the page. For that, I'm going to use a simple students service that we can inject into the pages that need it. Once again, let's use the CLI to create the service. In this case, it doesn't matter whether we used the angular CLI or the Ionics Eli. So to shake things up a bit, let's use the angular CLI. Enter the command N g G for generate service students, which is the name of the service and again, use the dry run command. This command didn't work and here's why. When we installed the Ionic CLI package, we installed it globally. However, the Ionic start commit when it creates an Ionic project installed. The NGC ally locally is the local dependency of the project, so it's not on my path. My system doesn't know where to find it. There's two ways we can get around that we can either install the NGC alike globally or we can use a little utility command provided by note and in PM called MPX. If we pre penned the same command with N P X, that tool knows to look inside my Node Modules folder for the command that specified. So let's just run that again within P X, and now you'll see it work. And again, we're using dry run to see what it's going to dio. By default, the service will be created in the APP folder, but not inside a folder of its own, and it will be created with the unit test. Now let's go ahead and run it again without the driver and flag when it's finished. Open students dot service dot ts. Inside this file will create an interface constant and a function. It will create a student object as an interface. Remember, interfaces do not exist in Java script and will completely vanish upon build. Their sole purpose is for us to enable parameter type, checking code completion and intel a sense inside the code Enter. At this point, I don't know everything that a student object should contain, but those fields should be enough for our purposes. Now those question marks on most of the fields indicate that those heels are optional. So to create a valid student object, I need to provide at least an I. D of first name and a last name. No, I would point out that status field because it might look a little strange at first, but this line says that status is an optional string, but it can only be ever set toe one of two specific values either present or absent. This is a typescript compiled time on the constraint and will have no bearing on the job script that is generated. What it will do is prevent us from compiling the code. If we ever try to use any other value for this field, it will also provide this code completion when setting or comparing values to the field, which is a nice convenience. Let's create an array of students that we can use in place of a database. For now, I'm calling it Mark students. Now for the function inside the class body, let's create a function called get all students. This will return a copy of the mock students array, and I'm doing this with the spread operator, which essentially a shorthand for just making a shallow copy of the Iraq later will flesh out this service with more functionality. But for now, this will get us where we need to be. It's deceptively simple, but that's only because it doesn't do much. Now let's go back into the roster page and make use of it. 14. Student Roster Page: Now we need to put those students we just created into the roster page. Open roster doubt page dot ts Just before the constructor, we need to create a variable toe, hold the array of students he needs to be imported from the student service. Next, we're going to need to inject a reference to the student service into the pages. Constructor. We do that by inserting a new private parameter called Students Service of Type Students Service. I know it's confusing. Make sure you get the casing right or angular, and typescript won't be happy with you. Marking the parameter is private automatically exposes the parameter as a member of the component class. It's a handy shortcut. Types provides for us inside the constructor what's called a get all students function from the student service and a sign that results of the components students array now open the roster page html file so that we can create some market to render the students the headers already set and its title has already set the roster. So there isn't anything we need to do right there. I'm hoping that the ion header is familiar to you as we've seen it on the home page and also during the guided tour. We've already got some ion content, but it's blank. So inside of that, let's introduce a new component. The ion list and I Am List is another container component designed to wrap multiple types of items in a visually consistent manner. I on lists contain things called eye on items, which in turn, rap ion labels high on buttons, ion icons, foreman put fields and so forth. We'll use all of those and mawr during this course. I on lists can also be used to implement items sliding, which you've probably seen before. These are options that only appear when you swipe left or right on an item revealing a less often used or potentially dangerous option, such as delete inside of the eye on list. Weaken iterated over the students array with an N G four directive on the outermost element inside the list. In this case, it'll be an ion item sliding component on the assignment side of the N G four provide let's student of students. This will create one eye on items lining opponent and everything inside of it for each student in the students array I on item sliding will provide us with a new item, swipe or slide option. Inside of that will be an ion item tag. This component will encapsulate the entire list item which we implement with an eye on item component inside the ion item at an ion icon and an ion label as siblings, said the icon slot attribute to start and set the name attributes two person outline inside the ion label. Bind some text to the students last and first names separated by a comma next to them. Let's create two more ion I contacts, which we will conditionally render based on the student's status of absent or present. The 1st 1 is for president and we'll set it to the I icon. The second is to be displayed when the student is absent. So for that one left used the eye off outline, which is an outline of an eye with a line through it. The way we render the icons conditionally is to add the NGF directive to each icon. One will evaluate to truth. The students status is present. The other will render if the student status is absent. Note that it is entirely possible for the students status to be neither value because the status field is optional. In that case, neither I come will be rendered, which is what we want. Save the file now and see how it looks. If all went well, all of our students are displayed is expected. Let's wrap up this lesson by finishing that sliding item immediately before the ion item sliding closing tag. Let's add an ion item options tag with the side attributes set to end. This means that we want the option to appear at the end of the item, meaning when we slide it towards the beginning of the item, little appear inside of that tag at a single ion item option. Tech. Make sure you mind the singular plural here. The plural tag is the outer tech set, this one's color to danger, which by default is a scary looking orange red color. We'll deal with the click handler later, so for now, simply said the tags value to the word delete. Save the file and refresh the page. At this point, the only interactivity is a slider itself. So click and drag an item towards the beginning of the item you should see the delete button, you can click it. It behaves visually, as you'd expect, but it won't do anything yet. In the next lesson, we'll wire up some new commands to this page so that we can manage our roster of students. 15. Adding Functionality to the Student Roster: if you were a teacher and this were a real class of students, there are a number of things you'd want to be able to do with your app. A few of those things are mark absent or present. Navigate to a detail page to see or edit information that isn't visible from the list. Remove a student from the class with the appropriate warnings. Of course, in this lesson, we're going to enhance the U Y of the roster page to do all of those things. The first thing I want to do is add a menu to each student in the ion list. For that, we're going to use an ion action sheet. In Action Sheet is a menu that displays kind of like a dialogue. It often contains at least two, but usually mawr action buttons that are contextually related in some way. In our case, the context is that of the currently selected student and I on action sheet is Ionics specific implementation rendering inaction sheet that automatically looks at home on an iPhone or an android. Buttons and inaction sheet may contain a role which can either be destructive or cancelled . Destructive is used to indicate that something permanent is about to happen and is often used for delete operation on IOS devices buttons with the destructive roller rendered differently than the rest, usually in red. A button whose role is cancel will always be rendered last at the bottom of the sheet. This button should have no other purpose than dismissing the sheet. With no action taken. The buttons and inaction she can have text and icons, but the way you define them is unlike a normal I unbutton component, our action sheet will include buttons to mark a student is present or absent the lead a student or cancel the action and do nothing. In order to do that, we do need to do a bit of set up first in the roster dot pe dot ts file. We need to inject the action sheep controller into the components Constructor. This will enable us to build an action sheet in response to a button click. Next, we need to go ahead and make use of the actual sheet. So I'm gonna put a function down here called Present Action sheet. I'm gonna wait some calls it return a promise. So the function needs to be a sink. It will accept the student so that we can display the appropriate action sheet for the student was clicked. First thing I want to do is create the action sheet itself, which we do by calling the action sheets. Controllers create function, create returns of promise. So we want to await it. Create takes a single options parameter, which I'll explain as we go. The first is header attributes, which will be the title of the action sheet. And I'm gonna set that to the concatenation of the students First and last Names notice We're getting pretty good intelligence here. The reason V s code is complaining is because it knows that I need to add a buttons around and I haven't done that yet, So that's the bare minimum for an action sheet. But as I'm sure you'll agree, that wouldn't be very useful. So the first button is going to be the mark present. But so when you said it's text to mark present, well said it's icon to I and then will provide an arrow function as its handler to set the selected students status to present. And as I promised, you noticed there was Intel a sense. Show me with the legal value of statuses. The next button will be the opposite market, absent and will use the I off icon. Or rather, the eye off outline icon. And its handler function will also be a narrow function to set the students status to absent. The next button is the delete button, which will use delete is its text label, the trash icon, and this is optional. So if you want set the handler to called the delete student function, I'm not going to bother right now. In the next lesson. I'm gonna handle this in a little differently, so I'm just not going to bother calling anything. And remember, these icons and their names come from ion icons dot com and finally, the cancel button. This one will have a text of cancel and I kind of close, and we can set the role to cancel and not bother with handler function at all, and that completes the creation of the action sheet. Having the actor sheet won't actually do anything, though, until we call present. So, as I said, the actual sheet controllers create function return to promise. So we await that promise store, the result of the promise in the constant action sheet. And only then can we call present, which is also going to return a promise. So we await action sheet dot present. Next. Let's create a function to delete a student. Even though I'm not calling in this lesson, I want to set it up in case you want to play around and call yourself. The code will simply filter the students array that we got from the student service next left at a button to launch the action sheet. And we do that in the roster page markup and an ion buttons tag immediately after the two existing icon and right before the ion item closing tax. Give the ion buttons tag a slot after and said its end, meaning that it will appear at the end of the item. Next, add to ion button tags as Children of the buttons tag again. Watch those singular and plural inside of each button at an eye on my calm with the slot attributes, said toe icon on Lee, specify the icon of the first as ellipsis horizontal outline and set the 2nd 1 to Chevron forward outline at a click handler to the button with the ellipsis when clicked. We want to call the present action sheet function, passing the current student from their way. For now, we'll leave the button with the Chevron alone. We'll finish that later. Save the file and have a look at the results. Click the buttons and see that they look and behave as we would expect that forward Chevron won't do anything. If you wired up, delete the student should be immediately deleted. I didn't so it won't do anything. I just noticed something we forgot. I mentioned earlier that typically on a IOS device, anything with the role of destructive such as delete would be in red. So there's a couple of things I want to point out here. The default display mode for Ionic is not Iowa's. In fact, it's material design the way you can force it to switch. Just open up the developer tools and chrome. Let me just fix this. Put the developer tools on the bottom, and so what happens if we select device toolbar mode? Then we can tell it what we wanted to act like. So let me lower this for you. Now it's simply in response of motor. But I can specifically tell it to go into what essentially is an iPhone version, and we even get with the appropriate model, even getting the right device frame. But what you'll see here is, if I click it, it's still in material design. So the way to fix that is to refresh the page, which I'm gonna do with Command are now. You can see the icons turn blue. The text in the title bar went centered and the font changed. So now it's an IOS mode. Chrome is now reporting to Ionic that it's an IOS device, which is really slick, but now notice what happens when I bring up the action sheet. The lead is still not read, and you probably saw why I remembered to do it with this. The delete button. Here you can see the color is danger. So if you go back into roster dot page dot ts, where the action sheet is defined, you can see the lead is missing something. It's missing its role. All we need to do is give it a roll of destructive. Once we give it that role, we save the file, the page rear enders. And now it's read as we expected. So I'm glad I remember to do that before ending this lesson. We'll save the rest of the functionality for a future lesson. For now, though, if you want, feel free to play around. 16. User Confirmation and Notification: the way the code is currently written. Deleting a student from the roster might be done accidentally. If the user clicks or taps on the wrong button, there's no warning or confirmation requested. We need to ask the user to confirm the delete operation before it happens. Likewise, after a student is to leave it, there is no indication that the action occurred. Other than the name disappearing from the list will address both of these shortcomings soon . It didn't consider it for a nap to take a destructive action without at least warning the user. It's better to ask the user for confirmation, and that's what we'll do here. In the previous lesson, they handler for the delete button simply calls the delete student function. It would be better to get confirmation first. We can do that using an eye on alert, and I on alert is a motile you I component that provides a simple warning to the user that something important is about to happen, and optionally provides a means to cancel it. Here's what I have in mind to implement the confirmation. As with all Ionic components, it renders with the appropriate look and feel on both Android and iPhone Inside the roster pages component code you need to inject dialects. Alert controller into the constructor. Make sure it gets imported at the top of the file. Next, create a new function called present Delete alert. It needs to accept a student object just like present action sheet strategy between creating the action sheet and the delete alert. Almost identical. The create function takes and options object just as the action shake controllers create function does and it returns a promise which results to the alert. There are three attributes that controlled the text inside and I an alert. The header attribute is a string that appears at the top of the work. You something like delete this student. The sub header attributes appears just inside the alert body set this after be to awaken Captain Nation of the students first and last names. So the user knows for sure exactly which student is about to be deleted. The message attribute is the main body of the alert use the string such as this operation cannot be undone. Finally, the alert needs an array of buttons. You define these buttons exactly the same way as you did for the actual sheet. The first button is the delete button. It needs a handler that will delete the student. The second button should be a cancel button with the role of cancel. I'm going to use the text. Never mind it does not need a handler. Now. Tow wire all this together. Scroll to the present action sheet function. Find the delete button if you called. Delete student. Replaced that with a call to present Delete alert. If you skipped it as I did, simply add a narrow function, as the handler attributes, which will call present elite alert. Don't forget to pass the student, if you recall, is one other delete button on the page with one inside the ion item option, however, that happens not in the component file, but in the markup. So open the roster page html file and find the ion item option component named delete at a click handler and place the same call into it that we did before. Present the lead alert with the student in this case, the student variable comes from the n G four expression of online nine. Save the file and rear end of the browser If you are very eagle eyed, you will notice that I forgot something. So if we select delete from the action sheet, nothing happens. Likewise, if we dragon selectively, nothing happens. Do you know where the bogus we created the alert? But we didn't actually use it. That was the whole point and waiting in the first place. So the way you do that now, as you call alert dot present exactly the way we did with the present action sheet function , it also returns to promise, so it's not a bad idea to await it, although in reality it's not super necessary. So let's try that real quick. Save the file. We went to the page and now delete will ask us. We can say, Never mind or we could go ahead and leave it and it's gone many times an application needs to provide a notification to the user that something has happened. But it's not so critical that you want to interrupt the flow of the application completely . Toast notifications fill that role perfectly. A toast is a small, unobtrusive pop up informational banner. By convention, it should impart a short message that will appear for a brief amount of time before automatically disappearing. Some toast notifications also contain a way for the user to dismiss it early, deciding whether or not to use a toast. Notification is simple. Does the message require the user to take action? Isn't important if the user misses it. If the answer to both questions is no, then the toast notification is perfect. The Ionic implementation of a toast notification is the eye on toast component. It is probably the most basic of all Ionics. You I components. You can build one with very little effort. Its most basic form consists of a message and a duration, and I on toast, could be vertically positioned at the top, middle or bottom of the screen. It is always horizontally centered. You can color them with the color attribute, providing any of the ionic color confidence or your own custom color. You can add buttons and icons. We won't be doing any of that. If you want to customize your eye on toast after you finish the lesson, feel free in the roster pages component file. We need to add Ionics toast controller to the constructor again. Make sure it gets imported at the top. Next modify delete student to create and immediately presented toast notification. Its message attributes should contain a short statement showing that the student has been deleted. Be as detailed as you want, but remember, the shorter's usually better. The default toast position is vertically centered on the screen. I decided to move it to the top, but quite frankly, you can put it wherever you want. You can choose from top, middle or bottom. The duration attribute controls how long the eye on toast will wait before it automatically dismisses itself. The duration is an integer in milliseconds. Be careful not to specify a duration that's too short, and definitely don't pass a strength if you omit the duration. Attribute. The toast will remain on the screen indefinitely, requiring user intervention to dismiss it, which would require a button if you'll notice that await is underlined. And that's because I haven't marked village student as a sink that will make it happen. You can provide a buttons array to an eye on toast. Just is with the action sheet and the I an alert. If you feel so inclined to go ahead and add one and finally let's not forget to call. Present on the toast, and that's all there is to it. Save the file and left the browser. Refresh. Now, when you delete a student in addition to the student's name disappearing from the roster after you've done the confirmation, you'll also get the notification toast. If you want some ideas on how you can improve this experience, I provide some challenges later, right after the final video. 17. Basic Navigation: Before we wrap up this chapter, I want to add a menu to make it easier to navigate between the home page on the roster page , the menu will mostly look and act like the one from the guided tour and Chapter one, but it will be a bit simpler. In Ionic, you create a menu with the ion menu component. The ion menu is an ionic component that implements aside menu. As with most other Ionic container components, it can contain a header with a toolbar in the title, along with some ion content. The typical side menu consists of a list of pages made from a list of ion items. The menu can be customized with a variety of behaviors. If you want the menu to obscure the main page content you consent. It's type after butto overlay. Other choices are push, which caused the page content to slide with the menu or you can choose reveal to achieve a similar but suddenly different effect with reveal the menu. Content itself is stationary, whereas with push the menu content moves with the page content. You can specify what side the menu is on by setting the side after view to either start or end. If you choose end, make sure your menu icon is on the same side of the main contents toolbar, or it will look weird. You can disable swiping the menu by setting swipe gesture to false. If you want an item in your menu to close the menu when you select it, be sure to wrap it with an eye on menu toggle component. Otherwise, the menu will stay open. The ion menu toggle can also be used to open a menu. Hence the name toggle. Find a fault. It will automatically hide itself whenever it detects that its menu is disabled or is being presented in a split pain, as we're doing here. Because of that, if you want it to be visible all the time, be sure to set its auto hide accurate. So false. Don't ask me how long it took me to debug that the first time I forgot about it. There is more to a menu, but those are the basics. So let's build one now open app dot component that ts This is where will define the menu. Inside the component class created array of to object liberals one for the home page with the appropriate Ural and Icon one for the roster page with its Your L Slash roster and for the icon, Let's use people. Next comes the menu itself, inside of app dot component dot html at an ion split pain and said its content I d to mean everything else on the page should be inside of the split pain just inside the split pain and before the router outlet at an ion menu with its content i d. After being also said to me and said It's type toe overlay Pushor reveal. Personally, I'm partial to overlay, but use whichever value you prefer. Those content I devalues tell the components which router at what they will be controlling so before we forget to do it, said the ion router outlet components I. D. 10 Main. This will tie them all together immediately, inside of the eye on menu at an ion header containing an ion toolbar, and inside of that and I on title, set the title value to menu just after the ion header at an ion content in just inside of that and I on list. This is where the menu will be constructed and will do that by Iterating over the at pages array. Create an ion menu toggle tag with an N G four directive. Specify APP pages, the looping variable and that pages has the object to generate over. As I mentioned earlier, said the auto hide property to false unless you enjoy watching things vanish for no apparent reason. Inside the toggle place an ion item with a rounder link set to the at page dot your L. Doing this automatically turns the item into a hyperlink, which is pretty cool. Make sure you get the binding syntax right, as I'm showing here. Otherwise, you could end up sending your users to a route literally called at page dot euro. Is that the router direction to none, Or root your choice. This affects the animation. It's subtle, so I'll let you play with it and decide what you prefer If you want a visible lines. Separating your menu items is that the lines attribute to full or a mithi after it entirely . I'm not a fan of the way it looks, so I'm choosing none inside the item and an ion icon with its lot set to start and it's icon set to the AP page dot icon again pay attention to that binding syntax. Next is the menu title itself, which will implement with an eye on label with the text bound to the pages title. Next, we need to add a menu button to both of our pages. And no, it is not automatic. So first open home page that Kim il inside the ion toolbar just before the ion title, you need to add an ion buttons component with slot equals start, then an ion menu button component. Inside of that, you don't need to add any texture icons. Those will be managed for you automatically. Then you need to do exactly the same code inside the roster page. Just copy and paste the same block. Save the file. Give it a try. You should now be able to navigate between the home and the roster pages with these. That pretty much does it for this chapter. So let's recap what we just did. If you want to add a page, these are things you need to do. Create the page, component itself with the markup and code you want at a route with the U. R L so that the users can get to the page. If you want the page in your applications side menu added to the APP pages array with the URL title and a Nikon and repeat as needed. We'll add more pages as we go. But for now you've seen the basics. If you want an extra challenge, take a look at the chapter challenges I have provided alongside these lesson videos. If you run into trouble, be sure to leave some comments. 18. Apply What You Have Learned: Now that you've completed this video, take a few moments to apply what you've learned to the demo application. You just built the toast notification you added to indicate that a student was deleted from the roster positions itself at the top of the screen, stays visible for 3000 milliseconds or three seconds and then vanishes. It cannot be manually dismissed by the user, and sometimes it can be a little hard to see in its default color in position. Your challenge here is to fix that change the duration of the toast of five seconds at a closed button so the user can close the toast sooner. Toast buttons are configured the same way that action sheet buttons are. Hint. User role rather than a handler. Move the toast of the bottom or middle of the screen, using its position attributes and choose the one you prefer. Finally, you can change its color. Don't like my icons, head over to ion icons dot com and find something you like better. Here are some ideas you could change the absent and present icon to something else. The icon we using the roster is pretty generic. You could add a gender to the student interface and then adjust the icon based on that value at runtime. You could also change the color of any icon in the application. Here's an advance one. Instead of a close button on the toast notification, why not add a quick undo button along with some code that will perform the undue action typescript to raise? Have a sort function? Provide a button in the roster toolbar to sort the students by last name instead of the current default? I hope these give you some idea of what you can do to make your experience with Ionic a little bit more rich until next time. Thanks for watching. 19. Creating an Xcode project with Capacitor: Hi, this is Mike Callahan in this section. We're going to get the demo app prepared and deployed to the Apple App store. There's a lot to do, so let's get to it. There are some prerequisites you have to have before you begin. You need a Mac, which I assume you have if you're watching this. If not, feel free to follow along, but you won't be able to deploy anything. You need to be a registered Apple developer. I won't go over everything required to get set up as an apple developer, but you can sign up at developer dot apple dot com and finally you need X Code, which you can download from the Mac App store. The first thing we have to do is create a project that we can open in X code from our assets that were created from the Ionic Project, and this will become the basis of the application we eventually deployed Apple. The best way to create either in IOS or Android project for an Ionic app or for any Web app , for that matter, is by adding capacitor to your project. Sure, you could use Cordova, but that's so last decade. If you want the best experience with the least amount of friction, trust me. You'll want to use capacitor in order to get my application into the Apple App store. It needs to be an ex code project. My ionic app is not a next could project. In the past, there was really only one way to do that, and that was by using Cordova. But today I'm going to use capacitor. A capacitor is a new framework or in technology from Ionic, which, interestingly enough, does not require Ionic. In fact, with one exception that I'm about to show, everything I do after that is not Ionic specific at all. So in order to use capacitor, you have to have some built already. So I'm gonna do that with Ionic build, and I'm gonna create a production build. Technically speaking, the dash dash prod option isn't required here. It's not really necessary for a react app. What I find, though, is that using Ionic Bill dash dash prod, it doesn't hurt anything, and it keeps me from having to remember to different commands. In fact, in a little bit, I'll make this into an NPM script and then I'll be able to forget about it forever. At this point, I have a built website, a complete Web application inside of the build folder. I think I have capacitor, but I'm not positive. Most Ionic APs included now by default. But if you don't hear, so you do it. If I didn't have capacitor, this is the command I would have to run. But as you can see, it's already enabled from this point forward, it doesn't matter if I'm using an ionic app, the non ionic app. It doesn't matter if I'm used to react. Angular view Jake Weary Mobile. From this point forward, everything I do would apply exactly the same to all of those. The next thing now that we have capacitor, is to install the Iowa's platform, which will create a next code project for us automatically. And we do that with MPX cap. Add on us. And remember, MPX is nodes way of executing a command that's not in your systems directory but installed somewhere inside of your node models. And because capacitor it's installed locally. It's not on my normal command path. There's an error here, but I don't think it's relevant to what I'm doing right now, so I'll look into it later. But for now, let's go ahead and open it. So it's MPX cap open IOS. This will launch X code with the project. I'm gonna go ahead and build it with command. Be. I'm curious to see if the X Code select error that we're seeing its command line is a something I have to worry about her. If it's just a blip that I could deal with later, the Built succeeded. So now let's see if we can run it. And if we do, we'll select. You can either select a real device or similar the device I'm going. I'm good with the iPhone S C. So let's go ahead and see if we can run the application on there, and it seems to function just fine. If you look down at X Code here, you could see our consul so any council dot log messages that are happening or any errors that are running any errors that we encounter while we're running will appear here, so I should be able to use this just as we normally did. The application appears to work as expected. That's as far as we need to dig into capacitor, I will look into that exclude selector. But it does not seem to be affecting what we need to at this time. 20. Running the Demo App on a Real iOS Device: Now that we have an IOS project for the demo app, it's a couple of things I want to do. A real quick one of them is to open the package dot Jason file and at a script that will make some of the civil easier. And again, I want to point out that everything I do here applies for all of the different types of applications. This one I'm working on specifically is an ionic react up. But everything I'm doing will be the same for and ionic angular app or even a non Diana cap that you just a Web app that you want to put onto an iPhone. So what I'm going to do here is I'm gonna create a script that helps me with the built. If I make any changes at all to the Ionic app, I have to rebuild the APP. And then I have to synchronize the changes with the capacitor project. So in order to do that, I'm going to make use of something that NPM provides. And that's called post. Whenever you have a script that starts with the word post, followed by another word, NPM will run that script right after the first script and let me show you what I mean. It's easier if I just show you. So I'm gonna create a script called Post Built On that will synchronize with the capacitor IOS project. So I just named that script post build and it will run right after the build script. So I'm simply calling capacitors sink command and that will automatically sync the built artifacts with whatever capacitor projects that I have. Whatever platforms that are installed, let's give that a try real quick. If I now just run NPM run build, you'll see that it'll build the application. Then it will immediately synchronized with capacitor, and you could see that the synchronization happened. It even updated some native IOS dependencies. Now what I want to do in this video is get the application running on an actual device. In the last video, we got it running on the simulator. I think of an iPhone SC, but that's not where we need to be in order to get this thing on to the APP store. So I'm gonna open the X Code project now by telling capacitor to open the Iowa's project What you can see here is X Code is not real happy with me right now, because before we got into this, I removed my developer account from X Code. I've also told it not to automatically manage signing, but we want to do that. So a couple of things real quick. So I want to go ahead and tell it automatically manage signing. But it's not gonna like that, right, Because I don't have an account. I also want to change the bundle identifier because they've used this one in the past and it has to be unique on your account. Actually, it might have to be globally unique, so I believe that one is unique. But if I try to build it now, it still isn't going toe work. So build failed. Why? Because I need the development team. So I'm gonna add an account, and I will edit this out for you, but I'm gonna find them with my apple developed writing. And once I'm in, Is that enough? Let's see. Says we have an ex code managed profile here. So what happens if I try to install it on my iPhone? Let me unlock unlock my iPhone while this is happening. I'm also gonna launch the quick time player because there is a really cool feature. But you can dio you can enable a movie recording and that will allow you to mirror your iPhone. So I did let me show you how he did that again. I went to file new movie recording and then I can select my iPhone. I don't have any control over the iPhone from my computer, but I can I could simply scroll as a normally would. Okay, X code says that that built, But I didn't run it yet. So let me me go ahead and make some changes here to my desktop layouts. Weaken. Do all of this together so you should be able to see what I'm doing as I do it. I'm gonna come in here again. I've selected Michael's iPhone from the drop down, and I've got a connected via USB and I'm just going to press play. Built, succeeded, always a good sign and now says it's running. So we should see is the default capacitor splash screen an icon. There's the icon at the bottom and you can see the consul log happening down here. Now this is running directly on my iPhone, and it is, as you can see, the exact same application that we saw before. How cool is that? The next thing I'm going to do is try to get this uploaded to the APP store so you can follow along with that. 21. Creating the AppStore App: The next major step is getting the built application to the APP store, but first we need a place to put it. I need to go to APP store Connect to create the application before I can upload it. So I'm gonna log into APP store connect dot apple dot com. And once I'm logged in, let's see, it says I need to review a an agreement, which means I have to do that before I do anything else right? Once I'm logged into APP Store Connect, I immediately am shown all of the applications that I've currently got on the APP store. You'll see a few of them with little red badges and the word rejected next to them. There are many reasons for these. I'm not going to go into it here. Just be aware that Apple is known to reject applications sometimes for the bizarre ist of reasons to create a new application. Simply click the plus and new app. And the first thing it wants to know is what is this four? Is it for IOS? MacAllister TVO s? It's Iowa's. I'm gonna call it at 10 dance. Let's see if it lets me use the at sign doesn't seem to care. I am us English. My bundle i d does not exist. So I need to create a new bundle i d which I will do here specifically says I can't use the outside here, but a 10 dance and the bundle identifier, as you may recall, is com dot walking river dot a 10 dance now down below. It wants to me to tell it what IOS features that I'm looking for. In this case, I'm not looking for any of these, so I'm simply gonna leave them all blanket continue. And now, registering the bundle I identifier should be able to come back in here like new app. There's my bundle identifier. It's an IOS app and it will be at 10 dance. It is us English in the skew is internal. It can be really anything you want it to be. I'm gonna go ahead and still call it at 10 dance user access. I'm not gonna live in my users. That's beyond this. So everybody who wants to condemn let it apparently it is not like this queue. So let's just go back to a 10 dance. And at this point, we can stop. There's a lot more to be done here, but the purpose of doing this was simply to get it so that we can upload the application. 22. Uploading to the App Store: in this video. My goal is going to be uploading the application to Apple. We won't do anything with it yet, but I just want to show you how to get there. One of the first mistakes I made and I'll take you through that now is if you are not careful. Let's say we were still using the iPhone S e to run it on and what you will find. It's not obvious at first glance how to do this. The first mistake I made is not knowing that archive was the command to use. The second mistake was not being able to figure out why it was almost always disabled. The reason is the device you have specified here, the active scheme, as it's called so earlier on when I first showed this running a next code, I used the iPhone s E simulator, and right now I don't have my iPhone connected to my Mac. You can either plug in a real device or you can simply set it too generic. And that act alone will enable archive. Let's go ahead and do that now. So I took the capacitor application, built it and ran it on my iPhone. I logged into my apple account and everything is being automatically managed all the signing. So in theory, this should just work. This can take quite some time to build everything. I have sped it up here for your convenience, so you don't have to sit through all of this, But you will have to sit through it when it's your own project. Okay, the build succeeded. And now ex God wants to know what I want to do with my archive. Notice that the application name is still app, Probably not where we want to leave it. Nor do we want version 1.0, and I believe that's build one. I'm never going to distribute this, but I'll try to show the process exactly as you would if you are going to distribute it. So the next step is to distribute the application. There are four choices here. I'm going to take the default because, quite frankly, I would never use ad hoc to install on arbitrary devices or says here designated devices. I don't have an enterprise in which to distribute the application, nor do I have a development team. I'm gonna go directly the app store. You can either sign your app and create the bundle without uploading it to the APP store. Or you can just go directly to the APP store. This may cause us some problems. I'm hoping that it won't. It looks like it got past my fear. My concern was that I didn't have any valid signing certificates again. I'm going to take the defaults. All of these options make sense for something you're going to distribute. Could see. On the left of this window are all the applications that I have previously uploaded to the APP store and it looks like one of them. Two of them are called APP. Interestingly enough, however, they don't appear that way on the app store again. I'm gonna let Apple the next could do all of the hard work. I don't see the point in manually managing these things. Maybe fear part of a large organization. You might have a specific set of certificates that you have to use and device profiles. This process is hard enough as it is. I want it to be as easy as possible. Okay, everything is done. Everything's been built. It looks like it's been signed. So now the only thing left is to upload to the APP store connect and it was successful in the video. I'll show you what we have to do to take the next step. 23. AppStore Connect Details: Okay, What do we need to do to get this thing in the APP store? So I'm gonna log into app store connect dot apple dot com. So as you can see, it doesn't even have a Nikon yet, So let's go ahead and click on it and look at what we have to do. It looks like what we have to do is provide a lot of images to me, the images or some of the hardest things to do. Because it's such a manual process, there are ways to speed it up and to get the screenshots of your application in action, Miss, skip the images for now and just look up for the rest of this, you've got to provide up to 170 characters of promotional text. This is the first blurb of texts that your potential downloaders will see in the APP store . You can also provide up to 100 characters of keywords. There's an entire art to selecting keywords and their websites devoted to the subject. Apple is going to require support. You are where can people go? If they have questions about supporting the application, you can also provide a marketing you, Earl, which is a little bit different. This will be a girl that's available in the APP store that people can click on to find more information you have to provide at least to support. You are ill. You don't have to supply the marketing You earl descriptions where you can have a lot of fun. This is where you want to tell the story of your application. You have up to 4000 characters to do so. My recommendation here is you spend a lot of time building this description. Think of it. Is the landing page for your application. You need to sell it. Why do people want to use your application? This application that we're building now does not deal with EI message app for the apple watch. So I'm going to skip those. I'm not saying it's not important, but it's not relevant here. As you scroll down, you get to the build section. So what we have here is we have to go in, select a build of our application, and apparently it's missing something and I will look into that, See if it'll even allow us to select it. It wants to know if I'm breaking any US encryption export laws and as far as I know, taking attendance does not. So I'm going to go ahead and click. No, we're not making any https calls, so I'm going to go ahead and click done. The application icon, as you can see, is the default one from capacitor. So in order to fix that, we'll have to go back into X coat and at the correct icons that we want there and then upload a new built. We'll do that later. I just want to go through everything on APP Store Connect first. The version. I believe it took right out of the application bundle. Here. You need to explain who owns the copyright, who owns the rights to the application and should be you. We need to provide an age rating, and you do that by going into edit and answering a massive list of questions. So I think this is gonna be pretty straightforward for me, where it's not a violent app of any sort. There is no humor is not mature theme. It's not horror. There's no medical, no alcohol, no gambling. Certainly no nudity does not access the Web at all, at least not currently. Nor does it provide the user unrestricted access to the Web, and there are no contests or gambling. It is not made for kids, so I'm not going to check that box. Once you answer those questions, Apple then applies a rating. It's not a game, so I'm not going to include it in Game Center. This next section is whether or not the reviewer the human who's going to review your application once submitted, do they need to sign in to use the APP is an important thing to pay attention to, because it's possible that you might have password protected accounts on your app. We don't so simply skip this one. Contact information is pretty straightforward. If your application is complicated enough, you could attach documentation or videos or other type of help to make it easier for the person who's reviewing it. To understand how to use your application and these last two, when do you want them to release the application to the public? You can manually do it. You can automatically dough, which is the fault, or you can specify a date. Don't release before this particular date in time. And then finally, advertising Does your application use? Adds, Does it display ads and offend that the hard way a long time ago that if you use Google AdSense that Countess, say yes, and if you tell it no and your application really does, it will get rejected. Mean attendance doesn't. But I just wanted to click guests just to show what the other options and requirements are . So let's say we're going to serve ads, but we're not going to link APS together so that the advertisements can be related. I believe that's what the 2nd 1 is. I've never done anything other than simply serving at, so I have never checked either the jukeboxes and you must click this one or you cannot continue. And then again, make sure you look that read text. If you answer the questions incorrectly and they find out about it, they will reject your app, remove it from the APP store, issue a warning, and if you do it again, they may ban your account entirely. Let me roll Scroll back up to the top. I'm not gonna make you watch me filling in all of these things, but in the next video, I'll have it completely filled out, and then we'll worry about the Screenshots and at previews 24. AppStore Connect Details: Okay, what do we need to do to get this thing in the App Store? So I'm going to log into App Store connect dot apple.com. So as you can see, it doesn't even have an icon yet. So let's go ahead and click on it and look at what we have to do. It looks like what we have to do is provide a lot of images. To me. The images are some of the hardest things to do because it's such a manual process. There are ways to speed it up into get the screenshots of your application inaction may skip the images for now and just look at for the rest of this, you've got to provide up to a 170 characters of promotional text. This is the first blurb of texts that your potential downloader, as we'll see in the App Store, you can also provide up to a 100 characters of keywords. There's an entire art to selecting keywords, and there are websites devoted to the subject. Apple's going to require support URL, where can people go if they have questions about supporting the application? You can also provide a marketing URL which is little bit different. This will be a URL that's available in the App Store that people can click on to find more information. You have to provide at least a support URL. You don't have to supply the marketing URL descriptions where you can have a lot of fun. This is where you want to tell the story of your application. You have up to 4 thousand characters to do so. My recommendation here is you spend a lot of time building this description. I think of it as the landing page for your application. You need to sell it. Why do people want to use your application? This application that we're building now it does not deal with the iMessage app or the Apple watch, so I'm going to skip those. I'm not saying it's not important, but it's not relevant here. As you scroll down and you get to the build section. So what we have here is we have to go and select a build of our application. And apparently it's missing something. And I will look into that and see if it'll leave him allow us to select it. It wants to know if I'm breaking into us encryption export laws. And as far as I know, taking attendance does not. So I'm going to go ahead and click No, we're not making any HTTPS calls, so I'm going to go ahead and click on the application icon, as you can see, is the default one from capacitor. So in order to fix that will have to go back into Xcode and add the correct icons that we want there, and then upload a new built. Will do that later. I just wanna go through everything on App Store connect. First, the version I believe it took right out of the application bundle. Here you need to explain who owns the copyright, who owns the rights to the application, and it should make you, we need to provide an age rating. And you do that by going into edit and answering a massive list of questions. So I think this is going to be pretty straightforward for me where it's not a violent app of any sort. There is no humor, is not mature theme, it's not horror. There's no medical, no alcohol, no gambling, certainly no nudity. Does not access the web at all, at least not currently, nor does it provide the user unrestricted access to the web. And there are no contests or gambling. It is not made for kids, so I'm not going to check that box. Once you answer those questions, Apple then applies a rating. It's not a game, so I'm not going to include it in Game Center. This next section is whether or not the reviewer, the human who's going to review your application once submitted, do they need to sign in to use the app? And an important thing to pay attention to, because it's possible that you might have password protected accounts on your app. We don't. So I'll simply skip this one. Contact information is pretty straightforward. If your application is complicated enough, you could attach documentation or videos or other type of help to make it easier for the person who's reviewing it to understand how to use your application. And these last two, when do you want them to release the application to the public? You can manually do it. You can automatically do it which is the default. Or you can specify a date don't release before this particular date and time. And then finally, advertising. Does your application use ads as it display ads? And I found out the hard way a long time ago that if you use Google AdSense, that counts as a yes. And if you tell it No, and your application really does, it will get rejected. I mean, attendance doesn't. But I just wanted to click yes, just to show what the other options and requirements are. So let's say we're going to serve ads, but we're not going to link apps together so that the advertisements can be related. I believe this with the second one is I've never done anything other than simply serving it, so I have never checked these are the two boxes and you must click this one or you cannot continue. And then again, make sure you look at that red text. If you answer the questions in correctly and they find out about it, they will reject your app, removed it from the app store, issue a warning and if you do it again, they may ban your account entirely. So let me scroll back up to the top. I'm not going to make you watch me filling in all of these things. But in the next video I'll have it completely filled out. And then we'll worry about the screenshots. And at previous. 25. App Icon and Splash Screen: Let's go ahead and get the application icon and splash screen taking care of, it's not really hard to do. And I'm going to show you a pretty straightforward way to handle it. Back in the pre capacitor days when everyone was using Cordova. Cordova had a command line option to generate icon and splash screens from a source image. I'm trying to stay away from any of the Cordova tools. Now interestingly enough, the tool I'm going to use is called Cordova rays, which you can see here. And I have a feeling they're going to rename it soon. It's a tool from the Ionic team that kinda pulls in the functionality that the Cordova command-line Easter provide. And it does it all locally rather than sending the file out to the web. Okay, let's get these images built. What I have on the left is a resource's folder that is just inside my project root. This is where the source images are going to live. On the right you can see the iPhone SE simulator is running with the default capacitor icon visible. And if I launch the application, you can quickly see the splash screen. And it's really just a white image with the capacitor logo in the middle. That seems to be the case for a lot of iOS app. So I'm gonna stick to that. What I've done is I've downloaded a PNG file from a site called pixabay.com. It's simply a clipboard with a checklist and pencil. Apple highly recommends not using transparency in your icons. And if you look at the icons that are visible in the simulator, you can see what happens. So the files icon, attendance icon in Safari icon all have white backgrounds, but most icons in iOS seem not to do that. But for the most part you want your icon to be the color that you expect it to be. So what will happen is because I'm using a PNG file with transparency. Those transparent areas will be turned white and I'm okay with that. Let me close that one and the splash screen is similar. It's the same exact image centered in a much larger image. The image size is 2732 by 2732, which is the recommended or required size actually. Okay. I'm gonna stay in the command line for now. Now that I've done that, I'll go ahead and install the package as a development dependency for this project. Next I'm going to tell Cordova raise to build the images I'm looking for. We can execute it with a simple and Px squared over raise iOS to tell it what platform to target. Skip config because I don't have a config file which is part of a Cordova application, and to copy the generated files into my iOS folder, my iOS Xcode project. So let's go ahead and do that. We're gonna see some warnings. But otherwise, it is going to happen pretty quickly. It's done. I didn't speak any of that up. So if we go into the iOS folder and let's see what it was built. It created the icon for us and multiple sizes and a bunch of different splash screens. And you can see if you look carefully that I didn't quite get it centered, but I don't think anyone's gonna care. An important thing to note is that the Cordova raise utility assumed that I was executing it from the root folder of my project. It further assumed that the icon and splash screen, or in a folder called resources at that root level, that the icon is called icon in the splash screen is called splashing and they are both PNG files. The warning that you see here is because there was an alpha channel, which means there was transparency. But all the transparency as mentioned, will be filled him with white. I'm cool with that. So now let's see how it looks and the changes that were made. We simply need to open the Xcode project, which again we can do with NP x cap, open iOS, and that will launch Xcode for us at this point, all we need to do is execute the application and let it deployed to the simulator. Xcode should have already picked up all of the assets for us. So pay close attention to the simulator screen while I press play, you should see the icon change and then the last screen should appear. And really that's all there is to it. I still need to upload this version of the code to the App Store, but that's the exact same process we saw a few videos ago. So I'm not gonna go through that again. 26. Bonus Materials: But before we go, please allow me a few more minutes every time. I know your time is precious and I'll try to make it worthwhile. I maintain a blog at walking river.com. This is where I post many of the problems and solutions I encounter as a professional software developer, you can always reach me, follow me and share your feedback on Twitter. My handle is at walking river. If you'd like to see what books I'm working on, please visit my author page at Amazon.com slash author slash M Callahan. You can also find my ebook and course catalog on gum road. Should you prefer a different file format than those provided by Amazon? And finally, most of my courses are also available on Udemy. Check back often for the latest course offerings. Once again, this is my Callahan. Thanks for watching.