\n
This is the part 6 of post Intro to Nodejs - part 5.
\nIn this post, we will integrate our Books API with all CRUD (Create, Read, Update and Delete) operations with our Ionic App.
\nSo lets get started.
\nWe will use that Node.js app we used for User Login and Signup.
\ngit clone https://github.com/alamgirqazi/intro-to-nodejs-part4.gitI’ll quickly do a couple of things.
\nBefore we start our app, we need to create a local .env file.
\nlets create that and add contents from sample.env file.
\nmy .env file looks like
\nJWT_KEY = SecretjwtKey\nPORT = 3000\n\nmongoCon = mongodb://localhost:27017/bookyappLets start our app
\nnodemon appGreat, our app is up and running.
\nPreviously, we set up a complete Books API on Node.js in part 4.
\nLets use that with the Ionic app we built in part 5.
\nnow, separately, I will use that ionic app. You can optionally clone from here (https://github.com/alamgirqazi/booky-ionic) but I will just use from the previous part.
\nlets run our app via
\nionic servelets create a new page named books
\nionic g page booksfirst, we need to display a list of books that are already in the database
\nwe need to create a user service. Instead of ionic g service user , I’ll just copy and paste the user.service.ts we already have.
Here’s how my books.service.ts looks like
\nimport { HttpClient, HttpHeaders } from '@angular/common/http';\n\nimport { BookyConfig } from '../booky.config';\nimport { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class BooksService {\n constructor(private http: HttpClient) {}\n\n public getAllBooks(): Observable<any> {\n const url = BookyConfig.getPath() + '/books';\n\n return this.http.get(url);\n }\n}Ok, lets head over to books.page.html and write some HTML.
\nwhat we need now is to display a list. We’ll use ion-list.
Here’s books.page.html
\n<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-title class=\"ion-text-center\">Booky</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content color=\"\">\n\n <ion-list>\n <ion-item *ngFor=\"let book of books\">\n <ion-thumbnail slot=\"start\">\n <ion-img [src]=\"book.image_url\"></ion-img>\n </ion-thumbnail>\n <ion-label>{{book.name}}</ion-label>\n <ion-icon name=\"create\" slot=\"end\"></ion-icon>\n <ion-icon name=\"trash\" slot=\"end\"></ion-icon>\n </ion-item>\n </ion-list>\n\n</ion-content>We need to add TS code now
\nimport { Component, OnInit } from '@angular/core';\n\nimport { BooksService } from '../../sdk/custom/books.service';\n\n@Component({\n selector: 'app-books',\n templateUrl: './books.page.html',\n styleUrls: ['./books.page.scss']\n})\nexport class BooksPage implements OnInit {\n loading = false;\n books: Books[] = [];\n constructor(private booksService: BooksService) {}\n\n ngOnInit() {\n this.getAll();\n }\n\n getAll() {\n this.loading = true;\n\n this.booksService.getAllBooks().subscribe(\n data => {\n console.log('got response from server', data);\n this.loading = false;\n this.books = data.data.docs;\n },\n error => {\n this.loading = false;\n console.log('error', error);\n }\n );\n }\n}\n\n// Intefacing is Optional\n\ninterface Books {\n name: string;\n ibn: string;\n image_url: string;\n author: string;\n is_deleted: boolean;\n}You must be familiar with most the code above. We added one extra thing. We added an interface for Books. This helps us catch errors during compile time and not run time.
\nSo this is what it looks like
\n\n
Nice. we’re able to get the data from the API and display it here. GET looks set.
\nFew things we should add here. THere’s no loading display. we can use ion-skeleton for this.
\nwe are keeping the loading state in the variable loading. We are manually turning it true and false. We display the ion-skeleton only when its loading.
lets update our HTML.
\n<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-title class=\"ion-text-center\">Booky</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content color=\"\">\n <div *ngIf=\"!loading\">\n\n <ion-list>\n <ion-item *ngFor=\"let book of books\">\n <ion-thumbnail slot=\"start\">\n <ion-img [src]=\"book.image_url\"></ion-img>\n </ion-thumbnail>\n <ion-label>{{book.name}}</ion-label>\n <ion-icon name=\"create\" slot=\"end\"></ion-icon>\n <ion-icon name=\"trash\" slot=\"end\"></ion-icon>\n </ion-item>\n </ion-list>\n </div>\n\n <div *ngIf=\"loading\">\n\n\n <ion-list>\n\n\n <ion-item *ngFor=\"let item of skeletonlist\">\n <ion-thumbnail slot=\"start\">\n <ion-skeleton-text animated></ion-skeleton-text>\n </ion-thumbnail>\n <ion-label>\n <h3>\n <ion-skeleton-text animated style=\"width: 50%\"></ion-skeleton-text>\n </h3>\n <p>\n <ion-skeleton-text animated style=\"width: 80%\"></ion-skeleton-text>\n </p>\n <p>\n <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n </p>\n </ion-label>\n </ion-item>\n\n </ion-list>\n </div>\n</ion-content>This is how the loading looks. Kinda nice right.
\n\n
Once thing you can notice when the images load is that the broken image looks really bad. How about we add a custom icon in case the image isn’t there?
\nDownload any book icon from the internet. Or you can use this
\n\n
download this. copy it to SRC -> Assets -> Icon.
lets display it incase our image doesnot load.
\nwe need to add its path in book.page.ts
\nhere’s a quick hacky way
\n <ion-thumbnail slot=\"start\">\n <ion-img *ngIf=\"book.image_url && book.image_url!='null'\" [src]=\"book.image_url\">\n </ion-img>\n <ion-img *ngIf=\"!book.image_url || book.image_url=='null' \" [src]=\"'assets/icon/book.png'\">\n </ion-img>\n </ion-thumbnail>Now it looks much cleaner
\n\n
Ok. Lets add a book to our database.
\nwe need an Add button. and we need to open another page or maybe a popup. A popup seems fine.
\nlets update our toolbar
\n <ion-toolbar color=\"primary\">\n <ion-title class=\"ion-text-center\">Booky</ion-title>\n <ion-button slot=\"end\" color=\"success\">\n Add New </ion-button>\n </ion-toolbar>Lets add a new add new page
\nionic g page books/addnewbookWe can see that the component has been created.
\n\n
We need to define it in books.module.ts
\nimport { AddnewbookComponent } from './addnewbook/addnewbook.component';\nimport { BooksPage } from './books.page';\nimport { BooksPageRoutingModule } from './books-routing.module';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { IonicModule } from '@ionic/angular';\nimport { NgModule } from '@angular/core';\n\n@NgModule({\n imports: [CommonModule, FormsModule, IonicModule, BooksPageRoutingModule],\n declarations: [BooksPage, AddnewbookComponent],\n entryComponents: [AddnewbookComponent]\n})\nexport class BooksPageModule {}I added one more thing here. entryComponents.
\nAn entry component is any component that Angular loads imperatively by type.
\nA component loaded declaratively via its selector is not an entry component.
\nWe will load this component not via HTML but by TS so we need to add it to entryComponents.
\nOk, lets add a method to that Add new Button on the toolbar.
\n<ion-toolbar color=\"primary\">\n <ion-title class=\"ion-text-center\">Booky</ion-title>\n <ion-button slot=\"end\" (click)=\"openAddModal()\" color=\"success\">\n Add New </ion-button>\n </ion-toolbar>Lets write some code for openAddModal()
\n async openAddModal() {\n const modal = await this.modalController.create({\n component: AddnewbookComponent\n });\n return await modal.present();\n }For this to work, we need to update our constructor
\n constructor(\n private booksService: BooksService,\n private modalController: ModalController\n ) {}and also add the imports at the top.
\nimport { AddnewbookComponent } from './addnewbook/addnewbook.component';\nimport { BooksService } from '../../sdk/custom/books.service';\nimport { ModalController } from '@ionic/angular';Ok. lets see it in action.
\n\n Let adds the TS code make sure to add ReactiveFormsModule to the imports of Books.module.ts \n Lets write the save function lets try this \n Yaaaaaay !!! We got the response. Book saved. If we refresh the page, we will see the new book added. Oh My!\n\n That’s nice. However our experience could be better. We should clear the form, show some toast, and maybe dismiss the modal ? Lets add a spinner like \n and a toast like \n lets update our HTML And our TS file. all our logic is here. This works great. We are redirected back to the page. However, there is one problem. Our list hasn’t been updated. So for that, we need to listen to event so when the modal gets dismissed, we know. lets update our modal code in books.page.ts Now that’s amazing. We’ve done quite a lot. 2 more things we need to do to complete. Delete and Edit. Lets start with the delete functionality. We already have a delete button, we just need to add a confirmation popup and then delete. First, we don’t have the delete API method in Node.js. Lets create that. lets open our Node.js app and open books.controllers.js Surprise! There is already a delete method by the name of I capitalized Books. otherwise, it wouldn’t work. Here’s the complete method. To expose this method, lets open books.routes.ts Lets uncomment this line Now, if we make a then that user will be deleted. To do this in our Ionic app, we need to create a Let update our HTML Lets write code on that delete button \n Yesssss. Our delete functionality is working. \n This saves me writing a lot of code. I just open the modal using same function. I pass ‘book’ as optional parameter. after the popup opens, we need to patch the data to our form. updated addnewbook.component.ts I added a _id field. its not required. Every record created in MongoDB has a unique The best thing is there is no need of sequence like in Mysql or Postgresql. MongoDB manages unique IDs itself. We will use that ID. \n This was so simple. All we needed was very little logic Lets update our Edit and Add button. Here is how our save() function looks like and those two functions This is great. We still need to create that Update function in our service. Before that, lets see if its added in our Node.js app. add this line to books.routes.js books.controllers.js Great. Lets add the service method. I think this should work. \n Yesssssss. We finally did it. We completed the whole Books API. This post was alot of work but we eventually did it. We covered a lot of things but were finally able to complete the API. Here’s link to the node.js app code. Here’s link to the ionic app code. (branch part6) In the next part, we will cover Guards and Authentication. Only the user who logged in should see the books list and should only be able to add/edit/delete. We will discuss concepts like Authentication, Authorization, Guards and Interceptors. In part 8, we will deploy our App. We will deploy our MongoDB Database to mlab / MongoDB Atlas we will deploy our Node.js app to Heroku. There are also other platforms like Now.sh, Digital Occean, AWS Cloud, Google Cloud.import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\n\nimport { ModalController } from '@ionic/angular';\n\n@Component({\n selector: 'app-addnewbook',\n templateUrl: './addnewbook.component.html',\n styleUrls: ['./addnewbook.component.scss']\n})\nexport class AddnewbookComponent implements OnInit {\n constructor(\n private modalCtrl: ModalController,\n private formBuilder: FormBuilder\n ) {}\n\n addNewBookForm: FormGroup;\n loading = false;\n\n ngOnInit() {\n this.formInitializer();\n }\n\n formInitializer() {\n this.addNewBookForm = this.formBuilder.group({\n name: [null, [Validators.required]],\n ibn: [null, [Validators.required]],\n author: [null, [Validators.required]],\n is_deleted: [false, [Validators.required]],\n image_url: [null]\n });\n }\n\n save() {}\n\n dismiss() {\n this.modalCtrl.dismiss({\n dismissed: true\n });\n }\n}\n// Intefacing is Optional\n\ninterface Books {\n name: string;\n ibn: string;\n image_url: string;\n author: string;\n is_deleted: boolean;\n} save() {\n this.loading = true;\n\n this.booksService.addNewBook(this.addNewBookForm.value).subscribe(\n data => {\n console.log('got response from server', data);\n this.loading = false;\n },\n error => {\n this.loading = false;\n console.log('error', error);\n }\n );\n } <ion-button size=\"large\" [disabled]=\"addNewBookForm.invalid\" (click)=\"save()\" color=\"primary\" type=\"submit\"\n expand=\"block\">SAVE ! <ion-spinner *ngIf=\"loading\"></ion-spinner>\n\n </ion-button> save() {\n this.loading = true;\n\n this.booksService.addNewBook(this.addNewBookForm.value).subscribe(\n async data => {\n console.log('got response from server', data);\n const name = this.addNewBookForm.controls['name'].value;\n const toast = await this.toastController.create({\n message: `${name} has been saved successfully.`,\n duration: 3500\n });\n toast.present();\n this.loading = false;\n this.addNewBookForm.reset();\n //optional\n\n this.modalCtrl.dismiss();\n },\n error => {\n this.loading = false;\n console.log('error', error);\n }\n );\n }async openAddModal() {\n const modal = await this.modalController.create({\n component: AddnewbookComponent\n });\n modal.onDidDismiss().then(data => {\n console.log('dismissed', data);\n this.getAll();\n });\n await modal.present();\n }\n}deletebook. I just made one change. const result = await Books.findOneAndDelete({findOneAndDelete is a mongoose (ORM) method that updates a single document / table in MongoDB.booksController.deleteBook = async (req, res) => {\n if (!req.params._id) {\n Fu;\n res.status(500).send({\n message: 'ID missing'\n });\n }\n try {\n const _id = req.params._id;\n\n const result = await Books.findOneAndDelete({\n _id: _id\n });\n\n res.status(200).send({\n code: 200,\n message: 'Deleted Successfully'\n });\n } catch (error) {\n console.log('error', error);\n return res.status(500).send(error);\n }\n};router.delete(\"/:_id\", bookController.deleteBook);delete request to localhost:3000/books/12312313123deleteservice method for books. public deleteBook(id: string): Observable<any> {\n const url = BookyConfig.getPath() + `/books/${id}`;\n\n return this.http.delete(url);\n } <ion-button fill=\"clear\">\n <ion-icon name=\"create\" slot=\"end\"></ion-icon>\n </ion-button>\n <ion-button fill=\"clear\" (click)=\"delete(book)\">\n <ion-icon name=\"trash\" slot=\"end\"></ion-icon>\n </ion-button> async delete(book) {\n this.selectedBook = book;\n const alert = await this.alertController.create({\n header: 'Confirm!',\n message: `Are you sure you want to delete the book \"${book.name}\"`,\n buttons: [\n {\n text: 'Cancel',\n role: 'cancel',\n cssClass: 'secondary',\n handler: blah => {\n console.log('Confirm Cancel: blah');\n }\n },\n {\n text: 'Okay',\n handler: () => {\n this.deleteBook();\n }\n }\n ]\n });\n await alert.present();\n }\n\n deleteBook() {\n this.deleteLoading = true;\n this.booksService.deleteBook(this.selectedBook._id).subscribe(\n data => {\n console.log('got response from server', data);\n this.deleteLoading = false;\n this.getAll();\n },\n error => {\n this.deleteLoading = false;\n console.log('error', error);\n }\n );\n }componentProps help us send data to that component. We can access there using @Input() book. @Input() book;\n ngOnInit() {\n this.formInitializer();\n if (this.book) {\n console.log('got book', this.book);\n this.addNewBookForm.patchValue(this.book);\n }\n }\n\n formInitializer() {\n this.addNewBookForm = this.formBuilder.group({\n _id: [null],\n name: [null, [Validators.required]],\n ibn: [null, [Validators.required]],\n author: [null, [Validators.required]],\n is_deleted: [false, [Validators.required]],\n image_url: ['']\n });\n }_id. save() {\n this.loading = true;\n\n if(this.book){\n this.updateBook();\n }\n else{\n this.addNew();\n }\n\n\n } addNew(){\n this.booksService.addNewBook(this.addNewBookForm.value).subscribe(\n async data => {\n console.log('got response from server', data);\n const name = this.addNewBookForm.controls['name'].value;\n const toast = await this.toastController.create({\n message: `${name} has been added successfully.`,\n duration: 3500\n });\n toast.present();\n this.loading = false;\n this.addNewBookForm.reset();\n //optional\n\n this.modalCtrl.dismiss();\n },\n error => {\n this.loading = false;\n console.log('error', error);\n }\n );\n}\nupdateBook(){\n this.booksService.updateBook(this.addNewBookForm.value).subscribe(\n async data => {\n console.log('got response from server', data);\n const name = this.addNewBookForm.controls['name'].value;\n const toast = await this.toastController.create({\n message: `${name} has been updated successfully.`,\n duration: 3500\n });\n toast.present();\n this.loading = false;\n this.addNewBookForm.reset();\n //optional\n\n this.modalCtrl.dismiss();\n },\n error => {\n this.loading = false;\n console.log('error', error);\n }\n );\n} router.put(\"/:_id\", bookController.updateBook);booksController.updateBook = async (req, res) => {\nif (!req.params.\\_id) {\nres.status(500).send({\nmessage: 'ID missing'\n});\n}\ntry {\nconst \\_id = req.params.\\_id;\nlet updates = req.body;\nrunUpdate(\\_id, updates, res);\n} catch (error) {\nconsole.log('error', error);\nreturn res.status(500).send(error);\n}\n};\n\nasync function runUpdate(\\_id, updates, res) {\ntry {\nconst result = await Books.updateOne(\n{\n\\_id: \\_id\n},\n{\n\\$set: updates\n},\n{\nupsert: true,\nrunValidators: true\n}\n);\n\n {\n if (result.nModified == 1) {\n res.status(200).send({\n code: 200,\n message: 'Updated Successfully'\n });\n } else if (result.upserted) {\n res.status(200).send({\n code: 200,\n message: 'Created Successfully'\n });\n } else {\n res.status(422).send({\n code: 422,\n message: 'Unprocessible Entity'\n });\n }\n }\n\n} catch (error) {\nconsole.log('error', error);\nreturn res.status(500).send(error);\n}\n}public updateBook(data: object): Observable<any> {\nconst url = BookyConfig.getPath() + `/books/${id}`;\n\n return this.http.put(url, data);\n\n}