➲ Section 1: Discovering Ionic
⁂ IONIC - 1 Introduction➔ First introductory video of the Ionic framework.
⁂ IONIC - 1.2 Understand the ecosystem➔ In order to fully understand how Ionic works, it is important to understand its ecosystem, In this video, I explain what it is.
➲ Section 2: Necessary facilities
⁂ IONIC - 2 Installing NodeJs➔ In order to be able to carry out a project, we will need NodeJs which is the most used package manager in the world.
⁂ IONIC - 2.2 Installing IONIC➔ Now that we have installed NodeJs, we will be able to, start installing Ionic, with the aim of designing a first project.
➲ Section 3: Realization of a first project
⁂ IONIC - 3.1 Installing VsCode➔ In order to design a project, we will need to install a text editor. I suggest you to install "VisualStudioCode", however, you may very need used a text editor in which you feel comfortable.
⁂ IONIC - 3.2 Realization of a project➔Now that we have made our installations, we can start our first project. And what could be better than a little interaction exercise with a button.
⁂ IONIC - 3.3 Project to-do list introduction➔ We were able to view the contents of an Ionic project and complete an exercise in which we interacts with our page. Now, I offer you a project to carry out from a "to-do list", So first, we review the details of this project.
⁂ IONIC - 3.4 Project structure with Angular➔ In order to carry out our project, we are going to need Angular. It is important to make yourself a little presentation, if you have knowledge about this techno, it's obviously a plus, but I prefer Assuming you don't have any knowledge via Angular. So, a little refresh sometimes, that do well.
⁂ IONIC - 3.5 Creation of a to do list (1)➔ We were able to view the contents of an Ionic project and complete an exercise in which we interacts with our page. Now, I offer you a project to carry out from a "to-do list", So first, we review the details of this project.
⁂ IONIC - 3.6 Creation of a to do list (2)➔ In this second project video, we are going to modify our home page, so the "home page", that we are going to customize in relation to the functionalities that we want to bring. It is all simpler and more explicit to consult the documentation which will indicate to us all the achievements possible using Ionic.
⁂ IONIC - 3.7 Creation of a to do list (3)➔ In this third project video, we will energize our added features using of our TypeScipt file like being able to delete the task we added.
⁂ IONIC - 3.8 Creation of a to do list (4)➔In this last video of the "to-do list", we will look at the style of our project. In either the style is not too bad, I bring you some readjustment which remains light in order to remain neutral. But you can bring better visibility if you wish, everything is relative depending on your preferences.
⁂ IONIC - 3.9 Quizz➔ Now that we have accumulated a lot of information, what better than to offer you a little Quiz fairly easy level, you can have fun answering the questions asked. The goal is to make a small summary of our progress.
➲ Section 4 : Ionic components
⁂ IONIC Section 4 - 4.1 Creation of our first Component➔ In this new section dedicated to Ionic components, we will see how to create a component. So we are going to create a new blank project, and in this project we are going to create a folder in which we will create our component and import it.
⁂ IONIC Section 4 - 4.2 Basic application building blocks➔ In this video we will see the building blocks together. state management, native device features for example through a slide show.
⁂ IONIC Section 4 - 4.3 Description of Ionics components➔ In this video we will see together the description of the components in relation to our Ionic core. As soon as we insert it, we have actions that come true, so it's interesting to know how it works.
⁂ IONIC Section 4 - 4.4 Setting up an Ionic project without Angular➔ In order to see the functionalities of Ionic without Angular, we will therefore create a blank project, and in this project we will delete all files and folders in this new blank project folder. We will create an HTML file and we will use the documentation to insert the links allowing to link our HTML file to the other files that we will create later.
⁂ IONIC Section 4 - 4.5 IONIC Documentation Overview➔ If there is one resource that should not be neglected, it is the documentation. And for once, I can tell you that it is very well supplied, she is very explicit when you need information. We are used to consulting the internet in order to be able to target the problems encountered, the additions of functionalities that we wish to bring or other, why not. But if you check the documentation in the right directory, you will end up having this first instinct.
⁂ IONIC Section 4 - 4.6 Using Basic Ionic Components➔ In this video, we start our second project realization which will be a "budget plan". Firstly we will modify the HTML page using "ion-app" and "ion-toolbar" in order to obtain our header.
⁂ IONIC Section 4 - 4.7 More basic components➔ For our project, we will need more components like "ion-input", "ion-label" or many others, which will be useful to us in order to understand the reasons for our expenditure as well as the amount.
⁂ IONIC Section 4 - 4.8 Component Categories➔ In this video we will see together the different categories of components that we can manipulate during our project. You have for example the "output", the "layout" and the "input" which will be explained to you through a slide show.
⁂ IONIC Section 4 - 4.9 Using ion-grid➔ We will be able to use the "ion-grid" component, which will allow us to make grids that can be manipulated using "ion-row" for rows, "ion-col" for columns, in which you can customize by defining its size or even its content.
⁂ IONIC Section 4 - 4.10 Adding Icons and Using Slots➔ We will be able to insert buttons that will allow us to insert and delete expenses. We will also insert icons corresponding to adding and deleting.
⁂ IONIC Section 4 - 4.11 Using CSS attributes➔ In this video we can add a little style, again I add a neutral style in order to introduce you a readable project, but you can customize it according to your preferences, there is no worries about that.
⁂ IONIC Section 4 - 4.12 Using Ionic elements as "Normal" HTML elements➔ In this project we want to bring a logic, we can very well do it with Angular, but the purpose of this section is to show you that we can integrate an Ionic project without using Angular. So to do that, we're going create a JavaScript file in which we will make console.logs when our buttons are clicked in order to test everything of our elements.
⁂ IONIC Section 4 - 4.13 Validating User Input➔ It's time to make our buttons functional, so we want when we click on "add expenses" the expense is good added and taken into account by our IDE. So we're going to add our own logic to our JavaScript file in this video.
⁂ IONIC Section 4 - 4.14 Creating Ionic elements programmatically➔ In this video we want to structure all of our added items in a list. And to do so, we are going to insert the "ion-list" component, and also embed our logic in our JavaScript file. The goal is to have a history of our actions.
⁂ IONIC Section 4 - 4.15 Completing Basic JavaScript Logic➔ At this point, we can finalize our logic regarding JavaScript. Like for example the wish field when data is filled in, without having validated the expense. We are therefore going to complete this logic in order to fully energize our project.
⁂ IONIC Section 4 - 4.16 Finalizing the layout➔ Now that we have finalized the dynamism of our application, we can finalize the layout of it. So we can modify the personalization of our columns, we can center our display, on my side I bring you improvements, but you can also bring more if you find something playful for example in the documentation, you can test without problem.
⁂ IONIC Section 4 - 4.17 Using Controller Components➔The uses of the components of the controller will allow us, for example, to display a pop-up, therefore an alert, asking the user the confirmation of the deletion, for example, of the expense.
⁂ IONIC Section 4 - 4.18 Why Angular ?➔In this video, you will be explained the usefulness of Angular concerning its complex logic, its state management or its routing.
➲ Section 5 : Angular + Ionic
⁂ IONIC Section 5 - 5.1 Angular + Ionic: Intro Module➔ In this introductory video about the new section dedicated to Angular and Ionic, I will explain the points that we will discussed throughout the section.
⁂ IONIC Section 5 - 5.2 Why use Angular ?➔ This video is a repost from 4.18, if you've seen it you can skip to the next one.
⁂ IONIC Section 5 - 5.3 Creating a new Angular Ionic project➔ To start, we will generate a new project, so we will perform the manipulations together.
⁂ IONIC Section 5 - 5.4 Analyze the created project➔ Now that the project is created, we will be able to examine the architecture of our project folder, it contains, the functionality of each folder and file.
⁂ IONIC Section 5 - 5.5 How do Angular and Ionic work together ?➔First, we will try to understand how Ionic and Angular work together in this video.
⁂ IONIC Section 5 - 5.6 Adding and Loading a New Page➔ It's time to make a new project, so I suggest you make an application that will be a list of recipes. This will allow you to play between the home page so the recipes page and the recipe details page when you click on a recipe in the home page. So we will generate a new folder and modify the "routing" file.
⁂ IONIC Section 5 - 5.7 Using Angular functions on Ionic components➔ Continuation and progress of our application, concerning the page of our recipes where we will insert a table in order to group all our recipes inside as well as the information of these recipes. We will also write Angular code so that we can browse all of our recipes.
⁂ IONIC Section 5 - 5.8 Configuring Angular Routes➔ Following our progress, we will create a new folder which will be responsible for storing information concerning the details of our recipes. It will therefore be necessary to indicate the right path to it to go and draw the details of the recipe from the right file.
⁂ IONIC Section 5 - 5.9 State Management with Services➔ In this video, we will need to generate an Angular service which will allow us to link our recipe details to the recipe that we searched.
⁂ IONIC Section 5 - 5.10 Extracting and Displaying Route Parameter Data➔ In this video, we're going to handle extracting and displaying data to get a single recipe on our page.
⁂ IONIC Section 5 - 5.11 Navigate between pages➔ In order to navigate between our pages, we will need the "routerlink" which will allow us to add the components while adding our own navigation. We are therefore going to integrate our logic in order to retrieve the elements that will be useful for us to navigate between our pages.
⁂ IONIC Section 5 - 5.12 Deleting a Recipe➔ Now let's insert our logic to add deletion functionality to a recipe by adding our deletion icon. We will therefore add the necessary method that will allow us to test our deletion.
⁂ IONIC Section 5 - 5.13 Debugging➔ If you have followed all the videos concerning this project, you therefore certainly have a bug that has been fixed. I will tell you the details in order to debug and thus make our application functional.
⁂ IONIC Section 5 - 5.14 Explication debugging➔ Now that we've debugged, maybe you'd like to know what happened? Well in this video, we are going to see that together.
⁂ IONIC Section 5 - 5.15 Injecting Ionic controllers➔ Our application needs to be finalized, we are going to finalize the layout. We therefore wish to add an alert indicating a confirmation message to the user when he wishes to delete a recipe.
⁂ IONIC Section 5 - 5.16 Angular components vs Ionic components➔ In this video, we are going to compare Angular components vs Ionic components. To do this, we will generate a component in our project to see if there is a difference between the two in our application.
⁂ IONIC Section 5 - 5.17 Conclude➔ The section ends, we can wrap up about the project we have done to prepare for the next section.
➲ Section 6: Building Native Apps with Capacitor
⁂ IONIC Section 6 - 6.1 Creating native applications with Capacitor: introductory module➔ Short introductory video about our new section entitled: Creating Native Applications with Capacitor.
⁂ IONIC Section 6 - 6.2 General Information➔ Before starting, I will give you some general information about the different operating systems.
⁂ IONIC Section 6 - 6.3 Create an IOS application➔ Let's go, we can start our application, know that I work under MacOS, I will be released very soon a new video for making via Windows. In the meantime, you can follow this example showing you the logic to interpret.
⁂ IONIC Section 6 - 6.4 Conclude➔ Short conclusion video following the realization of our application via Capacitor.
Section 7 : Navigation and Routing in Ionic Apps
⁂ IONIC Section 7 - 7.1 Navigation and Routing in Ionic apps introductory module➔ In this new section entitled: navigation and routing in Ionic applications, we will see the various points that we will discuss in this section.
⁂ IONIC Section 7 - 7.2 How does Routing work in an Ionic + Angular app ?➔ We will first see how the routing works in our application using a slide show explaining navigation between all these pages.
⁂ IONIC Section 7 - 7.3 Ionic page caching and its additional lifecycles➔ In this video I explain the concept of navigation. In this section, we want to do a new project, where we are going to design an "AirBnB" style application, for booking places. I will therefore explain the details of the various pages that will be useful to us.
⁂ IONIC Section 7 - 7.4 Project Planning➔ We are therefore going to fill in a route in order to indicate the page linked to the correct recipe so that when we click on the recipe, we have the details of the latter.
⁂ IONIC Section 7 - 7.5 Creation of our application pages➔ In this new video, we will modify our project that we have created, we will make personalized modifications about our project.
👍 Good to know :
💻 Ionic is one of the leading hybrid mobile app development environments used by businesses. It works as an open source SDK framework built on programming languages. Ionic has gained huge popularity as a programming language or framework based on Javascript, HTML 5, CSS 3, Apache Cordova and Angular.
📱 As an open source framework, Ionic has captured the hearts of developers and entrepreneurs due to its rich functionality. The Ionic team is determined to pursue its goal of making mobile development easier for iOS and Android.