In this section, we will guide you through the process of creating your first Ionic app. By the end of this lesson, you will have a basic Ionic application running on your local development environment.

Before you start, ensure you have the following installed:

• Node.js and npm (Node Package Manager)
• Ionic CLI

If you haven't set up your development environment yet, refer to the previous section: Setting Up the Development Environment.

First, you need to install the Ionic CLI globally on your machine. Open your terminal and run the following command:

Once the Ionic CLI is installed, you can create a new Ionic project. Run the following command in your terminal:

• myFirstApp is the name of your project. You can choose any name you prefer.
• blank is the template for your project. Ionic provides several templates like tabs, sidemenu, etc. For this tutorial, we will use the blank template.

After the project is created, navigate to the project directory:

To see your app in action, you need to serve it. Run the following command:

This command will start a local development server and open your app in the default web browser. You should see a basic Ionic app with a welcome message.

Before we dive deeper, let's take a quick look at the project structure. Here are some key directories and files:

• src/: Contains the source code of your application.
  • app/: Contains the main app module and component.
  • assets/: Contains static assets like images and icons.
  • environments/: Contains environment-specific configuration files.
  • index.html: The main HTML file.
  • main.ts: The main entry point of the application.
• www/: Contains the built files for deployment.
• ionic.config.json: Configuration file for the Ionic CLI.
• package.json: Contains metadata about the project and its dependencies.

Let's add a simple button to our app and display an alert when the button is clicked.

1. Open src/app/app.component.html and replace its content with the following:

2. Open src/app/app.component.ts and add the showAlert method:

• HTML: We added an Ionic button with a click event that calls the showAlert method.
• TypeScript: We imported AlertController from @ionic/angular and used it to create and present an alert when the button is clicked.

Save the changes and go back to your terminal. If the app is still running, it should automatically reload and reflect the changes. Click the button, and you should see an alert with the message "Button Clicked!".

In this lesson, you learned how to:

• Install the Ionic CLI.
• Create a new Ionic project.
• Serve the application.
• Understand the basic project structure.
• Add a simple button and display an alert.

In the next section, we will dive deeper into the project structure and understand the role of each file and directory.