You've successfully subscribed to Smartcodehub ™ Blog
Great! Next, complete checkout for full access to Smartcodehub ™ Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Ionic 5 Tutorial Series | Part-4 Ionic Blog Application

Ionic 5 Tutorial Series | Part-4 Ionic Blog Application

Ionic http request is basically used to make api calls in ionic application angular have its own HTTPClient which help us to make APIs request such as GET , POST , DELETE , UPDATE...

Abhishek Dana
Abhishek Dana

Hello there, today i am very excited because after all almost three parts we are going to work on our first blog application and in this tutorial we are going to learn more about application UI design, HTTP request and Authentication Module Using Ionic.

So before getting started i would like to let you know something about HTTP request in ionic.Ionic http request is basically used to make api calls in ionic application angular have its own HTTPClient which help us to make APIs request such as GET , POST , DELETE , UPDATE But moreover we are going to look forward on GET Request because this application basically show the blog and its details.

So In this application we are going to first have login page where a user can login with email and password but user can't register because we don't want to save any user details as we have not yet setup backend or database.As the user login with email and password the would be alert shown as successfully loggedIn then he/she will redirect to home page when the user image will be shown name and blog posts with be shown. On click of perticular blog post user will be able to read full blog with all its details.

So now let's get started first let's create a blank application name blogApplication using the command ionic start blogApplication this will create a blank application for you.So here is the image that we are going to convert in code so basically is design2code.

After successfull application generation we are going to generate login page using the command ionic g page login Now lets design our login UI and add funcationality in it.

Add the above content in login.page.html

<ion-content>
  <div class="login-page">
    <div class="content">
      <div class="typewriter">
        <h1>Hello there,</h1>
        <h2>SignIn</h2>
      </div>
    </div>
    <div class="form-login">
      <ion-card class="ion-padding">
        <div class="form-group">
          <label for="">Email</label>
          <ion-input type="email"></ion-input>
        </div>
        <div class="form-group">
          <label for="">Password</label>
          <ion-input type="password"></ion-input>
        </div>
        <ion-label>
          <small class="ion-float-right" style="font-size: 12px;"
            >Forgot Password ?</small
          >
        </ion-label>
        <ion-button
          (click)="login()"
          color="primary"
          fill="solid"
          shape="round"
        >
          Login
        </ion-button>
      </ion-card>
    </div>
  </div>
</ion-content>

And add the style to login.page.scss file

.login-page {
  height: 100%;
  width: 100%;
  background: linear-gradient(45deg, rgba(0, 0, 0, 15), transparent),
    url(https://images.unsplash.com/photo-1515534077531-7c163bfee8e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  & .content {
    padding: 16px;
    transform: translate(0, 50%);
    position: absolute;
    top: 50px;
    left: 10px;
    .typewriter h1,
    .typewriter h2 {
      color: #fff;
      font-family: Ubuntu;
      margin: 0 auto;
      font-size: 2.5rem;
    }
  }
  & .form-login {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;

    & ion-card {
      margin: 0;
      & .form-group {
        margin-bottom: 1rem;
        & label {
          display: inline-block;
          margin-bottom: 0.5rem;
        }
        & ion-input {
          background: #ffffff;
          /* Grey AA Large */

          border: 1px solid;
          box-sizing: border-box;
          border-radius: 4px;
          padding: 0 10px !important;
          border-color: var(--ion-color-primary);
        }
      }

      & ion-button {
        height: 45px;
        width: 150px;
        margin: 1rem 0;
      }
    }
  }
}

And finally add the above content in login.page.ts

import { AuthService } from "./../services/auth.service";
import { Component, OnInit } from "@angular/core";

import { GoogleAuth } from "google-auth-library";
import { Router } from "@angular/router";
@Component({
  selector: "app-login",
  templateUrl: "./login.page.html",
  styleUrls: ["./login.page.scss"],
})
export class LoginPage implements OnInit {
  constructor(private route: Router) {}

  ngOnInit() {}

  login() {
    // to navigate from one page to another page we use route and route is declare in constructor.
    this.route.navigate(["/home"]);
  }
}

And the output will be something like this

Here on the login button will have just navigate to home page.

In the next blog we are going to design our home page and detail page of blog something like this image..

Basically we are going to convert design into code so stay tuned for next part.