Introduction & Video Goals
Hello everyone, my name is Paulo Alves and on this video I'm going to start coding with you the front end of the mobile application of my new startup called Reciclica. If you haven't seen the previous videos and you don't know what the startup idea is about, you can click somewhere here on top of the screen and then you're going to be redirected to the video explaining everything.
But well, as I already have said the front end of the application is going to be built using the Ionic framework and in this video we are going to do three things: first being what the idea of the ionic framework is, then we are going to install the ionic framework in our machines and, third, we are going to actually start the construction of the application so let's do it.
What is the Ionic Framework?
So, let's get started with a short summary of what Ionic is before we actually create the project. Alright, the Ionic framework is a set of tools that use JavaScript, CSS, and HTML and with these tools we can create user graphical interface, meaning what the user actually sees and does, like button clicks, pages, menu bars and etc. So with that we already can see that the Ionic framework is made for the front end.
Also with it we can create applications that run on several different platforms, like web, Android and iOS. I mean, with the Ionic framework we can create a website, an Android application that you can download from Google Play or an iOS app that you can download from the App Store. What's really cool about this is that you can do these three things at the same time and with the same source code, so only one source code for multiple platforms. This is called hybrid development.
Step 1: Installing Node.js
And, all right, after the summary of the summary on what is the idea of Ionic, let's go to the framework web page to take a better look on how it works. So, here is the home page, right, the landing page of Ionic which has a lot of information about how the framework actually works, but for this video we are interested in the installation part. Here in documentation, installation subsection. This page here has all the instructions that we need to install Ionic.
There are two steps basically: first install node.js and then actually do the installation of the Ionic framework. So let's start from the beginning right. First I have to install the node.js on my machine, so I'll go to the node.js webpage. JavaScript is a language that usually runs in the browser, right? But with node.js we actually can run it outside of the browser. In case you don't have node.js installed just come to the webpage, download the version recommended for most of users and do the normal installation process, same thing as you do to install any other application on your computer.
Then, to check that everything has been correctly installed, go here on the command line and type node -v. This -v means version. So here we can see the version, which means that the node.js is installed.
Step 2: Installing the Ionic CLI
Now we can come back to the Ionic installation page, so we already did this very simple first step, which is to install node.js. Now what we have to do is to install the Ionic CLI. CLI stands for command line interface. After installing the command line interface we will be able to execute the Ionic commands, like to create a new project, the command to create a new page, to create a new service and etc.
At the previous step when we installed the node.js we also installed something called npm, which stands for Node Package Manager. With this npm we'll be able to install node.js packages, so what we are going to do now is to use the node package manager to install globally, this -g means that it will be installed on our entire computer not only in the directory I am in right now, the ionic command line interface. So all right let's run this on the command line and also as I already have node.js installed this will run without any problems. I guess it will do for you too.
So all right after only these two steps the installation of the tools necessary for me to start programming with Ionic have already been made.
Creating a New Ionic Project
I'll close here the command line and I'll open the Visual Studio Code, which is the IDE that I use to program. IDE for those who don't know means integrated development environment. It's like a program that helps with the creation of other programs, I mean, which makes it easier for us to work with programming let's say. Okay, what we are going to do now finally is to create our project using the Ionic framework.
I'm here in the project's parent folder, called reciclica and, in order to create the project, I will use exactly the CLI that we just installed on our machines. Then to create the Ionic project I need to type here ionic start, to start, the name of the project, which is reciclica-app, and the project template that I want to create. Ionic gives us three templates that we can choose from which are this three here: the blank template, the tabs template and the side menu template. I prefer the side menu template for my app so I'll use it. So let's write side-menu.
After typing enter the Ionic CLI will ask me which framework that I want to use, I mean what language I am going to use to develop my mobile application. Well. Like I told you on the previous video, on the first video, actually, showing the idea of the startup, I am more familiar with Angular, so I'll choose Angular, but I also could choose between React or Vue for now. So let's choose Angular.
Now the Ionic CLI asks me if I want to integrate the project with Capacitor; I'll simply answer no for now and then type enter again. Here you can see that the libraries necessary for the project to work are being downloaded and a few seconds later when finally the project is created the ionic cli asks me if i want to create an account on ionic platform. I'll just answer no and let's move on. Here you can see the project's folder, reciclica-app, with all the folders and files needed to run the application.
Running the Application Locally
Here on the command line there are some instructions also for running the project. First I'll go to the project's folder because now I'm in the parent folder, the reciclica folder, but the project is actually in the reciclica-app folder. After this I'll type the command ionic serve. After a few seconds it shows here the URL where I'll be able to take a look at my application locally.
So I'm going to copy the URL, I'm going to go to the browser and I'm going to open now a new tab and then open our application. You can see that we have a menu here, the main body and the header of the application. It's working here in the browser, I mean, it's running on the web environment. To make it work on the mobile environment, I mean on Android or iOS with an application that you install from the application store, I will have to do a few more steps, but this isn't the goal of this video right.
But if I want to see how this will look in the mobile environment I can just press the F12 key and then after clicking here on the cell phone icon we can see how it looks on the mobile environment all right. It also has the side menu here that I can open and close, I can drag the side menu to the side and I can do a lot of things that are similar to mobile applications. This is the Android view by the way. I can also show you the iOS view and in order to do that I will have to update the page by pressing the F5 key. You can see that the app has some modifications, like the menu icon now is above the title and the icons on the side menu are now different and so on. So we can already see that the Ionic adapts itself to the type of device you are using. So pretty cool right.
Conclusion & What's Next
Now we have started the project but the changes to the code for it to become the way I want, I mean the way my application should actually work, those changes will be done on the next videos. And that's it for today it was just a pretty simple step-by-step summary on the ionic framework. All the links you need for this video are going to be here on the description of the video, in case I didn't forget to put them there.
And the next video is gonna be like the second part of this video where i'm gonna do two things: first I will show you all the directories and files that were created in this project right here that we just created and then we are gonna push this code to a public repository on GitHub, meaning that everyone can see it so you'll be able to download the project, to analyze it, make comments make modifications and so on. So just don't forget to subscribe to the channel and I'll see you on the next video.
