{"componentChunkName":"component---src-templates-blog-post-js","path":"/intro-to-nodejs-part-5/","result":{"data":{"site":{"siteMetadata":{"title":"tech-blog","author":"Alamgir Qazi"}},"markdownRemark":{"id":"ef3b36a7-86a6-59d5-b1d2-a4f0ea48f0c8","excerpt":"This is the part 5 of post Intro to Nodejs - part 4. In this post, we will connect our Node.js App with an Ionic app. Most software…","html":"

\n \n \n \n \n \n \n \n \n \n

\n

This is the part 5 of post Intro to Nodejs - part 4.

\n

In this post, we will connect our Node.js App with an Ionic app. Most software development is done like this: Different teams works on different parts of the application. For e.g There will be a back-end team which will only focus building backends. Their focus will solely be on Node.js (or whatever language they use), Database (MongoDB or anyother). Same way, there will be different teams for Front-end Web whether its in React.js, Angular or any other framework. Again, different team for Mobile which can be hybrid or native.

\n

In first 4 posts, we were only concerned with back-end. Now we will see some front-end and see how the whole picture fits. We will use Ionic app but later we will see how easily we can reuse functionalities with our Web app if its in Angular.

\n

so lets start.

\n

first, lets create an ionic application from scratch.

\n
ionic start booky-ionic
\n

Since we are going to be creating an API for books, I’m naming our project Booky. Booky-ionic will be our ionic code. aur node.js project could have the name Booky-node or whatever. It’s upto you.

\n

Usually its preferable we use different repositories for Ionic apps, front-end app and backend apps. Different repositories help us manage them more easily.

\n

So in our case, we will have 2 repositories. In case, we build an Angular web app, we might need a third named Booky-angular but we’ll see when we get there.

\n

Okay so we used a starter with side-menu by default.

\n

Lets clean things up a bit. I’m deleting lists folder because I don’t need it. I also have to remove the link from app-routing.module.ts

\n

First thing, we need to create a login page.

\n
ionic g page login
\n

lets also go ahead a create a register page.

\n
ionic g page register
\n

All set. lets add some html code in login page.

\n
<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title class=\"ion-text-center\">Booky - Login</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content color=\"\">\n  <form>\n    <ion-grid>\n      <ion-row color=\"justify-content-center\">\n        <ion-col class=\"ion-align-self-center\" size-md=\"6\" size-lg=\"5\" size-xs=\"12\">\n\n          <div class=\"ion-padding\">\n\n            <ion-item>\n              <ion-input name=\"email\" type=\"email\" placeholder=\"your@email.com\"></ion-input>\n            </ion-item>\n            <ion-item>\n              <ion-input name=\"password\" type=\"password\" placeholder=\"Password\"></ion-input>\n            </ion-item>\n          </div>\n          <div class=\"ion-padding\">\n            <ion-button size=\"large\" color=\"primary\" type=\"submit\" expand=\"block\">Login</ion-button>\n          </div>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>
\n

We just added simple HTML for now. no forms etc just yet.

\n

This is how it looks

\n

\n \n \n \n \n

remember, we have to add ReactiveFormsModule import in login.module.ts

\n
@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    IonicModule,\n    LoginPageRoutingModule\n  ],\n  declarations: [LoginPage]\n})
\n

Okay, that’s good. Now we need to add the form controls into HTML of login.page.ts

\n

Here’s after adding FormControlNames and FormGroup

\n
<ion-content color=\"\">\n  <form [formGroup]=\"loginForm\">\n    <ion-grid>\n      <ion-row color=\"justify-content-center\">\n        <ion-col class=\"ion-align-self-center\" size-md=\"6\" size-lg=\"5\" size-xs=\"12\">\n\n          <div class=\"ion-padding\">\n\n            <ion-item>\n              <ion-input name=\"email\" formControlName=\"email\" type=\"email\" placeholder=\"your@email.com\"></ion-input>\n            </ion-item>\n            <ion-item>\n              <ion-input name=\"password\" formControlName=\"password\" type=\"password\" placeholder=\"Password\"></ion-input>\n            </ion-item>\n          </div>\n          <div class=\"ion-padding\">\n            <ion-button size=\"large\" [disabled]=\"loginForm.invalid\" (click)=\"save()\" color=\"primary\" type=\"submit\" expand=\"block\">Login\n            </ion-button>\n          </div>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>
\n

We also added a save() function on click. The click will only trigger if the form is valid.

\n

Lets write some logic

\n
  save() {\n    const loginData = this.loginForm.value;\n    console.log('loginData', loginData);\n  }
\n

What we need to do now is send a request to Booky-Node (our backend). We need to send a request to localhost:3000/users/login.

\n

We need to do an API request.

\n

So for API requests, we need services.

\n

Lets create a User service.

\n
ionic g service user
\n

Awesome. Two files will be created for us.

\n

However, to make services more manageable, we will move them in proper folder structure.

\n

Here’s what I do

\n

create an sdk folder inside app directory.

\n

create a file named booky.config.ts

\n

create a folder named core

\n

This will contain core services

\n

create a folder named custom

\n

This will contain our custom services e.g User, Books etc

\n

This is what the folder structure looks like

\n

\n \n \n \n \n \n \n \n \n \n

\n

Our config file is empty. Lets add some boilerplate code

\n
export class BookyConfig {\n  private static path = 'http://localhost:3000';\n\n  public static getPath(): string {\n    return BookyConfig.path;\n  }\n}
\n

The purpose of this is that whenever our backend URL changes, for e.g our backend is live at api.booky.com, then we only need to make a change in one file and all URLs will be updated.

\n

Ok, so lets move on.

\n

we created a user service but its in outer app folder. There was also a .spec file. I’ll just delete the .spec file and move the user.service.ts file to sdk -> custom -> user.service.ts

\n

\n \n \n \n \n \n \n \n \n \n

\n

This also keeps the services organized.

\n

Okay, so for user, we need to create a service method for login

\n

Here’s how user.service.ts file looks

\n
import { 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 UserService {\n  constructor(private http: HttpClient) {}\n\n  public userLogin(credentials: object): Observable<any> {\n\n    // this url will be http://localhost:3000/users/login\n    const url = BookyConfig.getPath() + '/users/login';\n\n    return this.http.post(url, credentials);\n  }\n}
\n

After this, I need to import HttpClientModule in imports of app.module.ts because we are using it in service.

\n
import { HttpClientModule } from '@angular/common/http';
\n

Lets go to login.page.ts and write the .subscribe method

\n
save() {\n    const loginData = this.loginForm.value;\n    console.log('loginData', loginData);\n    // we need to send this data to our node.js server\n\n    this.userService.userLogin(loginData).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  }
\n

lets go to localhost:8100/login and see if it works

\n

\n \n \n \n \n \n \n \n \n \n

\n

BOOM ! We successfully connected our ionic app with our backend. Hurray !! Lets also add Full stack developer to our CV while we’re at it :)

\n

lets get back.

\n

we got 401 unauthorized error. We can also see our custom message ‘Please signup first’ in the console.

\n

Lets try it with a user that already exists.

\n

\n \n \n \n {\n console.log('got response from server', data);\n this.loading = false;\n this.router.navigateByUrl('/home');\n },\n error => {\n this.loading = false;\n console.log('error', error);\n }\n );\n

Ok. so far so good. We need to provide users a way to signup from the ionic app. Lets add code to that register page we created.

\n

Here is register.page.html

\n
<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title class=\"ion-text-center\">Booky - Register</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content color=\"\">\n  <form [formGroup]=\"registerForm\">\n    <ion-grid>\n      <ion-row color=\"justify-content-center\">\n        <ion-col class=\"ion-align-self-center\" size-md=\"6\" size-lg=\"5\" size-xs=\"12\">\n          <div class=\"ion-text-center\">\n            <h3>Create your account!</h3>\n          </div>\n          <div class=\"ion-padding\">\n            <ion-item>\n              <ion-input name=\"name\" formControlName=\"name\" type=\"text\" placeholder=\"Name\"></ion-input>\n            </ion-item>\n            <ion-item>\n              <ion-input name=\"email\" formControlName=\"email\" type=\"email\" placeholder=\"your@email.com\"></ion-input>\n            </ion-item>\n            <ion-item>\n              <ion-input name=\"password\" formControlName=\"password\" type=\"password\" placeholder=\"Password\"></ion-input>\n            </ion-item>\n            <ion-item>\n              <ion-input name=\"password\" formControlName=\"confirm_password\" type=\"password\" placeholder=\"Password\">\n              </ion-input>\n            </ion-item>\n          </div>\n          <div class=\"ion-padding\">\n            <ion-button size=\"large\" [disabled]=\"registerForm.invalid\" (click)=\"save()\" color=\"primary\" type=\"submit\"\n              expand=\"block\">Register\n            </ion-button>\n          </div>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>
\n

Here is what the view looks like

\n

\n \n \n \n {\n const otherControl: AbstractControl = control.root.get(otherControlName);\n\n if (otherControl) {\n const subscription: Subscription = otherControl.valueChanges.subscribe(\n () => {\n control.updateValueAndValidity();\n subscription.unsubscribe();\n }\n );\n }\n\n return otherControl && control.value !== otherControl.value\n ? { match: true }\n : null;\n };\n }\n}\n

A couple of new things were added to this. I used a custom validator. Don’t worry I didn’t wrote it myself :) I just copy / pasted from Stackoverflow :) Full Stackoverflow developer :D

