Our First Ionic App!

So let's dive in and let's build our very first simple Ionic app or get something onto the screen for this, you can visit Ionic Framework Dotcom and they're on their developers installation. You find installation instructions. Now, first important thing, you don't need an ionic account. You can instead simply install that ionic seal. I hear now for that to be installed and to run, you also need another tool, which is not Jase's. You can get no gas from no, just not Orwick, no traces of JavaScript or runtime. Did you, for example, and mainly used to build server side applications with JavaScript. That is not what will do in this course will still need not just for two reasons. Reason number one is it's package manager NPM for node package manager, which is used to manage dependencies like our third party libraries in node apps, but which also is to defacto standard package manager for web projects in general. So all the four front end web applications as we're building it here in the course and again, and therefore we will use NPM to manage our dependencies. And Psionic is just such a dependency, you could say. Now, in addition to NPM, we also need no trace itself because the ionic build workflow and the tools diatonic seelie behind the scenes run based on not just the U.S. notorious features to execute correctly. We don't need to write the code for that, but we need to have no charges installed for these tools to work. So from Notorious Thought Auric, download the latest version in my case, 11. eight and only if that should fail. Use the ELT's version here. So simply downloaded walk for the installer. It's the same on Windows and Mac OS. It's a normal installer. You go through it and thereafter you'll have no chance and NPM installed automatically. Then you can execute this command and you execute this in your normal terminal or a command prompt now in Windows, feel free to run this command prompt as administrator by right clicking on the executable run US administrator on Mac OS and Linux, you very likely need to add pseudo in front of this command to get the right permissions to execute it. Well, with that, you're probably prompted to enter your password and this will now install the ionic C Alliant tooling, you could say globally on your Mac or PC. Now why globally? Because now we can use that Ionic Seelie anywhere in any PAF here in our terminal to create new ionic projects, to run them to to build an ionic app and so on. So now with that installed, we can use it to build a new app to create a new app for this in your terminal or a command prompt. Navigate into the folder where you want to create your new project folder for this ionic project. Once you navigate it there, run iconic, start, this basically generates and you project it will now ask you a couple of questions like what should be the name of the project and all name it Ionic Angular. Of course, but you can, of course, choose any name you want. Next, you can choose from a couple of templates now the list here could change over time. You essentially have the choice between a blank template, which is totally empty project with just a starting page, the side menu template where you have a side menu, you can slide in from the left and the tabs menu where you have some tabs at the bottom. Now we'll learn about all these different navigation options throughout the course and you will learn how to not just use them from a finished template, but how to build them on your own. And therefore, I will just start with blank here, which is the most boring, but also the most simple template to start with. And as I said, we'll learn about the rest later. Notice will generate a new project and install all the dependencies like angular or Ionic. This project requires let's wait for it to finish and I'll be back once it is. Now, once it is finished, I'm asked if I want to use ionic app flow and connect my app and you can simply answer no here, this is one of these cloud services which would be usable for free. Even you can create a free account and use some services, but I don't need any of them right now. So I'll just type in and enter here now. Next, you can navigate. You see the commands here. Actually, you can navigate into this newly created ionic angular course or whatever you name that folder and in there, simply run ionic surf. Now, ionic surf will be behind the scenes, as you can see here, actually use the angular Seelie, which is installed for you in this project to spin up a development server, which in the end runs your application, builds your angular application, and that's really cool. Ionic uses the angular Seelie behind the scenes. So all the cool features offered by the angular Seelie are included in an ionic project as well. And you don't need to wait for the ionic seal to update to include something you might want to use from the angular Seelie. And if that's something you're totally not interested in, well, then it doesn't hurt you that it uses the angular Seelie. So here I then got my first Ionic app. No, actually nowadays it might more look like this, but the folder structure, the kind of project that was created behind the scenes and the adjustments we'll make, that has all not really changed. In case you want to get the exact same starting page as I have it attached, you find home page on file in which will work in just a second and you can use my attatched one, replace yours with it, and then work in that attached one to have the exact same starting structure HTML code as I have it. But you don't need to do that because it's really just the HTML structure you find in there. Nothing else. Ionic is the same and this doesn't look too fancy yet, but it already doesn't look bad either. This especially looks good if you open your chrome developer tools or whichever browser you're using. But in Chrome, any developer tools, you can click this toggle device thing here and you can then preview the app as it would look on different mobile devices. Just reload after you select a new one. And this doesn't look too shabby. Looks already quite a bit like a mobile app, even though there isn't too much meat in it. But let's change that now. To change that, we need an editor. We need an idea where we can write our code. In this course, I will use Visual Studio Code, which is a free idea built for web development. It's fast. It's awesome. It constantly gets new features. It's really great. You can get it from code dot, visual studio, dot com and there you can download it for your platform. It's a simple installer you downloaded walk through the installer and once you have it installed, you can open the project, the folder you generated here. So in my case, ionic dash, angular dash course with visual studio code here. I did opened at ionic dash, angular dash course folder now inside of which allows you to code. It should look like this for you as well. If it doesn't, you can hit command ship or control shift P on windows and if you enter theme here you should be able to pick your color theme here by pressing enter and I'm using the dark blasphemed. So in case you want to have that same look, you can use the dark blasphemed here. I'm also using some extensions. So if you go to view extensions here. I recommend that you use both the angular essentials can simply search for that here and then install these angular essentials package, this angular essentials package here, I already got it installed. Simply install it on your own. This helps you with general angular development. And what I also do in this or what I also use in this course, I also use the material icon theme and this is totally optional. It's this one here. It just changes to file icons you see inside of your code. And I like that look here. So I installed that theme as well. That doesn't help you at development. It just gives you prettier icons. And if you want to have these same icons, you can see here, you can install this theme. Now, once you're done picking your extensions, you can go back to Explorer here in The View menu or use this shortcut, as I just did. So this gives you the look and feel you see here in this course. And what you find in there in its core is a normal angular app. So if you work with ANGULAR before, which you should for this course, then this does look quite familiar here. You've got a source folder with that folder with the app module app component. And here in the app component HTML file, we see the first interesting thing. These are not normal HTML elements and they're also not normal angular components in the end this year. Are these web components added by Ionic? Now these are some web components. We can see even more here in your home page HTML file good AI and header toolbar title iron content and then also normal HTML element. So it is quite normal to mix and match them. Baryonic has a rich sute of built in elements which in case you want to get a sneak peek already you can find in the official docs under developer's UI components on ionic framework dot com. And there you see a list of all the web components it ships with. And that's quite a lot. We can do cool things like here. We could add iron button, which is one of the components of chips with and in this course you will learn about a lot. So you don't need to memorize this right now or get shocked regarding how you should ever learn this. You will learn it throughout the course. And there I could say change text and let's say I want to change this text up there. So let's grab this text here, maybe move it into a paragraph. And on that button here, we can now add a click listener and execute on change text. So we write normal angular code here. That is what I want to show you. This is a normal angular code and the normal angular click listener. Just the element is not a normal angular or HTML element. It is an ironic web component. And then I would add my edit that we added this click listener and I'm targeting on change text, I can add on change text method here to my home page component class, which is a normal angular component. As you can tell, it has to component decorator. It has a template URL and the selector or so all things you know, from Angular in in there I could have a text property with default starting text let's say. And when we trigger dysfunctioning or this method, I said this text, you equal to changed, and now all we have to do again, normal angular logic, all we have to do is go to home page HTML and there we can output this with string interpolation, also a normal angular feature and we can target text here. And text is simply the property name I have in here. Now with that, if I now say this thanks to Ionic CERV still running and you should keep this up and running, it will automatically watch your code for changes and reload your app in the browser. So rebuild the app and then reload the app in the browser whenever such a change happens. And therefore now if you go to the tab where your app runs, you see the change template. You see this button which looks like this without me adding any S.O.S, which is another part of this building web components. They have a nice styling included. And if I press this button, it changes. Now, by the way, if I would switch to, let's say, a pixel two, so to an Android device and a reload, you can also see that the button looks differently. And if I tap it, we get this ripple effect here. So there's a lot of the stuff Ionic does for you. It automatically adjusts its components to the platform they're running on. It gives you nice styling and you can use them like normal Web elements, like normal HTML elements just with a lot of functionality already included. Now, that is essentially what you will be able to do with Ionic, we haven't even seen the part yet where we take this webapp and run it on a real native device. We'll do this later on the course. But this isn't the end. How we will work with Ionic throughout the course will use the many elements it offers us right. Normal, angular logic and we can build nice, beautiful, automatically adjusting web apps that we can deploy as web apps and run as normal websites, but which we can then later also deploy as real native apps which look and feel like native apps because, well, they are native apps. Then by the end of the course and I hope this whets your appetite here, obviously we'll learn all about the different components here, which ones exist, how we use them, how we configure them and how we combine them with a angular will. Learn all about this throughout the course.