Differences
This shows you the differences between two versions of the page.
|
dapm:laboratoare:10 [2020/04/26 23:52] sabina.horincar |
dapm:laboratoare:10 [2020/04/29 19:22] (current) sabina.horincar |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ===== Laboratorul 10. ===== | ===== Laboratorul 10. ===== | ||
| - | ===== Exercises ===== | + | ===== Project preparation ===== |
| - | 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 (what you understood, what problems did you have) and your GitHub project link to **sabina.horincar@gmail.com** until Monday (27 Apr) 21:00. | + | |
| - | ===== Ionic ===== | + | Create a document file (PDF) and send it on email (sabina.horincar@gmail.com) until** Sunday (19.04.2020) 20:00** containing the following tasks (the lab has to be created by the project team (3 students in a team), if you are in the situation where you don't want to do the final project, you have to do this lab __on your own__): \\ |
| - | The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript.\\ | + | - Name of the team \\ |
| - | === Tutorial == | + | - Members of the team \\ |
| - | == What we will build == | + | - Short description of the project \\ |
| - | We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid. \\ | + | - Motivation of creating the project \\ |
| - | + | - Targeted customers \\ | |
| - | == Download Required Tools == | + | - How are you going to get money $$$ out of it? \\ |
| - | 1.[[ https://nodejs.org/en/ | Node.js]] \\ | + | - Existing similar applications/ Competition \\ |
| - | 2. A code editor ([[https://code.visualstudio.com/|Visual Studio Code]], Sublime, etc) \\ | + | - Your advantage over the competition \\ |
| - | 3. Command-line interface/terminal\\ | + | - Mobile Mockup Application/ Wireframes for mobile app (design of the application screens)\\ |
| - | \\ | + | - Flow diagram (hint: you can use https://www.draw.io/ to create it) \\ |
| - | + | - Technologies that you plan to use (Frontend, Backend, DataBase) \\ | |
| - | == Install Ionic Tooling == | + | |
| - | 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 | + | |
| - | + | ||
| - | + | ||
| - | == Create an APP == | + | |
| - | 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); | + | |
| - | + | ||
| - | == Run the APP == | + | |
| - | $ 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. | + | |
| - | + | ||
| - | == Photo Gallery == | + | |
| - | 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. | + | |
| - | + | ||
| - | == Photo Service == | + | |
| - | 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.\\ | + | |
| - | + | ||
| - | == Displaying Photos == | + | |
| - | 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! \\ | + | |
| - | + | ||
| - | == Bonus: Deploy the application to iOS and/or Android == | + | |
| - | HINT: https://ionicframework.com/docs/angular/your-first-app/6-deploying-mobile | + | |
| - | + | ||
| - | \\ | + | |
| - | Credits to: https://ionicframework.com/docs/angular/your-first-app | + | |