\n

\n \n \n \n \n \n \n \n \n \n

\n

Okay, coming back to this

\n

Our scenario, which we often see in some apps is that you need to write password two times. and comparing both of them is not that straight-forward when it comes to making it work with the custom validations that we already use. Lets see it in action.

\n

\n \n \n \n \n \n \n \n \n \n

\n

It not enabling the register button and we can see the red line because the passwords I typed didnot match. We are able to handle it quite easily and gracefully in Angular.

\n

Right, we need to save() method and also add a register method in user.service.ts

\n

Lets add this method

\n
public userRegister(credentials: object): Observable<any> {\n    const url = BookyConfig.getPath() + '/users/register';\n\n    return this.http.post(url, credentials);\n  }
\n

Lets write that save method

\n
save() {\n    this.loading = true;\n\n    this.userService.userRegister(this.registerForm.value).subscribe(\n      data => {\n        console.log('got response from server', data);\n        this.loading = false;\n        this.router.navigateByUrl('/home');\n      },\n      error => {\n        this.loading = false;\n        console.log('error', error);\n      }\n    );\n  }
\n

Again once our register is succeessful, we need to navigate it to /home page or eventually /books page.

\n

We covered a lot in this post. Few things we will cover in the next part are

\n
    \n
  1. Showing proper Error Messages to user and success message
    2. \n
  2. Showing some loader
    3. \n
  3. saving JWT Token
    4. \n
  4. Complete Books API integration
    5. \n
\n

Here’s link to the ionic app code.

","frontmatter":{"title":"A very basic introduction to Node.js - Part 5","date":"December 02, 2019"}}},"pageContext":{"slug":"/intro-to-nodejs-part-5/","previous":{"fields":{"slug":"/intro-to-nodejs-part-4/"},"frontmatter":{"title":"A very basic introduction to Node.js - Part 4"}},"next":{"fields":{"slug":"/intro-to-nodejs-part-6/"},"frontmatter":{"title":"A very basic introduction to Node.js - Part 6"}}}},"staticQueryHashes":[]}