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

1. Introduction - Start Here: 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 going to focus on react, going from zero code all the way to the APP in place doors. Throughout this course, we're going to cover the important aspects of development with Ionic and react. 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 will jump right into the application structure, explaining how an ionic applications 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 application storage. Ionic provides a simple storage mechanism that works across Web browsers and devices. We'll 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 or PW 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 gonna 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 react. While I will point out basic aspect of react as they pertain 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. It's gonna ask me for a name. Let's try. Hello, Ionic. I'm partial to purple, so I'm gonna pick purple. I want a side menu template Looks pretty straightforward and it defaults to react. So let's continue. So because I already had an account, I was able to sign in quickly. I added 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 sea ally of the technology we're using in this case. React so you could see there. It's doing react. Dash scripts start, 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 app 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. Gentle Introduction to TSX: before I opened the code. I want to talk about TSX for a moment. React components are written in TSX. At least the Ionic React components T s X is like JSX, but with typescript right now, that probably doesn't tell you a lot when you see it. I hope this intact won't be too jarring. If you've never seen JSX or TSX before, it can take some getting used to JSX And by extension, TSX is an extension to JavaScript that enables you to include HTML markup directly inside your code to show you what I'm talking about. Consider this code snippet. We start off with an array of fruits that should appear pretty normal to anyone familiar with JavaScript. But then look what it does and immediately returns. HTML. So we have a div containing an H one paragraph, and each two and a Norden list inside. That annoy ordered list of things get a little more interesting. We referenced the fruit array and call the array map function. The map function takes an arrow function which accepts each element as it iterating over the array. Here I'm assigning that array element. The letter F I don't normally recommend naming variables this way. But when I have a single arrow function with a single line of code like I do here, I think it's pretty obvious what's going on. So each element of the fruit array gets mapped to an ally with the fruit of each element of the rain. Notice the curly braces, though, surrounding the call to fruit dot map. That's an indication to TSX that we're going to run some code here. Think of it essentially as a replacement function. At this point, inside the well, this block is going to get replaced with the execution of what's inside it. The same thing happens inside of the ally. Rather than display a constant value, we're going to evaluate the value of F and replace that currently brace expression with the value. At that point, I promise this will become much more clear as we go. I didn't want you to see the Ionic reactor code for the first time and not at least have had this brief explanation. Now let's fire up V s code and have a look at what we're dealing with in the rial app. The ionic app was er generated force 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 React code that the apples 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 could see the type of react next up. Let's look at the index dot ts X file. This is the programmatic entry point of application. You can see that we import react Dom, and what react Dom is is a high level library that provides methods for the HTML document object model. And this gets called from top. Most level of the application. The only thing we're doing with it is calling the render function. The render function takes two parameters. It takes an object to be rendered. In this case, it's the APP tagged the APP component. The second parameter is an element in the page whose ideas route So here we're just passing a normal JavaScript get element by I d function. So now where is that root element to find that's over here in public index dot html at the top, inside of the head tag. There's a lot of meta tags in there that the Ionic team has spent a lot of time getting right. I don't recommend you ever mess with them. So down here in the body, here's the important piece. Here's the I D route that we were looking for. It's the only thing in the body. So if you think back a moment, we're going to get that development and replace it with the APP component. Now you're probably asking, Where's the AB Caponi? The APP component is in app dot tsx app dot ts X is importing a lot of things. We'll skip all the imports and just scroll down to where the component itself is defined. And this is where the application really starts. APP is defined as a constant arrow function of the type react dot fc. So what is all that about? FC is short for function component. Basically, this is a function that will return some HTML. Let's walk through this file in this function to see what it means. The first thing we see is a call to the use state function. This is a hook. If you've heard about react hooks being all the rage, this is what they are. You state enables you to add state surprise surprise to the otherwise stateless function components. It takes the default state as its parameter. In this case, we're passing an empty strength. It returns an array containing two elements. The first element is the object containing our state. In this case, it's the currently selected page, defaulting to an empty strength. The second element of the array is a function we can use from inside the component toe. Alter this state when using hooks to manage your state, it is advised. Never change the state variable directly. So as you look through this code, you won't see any assignments to the selected page variable. Consider it read only, even though it's technically not. So what's being returned by this function? And for this I want to overlay the code on top of the browser so we can see what is being rendered with each piece. Well, first, we have an ion app. Ion app is the root ionic component all applications must use. Inside of that, we haven't ion react router. This is Ionics thin wrapper around the standard React router. The React routers. What lets you create multi paged applications with rich page transitions in what is really a single page application inside of the eye on React router? We haven't ion split pain, I think. In the last video clip, I referred to a design split view. Technical name of the component is I own split pain. This is the layout that gives you that sidebar menu that collapses automatically now inside of the split pain itself. We have that menu and you can see the menu has an attribute called Selected Page and we're setting it to the value of our selected page. State variable is an immediate sibling to the menu component. We have an ion router outlet. So this is where your page content appears. The menu is off to the left, and the ion router outlet contains the rest of your application of your content. And just inside of that, we define some routes. Think of a route as a euro. So given a path that starts with slash page, followed by another identify air and the colon means we're gonna call that identify her name, whatever of really there. So it could be inbox page slash out books. Trash, etcetera were also passing to Route Orender function and Orender function simply means what do we want to happen when this route is matched and tries to render? So that is also a narrow function. It takes a set of properties inside of that function we call set selected page. Remember, we don't want to set the selected page directly by writing to the variable, So we call the state function that was returned to us. So we set selected page to the U. R L parameter, which was passed in through props that second part of the route, which is called name. And then what we do is we return a page object or the page component passing in whatever properties were given to us using that spread operator. What that means is whatever properties were passed to our route, we're gonna pass through and render that page component with the same properties and then finally exact equals. True, simply means that we only match this route if it's really slash page slash some other word . This will make more sense if we start to modify these things. Finally, we have a route called slash. This is the default route. If nothing else has entered, were simply going to render a redirect to slash page slash inbox. So what exactly is a page? As you might guess, it's another component. Let's take a look at the page dot ts X file. It consists of a function component that returns a bunch of Ionic Marco. The primary difference here is that the function component is a generic of type route component props, which is itself a generic. Those air those angle brackets. If you're not familiar with that particular style, This is what lets the router pass those route parameters. In this case, it's expecting that route props to contain just a name which it passes into the arrow function as the value match. Looking down a bit almost hidden in that jungle of Ionic Components is an explore container . I'm going to right click on it and choose Go to definition, and I'll select this one double click. I could have also pressed F 12 on my keyboard. The explore container is another custom function component, which also accepts some container props. This one is much simpler, though, and that it only contains some simple HTML with only a single variable expansion inside of that strong tech. Finally, let's take a look at the menu near the top. The menu defines an APP page interface used to hold some common properties about a page such as its U R L icons entitle below that, it's an array of pages, so now you see where they come from. Next we have those list of labels that we can see in the menu, and just below that is the market. The menu itself is built with an eye on list a component designed to format items in, Well, you guessed it a list. The ion note provides what appears to be a header. Then we come to some interesting coat. The array map function is called on the APP pages array to transform it into a Siris of ion menu toggle components, which are used to toggle a menu open or closed inside of the eye on menu. Toggle isn't ion item, which is another ion component, which is used to group other components together in this case, and I on icon and an ion label, both of which should be pretty self explanatory. The ion item has a router link attributes set to the value of the current pages. You are out. This tells Ionics router to switch to that page when clicked. One other thing I want to point out on the ion item is an attribute called Class Name that is set to the value of some code that gets executed. So remember selected page from app dot ts x. Well, this is what we do with it. What this code is saying is, if selected pages equal to the page title, then we're going to set class name to the word selected. Otherwise, we're gonna set it to an empty string. And that class of what's responsible for highlighting the menu items below the menu is another list generated the same way is the menu. The differences. It uses the labels array and contains no router links. Now, before we wrap up completely, I want to do a couple of fun things which will do in the next video. 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 he said, modify the APP pages around, 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. Let's put it right between outbox and favorites. So let's select the outbox object, Copy and paste a new version right afterwards. Now change the second incidence of the word outbox descent items and change the or l two slash page slash sent. Let's leave the two icons alone. Microsoft Outlook uses that paper airplane icon for sent items. So instead, let's go ahead and save the file. Right now, here's where it gets fun. As soon as you've saved these changes, the application will be rebuilt automatically, and the browser will reload to reflect those changes. But now we have a problem. We've got two pages with the same icon. Let's go ahead and change the icon for the out box two albums outline for IOS and albums Sharp for MD and for your using visual studio code, what you'll see is that it automatically recognizes those identify IRS and offers to import them for you. And that's part of the strongly typed code hinting that you get from Ionic React and again as we saved the page, the icon changes appropriately. What do you think will happen if you now click the new sent menu? We didn't create a new page or a new route. So will we get a 404? Nope. The page component will render with its name set to the name portion of the route, which is sent. This is because the page component itself is a pretty generic object. Not every page will be that clean and allow you to reuse it like that. 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 react 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 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 App: 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. 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. Public Assets Images. Call it classroom dot J pic open home dot tsx and delete everything inside the eye on content tag. Change the value inside the ion title tag from blank toe home. Next, delete the explore container component import at the top of the file while we're at it. Let's delete component itself, which can be found in the source components folder. Delete both of TSX and CSS files in the now empty ion content at an ion card component. If you're using V s code, it should offer to import the components for you automatically. If not, you'll need to make sure you do so yourself by importing every component you use from at ionic slash react 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. Apparently it did not import ion card, So I'm gonna do that. Now 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 terminally 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. So 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, 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. In my case, I let the NPM start die, so I need to start it up again 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 ion router linked attack with two attributes and H ref attributes set to slash roster and a rounder direction attributes set to forward inside of that tag. Make sure you put some text. Otherwise you won't see a link. This will create a hyperlink inside the card that, when clicked, will take us to the roster page. And it's animation will be a forward animation forward, being defined by the platform itself, either Android or IOS. Saving the page, you can see the link rendered. However, clicking on it will take you to a blank page. 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 back in the code editor or at the terminal. Your choice. Create a new file in the Pages folder called roster dot tsx. Inside this file will start by creating the simplest page we could possibly imagine in any page we create. We first have to import the react name space from the React Library. Next, we need a new functional component. React out FC for short called roster to represent the page. A functional component must return some mark up, So for now, we'll just return a paragraph. Then, in order for react, to be able to render the page, it needs to be exported, which we do with the export default roster line. Now any other module can import the roster component. If you're thinking that this will enable the roster page to render when you click the link on the homepage, it won't we need to import it into the app and provide a route open apt out TSX. We saw this in our guided tour in the last chapter. The routing in this app is a lot simpler than we saw before. And for me, simpler is better. Let's add a new route by adding another route tag after the slash home round. The path should be slash roster. The component should be roster. Make sure that the roster component gets imported at the top of the file inset. Exact to true. Now, Any time we request the roster route, the roster page will be rendered. Save the file and give it a try. The link now works. It isn't much of a page, but we'll fix that in a little bit. 13. Custom Student Hook: 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 of some sort, but we don't need to do that just to get some data displayed on the page. For that, I'm going to use a custom react hook, as we saw in the guided tour. React Took is a simple JavaScript function that returns two values inside of an array rather than drilled down into how Hook's work. We can simply wrap a normal one with an array of data and expose it to our roster page. It'll make more sense is we build it, create a new file in source called Student dash hook dot ts. Inside this file will create any newme, an interface constant and a function. This e newme is a convenience that will use to mark a student is absent or present. Next, we'll create a student object as an interface. Remember, interfaces do not exist in JavaScript 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 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. A first name and a last name. At this point, I don't know everything that a student object should contain, but those fields should be enough for our purposes. Now 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 custom hook. The function I'm exporting will be called use students. By convention, all hooks begin with the word use inside the function. I'm simply calling reacts you state function, passing the mock students array as its default value, indirectly returning what you state provides us. 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: back in the roster page. We need to get a reference to the hook. We just created just inside their roster function at a line to call it Remember you Students is essentially a pass through to react. Use state function, but it wraps and hides that mock array. Our roster page doesn't care where those students come from, so we won't tell it. Now that we have some students, let's list them on the screen. Remove that paragraph tag and at an eye on page tag. Remember, all Ionic React pages need an eye on page tag as its root component. As always as we enter these next few component tags on the page, you need to make sure they're being imported from Ionic React. Next, we'll create the page header in certain an ion header tag. Been an ion toolbar tag inside of that in an ion title tag. Inside of that set the ion titles text to roster. I hope that you find the Ion header is familiar, as we've seen it on the home page and also during the guided tour immediately after the ion header. We need an ion content inside the iron content. 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, rabbi on labels high on buttons, ion icons, form input 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 back in the code. Immediately inside the ion list, weaken iterated over the students array using the array map function. We need to provide a narrow function to map that will describe what we want to do with each student in the array. So think of it this way. We're displaying a list of unknown length, but each item of the array will be displayed using the same template inside the maps. Aero function will return some mark up. We'll start with the ion item sliding component ion 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 the icon attribute to person outline and again, don't forget to import your icons or they won't work inside the ion label. Bind some text to the students last in 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, let's use 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 wrap the entire ion icon tag and a Java script. Logical expression. Compare the students status to the value of present or absent, followed by the logical and operator itself, followed by the ion icon. The short circuiting rules of JavaScript will prevent the second half of the expression from being evaluated if the first half evaluates to false 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 present on the list. 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 eye on list. We can either create the menu first or the button to launch the menu. First, let's create the menu first. 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 cancel. 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, delete 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 roster dot tsx. We're going to need a new hook and an object to represent an empty student to control how action she will appear at the top of the functional component. Create a new student object named Empty Student, but said it's three required fields to empty string. Next, make a call to the react. Use state function. Passing the empty student object as its default name. The Return Values Selected student and sets elected student This is a hook that will let us keep track of which student is selected and help us show and hide the action sheet has needed. Next. Create two functions to handle the click event Entered the leave A student from a list. The 1st 1 is Delete Student and the 2nd 1 Let's call Click Student Delete Student will filter the selected student from the current array of students and then passed that to set students. The function. Click student will call sets elected student passing this selected student. Now it's finally time for us to add the action sheet markup. Place an ion action sheet tag just below the eye on lists closing tag. This will make it a sibling of the ion list. This tag will have lots of actress but no child components. The first attribute to set is the is Open after said its value to the binding expression of bang bang selected student dot i d. The double exclamation points coerces the string value into a true bullion. If the I D has a value, it will be true. If not, it will be false because their default student in the state hook is the empty student object. We can be sure of two things its value will never be no, and the I D will either be a real value or an empty string. Next, create a header after with its value set to the King Canton ation of the selected students . First and last names. Don't forget the curly braces man. We want to specify the action to take when the action sheet is dismissed. For this, we use the on did dismiss After you. This is an event on the action sheet itself. Set this attribute to be a narrow function that simply calls the set selected student function passing empty student. This will cause the action sheet to hide itself because the value of is open will become false. Finally, we need to create the buttons array. This is an array of button objects. Each button we'll need a text field in an icon field, a handler function that gets called when the user clicks it and optionally a role value for this action sheet. I want four buttons delete with a roll of destructive the trash icon. And if you'd like ah, handler function that calls delete student, I'm not going to bother right now because I'm gonna wire it up differently. In the next lesson. Mark Present will have the I icon and a handler function, which sets the selected students status to present. Mark, absent with the eye off outline icon and its handler function, will set the selected students status to absent and finally, a cancel button with the clothes icon and the role of Cancel. I said we'd need four handlers, but this one really doesn't need one. And that's the entirety of the action. Now let's create a button to launch the action 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 click student function, passing the current student from the array. 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. We'll save the rest of the functionality for Ah, 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 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 at the top of roster page, create a new hook to control the visibility of the alert inside of the action sheet. If you called, the lead student replaced that call with a call to the hooks set show Delete alert function . Passing true if you skipped it as I did, simply add the handler to call. Set showed elite alert passing true. Either way, the delete buttons definition should now look like this. Now, when the user selects the delete button instead of the student being deleted immediately, the eye on alert will appear. If you recall, there's another delete button on the page with one inside the ion item option you want to place. The same call to set showed elite alert here as it's on click handler to implement the alert itself at an eye on alert component immediately after the ion action, she its closing tag to display the alert it will need and is open attributes that to the value of the show. Delete alert variable. That's what that hook was for next. At an on did dismiss attributes set toe. A narrow function to call set showed lead alert this time passing false. This will cause the alert to disappear. There are three attributes that control the text inside and I an alert. The header attributes as a string. It appears at the top of the alert. You something like delete this student. The message attribute is the main body of the alert. Use a string such as this operation and cannot be undone. The sub header attribute appears just inside the alert body. Set this attribute to a contamination of the students first and last names, so the user knows for sure exactly which student is about to be deleted. Finally, the alert needs an array of buttons. You define these buttons exactly the same way you did for the action sheet. The first button is the delete button. It needs a handler that will delete a student so provide a narrow function that simply calls the delete student function. From before we can do this, because now we have confirmed that that's what the user wants to do. The second button should be a cancel button with the role of cancel, and it does not need a handler. And now don't forget to close your eye on alert tag or you'll have some compile problems. Save and check your work. If all went well, I've lost my mouse. If all went well, attempting to delete a student should no longer automatically do it. Instead, you'll get the alert asking you to delete or, in my case, never mind clicking. That should dismiss the alert with no action taken. Only few delete and then tell it again to delete well, the student actually be deleted. Next, we'll create a small acknowledgement so that the user knows the student really was deleted . 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 at the top of the roster page. Create another hook to use to control the visibility of the toast, just as we controlled the invisibility of the action sheet and the alert. Next, modify the delete student function to call the hook Set function immediately after the lead happens at an eye on toast tag immediately after the I alert tag. Exactly as with the eye on alert, it needs an is open attributes that to the value of the show, delete toast, hook variable and in on did dismiss attributes said to call the hook set function. Its message attributes should contain a short message indicating that the student have been deleted. Be a simpler as detailed as you want, but remember Shorter's usually better for a toast. The duration attribute controls how long the eye on toast will wait before it automatically dismisses itself. The duration is an integer and in milliseconds, so be careful not to specify a duration that's too short and definitely don't pass a strength If you forget and omit the duration. Attribute. The toast will remain on the screen indefinitely, requiring user intervention to dismiss it. A toast default position is vertically centered. I decided to move it to the top, but we'll leave the final decision to you. You can provide a buttons array to an I am toast, just as you did with the I N action sheet and I an alert. If you feel so inclined to go ahead and add one, I'm choosing not to 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 attributes 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 shorter. 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. By default, 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 actually to 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 create a new file in the Components folder. Call it menu dot tsx. This is where will define the menu, replicating what we saw during the tour create an APP page interface near the top that will define what a page looks like. Give it a title, your l and an icon. Next, create an array of these objects inside the array. Provide to object liberals one for the home page with the appropriate You Earl and Icon and then one for the roster page with its Your L Slash roster. And let's use the icon called people. If the editor doesn't recognize the icons, you can import them from ion icon slash icons. Next comes the menu itself, just like the roster page. It's a react function component. Call it menu and said it to a narrow function that will return some ionic content to build the menu content. Create an ion menu element with its content i d set to Maine. This value must match the HTML element i. D. Of the ion router outlet, which was main. Trust me on that one, but we'll double check it will me add the menu to the markup for the type. I'm partial to overlay, but feel free to try, push or reveal inside at an ion header with an eye on toolbar and an eye on title inside the title provide a title such as Menu just after the ion header at an ion content tag. And just inside that and I on list. This is where the menu will be constructed will do this by Iterating over the at pages array. The strategy is similar to what we just saw with students. To do that, open a curly brace to execute some code, call the at pages a raise map function. This function will get a narrow function to be executed for each element of the array. That function will receive two parameters. The page object and the array index of that object. 0123 so forth. The arrow function needs to return the markup for each object. The first element is an ion menu toggle, with its key set to the index variable. If we don't provide this index, react will complain that each child in a list should have a key. It will still render, but it loves an ugly warning. And we don't need that, as I mentioned earlier, set 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. Set 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 that the lines attributes to full for a mithi after it entirely . I'm not a fan of the way it looks, so I'm choosing none inside the item at an ion icon with its slot set to start and it's icon set to the AP page dot icon again. Pay attention to that binding syntax. Make sure you close all your tags properly, and then all your curly braces, air closed and matched and lined up. There's only one line left. We need to export the menu function, otherwise we won't be able to import it into the app to make them and you visible. Open the app dot ts X page immediately inside the Ion React router as its first child at an ion split pain component with its content I d set to Maine make sure the split pain completely wraps the ion router outlet. I'm doing that here with the macro. A shortcut option Down arrow on Windows and Lennox. It should be altered down arrow. Add the menu tag of the first child of the ion split pain immediately before the ion router outlet. We already added the route to the roster page, but in case you didn't you needed here inside the ion router outlet. Finally, for this file, you need to set the ion router outlets I d to Maine. I thought that had already been done, but apparently not. Next. We need to add a menu icon to both of our pages. Nope, it's not automatic. Open the home page at home dot tsx. Inside the ion toolbar just before the ion title, you need to add an ion buttons component with slot equals start been and I on 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 and 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 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. 24. 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. 25. Bonus Material: 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.