This lab doesn't require a performant laptop so this lab will be done individually, not in teams.
ex.1 Search online and create a short comparison and some Pros & Cons between Android Studio, Ionic and React Native.
ex.2 Follow the next Ionic tutorial or find one by your own and create a small app and upload it your Github page.
ex.3 Send the document with ex 1, a description of ex 2 (screenshots, video, what you understood, what problems did you have) and your GitHub project link to sabina.horincar@gmail.com until Monday (27 Apr) 21:00.

The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript.

We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid.

1. Node.js
2. A code editor (Visual Studio Code, Sublime, etc)
3. Command-line interface/terminal

To open a terminal in Visual Studio Code, go to Terminal → New Terminal.

$ npm install -g @ionic/cli native-run cordova-res

The -g option means install globally. When packages are installed globally, EACCES permission errors can occur.
Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic PWA Elements library.
It's a separate dependency, so install it next:

$ npm install @ionic/pwa-elements

Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality:

$ ionic start photo-gallery tabs --type=angular --capacitor

This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
Next, import @ionic/pwa-elements by editing src/main.ts.

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

$ ionic serve
Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.

There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
Open the photo-gallery app folder in your code editor of choice, then navigate to /src/app/tab2/tab2.page.html. We see:

<ion-header>
 <ion-toolbar>
  <ion-title>Tab 2</ion-title>
 </ion-toolbar>
</ion-header>
<ion-content>
 <ion-header collapse="condense">
  <ion-toolbar>
    <ion-title size="large">Tab 2</ion-title>
  </ion-toolbar>
 </ion-header>
</ion-content>

ion-header represents the top navigation and toolbar, with “Tab 2” as the title (there are two of them due to iOS Collapsible Large Title support). Rename both ion-title elements to:

<ion-title>Photo Gallery</ion-title>

We put the visual aspects of our app into <ion-content>. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a floating action button (FAB) to the bottom of the page and set the camera image as the icon.

<ion-content>
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
   <ion-fab-button>
    <ion-icon name="camera"></ion-icon>
   </ion-fab-button>
  </ion-fab>
</ion-content>

Next, open src/app/tabs/tabs.page.html. Change the label to “Photos” and the icon name to “images”:

<ion-tab-button tab="tab2">
  <ion-icon name="images"></ion-icon>
  <ion-label>Photos</ion-label>
</ion-tab-button>

Save all changes to see them automatically applied in the browser. That’s just the start of all the cool things we can do with Ionic.

Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor Camera API. We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
All Capacitor logic (Camera usage and other native features) will be encapsulated in a service class. Create PhotoService using the ionic generate command:

$ ionic g service services/photo

Open the new services/photo.service.ts file, and let’s add the logic that will power the camera functionality. First, import Capacitor dependencies and get references to the Camera, Filesystem, and Storage plugins:

import { Plugins, CameraResultType, Capacitor, FilesystemDirectory, 
       CameraPhoto, CameraSource } from '@capacitor/core';
const { Camera, Filesystem, Storage } = Plugins;

Next, define a new function, addNewToGallery, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera:

public async addNewToGallery() {
  // Take a photo
  const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri, 
    source: CameraSource.Camera, 
    quality: 100 
  });
}

Next, open up tab2.page.ts and import the PhotoService class:

 import { PhotoService } from '../services/photo.service';
 constructor(public photoService: PhotoService) { }

Then, open tab2.page.html and call the addNewToGallery() function when the FAB is tapped/clicked:

<ion-content>
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="photoService.addNewToGallery()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

Save the file, and if it's not running already, restart the development server in your browser by running ionic serve. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
After taking a photo, it disappears right away. We need to display it within our app and save it for future access.

Outside of the PhotoService class definition (the very bottom of the file), create a new interface, Photo, to hold our photo metadata:

interface Photo {
  filepath: string;
  webviewPath: string;
  base64?: string;
}

Back at the top of the file, define an array of Photos, which will contain a reference to each photo captured with the Camera.

export class PhotoService {
  public photos: Photo[] = [];
  // other code
}

Over in the addNewToGallery function, add the newly captured photo to the beginning of the Photos array.

const capturedPhoto = await Camera.getPhoto({
  resultType: CameraResultType.Uri, 
  source: CameraSource.Camera, 
  quality: 100 
});
 this.photos.unshift({
  filepath: "soon...",
  webviewPath: capturedPhoto.webPath
 });
}

With the photo(s) stored into the main array, move over to tab2.page.html so we can display the image on the screen. Add a Grid component so that each photo will display nicely as photos are added to the gallery, and loop through each photo in the Photos array, adding an Image component (<ion-img>) for each. Point the src (source) at the photo’s path:

<ion-content>
 <ion-grid>
  <ion-row>
  <ion-col size="6" 
    *ngFor="let photo of photoService.photos; index as position">
      <ion-img src="{{ photo.webviewPath }}"></ion-img>
  </ion-col>
  </ion-row>
 </ion-grid>
 <!-- ion-fab markup  -->
</ion-content>

Save all files. Within the web browser, click the Camera button and take another photo. This time, the photo is displayed in the Photo Gallery!

HINT: https://ionicframework.com/docs/angular/your-first-app/6-deploying-mobile

Credits to: https://ionicframework.com/docs/angular/your-first-app