Commit 4e507f46 authored by David Hardy's avatar David Hardy

Updated readme

parent 28ef6090
......@@ -36,7 +36,7 @@ with some hardcoded data, nothing fancy, and not connected. Then we'll add some
### Step 1.1: Get the basics
Let's start with running the demo App.
- Pull the workshop repo form `https://gitlab.codecentric.de/firebaseworkshop/AmazingPhotoUploader.git`.
- Switch to the branch `workshop/part1`.
- Switch to the branch `workshop`.
- Get the Angular CLI, run `npm install -g @angular/cli`. (For any `-g` flag you might need to have elevated rights i.e. `sudo`)
- Obtain the dependencies, run `npm install`.
- Now test drive the App, run `npm run start`.
......@@ -131,7 +131,7 @@ then we will weave Firebase in our code base. Actually, it's not weaved like spa
### Step 2.1: Add Firebase support libraries for Angular
Since we are developing an Angular App, we can use the Angular bindings for Firebase.
- Open an terminal and go to the `app` folder, `cd app`
- Run `npm install firebase angularfire2 --save`, to install [The official library for Firebase and Angular](https://github.com/angular/angularfire2).
- Run `npm install firebase @angular/fire --save`, to install [The official library for Firebase and Angular](https://github.com/angular/angularfire2).
- Next Run `npm install firebaseui firebaseui-angular --save`, to install an [off-the-shelve login manager](https://github.com/RaphaelJenni/FirebaseUI-Angular).
Watch the _*ui_ in the second line, it's miss red easily.
......@@ -197,13 +197,20 @@ That's where **Functions** comes into play. We've already created one function,
Do the following from within the `/functions` folder:
- Start with obtaining the firebase dependencies, run `npm install firebase-functions@latest firebase-admin@latest --save`.
- Next replace the contents of `/functions/src` with the contents of `/functionsExample/src`.
- Now run `npm install @google-cloud/storage jimp rxjs --save` to get some app specific dependencies.
- Next replace the contents of `/functions/src` with the contents of `/functionsExample/src`.
- Run `npm run build`.
- In the file `firebase.json`, replace the contets of `functions` with
```
"ignore": [
"lib/model/**"
]
```
Now go back to the project root folder and:
- Run `npm run build`.
- Run `npm run deploy`.
- When asked for deletion of _hello world_ enter `yes`.
When this is done we should see in the Firebase console, under _Functions_ our 2 functions; _storageFinalizeFunctions_ and _deleteImages_.
Now upload an image with the App, either from http://localhost:4200 or, even better, from the just deployed public site
......@@ -266,9 +273,8 @@ So far we have already made a great App, we can register, sign up, log in. We ca
however were only getting started. We want to grow our App with new functionality. You know what would be great? Voting!
### Step 3.1: Naive voting
Let's start with the most easy way to have voting. Uncomment #TODO
- TODO 1
- TODO 2
Let's start with the most easy way to have voting.
- Uncomment the remaining code in `app/src/app/facade/image.service.ts`
Now we should be able to cast votes, and see the total. However there are at least 2 glaring problems with this naive solution.
......@@ -328,7 +334,11 @@ result in less reads, probably staying close to the free tier usage limits. Alar
This step is very important, but requires knowledge of TypeScript and Angular, so if you are not comfortable with Angular, feel free to skip to Part 4,
as long as you take to hart the above described problem.
In the class `app/src/app/facade/image.service.ts` you need to remove the method `getVoteScore$`. Instead you can use the fields `totalVotes` and `score` of `ImageData`.
- Start with some comment toggling, in `app/src/app/ui/thumbnail-card/thumbnail-card.component.html` toggle the comments.
- Next in `app/src/app/ui/thumbnail-card/thumbnail-card.component.ts` follow the comment.
- In the class `app/src/app/facade/image.service.ts` you need to remove the method `getVoteScore$`.
- Instead you can use the fields `totalVotes` and `score` of `ImageData`.
These fields do not contain any content yet, and it is your job to create an aggregation function. Open the file `functions/src/index.ts` and start with the code below.
Create a function that updates the fields `totalVotes` and `score`.
......@@ -371,7 +381,7 @@ Once we have a build server building the code, it's time to deploy the code. Fol
- Copy the token from the commandline.
- Go to the GitLab project , **Settings > CI/CD > Variables**.
- Enter as the name of the variable `FIREBASE_TOKEN`, and as the value...
- Uncomment the commented lines in `.gitlab-ci.yml`, and replace the project name with your project name.
- Uncomment the commented lines in `.gitlab-ci.yml`, and replace the project id with your project id.
- Commit and Push, and wait for the pipeline to finish.
- Now go to _The Firebase Console_, and select **Hosting**.
- There should be a new version deployed, with a message like _"Pipe 123 Build 456_".
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment