Christophe Surbier, Author at Ionic and Django Tutorial

Day 9 : Chatting with a user

Christophe Surbier — Fri, 13 Aug 2021 15:34:29 +0000

Create a chat application with Ionic 5/ Angular 12/ Capacitor 3 and Django 3 – Series – Part Nine

We learned how to search users, create chat and display existing chats. Now it’s time to deals with the Chat screen.

Day 9 : Chatting with a user

Developping chatting with a user screen will not be an easy part, so we will go slowly.

Navigate to the Chat screen

First and easy task, we will create our new ChatPage:

ionic g page ChatPage
mv src/app/chat-page src/app/pages/

Then update the app-routing.module.ts file:

   {
    path: 'chat-page',
    canLoad:[AutoGuard],
    loadChildren: () => import('./pages/chat-page/chat-page.module').then( m => m.ChatPagePageModule)
  },

And modify our createChat method in HomePage to redirect to this new screen, with the **chat*** just created:

createChat(userToChat) {
    if (this.apiService.networkConnected) {
      this.apiService.showLoading().then(() => {
        this.apiService.createChat(this.userManager.currentUser.id, userToChat.id).subscribe((response) => {
          this.apiService.stopLoading()
          console.log(response)
          if (response){
            const navigationExtras: NavigationExtras = {
              state : {
                chat : new Chat().initWithJSON(response)
              }
            };
            this.router.navigate(['chat-page'], navigationExtras);
          }
        })
      })
    }
    else {
      this.apiService.showNoNetwork()
    }
  }

If we have a response from our API then we can navigate to our new ChatPage screen, and pass the chat created and received from the API:

 if (response){
    const navigationExtras: NavigationExtras = {
      state : {
        chat : new Chat().initWithJSON(response)
      }
    };
    this.router.navigate(['chat-page'], navigationExtras);
  }

We will also modif our HomePage html to be able to click on a user in our chat list, and then go to the ChatScreen. In our ion-list of existing chat:

We add a click event on each item of the list, and we can create the goToChat method:

goToChat(chat){
    const navigationExtras: NavigationExtras = {
      state : {
        chat : chat
      }
    };
    this.router.navigate(['chat-page'], navigationExtras);
  }

And to avoid code duplication, we can even modify our createChat method to use this goToChat method:

 createChat(userToChat) {
    if (this.apiService.networkConnected) {
      this.apiService.showLoading().then(() => {
        this.apiService.createChat(this.userManager.currentUser.id, userToChat.id).subscribe((response) => {
          this.apiService.stopLoading()
          console.log(response)

          if (response){
            let chat = new Chat().initWithJSON(response)
            this.goToChat(chat)
          }
        })
      })
    }
    else {
      this.apiService.showNoNetwork()
    }
  }

Let’s edit the chat-page.page.html :


  
    
      
        Back
      
    
   {{username}}

and in the chat-page.page.ts file, we will get the chat passed as argument, determine which user is our user (remember we have a fromUser and toUser in the chat object) and then setup the username to display :

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Chat } from 'src/app/models/chat';
import { User } from 'src/app/models/user';
import { ApiserviceService } from 'src/app/services/api-service.service';
import { UserManagerServiceService } from 'src/app/services/user-manager-service.service';

@Component({
  selector: 'app-chat-page',
  templateUrl: './chat-page.page.html',
  styleUrls: ['./chat-page.page.scss'],
})
export class ChatPagePage implements OnInit {

  chat : Chat;
  username : string =''
  myUser : User
  otherUser : User
  constructor(public apiService:ApiserviceService,
    public userManager:UserManagerServiceService,
    public router: Router,
    public route:ActivatedRoute) { 

    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.chat = this.router.getCurrentNavigation().extras.state.chat;
        console.log(this.chat)
        if (this.chat.fromUser.id==this.userManager.currentUser.id){
          this.myUser = this.chat.fromUser
          this.otherUser = this.chat.toUser
        }
        else{
          this.myUser = this.chat.toUser
          this.otherUser = this.chat.fromUser
        }
        this.username = this.otherUser.first_name+" "+this.otherUser.last_name
      }
      else{
        //Return home
        this.router.navigateByUrl("/home")
      }
    });
  }

  ngOnInit() {
  }

}

We can try our new code (run ionic serve if not already running) and navigate from choosing a user in our existing chat list OR from creating a new chat using the searchbar.

Now we have one issue to fix. When searching and creating a new chat, we should close the searchBar and refresh our existing chat list. If not, when doing a **back* action from the chat screen, the searchBar** will still have focus and the list has not beed updated.

We can fix this by adding to our createChat method:

this.isSearching = false
this.searchbarElement.value=""
this.listOfUser = []
this.loadExistingChat()

Final code:

createChat(userToChat) {
    if (this.apiService.networkConnected) {
      this.apiService.showLoading().then(() => {
        this.apiService.createChat(this.userManager.currentUser.id, userToChat.id).subscribe((response) => {
          this.apiService.stopLoading()

          this.isSearching = false
          this.searchbarElement.value=""
          this.listOfUser = []
          this.loadExistingChat()

          if (response){
            let chat = new Chat().initWithJSON(response)
            this.goToChat(chat)
          }

        })
      })
    }
    else {
      this.apiService.showNoNetwork()
    }
  }

Creating chat screen design

Now we will focus on chat screen design and will hardcoding things to facilitate our task. Our chat screen will look like this:

Let’s start with our messages. We should have a messages list of items to display. A message will be composed of the author of the message (yourself or the other user), a text, a created date and the information if the message has been read or not.

Let’s edit our typescript to hardcode this list of messages:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Chat } from 'src/app/models/chat';
import { User } from 'src/app/models/user';
import { ApiserviceService } from 'src/app/services/api-service.service';
import { UserManagerServiceService } from 'src/app/services/user-manager-service.service';

@Component({
  selector: 'app-chat-page',
  templateUrl: './chat-page.page.html',
  styleUrls: ['./chat-page.page.scss'],
})
export class ChatPagePage implements OnInit {

  chat : Chat;
  username : string =''
  myUser : User
  otherUser : User
  messages = [
    {
      "author":{
        "id":"3cde3f7e-261e-4ebb-8437-fa4c27d35bf0"
      },
      "text":"This is a message",
      "createdAt":"2021-08-11T14:03:05.381477Z",
      "isRead":true
    },
    {
      "author":{
        "id":"fb261053-d336-4a9b-9bcc-d206ac4b7753"
      },
      "text":"This is a response",
      "createdAt":"2021-08-11T14:05:05.381477Z"
    },
  ]
  messageToSend = ""
  constructor(public apiService:ApiserviceService,
    public userManager:UserManagerServiceService,
    public router: Router,
    public route:ActivatedRoute) { 

    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.chat = this.router.getCurrentNavigation().extras.state.chat;
        console.log(this.chat)
        if (this.chat.fromUser.id==this.userManager.currentUser.id){
          this.myUser = this.chat.fromUser
          this.otherUser = this.chat.toUser
        }
        else{
          this.myUser = this.chat.toUser
          this.otherUser = this.chat.fromUser
        }
        this.username = this.otherUser.first_name+" "+this.otherUser.last_name
      }
      else{
        //Return home
        this.router.navigateByUrl("/home")
      }
    });
  }

  ngOnInit() {
  }

  checkScrolling(){

  }

}

And now we can write the html code:

      
    
        
      
        
          {{message.text}}
        
        
          {{ message.createdAt | date:'HH:mm' }}

We create a ion-list and iterate the list of messages
We check if the author of the message is our user and if so we check the css class to messageFromMe. Otherwise the css class will be messageFromOther. The messageFromMe will display the message at the right of the screen, with the date and an icon to display if the other user has read it or not. The messageFromOther will be displayed on the left of the screen.

We can write our chat-page.page.scss file:

.chat {
    display: flex;
    flex-direction: column;
}
.messageFromOther {
    display: flex;
    flex-direction: column;
    margin: 0.2em 0;
    padding: 0.5em;
    max-width: 70%;
    margin-left: 13px;
    align-self: flex-start;
    background-color: #F1F0F0;
    color: black;
    border-radius: 10px 10px 10px 0px;
    font-size: 16px;
    .timestamp {
        font-size: 12px;
        opacity: 0.6;
    }
}
.messageFromMe {
    display: flex;
    flex-direction: column;
    margin: 0.2em 0;
    padding: 0.5em;
    max-width: 70%;
    align-self: flex-end;
    background-color:#2636be;
    color: white;
    border-radius: 10px 10px 0px 10px;
    margin-right: 13px;
    font-size: 16px;
    .timestamp {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        font-size: 12px;
        opacity: 0.6;
        text-align: end;

        ion-icon {
            font-size: 20px;

        }
    }
}

If you don’t know css or are not a design expert (like me), please remember you still can buy a ready to use template or hire a designer.

And finally, we need to add the typing box and sent message button:

Getting messages from Django backend

Now we will replace our hardcoded message list with real messages from the backend. And because we still don’t have message, i will use the Django admin to create fake messages. You just need to take a chat between you and a user that you created previously, and filling the message information:

You will need to repeat the process multiple times to have enought data for testing purpose…

We already have a default API to get Message from the backend. We will just modify the view to be able to filter for a specific chat id:

class MessageListView(generics.ListCreateAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = Message.objects.all().select_related("refChat")
    serializer_class = MessageSerializer
    filterset_fields = ['id','type','isRead','refChat']
    filter_backends = [DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter]
    ordering = ['-createdAt']

We added the select_related("refChat") instruction to our queryset to boost performance and use sql join instruction
We added a refChat in the list of filterset_fields which is the fields we can use to filter.
We are ordering the messages from the most recent to the oldest

If i try the API manually

curl --location --request GET 'http://localhost:8000/api/message/?refChat=66fdac13-79ff-4d0f-a0f2-7001708f51d5' \
--header 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjI4Njk5NzAxLCJqdGkiOiIzMDAzMzYyNDY3OWY0ZjU3YmI0YzZlNTYyN2VhYmI4NiIsInVzZXJfaWQiOiIzY2RlM2Y3ZS0yNjFlLTRlYmItODQzNy1mYTRjMjdkMzViZjAifQ.oZu0NYF3ls9giSNQgACA_ByqphOsuSKhJ1pLWIf8gXg'

I will get the following json:

{
    "count": 3,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": "a3e2d2dc-9f30-4a00-99e1-ca79a07aa792",
            "message": "message 3",
            "type": 0,
            "extraData": null,
            "isRead": false,
            "createdAt": "2021-08-11T16:11:56.926778Z",
            "updatedAt": "2021-08-11T16:11:56.926849Z",
            "refChat": "66fdac13-79ff-4d0f-a0f2-7001708f51d5",
            "author": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0"
        },
        {
            "id": "1ac78684-9cde-44ab-ab0a-dc393ba80631",
            "message": "message 2",
            "type": 0,
            "extraData": null,
            "isRead": false,
            "createdAt": "2021-08-11T16:11:45.103939Z",
            "updatedAt": "2021-08-11T16:11:45.104027Z",
            "refChat": "66fdac13-79ff-4d0f-a0f2-7001708f51d5",
            "author": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0"
        },
        {
            "id": "6cefd678-ba0c-4531-80a3-22aed289b51b",
            "message": "message 1",
            "type": 0,
            "extraData": null,
            "isRead": false,
            "createdAt": "2021-08-11T16:11:31.888809Z",
            "updatedAt": "2021-08-11T16:11:31.888915Z",
            "refChat": "66fdac13-79ff-4d0f-a0f2-7001708f51d5",
            "author": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0"
        }
    ]
}

Let’s create a new message.ts file in our models directory of our ionic application:

export class Message {
    id:string;
    message:string;
    type:number;
    extraData:any;
    isRead:boolean;
    refChat:string;
    author:string;
    createdAt : Date;
    updateAt : Date;

    constructor() {

    }

    initWithJSON(json) : Message{
      for (var key in json) {

            this[key] = json[key];

      }
      return this;
    }
}

With that class, we will be able to convert our api json response to a typescript message object.

You may wonder why i’m getting the message list from the most recent to the oldest one. It is because on a chat screen, we always display the last message to the end of the screen (bottom) and if scrolling to the top, at some point the view will need to retrieved previous messages (if exists).

To know if we have previous messages, we will use the next variable of the API response and when calling the next url, we will get a list of previous messages.

{
    "count": 3,
    "next": null,
    "previous": null,
    "results":

I just created 3 messages with the Django Admin so the next parameter is null.

By default we set the Django rest pagination at 20 items in our settings.py backend file:

REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
   'rest_framework_simplejwt.authentication.JWTAuthentication',
),
'DEFAULT_FILTER_BACKENDS': (
    'django_filters.rest_framework.DjangoFilterBackend',
    'rest_framework.filters.OrderingFilter',
),
'DEFAULT_RENDERER_CLASSES': (
    'rest_framework.renderers.JSONRenderer',
    'rest_framework.renderers.BrowsableAPIRenderer',
),
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
'PAGE_SIZE': 20,
}

Let’s modify our api-service.service.ts file to add the message API:

 getMessage(refChat,page) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    let url = this.getMessageUrl+"?refChat="+refChat+"&page="+page
    return Observable.create(observer => {
      this.http.get(url, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

and don’t forget to declare the url:

getMessageUrl : string = ''

and

private initUrls() {
    // ================ AUTHENTIFICATION METHODS ====================
    this.getLoginUrl = this.virtualHostName + "auth/jwt/create/"
    this.getCreateUserUrl = this.virtualHostName + "auth/users/"
    this.getResetPwdUrl = this.virtualHostName + "auth/users/reset_password/"
    this.getRefreshTokenUrl = this.virtualHostName + "auth/jwt/refresh/"
    this.getMeUrl = this.virtualHostName + "auth/users/me/"
    // =================================================================

    this.getUserUrl = this.virtualHostName + this.apiPrefix + "/user/"
    this.getSearchUserUrl = this.virtualHostName + this.apiPrefix + "/searchUser/"
    this.getCreateChatUrl = this.virtualHostName + this.apiPrefix + "/createChat/"
    this.getChatUrl = this.virtualHostName + this.apiPrefix + "/chat/"
    this.getMessageUrl = this.virtualHostName + this.apiPrefix + "/message/"
  }

Then in our chat-page.page.ts file:

 loadChat(page){
    if (this.apiService.networkConnected){
      this.apiService.showLoading().then(()=>{
        this.apiService.getMessage(this.chat.id,page).subscribe((list)=>{
          this.apiService.stopLoading()
          if (list) {
            let count = list["count"]
            if (count > 0) {
              //Iterate existing message
              for (let aMessage of list["results"]) {
                let theMessage = new Message().initWithJSON(aMessage)
                console.log(aMessage)
                this.messages.push(theMessage)
              }

            }
          }
        })
      })
    }
    else{
      this.apiService.showNoNetwork()
    }
  }

The page parameter will be used for the pagination. We can call this method once we had get and set the chat variable :

export class ChatPagePage implements OnInit {

  chat : Chat;
  username : string =''
  myUser : User
  otherUser : User
  messages = [

  ]
  messageToSend = ""
  currentPage=1 

  constructor(public apiService:ApiserviceService,
    public userManager:UserManagerServiceService,
    public router: Router,
    public route:ActivatedRoute) { 

    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.chat = this.router.getCurrentNavigation().extras.state.chat;
        console.log(this.chat)
        if (this.chat.fromUser.id==this.userManager.currentUser.id){
          this.myUser = this.chat.fromUser
          this.otherUser = this.chat.toUser
        }
        else{
          this.myUser = this.chat.toUser
          this.otherUser = this.chat.fromUser
        }
        this.username = this.otherUser.first_name+" "+this.otherUser.last_name
        this.messages = []
        this.loadChat(this.currentPage)
      }
      else{
        //Return home
        this.router.navigateByUrl("/home")
      }
    });
  }

and we can adapt our chat-page.page.html file to our new message json:

      
    
        
      
        
          {{message.message}}
        
        
          {{ message.createdAt | date:'HH:mm' }}

The page displayed will look like this:

As we can see the messages are not in the correct order in the view. This is because of our ordering in our API. The trick will be to reverse the element of the list with the reverse() method of an array. Updated code is :

loadChat(page){
    if (this.apiService.networkConnected){
      this.apiService.showLoading().then(()=>{
        this.apiService.getMessage(this.chat.id,page).subscribe((list)=>{
          this.apiService.stopLoading()
          if (list) {
            let count = list["count"]
            if (count > 0) {
              // Need to reverse values of API message list (oldest to recent)
              let arrayToReverse = list["results"]
              let finalListe =arrayToReverse.reverse()
              //Iterate existing message
              for (let aMessage of finalListe) {
                let theMessage = new Message().initWithJSON(aMessage)
                console.log(aMessage)
                this.messages.push(theMessage)
              }
            }
          }
        })
      })
    }
    else{
      this.apiService.showNoNetwork()
    }
  }

Now result will be better:

Dealing with pagination

Because we will need lot more messages, we can create a python script (on backend) to create fake messages for us, let’s call it createFakeMessages.py

import os
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "chattuto.settings")
import django
django.setup()
from faker import factory, Faker
from chat.models import Chat,Message
from model_bakery.recipe import Recipe, foreign_key

fake = Faker()
for i in range(100):
    from random import randrange
    import time
    from datetime import datetime
    randomNumber = randrange(10)
    message = Message()
    message.refChat_id="66fdac13-79ff-4d0f-a0f2-7001708f51d5"
    print(randomNumber)
    if randomNumber<=5:
        #myself
        message.author_id="3cde3f7e-261e-4ebb-8437-fa4c27d35bf0"
    else:
        #the other user
        message.author_id = "fb261053-d336-4a9b-9bcc-d206ac4b7753"
    message.isRead=False
    now = datetime.now()  # current date and time
    # Add to texte for better debug purpose
    message.message = fake.sentence(nb_words=10)+":"+now.strftime("%H:%M:%S")
    message.save()
    # sleep a little to have different createdAt
    time.sleep(1)

You need to adapt this script with your own refChat_id

To have the author of the message being myself or the other user, i use a random number and based on value between 0 and 10, i set the author_id with my own user_id or with the other_user_id

To generate a message i use fake.sentence and add it the current time, which will help us to visualize more easily on chat screen, if messages are order properly.

Finally i sleep 1 seconde between each message generation to avoid having the same createdAt value

You can get the ids using the Django admin.

Run the script with:

python createFakeMessage.py

Once the messages are generated, we can try again our application. Our chat messages list will be displayed and the next parameter of the JSON reponse will be set with the next url to get other messages.

{
  count: 103, 
  next: "http://127.0.0.1:8000/api/message/?page=2&refChat=66fdac13-79ff-4d0f-a0f2-7001708f51d5",
  previous: null,
  results: [ ... ]
}

Now that we have lot of messages, we need to scroll to see the last message in the list. We need to change that behaviour to automatically scroll to the bottom of the list.

In our html, we tagged the ion-content with the tag #content

In our typescript, like with our searchBar, we can access with the ViewChild instruction:

 @ViewChild('content', { static: true }) content;

and then after getting the messages list, we can scroll to the bottom like this:

 //Iterate existing message
let arrayToReverse = list["results"]
let finalListe =arrayToReverse.reverse()
for (let aMessage of finalListe) {
  let theMessage = new Message().initWithJSON(aMessage)
  this.messages.push(theMessage)
}
//Move to bottom
this.content.scrollToBottom(1000);

If user scrolls to the top, it means he wants to access previous historic messages, which means we need to load the previous messages from the backend (using the next url), then we need to add the messages to our chat list.

To check that the user is scrolling, i subscribed to ionScroll events, which call a method checkScrolling:

Let’s write the method:

  checkScrolling($event){
    if ($event.detail.scrollTop === 0) {
      //should load previous
      if (this.hasPrevious && !this.loadingPrevious){
        this.currentPage+=1
         this.loadChat(this.currentPage,true)
      }
      else{
        //No more previous
      }
    }
  }

First we check if the user has scrolled to the top of the list: if ($event.detail.scrollTop === 0)
Then if we have previous messages to load (based on the next variable) and not already loading the messages, we increment our currentPage variable and call again the loadChat method which has been modified to pass a second argument to know that the call is from this checkScrolling method.

So we need to modify our chat-page.page.ts file and declare these new variables:

 hasPrevious = false
 loadingPrevious = false

Then modify our loadChat method:

loadChat(page,fromScrolling){
    if (this.apiService.networkConnected){

        this.loadingPrevious = true
        this.apiService.getMessage(this.chat.id,page).subscribe((list)=>{
          this.loadingPrevious = false
          this.apiService.stopLoading()
          if (list) {
            console.log(list)
            let count = list["count"]
            let next = list["next"]
            if (next){
              this.hasPrevious=true
            }
            else{
              this.hasPrevious=false
            }
            if (count > 0) {
              //Iterate existing message
              let arrayToReverse = list["results"]
              let finalListe =arrayToReverse.reverse()
              let newList = []
              for (let aMessage of finalListe) {
                let theMessage = new Message().initWithJSON(aMessage)
                newList.push(theMessage)
              }
              //concat newList and existings messages 
              let prov = newList.concat(this.messages)
              this.messages = prov
              this.content.scrollToBottom(1000);
            }
          }

      })
    }
    else{
      this.apiService.showNoNetwork()
    }

Before loading messages from backend we set the this.loadingPrevious = true
Once we have the results, we set the this.loadingPrevious = false
Now that we have a list of previous messages, we need to reverse the list as we have done before.
Then the final list of messages to display will be : the previous messages (just loaded) then the existing messages (that we have already fetched).

 let finalListe =arrayToReverse.reverse()
  let newList = []
  for (let aMessage of finalListe) {
      let theMessage = new Message().initWithJSON(aMessage)
      newList.push(theMessage)
  }
  //concat newList and existings messages 
  let prov = newList.concat(this.messages)
  this.messages = prov

But now we have a problem with the this.content.scrollToBottom(1000); instruction. Because we fetched previous messages, constructed a new list of messages and then we scroll to the bottom of the chat, meaning that the user will see again the messages he already saw and he will need to scroll on top again…

This is not acceptable. We need to find the last message he saw before loading the new previous messages list and then scroll again to this last seen message:

 if (!fromScrolling){
    //Move to bottom
    this.content.scrollToBottom(1000);
  }
  else{
        //Need to scroll to last viewed message, wait for list refresh 100ms
        setTimeout(()=>{
            let listArray = this.list.nativeElement.children
            let itemToScroll = listArray[20]
            itemToScroll.scrollIntoView({behavior:'instant',block:'end'})
        },100)
  }

If the loadChat method is not called from the scrolling method, we can jump to the bottom of the list
Otherwise we know that we just fetched some previous messages, we wait a little (100ms) that the ion-list refresh on the screen, then we get the elements of that list using the this.list.nativeElement.children instruction. We can get this list variable like this:

@ViewChild(IonList, { read:ElementRef }) list:ElementRef;

And then we scroll immediatly to last seen message:

let itemToScroll = listArray[20]
itemToScroll.scrollIntoView({behavior:'instant',block:'end'})

The trick is to use our pagination number. We know that we fetched messages 20 by 20 (our Django rest framework pagination). We also know that new loaded messages will be in first position on our list (from 0 to 19), so the last seen message is in position 20 (our pagination number) !

Now to be honest the user experience is not optimal while scrolling to the top, because we need to fetch messages using network. To improve the experience, we should save message history on local cache and then use it immediatly, meaning we could set the list once and jump directly to the end of the list.

Here is the final code of the chat-page.page.ts file:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { IonList } from '@ionic/angular';
import { from } from 'rxjs';
import { Chat } from 'src/app/models/chat';
import { Message } from 'src/app/models/message';
import { User } from 'src/app/models/user';
import { ApiserviceService } from 'src/app/services/api-service.service';
import { UserManagerServiceService } from 'src/app/services/user-manager-service.service';

@Component({
  selector: 'app-chat-page',
  templateUrl: './chat-page.page.html',
  styleUrls: ['./chat-page.page.scss'],
})
export class ChatPagePage implements OnInit {
  @ViewChild('content', { static: true }) content;
  @ViewChild(IonList, { read:ElementRef }) list:ElementRef;

  chat : Chat;
  username : string =''
  myUser : User
  otherUser : User
  messages = [

  ]
  messageToSend = ""
  currentPage=1 
  hasPrevious = false
  loadingPrevious = false

  constructor(public apiService:ApiserviceService,
    public userManager:UserManagerServiceService,
    public router: Router,
    public route:ActivatedRoute) { 

    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.chat = this.router.getCurrentNavigation().extras.state.chat;
        console.log(this.chat)
        if (this.chat.fromUser.id==this.userManager.currentUser.id){
          this.myUser = this.chat.fromUser
          this.otherUser = this.chat.toUser
        }
        else{
          this.myUser = this.chat.toUser
          this.otherUser = this.chat.fromUser
        }
        this.username = this.otherUser.first_name+" "+this.otherUser.last_name
        this.messages = []
        this.loadChat(this.currentPage,false)
      }
      else{
        //Return home
        this.router.navigateByUrl("/home")
      }
    });
  }

  ngOnInit() {
  }

  loadChat(page,fromScrolling){
    if (this.apiService.networkConnected){

        this.loadingPrevious = true
        this.apiService.getMessage(this.chat.id,page).subscribe((list)=>{
          this.loadingPrevious = false
          this.apiService.stopLoading()
          if (list) {
            console.log(list)
            let count = list["count"]
            let next = list["next"]
            if (next){
              this.hasPrevious=true
            }
            else{
              this.hasPrevious=false
            }
            if (count > 0) {
              //Iterate existing message
              let arrayToReverse = list["results"]
              let finalListe =arrayToReverse.reverse()
              let newList = []
              for (let aMessage of finalListe) {
                let theMessage = new Message().initWithJSON(aMessage)
                newList.push(theMessage)
              }
              //concat newList and existings messages 
              let prov = newList.concat(this.messages)
              this.messages = prov
              if (!fromScrolling){
                  //Move to bottom
              this.content.scrollToBottom(1000);
              }
              else{
                //Need to scroll to last viewed message, wait for list refresh 100ms
                setTimeout(()=>{
                  let listArray = this.list.nativeElement.children
                  let itemToScroll = listArray[20]
                  itemToScroll.scrollIntoView({behavior:'instant',block:'end'})
                },100)
              }
            }
          }

      })
    }
    else{
      this.apiService.showNoNetwork()
    }
  }

  checkScrolling($event){
    if ($event.detail.scrollTop === 0) {
      //should load previous
      if (this.hasPrevious && !this.loadingPrevious){
        this.currentPage+=1
         this.loadChat(this.currentPage,true)
      }
      else{
        //No more previous
      }
    }
  }

}

There is only one missing feature to our list of messages. We need to display the date of the messages when it is different:

      
    
        
      
        {{getMessageDate(i)}}
      
      
        
          {{message.message}}
        
        
          {{ message.createdAt | date:'HH:mm' }}

We add the dateMessage class to our chat-page.page.scss file:

.dateMessage {
    display: flex;
    flex-direction: column;
    align-self: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

and in our typescript:

 isDifferentDay(messageIndex: number): boolean {

    if (messageIndex === 0) return true;

    const d1 = new Date(this.messages[messageIndex - 1].createdAt);
    const d2 = new Date(this.messages[messageIndex].createdAt);

    return d1.getFullYear() !== d2.getFullYear()
      || d1.getMonth() !== d2.getMonth()
      || d1.getDate() !== d2.getDate();
}

 getMessageDate(messageIndex: number): string {

   const wholeDate = new Date(this.messages[messageIndex].createdAt).toDateString();

   this.dateMessage = wholeDate.slice(0, wholeDate.length - 5);

   return this.dateMessage;

 }

For each item of the list, we added an index
Then we add a ion-row which is displayed only if the date changes.

And voila :

Managing isRead message status

To know if a message has been read, we will just suppose that it has been displayed in the chat to the concerned user. We can add :

for (let aMessage of finalListe) {
  let theMessage = new Message().initWithJSON(aMessage)
  if (theMessage.author!=this.myUser.id && theMessage.isRead==false){
    // I just read the message need to change the isRead to true

  }
  newList.push(theMessage)
}

And then we could use our API message to update the status of the message. But this will mean that if we have 20 messages unread (sent by the other user), we will do 20 Http query requests to update each messages !
This is a serious performance issue !

Instead we will do only ONE request with all the IDs to update. And to manage the list we will do:

let messagesIdToUpdate = []
for (let aMessage of finalListe) {
  let theMessage = new Message().initWithJSON(aMessage)
  if (theMessage.author!=this.myUser.id && theMessage.isRead==false){
      // I just read the message need to change the isRead to true
      messagesIdToUpdate.push(theMessage.id)
  }
  newList.push(theMessage)
}
if (messagesIdToUpdate.length>0){
  this.updateReadStatusForMessages(messagesIdToUpdate)
}

So now we need to write an API that will get this list of IDs and will update with only one query all messages.
First we will add the new route in the api/urls.py file :

url(r'^updateMessagesStatus/$', UpdateMessagesStatusView.as_view()),

and will create the view in the api/views.py file:

class UpdateMessagesStatusView(APIView):
    def post(self, request, format=None):
        try:
            ids = request.data["messageIds"]
            Message.objects.filter(id__in=ids).update(isRead=True)
            newdict = {"status": "OK"}
            return JsonResponse(newdict)
        except Exception as e:
            logger.error(e)
            newdict = {"status": "KO"}
            return JsonResponse(newdict)

Now we add this method in our api-service.service.ts file (don’t forget to declare the getUpdateMessagesStatusUrl):

updateMessageStatus(listOfIds) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };

    let params = {
      "messageIds":listOfIds
    }

    return Observable.create(observer => {
      this.http.post(this.getUpdateMessagesStatusUrl, params, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

and in our chat-page.page.ts file we can call this method:

 updateReadStatusForMessages(listOfIds){
    if (this.apiService.networkConnected){
      this.apiService.updateMessageStatus(listOfIds).subscribe((done)=>{
        console.log(done)
      })
    }
  }

This is a huge performance improvment with simple code !

Chat with a user

It’s time to dive into the next big subject : sending real time messages to the other user using websocket !

If you remember on day two we learned how to implement a chat in Django using Django channels. The idea and process will be the same but from a Ionic application perspective !

Meaning we need to learn how to :

Managing websockets with Ionic
Websockets chat events listener
Send / receive text messages

First we will create a new service to manage websockets:

ionic g service WebSocketService
mv src/app/web-socket-service.service.* src/app/services

And will edit the web-socket-service.service.ts with the code:

import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject } from "rxjs/webSocket";
import { BehaviorSubject, EMPTY, Observable, Subject, timer } from 'rxjs';
import { ApiserviceService } from './api-service.service';

@Injectable({
  providedIn: 'root'
})

export class WebSocketServiceService {
  RECONNECT_INTERVAL = 5000 // 5 seconds

  public messageReceived: BehaviorSubject ;
  constructor(public apiService:ApiserviceService) { }

  myWebSocket: WebSocketSubject;
  RETRY_SECONDS = 10; 
  isConnected = true;

  processMessage(msg){
    console.log("=== Publish message received"+JSON.stringify(msg))
    this.messageReceived.next(msg)
  }

  connect(chat) {
    return new Promise(resolve => {
      let url = "ws://127.0.0.1:8000/ws/chat/"+chat.id+"/"
      try {
        this.isConnected=true
        this.myWebSocket  = webSocket(url)
        this.messageReceived = new BehaviorSubject(null);
           // Called whenever there is a message from the server    
        this.myWebSocket.subscribe(    
          msg => {
            console.log('message received: ' + JSON.stringify(msg))
            this.processMessage(msg["message"])
          }, 
          err =>{
            this.isConnected=false;
            this.apiService.showError("Unable to connect to chat")
            console.log(err)
            }, 
          // Called if WebSocket API signals some kind of error    
          () => {
            console.log('complete') 
            this.isConnected=false;
        }
          // Called when connection is closed (for whatever reason)  
       );
      resolve(true)

      } catch (error) {
        console.log(error)
        resolve(false)
     }
    })
  }

  sendMessage(params){
    this.myWebSocket.next(params);
  }

  close() {
    this.messageReceived.unsubscribe()
    this.myWebSocket.complete(); 
  }

}

The WebSocketService will have methods to :

connect
sendMessage to the chat
process a received message
disconnect

The variable public messageReceived: BehaviorSubject ; is an Angular behaviour subject. This means other code can subscribe to this variable and receive events from it. We will use this to push incoming new messages from the chat.

To connect to a websocket with *Ionic**, it is really simple :

 this.myWebSocket  = webSocket(url)

In day two tutorial, we define the url of our chat room to be : ‘ws/chat/(?P[-a-zA-Z0-9_]+)/’, where room_name is the identifier of the chat between the two users.

This is why we hardcoded the url values like this:

  let url = "ws://127.0.0.1:8000/ws/chat/"+chat.id+"/"

To listen incoming events to our created socket, we can do like this:

 this.myWebSocket.subscribe(    
      msg => {
            console.log('message received: ' + JSON.stringify(msg))
            this.processMessage(msg["message"])
      }, 
      err =>{
            this.isConnected=false;
            this.apiService.showError("Unable to connect to chat")
            console.log(err)
      }, 
      // Called if WebSocket API signals some kind of error    
      () => {
            console.log('complete') 
            this.isConnected=false;
      }
);

If a message is received, we called the processMessage method with the message, which will be transmitted to messageReceived subscribers:

this.messageReceived.next(msg)

To send a message thru the websocket (aka to our Django backend) we can use:

sendMessage(params){
    this.myWebSocket.next(params);
}

So we can use this WebSocketService in our ChatPage to subscribe to messages received or to send message to the chat (aka the other user). Let’s add it to our chat-page.page.ts constructor method, and then once we have set our chat variable, we can connect to the websocket:

 constructor(public apiService:ApiserviceService,
    public userManager:UserManagerServiceService,
    public router: Router,
    public route:ActivatedRoute,
    private webSocketService:WebSocketServiceService) { 

    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.chat = this.router.getCurrentNavigation().extras.state.chat;
        // can connect to the chat websocket 
        this.webSocketService.connect(this.chat)

        if (this.chat.fromUser.id==this.userManager.currentUser.id){
          this.myUser = this.chat.fromUser
          this.otherUser = this.chat.toUser
        }
        else{
          this.myUser = this.chat.toUser
          this.otherUser = this.chat.fromUser
        }
        this.username = this.otherUser.first_name+" "+this.otherUser.last_name
        this.messages = []
        this.loadChat(this.currentPage,false)
      }
      else{
        //Return home
        this.router.navigateByUrl("/home")
      }
    });
  }

To manage the disconnect, we will implement the ngOnDestroy method:

export class ChatPagePage implements OnInit,OnDestroy {

which is called automatically when a view is destroyed in memory, and will close the websocket connection:

ngOnDestroy(){
    console.log("=== Disconnecting websocket ====")
    this.webSocketService.close()
}

Before subscribing to incoming message, we need to check that the socket is connected:

 // can connect to the chat websocket 
this.webSocketService.connect(this.chat)
if (this.webSocketService.isConnected){
  this.webSocketService.messageReceived.subscribe((message)=>{
     if (message){
              console.log("WS Received message ")
              console.log(message)
      }
  })
}

To send a message, we declared a sendMessage() method into our html. We can now implement it:

sendMessage(){
    if (this.webSocketService.isConnected){
       //create the expected json message
      let newMessage = {
        "author" : this.myUser.id,
        "refChat" : this.chat.id,
        "message" : this.messageToSend,
        "type" : 0,
        "extraData": ""
      }
      this.webSocketService.sendMessage(newMessage)
    }
  }

messageToSend is the text the user is typing into it’s chat input box.

We need to construct the JSON that our server is expecting as we have seen in tutorial day two:
{
refChat : refChat
author : refUser
message : message
type : 0
extraData : ""
}

Now you can try again the application and try our chat page, you should see the message: Unable to connect to chat.

This is because we declared in our backend ChatConsumer method, that the user should be authentificated:

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        try:
            self.room_name = self.scope['url_route']['kwargs']['room_name']
            chat = Chat.objects.get(id=self.room_name)
            self.room_group_name = 'chat_%s' % str(chat.id)
            # Join room group
            async_to_sync(self.channel_layer.group_add)(
                self.room_group_name,
                self.channel_name
            )

            self.accept()
        except Chat.DoesNotExist as e:
            print(e)
            return

Unfortunatly it seems impossible to specify custom headers when opening a websocket connection neither with RxJS nor with plain JavaScript / DOM API. So we need to remove this check:

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        try:
            user = self.scope['user']
            print("=== user %s" % user)
            if str(user)=="AnonymousUser":
                print("==Not authorized")
                return
            self.room_name = self.scope['url_route']['kwargs']['room_name']
            chat = Chat.objects.get(id=self.room_name)
            self.room_group_name = 'chat_%s' % str(chat.id)
            # Join room group
            async_to_sync(self.channel_layer.group_add)(
                self.room_group_name,
                self.channel_name
            )

            self.accept()
        except Chat.DoesNotExist as e:
            print(e)
            return

Now you should be able to go to the ChatPage without websocket issue.

To test the websocket, first we can use the page that we developped in tutorial day two:

http://127.0.0.1:8000/chat/66fdac13-79ff-4d0f-a0f2-7001708f51d5/

We just need to setup the correct chat id in the url. We can get this chat id from our javascript console log of our Ionic application. And then if we sent a message from the web interface, we can check that this message is received from our Ionic application console log:

=== Publish message received"message sent from web interface"
chat-page.page.ts:49 WS Received message 
chat-page.page.ts:50 message sent from web interface

We can also verify that if we go back to our HomePage, the websocket will be closed by our ngDestroy method:

=== Disconnecting websocket ====

As final step, we need to test sending messages from our Ionic application to another user on Ionic application too. So you will need to create/register another user, and test with two users (meaning two devices) in parallel. Like if you are simulating a chat.

You can do this by testing on a simulator (ios or android) and on your browser (Opera, firefox,…) or you can use two different browser such as Opera and Chrome or Safari and firefox , or … You got the point…
On one device this will be your first user and on the second device, this will be your second user.

If you are not sure to understand, please refer to this screenshot:

I have registered a User1 and User2 for demo purpose. Then i created a chat between the two users

And now if you write a message in User1 and click to send the message, you should see in your javascript console log (of both users aka browsers), the message sent:

WS Received message 
chat-page.page.ts:50 Hi Julien, how are you ?

Using the Django Admin you should be able to see the message, meaning it has been saved correctly in the database.

Great!!! our websocket is working perfectly between users and now we have to fix some code.

When sending a message, we can reset the input box value:

 sendMessage(){
    if (this.webSocketService.isConnected){
      //create the expected json message
      let newMessage = {
        "author" : this.myUser.id,
        "refChat" : this.chat.id,
        "message" : this.messageToSend,
        "type" : 0,
        "extraData": ""
      }
      this.webSocketService.sendMessage(newMessage)
      this.messageToSend=""
    }
  }

Right now we received the message as a string but we need a Message object. To do so, we just need to update our consumers.py file and pass the JSON received instead of the text message:

    def receive(self, text_data):
        data_json = json.loads(text_data)
        print("===Received")
        print(data_json)
        user = self.scope['user']
        print("=== user %s"%user)
        message = data_json['message']
        # save message to database
        self.new_message(data_json)
        # Send JSON to room group
        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': data_json
            }
        )

Now we can modify our webSocket.messageReceived event to create a Message object from the JSON, and add it to the list of messages:

this.webSocketService.messageReceived.subscribe((message)=>{
if (message){
  console.log("WS Received message ")
  console.log(message)
  let theMessage = new Message().initWithJSON(message)
  theMessage.createdAt = new Date()
  this.messages.push(theMessage)
  // scroll to bottom to see the message
  this.content.scrollToBottom(1000);
}
})

We also initialize the createdAt to the current date, because the JSON doesn’t contains this information.

We can also set the isRead to True if the message received not coming from our own user:

this.webSocketService.messageReceived.subscribe((message)=>{
    if (message){
      console.log("WS Received message ")
      console.log(message)
      let theMessage = new Message().initWithJSON(message)
      theMessage.createdAt = new Date()
      this.messages.push(theMessage)
      // scroll to bottom to see the message
      this.content.scrollToBottom(1000);
      let messagesIdToUpdate = []
      if (theMessage.author!=this.myUser.id && theMessage.isRead==false){
         // I just read the message need to change the isRead to true
         messagesIdToUpdate.push(theMessage.id)
         this.updateReadStatusForMessages(messagesIdToUpdate)
      }
    }
  })

Ok we now have a functional chat between two users. Let’s see how to improve it, by adding attachment functionnalities.

Improve chat by sending geolocation or pictures

As improvment, we will let the user send it’s google map geolocation or an image in the chat.

Let’s first modify the chat-page.page.html file to add these functionnalities:

and chat-page.page.scss file:

.attachments{
    ion-icon {
        font-size: 20px;

    }
}

Our new toolbar will render like this:

Dealing with attachment : Geolocation

To send our location to the other user, we will need to install the Capacitor Geolocation plugin.

npm install @capacitor/geolocation
npx cap sync

Please notice you will need to configure the Info.plist file of your code project, to ask permission.
NSLocationAlwaysAndWhenInUseUsageDescription
We need to access your location to send it in the chat
NSLocationWhenInUseUsageDescription
We need to access your location to send it in the chat
This will be used to show and ask the user if he accepts to be geolocalized:

Then to use it, we will import it in our code:

import { Geolocation } from '@capacitor/geolocation';

Because we can use this application on our browser too (as a progressive web app), we need to check the platform on which the user is (browser or iOS/Android):

constructor(public apiService:ApiserviceService,
    public userManager:UserManagerServiceService,
    public router: Router,
    public route:ActivatedRoute,
    private webSocketService:WebSocketServiceService,
    public platform:Platform) {

Then we can write our clicGeoloc method:

 async clicGeoloc(){
    if (this.platform.is("capacitor")){
      await Geolocation.checkPermissions().then((status)=>{
        if (status.location=="granted"){
          this.getCurrentLocation()
        }
        else{
          Geolocation.requestPermissions().then((status)=>{
            if (status.location=="granted"){
              this.getCurrentLocation()
            }
          })
        }
      })
    }
    else{
      // Get location from browser 
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          position => {
            console.log("============= POSITION  ================");
            console.log(position)
            let latitude = position.coords.latitude;
            let longitude = position.coords.longitude;
            this.sendLocationMessage(latitude,longitude)
          },
          error => {
            this.apiService.showError("Geolocation unavailable !")
          }
        );
      }
    }

  }

We first the Platform the user is using
If the platform is capacitor (ios/android), then we need to check if we have the permission to request the geolocation of the user, otherwise we need to request the permission.
Then we can call a method to get the current location of the user.
If the user is on a browser (navigator), then we can use the browser WebAPI to get the current position, and then we can send our geolocated message.

First let’s write the method to get the current location with Capacitor:

async getCurrentLocation(){
    const position = await Geolocation.getCurrentPosition();
    if (position) {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;
      this.sendLocationMessage(latitude,longitude)
    }
    else{
      this.apiService.showError("Geolocation unavailable !")
    }
  }

The plugin will return a JSON with different information such as the latitude and longitude:

{"coords":
  {
    "latitude":31.046050999999999,
    "accuracy":5,
    "heading":-1,
    "altitudeAccuracy":-1,
    "altitude":0,
    "longitude":-34.851612000000003,
    "speed":-1
  },
  "timestamp":1628836078582
}

and now let’s focus on sending a message to our chat, with the geolocation information. We will construct the same Message json as before, but this time we will use and set the type and extraData parameters:

sendLocationMessage(latitude,longitude){
    let extraData = Number(latitude).toString()+","+Number(longitude).toString()
    this.sendMessageWithArg(1,extraData)
}

We just need to refactor a little bit our code:

 sendMessage(){
    this.sendMessageWithArg(0,"")
}

sendMessageWithArg(type,extraData){
    if (this.webSocketService.isConnected){
      //create the expected json message
      let newMessage = {
        "author" : this.myUser.id,
        "refChat" : this.chat.id,
        "message" : this.messageToSend,
        "type" : type,
        "extraData": extraData
      }
      this.webSocketService.sendMessage(newMessage)
      this.messageToSend=""
    }
}

Our Django backend doesn’t need any modifications because we already set these values in the database when received, in our consumers.py file :

    def new_message(self,data):
        message = Message()
        message.refChat_id = data["refChat"]
        message.message = data["message"]
        message.author_id = data["author"]
        message.isRead = False
        message.type = data["type"]
        message.extraData = data["extraData"]
        message.save()

And if you remember we created the Message model with:

 msg_type = (
        (0, "TEXT"),
        (1, "GEOLOC"),
        (2, "PHOTO"),
    )
    type = models.IntegerField(choices=msg_type, default=0)

which now make sense. type==1 means it is a geolocated message and the extraData contains the information.

Now we just need to update our chat-page.page.html file to check if the type is 0 (message) or 1 (geolocation):

 
        
          {{message.message}}
        
        
          
        
        
          {{ message.createdAt | date:'HH:mm' }}

and scss:

.chatimage{
    max-width: 100px;
}

If the type is 0, we display the text message, otherwise we display an image (located in the assets/imgs/ folder):

Now we will add the possibility to click on the image, to launch Google Maps within a browser to show position on a map.

And this time we will use Capacitor Browser plugin to do so. Let’s install it:

npm install @capacitor/browser
npx cap sync

Now we use it :

import { Browser } from '@capacitor/browser';

Modify the HTML to add the click :

and create the showLocation(message) method:

 async showLocation(message){
    let extraData = message.extraData
    if (extraData){
      let tokens = extraData.split(",")
      console.log(extraData)
      let lat = tokens[0]
      let lon = tokens[1]
      let urlGoogleMap = "https://maps.google.com/?q=" + lat + "," + lon
      await Browser.open({ url: urlGoogleMap });
    }

  }

Dealing with attachment : Picture

To send picture attachment, we will use same technique as before except the type parameter will be 2, and the extraData will contain the url of our image.

To choose or take an image, we will use the Capacitor Camera plugin, so let’s install it:

npm install @capacitor/camera
npx cap sync

As before, the iOS requires the following usage description be added and filled out for your app in Info.plist: NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSPhotoLibraryUsageDescription.

For Android, the AndroidManifest.xml will require:

Now we import the plugin:

import { Camera, CameraResultType } from '@capacitor/camera';

Easy part, we can update the HTML to display the image which will be in the extraData parameter:

Now we need to create the clicCamera() method, which will let the user chooses his photo and then add the image to the chat.

 async clicCamera(){
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Base64
    });
    if (image){
      //Send image to server
      let extraData =data:image/${image.format}+";base64,"+image.base64String
       this.sendMessageWithArg(2,extraData)
    }
  }

The trick here is to set the extraData parameter with the content of the image as a base64 string !

Before testing our application again, we need to modify our Django Message Model and replace the:

 extraData = models.CharField(default='', null=True, blank=True, max_length=255)

which is a CharField which is too short to contains a base64 string by:

 extraData = models.TextField(null=True, blank=True)

Now we need to launch a Django migration using python manage.py makemigrations and python manage.py migrate:

python manage.py makemigrations
Migrations for 'chat':
  chat/migrations/0002_auto_20210813_0804.py
    - Alter field extraData on message
(venv) christophesurbier@MacBook-Air-de-christophe chattuto % python manage.py migrate       
Operations to perform:
  Apply all migrations: admin, auth, chat, contenttypes, sessions
Running migrations:
  Applying chat.0002_auto_20210813_0804... OK

And voilà ! We can try the application, select or take an image (iOS/Android only) and send it to the chat:

As an exercice, you could try to create the showImage(message) method and use the Capacitor PhotoViewer plugin to show the image on fullscreen.

More rapid and easy, i will use this NgxIonicImageViewer plugin:

npm install --save ngx-ionic-image-viewer

Then we need to modify our app.module.ts file to import it:

import { Injectable, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClient, HttpClientModule, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { IonicStorageModule } from '@ionic/storage-angular';
import { TokenInterceptor } from './services/token.interceptor';
import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    IonicStorageModule.forRoot(),
    BrowserModule, 
    HttpClientModule,
    IonicModule.forRoot(), 
    AppRoutingModule,
    NgxIonicImageViewerModule
  ],
  providers: [
    InAppBrowser,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true } 
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

then we also need to import it into our chat-page.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { ChatPagePageRoutingModule } from './chat-page-routing.module';

import { ChatPagePage } from './chat-page.page';
import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    NgxIonicImageViewerModule,
    ChatPagePageRoutingModule
  ],
  declarations: [ChatPagePage]
})
export class ChatPagePageModule {}

and then we can use it as a directive as simple as :

We just added the ionImgViewer directive to our image.

Now you can click the image, it will open on fullscreen. We don’t need the showImage() anymore !

Please notice the scrollToBottom instruction that we set after initializing the message list, will not always scroll exactly to bottom with image messages. I modified the code to use a timer to wait a little bit that the content view refreshed and then i ask for a scrollToBottom :

if (!fromScrolling){
   //Move to bottom
  setTimeout(()=>{
       this.content.scrollToBottom(1000);
  },200)
}

The result is a little bit better but not optimal. I’m not sure what the problem is, may be it is a ionic bug.

Managing user presence with online/offline

In a chat application, it would be nice to know if the other user is online or not. We will add this feature.

First let’s modify our User model, to add this information:

class User(AbstractBaseUser, PermissionsMixin):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    email = models.EmailField(_('email address'), unique=True)
    first_name = models.CharField(_('first name'), max_length=30, blank=True)
    last_name = models.CharField(_('last name'), max_length=30, blank=True)
    date_joined = models.DateTimeField(_('date joined'), auto_now_add=True)
    is_active = models.BooleanField(_('active'), default=True)
    is_staff = models.BooleanField(_('active'), default=True)
    avatar = models.ImageField(upload_to='avatars/', null=True, blank=True)
    lastConnexionDate = models.DateTimeField(null=True, blank=True)
    valid = models.BooleanField(default=True)
    online = models.BooleanField(default=False)

Then we can launch migrations:

python manage.py makemigrations
python manage.py migrate

We can update user.ts file to add the online fields:

export class User {
    fcmdevice:any;
    password:string;
    last_login:string;
    is_superuser:any;
    id:any;
    email:string;
    first_name:string;
    last_name:string;
    date_joined:Date;
    is_active:boolean;
    is_staff:boolean;
    avatar:string;
    groups:any;
    user_permissions:any;
    lastConnexionDate : Date;
    valid:boolean;
    backgroundColor : string
    online : boolean;

Remember our setActiveAndLastDate and setInactive methods in our app.component.ts file ? We can now modify these methods to set this new online parameter:

setActiveAndLastDate(user: User) {
    if (this.apiService.networkConnected) {
      this.apiService.showLoading().then(() => {
        this.apiService.showLoading().then(() => {
          let params = {
            "online": true,
            "lastConnexionDate": new Date()
          }
          this.apiService.updateUser(user.id, params).subscribe((done) => {
            this.apiService.stopLoading()
          })
        })
      })
    }
  }

setInactive(user: User) {
    if (this.apiService.networkConnected) {
      this.apiService.showLoading().then(() => {
        let params = {
          "online": false
        }
        this.apiService.updateUser(user.id, params).subscribe((done) => {
          this.apiService.stopLoading()
        })
      })
    }
  }

This methods are called when a user enters or leaves the application, which is perfect to know if a user is online or not.

We need to modify our ChatUserSerializer and SearchUserSerializer to return this online information:

class ChatUserSerializer(ModelSerializer):
    class Meta:
        model = User
        fields = ['id','first_name','last_name','online']

class SearchUserSerializer(ModelSerializer):
    class Meta:
        ref_name = "SearchUser"
        model = User
        fields = ["id","first_name","last_name","online"]

Now if you try the application again, when getting the chat list json, you should have the information about online for each user:

{
    "id": "e7344a76-5c3d-42b5-99ff-d1317fa2193e",
    "fromUser": {
        "id": "91314a6f-8f49-42d1-9eef-d653c326d0d0",
        "first_name": "user1",
        "last_name": "christophe",
        "online": true
    },
    "toUser": {
        "id": "b1efd0ec-96cd-4b05-8e38-def384ba436f",
        "first_name": "user2",
        "last_name": "julien",
        "online": false
    },
    "lastMessage":
}

Let’s modify our home-page.page.html, search user list to display the online information:

 
    

    
    {{item.first_name}} {{item.last_name}}

and our chat list:

then we modify the home-page.page.scss file :

.image-profile-online{
    width: 2rem;
    height: 2rem;
    display: block;
    border-radius: 50%;
    border: 3px solid rgb(23, 247, 23);
    margin-right: 10px;
 }
 .image-profile-offline{
    width: 2rem;
    height: 2rem;
    display: block;
    border-radius: 50%;
    border: 3px solid red;
    margin-right: 10px;
 }

online users will be displayed with a green circle and offline user with a red one.
Finally we need to adapt our code to construct dynamically this classonline variable, which is very simple for the onSearchChange method:

 for (let item of data) {
    item["backgroundColor"] = this.getRandomColor()
    if (item.online){
        item["classonline"]="image-profile-online"
    }
    else {
        item["classonline"]="image-profile-offline"
    }
    this.listOfUser.push(item)
}

whereas on the loadExistingChat() method, the code is a little bit more complex since we first need determine which user in the json Chat is not ourself:

if (theChat.fromUser.id!=this.userManager.currentUser.id){
    if (theChat.fromUser.online){
        theChat["classonline"]="image-profile-online"
    }
    else {
        theChat["classonline"]="image-profile-offline"
    }
}
else{
    //Other 
    if (theChat.toUser.online){
        theChat["classonline"]="image-profile-online"
    }
    else {
        theChat["classonline"]="image-profile-offline"
    }
}

As improvment, you could pass the online information to the ChatPage and display something in the header to show that the user is online (or not).

When a user logs or registers to our application, we should set him as online:

this.apiService.findUserWithQuery("?email="+email).subscribe((list) => {
  if (list) {
    let count = list["count"]
    console.log("Count " + count)
    if (count == 0) {
      this.apiService.showError('Identification failed ! No account found');
    }
    else {
      let result = list["results"][0]
      console.log(result)
      this.userManager.setUser(result).then((done) => {
         let params = {
              "online": true,
               "lastConnexionDate": new Date()
          }
          this.apiService.updateUser(this.userManager.currentUser.id, params).subscribe((done) => {

          })
          // Next screen
          console.log("===Can go to next screen")
          this.router.navigateByUrl('/home', { replaceUrl: true });
      })
    }
  }

 let updateParams = {
    "first_name": params.firstName,
    "last_name": params.lastName,
    "online":true,
    "lastConnexionDate": new Date()
  }

  this.apiService.updateUser(this.userManager.currentUser.id, updateParams).subscribe((done) => {
      console.log("resultat update ", done)
  })

How to refresh chat list home page with latest message ?

We need to fix some issues.

If you send a message or received a message from a user and go back to the home page, the chat list will not be aware of this new message (list was loaded before), so the screen will not be updated. Worst, if you received a new chat from a user, you will not be able to see it in the list !

One easy solution, could be to detect each time user enters the home page and refresh the list:

ionViewDidEnter(){
    this.loadExistingChat()
  }

Another solution would be to have a background thread getting the chat list each second (a polling system):

constructor(public apiService: ApiserviceService,
    public userManager: UserManagerServiceService,
    public router:Router) {
      this.loadExistingChat()
      this.taskBackground = setInterval(() => {
        this.launchBackgroundThread();
     }, 1000); //1secondes
  }

  ngOnInit() {
  }
  ngOnDestroy(){
    this.taskBackground.clearInterval()
  }

  ngAfterViewInit() {
    SplashScreen.hide()
  }

  launchBackgroundThread(){
    this.apiService.getChats().subscribe((list) => {
      console.log(list)
      if (list){
        let count = list["count"]
        if (count>this.chatList.length){
          //New chat refresh the list
          console.log("===new chat")
          this.chatList = []
          this.parseChatList(list)
        }
      }
    })
  }

and to avoid code duplication, we refactor to create a parseChatList method:

parseChatList(list){
    let count = list["count"]
    if (count > 0) {
      //Iterate existing chat
      for (let aChat of list["results"]) {
        let theChat = new Chat().initWithJSON(aChat)
        console.log(theChat)
        theChat["backgroundColor"] = this.getRandomColor()
        if (theChat.lastMessage.length > 0) {
          let lastmessage = theChat.lastMessage[0]
          let classMessage = 'messageUnread'
          if (lastmessage.isRead) {
            classMessage = "messageread"
          }
          theChat["classMessage"] = classMessage
        }
        if (theChat.fromUser.id!=this.userManager.currentUser.id){
          if (theChat.fromUser.online){
            theChat["classonline"]="image-profile-online"
          }
          else {
            theChat["classonline"]="image-profile-offline"
          }
        }
        else{
          //Other 
          if (theChat.toUser.online){
            theChat["classonline"]="image-profile-online"
          }
          else {
            theChat["classonline"]="image-profile-offline"
          }
        }
        this.chatList.push(theChat)
      }

    }
  }

  loadExistingChat() {
    if (this.apiService.networkConnected) {
      this.isSearching = true

      this.chatList = []
      this.apiService.getChats().subscribe((list) => {
        if (list) {
          this.parseChatList(list)
        }
      })
    }
  }

With this solution if an incoming chat arrives, the list will refresh and we will be able to see it on the top of the list (because the backend orders by most recent one first).

Now we need to have a different approach for last message displayed. We will iterate our current chat list with the new one received, and check if last message are the same. If not, we can directly modify the chat last message element without refreshing the all list:

 launchBackgroundThread(){
    this.apiService.getChats().subscribe((list) => {
      console.log(list)
      if (list){
        let count = list["count"]
        if (count>this.chatList.length){
          //New chat refresh the list
          console.log("===nouveau chat")
          this.chatList = []
          this.parseChatList(list)
        }
        else{
          //check message
          for (let aChat of list["results"]) {
            let theChat = new Chat().initWithJSON(aChat)
            for (let chatDisplayed of this.chatList){
              if (chatDisplayed.id==theChat.id){
                let lastMessageDisplayed = chatDisplayed.lastMessage[0]
                let currentLastMessage = theChat.lastMessage[0]
                if (currentLastMessage && !lastMessageDisplayed){
                  chatDisplayed.lastMessage = theChat.lastMessage
                  console.log("==Replace last message",JSON.stringify(chatDisplayed.lastMessage))
                }
                else{
                  if (currentLastMessage.id!=lastMessageDisplayed.id){
                    //New incoming message replace in list
                    chatDisplayed.lastMessage = theChat.lastMessage
                    console.log("==Replace last message",JSON.stringify(chatDisplayed.lastMessage))
                  }
                }
              }
            }
          }
        }
      }
    })
  }

Another solution could be to use WebSocket again and develop a notification event system (as we have done for the chat himself). Or to use an external provider such as Pusher.com if you don’t want to spend time to develop realtime notifications.

The source code of this tutorial can be found on my Github repository.

Questions/Answers

How to pass arguments to a ionic screen while navigating ?

Create a navigationExtras dictionnary with the fields/objects you want to pass then use the navigate method of the standard Angular router :

  const navigationExtras: NavigationExtras = { state : {
      chat : new Chat().initWithJSON(response) }
  };
  this.router.navigate(['chat-page'], navigationExtras);

How to get an element value of in the Ionic Html page from your code ?

Tag the content in your HTML with # keyword and then use the @ViewChild angular instruction:
and
@ViewChild('content', { static: true }) content;

What technology can we use to have realtime notifications ?

Websockets

To go further :

You can implement a new functionality : Showing in chat that other user is typing a message. You should have all the technical background to do it now.

listen for events on the chat input box
Send a new kind of event thru the websocket (like usertyping)
Modify the consumers.py file to receive and transmit this new event (PS: no need to save this information in database. This is not our usual Django model Message)
Modify the code to subscribe to this kind of message (user is typing) and display something at the bottom of the chat list like a bubble with … as we can see in many other chat applications.

The post Day 9 : Chatting with a user appeared first on Ionic and Django Tutorial.

Day 8 : Searching users, creating / displaying chats

Christophe Surbier — Fri, 13 Aug 2021 15:34:06 +0000

Create a chat application with Ionic 5/ Angular 12/ Capacitor 3 and Django 3 – Series – Part height

Ok no that we learned how to develop and deploy on application on a device, it’s time to build our main application goal : Chatting with users.

Day 8 : Searching users, creating / displaying chats

Search user

It is obvious that to chat with other Users we need to be able to find them. So we will implement a searchbar functionality on our application main page a.k.a HomePage .

Let’s edit our src/app/pages/home-page.page.html file to add the search bar:


  
    ChatTuto

Each time the user will enter a caracter the event ionChange will be launched and the method onSearchChange will be called with the event value. The debounce instruction will wait a little (250 milliseconds) before calling our method. This will avoid intempestive calls while the user is typing.

In the src/app/pages/home-page.page.ts file, we can write the method and display the value entered:

onSearchChange(event){
    console.log(event.detail.value)
}

For rapid and simple development, i usually develop and test using ionic serve command, and used Ionic hot live deploy when i really want to test on a simulator or a device. It’s up to you. Both methods are valid.

Now we will ask our backend to send us all the users existing in the system, having first or last name containing the text searched. Let’s continue to modify our HomePage:

import { Component, OnInit } from '@angular/core';
import { SplashScreen } from '@capacitor/splash-screen';
import { User } from 'src/app/models/user';
import { ApiserviceService } from 'src/app/services/api-service.service';
@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.page.html',
  styleUrls: ['./home-page.page.scss'],
})
export class HomePagePage implements OnInit {

  listOfUser : User[] = []
  isSearching = false
  constructor(public apiService:ApiserviceService) { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    SplashScreen.hide()
  }

  onSearchChange(event){
    console.log(event.detail.value)
    if (this.isSearching==false){
      if (this.apiService.networkConnected){
        this.isSearching = true
      }
      else{
        this.apiService.showNoNetwork()
      }
    }
  }
}

First we add a isSearching variable to know that we already asked the backend for searching users and avoid launching several requests… Then we check if the network is available to search, otherwise we display a no network message.

Now let’s show a loader and launch a search on our backend:

 onSearchChange(event){
    console.log(event.detail.value)
    if (this.isSearching==false){
      if (this.apiService.networkConnected){
        this.isSearching = true
        this.apiService.showLoading().then(()=>{
          this.apiService.searchUser(event.detail.value).subscribe((results)=>{
            this.apiService.stopLoading()
            this.isSearching = false
          })
        })
      }
      else{
        this.apiService.showNoNetwork()
      }
    }
  }

The apiService.searchUser method doesn’t exist yet and we need to create it.

We have a findUserWithQuery methods in our ApiService but please remember that for security issues (avoiding showing other users data), this method is setup in Django to only returns your current user application. Remember the code we did:

# Filter for connected user
def get_queryset(self):
  user = self.request.user
  queryset = User.objects.filter(pk=user.id)
  return queryset

So we need to create a new searchUser method on backend, that will search on first and last names and will return filtered data (only the name). Then we will be able to use it into our Ionic application.

SearchUser API in Django

First we will edit our api/urls.py file to add the new route pattern:

url(r'^searchUser/$', SearchUserListView.as_view()),

Then we will edit the api/views.py to create the SearchUserListView method:

class SearchUserListView(generics.ListCreateAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = User.objects.all()
    serializer_class = SearchUserSerializer
    search_fields = ['first_name','last_name']
    filter_backends = [DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter]

and create the SearchUserSerializer in the api/serializers.py file:

class SearchUserSerializer(ModelSerializer):
    class Meta:
        ref_name = "SearchUser"
        model = User
        fields = ["id","first_name","last_name"]

In the serializer we only return id, first_name, last_name to avoid security issues and keep compliant with RGPD issues.

Now we can test our new API with a curl method:

curl --location --request GET 'http://localhost:8000/api/searchUser?search=Christ' \
--header 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjI4NDkzNjI4LCJqdGkiOiI3MDAzMDU0ZWIyY2U0Y2Q0OTUzMDM4Mjk1OTQyOGMyOSIsInVzZXJfaWQiOiIzY2RlM2Y3ZS0yNjFlLTRlYmItODQzNy1mYTRjMjdkMzViZjAifQ.sciuIti7Ce8Bci9lnJ5k7aGWkk67Q66UvPVL292m1qI'

Please remember we need to be authenticated with a JWt access token.

And see the response:

{
    "count": 1,
    "next": null,
    "previous": null,
    "results": [
        {
            "first_name": "Christophe",
            "last_name": "Surbier",
            "id":"3cde3f7e-261e-4ebb-8437-fa4c27d35bf0"
        }
    ]
}

Ok nice the API is working and sending back results, except at this time, there is only one user in the backend who is myself and we are not going to chat with ourselves ! So we need to modify our code to filter and exclude our own user from the result list.

Let’s modify our api/views.py file:

class SearchUserListView(generics.ListCreateAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = User.objects.all()
    serializer_class = SearchUserSerializer
    search_fields = ['first_name','last_name']
    filter_backends = [DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter]
    # Filter for connected user
    def get_queryset(self):
        user = self.request.user
        queryset = User.objects.exclude(pk=user.id)
        return queryset

If we call again the API, then the answer will have no data:

{
    "count": 0,
    "next": null,
    "previous": null,
    "results": []
}

This is perfect, except the fact that we would like some tests data for our application.

Let’s fix this.

Generate Fake user data using Django

To generate fake data, we will install the ModelBakery and Faker libraries:

pip install model_bakery
pip install Faker

Then we will create a createFakeData.py file at the root of our chatttuo project:

import os

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "chattuto.settings")

import django

django.setup()

from faker import factory, Faker
from chat.models import *
from model_bakery.recipe import Recipe, foreign_key

fake = Faker()

for k in range(100):
    user = Recipe(User,
                  first_name=fake.first_name(),
                  last_name=fake.last_name(),
                  email=fake.email(),
                  is_active=True,
                    createdAt=fake.future_datetime(end_date="+30d", tzinfo=None),
                    updatedAt=fake.future_datetime(end_date="+30d", tzinfo=None), )
    user.make()

The script is quite simple, we ask the Faker library to create 100 users, and we specify which type of fields are our first_name, last_name, … To generate realistic values.

To run the script just launch the command:

python createFakeData.py

Remember to have your environment variables set (database connexion, …)

And voilà, you should have 100 new users in your backend, which you can verify easily with the Django Admin

Search : display user list results

Ok now we go back to our Ionic application and implement the searchUser method.

Let’s add it to our src/app/services/api-service.service.ts file.

First we need to declare our new url :

 this.getSearchUserUrl = this.virtualHostName + this.apiPrefix + "/searchUser/"

and then implement the method:

 searchUser(searchTerm) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };

    return Observable.create(observer => {
      this.http.get(this.getSearchUserUrl+"?search="+searchTerm, options)
        .pipe(retry(1))
        .subscribe(res => {
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next();
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

Now we can modify our method onSearchChange on HomePage to display the results in the console log:

onSearchChange(event){
    console.log(event.detail.value)
    if (this.isSearching==false){
      if (this.apiService.networkConnected){
        this.isSearching = true
        this.apiService.showLoading().then(()=>{
          this.apiService.searchUser(event.detail.value).subscribe((results)=>{
            this.apiService.stopLoading()
            this.isSearching = false
            console.log(results)
          })
        })
      }
      else{
        this.apiService.showNoNetwork()
      }
    }
  }

In which i could see (for my fake data generated):

{
    "count": 10,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": "60e40b98-527e-409e-89ce-d517af15a0eb",
            "first_name": "David",
            "last_name": "Medina"
        },
        {
            "id": "e326b45e-2560-4e05-a942-6d26319fba7a",
            "first_name": "Amanda",
            "last_name": "Hill"
        },
        {
            "id": "de7b3dde-ab8a-42ee-8b27-7618262fd84a",
            "first_name": "Wendy",
            "last_name": "Davis"
        },
        {
            "id": "4250b946-e0f3-4f5e-b653-2fb96c46fab2",
            "first_name": "Amanda",
            "last_name": "Long"
        },
        {
            "id": "447b8a41-d17d-44d2-b781-1f34b0abb164",
            "first_name": "Brian",
            "last_name": "Adams"
        },
        {
            "id": "a1db0d0a-210b-4b7d-bcc8-9e6d09ebcaed",
            "first_name": "Joseph",
            "last_name": "Daniel"
        },
        {
            "id": "9e311652-7cf6-473d-bf43-4fef39514d81",
            "first_name": "Yolanda",
            "last_name": "Norris"
        },
        {
            "id": "098c54ec-61d3-48c9-abd5-af7f4bbe6460",
            "first_name": "Stephanie",
            "last_name": "Miranda"
        },
        {
            "id": "6e72d0f0-12c2-4001-8f13-c5c450b1c639",
            "first_name": "Michelle",
            "last_name": "Davis"
        },
        {
            "id": "2cf8bcce-0c83-4af9-a27a-146a3e1b50df",
            "first_name": "Caroline",
            "last_name": "Davis"
        }
    ]
}

Obviously values should be different for you since they are randomly generated.

Now to avoid launching a request to the API without something to search (if the user click on the searchbar cancel button), we can check there is a value by verifying the length of the search term.

if (this.isSearching==false && event.detail.value.length>0){
      if (this.apiService.networkConnected){
        this.isSearching = true
        this.apiService.showLoading().then(()=>{
          this.apiService.searchUser(event.detail.value).subscribe((results)=>{
            this.apiService.stopLoading()
            this.isSearching = false
            console.log(results)
          })
        })
      }
      else{
        this.apiService.showNoNetwork()
      }
    }

Finally, we will iterate the result list sended back by the API, and will add each user to our own listOfUser variable:

import { Component, OnInit } from '@angular/core';
import { SplashScreen } from '@capacitor/splash-screen';
import { User } from 'src/app/models/user';
import { ApiserviceService } from 'src/app/services/api-service.service';
@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.page.html',
  styleUrls: ['./home-page.page.scss'],
})
export class HomePagePage implements OnInit {

  listOfUser : User[] = []
  isSearching = false

  constructor(public apiService:ApiserviceService) { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    SplashScreen.hide()
  }

  onSearchChange(event){
    if (this.isSearching==false && event.detail.value.length>0){
      if (this.apiService.networkConnected){
        this.isSearching = true
        this.apiService.showLoading().then(()=>{
          this.apiService.searchUser(event.detail.value).subscribe((results)=>{
            this.apiService.stopLoading()
            this.isSearching = false
            console.log(results)
            let count = results["count"]
            if (count>0){
              let data = results["results"]
              this.listOfUser = []
              for (let item of data){
                this.listOfUser.push(item)
              }
            }
          })
        })
      }
      else{
        this.apiService.showNoNetwork()
      }
    }
    else{
      this.listOfUser = []
    }
  }
}

If nothing is searched, we reset the list to an empty one.

Let’s edit the src/app/pages/home-page/home-page.page.html to display the value of our list:


  
    ChatTuto
  



   
  
   
      
        {{item.first_name}} {{item.last_name}}

You can try the application and search for something, you should see your results :

Let’s modify the code again to add some style :


  
    ChatTuto
  



   
  
   
      
        

        
        {{item.first_name}} {{item.last_name}}

Then edit the src/app/pages/home-page/home-page.page.scss to add our custom css:

.image-profile {
    width: 2rem;
    height: 2rem;
    display: block;
    border-radius: 50%;
    border: 3px solid green;
    margin-right: 10px;
 }

 .username{
     font-weight: bold;
 }

and finally we modify our result list, to add a random color for our user:

 import { Component, OnInit } from '@angular/core';
import { SplashScreen } from '@capacitor/splash-screen';
import { User } from 'src/app/models/user';
import { ApiserviceService } from 'src/app/services/api-service.service';
@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.page.html',
  styleUrls: ['./home-page.page.scss'],
})
export class HomePagePage implements OnInit {

  listOfUser : User[] = []
  isSearching = false
  chatList : any; 

  constructor(public apiService:ApiserviceService) { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    SplashScreen.hide()
  }

  getRandomColor() {
    var color = Math.floor(0x1000000 * Math.random()).toString(16);
    return "#" + ("000000" + color).slice(-6);
  }

  onSearchChange(event){
    if (this.isSearching==false && event.detail.value.length>0){
      if (this.apiService.networkConnected){
        this.isSearching = true
        this.apiService.showLoading().then(()=>{
          this.apiService.searchUser(event.detail.value).subscribe((results)=>{
            this.apiService.stopLoading()
            this.isSearching = false
            console.log(results)
            let count = results["count"]
            if (count>0){
              let data = results["results"]
              this.listOfUser = []
              for (let item of data){
                item["backgroundColor"]= this.getRandomColor()
                this.listOfUser.push(item)
              }
            }
          })
        })
      }
      else{
        this.apiService.showNoNetwork()
      }
    }
    else{
      this.listOfUser = []
    }
  }
}

Now list of results should look like this:

As improvment we could use the avatar image of our Django User model, which means we will need to modify our RegisterPage to let the User choose or take a picture. Let’s keep things simple for now !

Add a button to create a chat

Since we want to chat with a user in the list, we should add a button to do it, let’s add it to our html:


  
    ChatTuto
  



   
  
   
      
        

        
        {{item.first_name}} {{item.last_name}}

Create a Chat

The method createChat(item) will call our API to create a chat between our current user and the user selected in the list.

Because a chat can already exists between the two users, we will need to verify if it’s already exists and send it back or create a new chat and send it back.

Let’s create this new API endpoint

Create a Chat with Django

First add a new url endpoint into our api/urls.py file:

 url(r'^createChat/$', CreateChatView.as_view()),

Then create the method into our api/views.py file:

class CreateChatView(APIView):
   def post(self, request, format=None):
       try:
           refUser = request.data["refUser"]
           chatWithUser = request.data["chatWithUser"]
           chat, created = Chat.objects.filter(Q(fromUser_id=refUser, toUser_id=chatWithUser) | Q(fromUser_id=chatWithUser, toUser_id=refUser)).get_or_create(fromUser_id=refUser, toUser_id=chatWithUser)
           print("Chat %s created %d"%(chat,created))
           serializer = ChatSerializer(chat)
           return Response(serializer.data, status=status.HTTP_201_CREATED)
       except Exception as e:
           logger.error(e)
           return Response(status=status.HTTP_500_INTERNAL_SERVER_ERROR)

Don’t forget the correct libraries import:

from django.contrib.auth.models import User
from django.db.models import Q
from rest_framework import generics, permissions
from django_filters.rest_framework import DjangoFilterBackend
from rest_framework import filters
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status

First the method will expect two parameters in a POST request : refUser and chatWithUser

Then the method will check if a chat already exists, otherwise will create it:

chat, created = Chat.objects.filter(Q(fromUser_id=refUser, toUser_id=chatWithUser) | Q(fromUser_id=chatWithUser, toUser_id=refUser)).get_or_create(fromUser_id=refUser, toUser_id=chatWithUser)

Don’t forget the chat can have been created by yourself (refUser) or by the other user (chatWithUser), so we need to make a request with both possibilities (the Q parameters )

Then with our Chat objet, we can create a ChatSerializer and send it back as our API response.

Implement the chat creation from Ionic

As usual, we need to declare the new url:

this.getCreateChatUrl = this.virtualHostName + this.apiPrefix + "/createChat/"

Then we can create the method createChat in our ApiService :

 createChat(refUser,withUser) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };

    console.log("URL " + this.getCreateChatUrl)

    let params = {
      "refUser":refUser,
      "chatWithUser":withUser
    }

    console.log(params)
    return Observable.create(observer => {
      this.http.post(this.getCreateChatUrl, params, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });

  }

And then we can create our createChat method in our HomePage:

createChat(userToChat){
    if (this.apiService.networkConnected){
      this.apiService.showLoading().then(()=>{
        this.apiService.createChat(this.userManager.currentUser.id,userToChat.id).subscribe((response)=>{
          this.apiService.stopLoading()
          console.log(response)
        })
      })
    }
    else{
      this.apiService.showNoNetwork()
    }
  }

The userManager is injected into our HomePage constructor and contains the current user value :

constructor(public apiService:ApiserviceService,
    public userManager:UserManagerServiceService) { }

And we should see the chat created or retrieved if already existing in our javascript console log:

{
    "id": "26fd40d1-fdf1-42bc-a7d9-d6b11f5d3654",
    "createdAt": "2021-08-09T14:20:44.765814Z",
    "updatedAt": "2021-08-09T14:20:44.765882Z",
    "fromUser": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
    "toUser": "fffee82d-924a-4da4-b407-4784dbaf1005"
}

As this step, we should go to a chat with user page which doesn’t exist yet. We will see this soon.

Displaying chat list

But first let’s focus on chat list. Now that we are able to search for a user and create a chat with this user, it should be useful to display current chat list on our HomePage !

To have more than one chat in the list, we can use our application to create multiple chat with multiple users.

Managing Chat API in Django backend

In the API, we already have an endpoint to get existing chats:

curl --location --request GET 'http://localhost:8000/api/chat/' \
--header 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjI4NTgwNTEwLCJqdGkiOiI0YjRhYzBmNGUxNGI0MzZlYjA5NWJkMzFkODg5NDUyZiIsInVzZXJfaWQiOiIzY2RlM2Y3ZS0yNjFlLTRlYmItODQzNy1mYTRjMjdkMzViZjAifQ.nE7fkZw0rt1xw0o945wxYo8XWoDvULKhMFhZjgmtDEs'

Response:

{
    "count": 6,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": "53713a91-e936-4169-9fef-4bc870a0babc",
            "createdAt": "2021-03-08T08:11:30.677821Z",
            "updatedAt": "2021-03-08T08:11:30.677921Z",
            "fromUser": "9052a080-24d8-4a0e-8d9a-742213c0bf91",
            "toUser": "b4db6ca7-21e0-4c83-b56b-f5c86c4cbc43"
        },
        {
            "id": "26fd40d1-fdf1-42bc-a7d9-d6b11f5d3654",
            "createdAt": "2021-08-09T14:20:44.765814Z",
            "updatedAt": "2021-08-09T14:20:44.765882Z",
            "fromUser": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
            "toUser": "fffee82d-924a-4da4-b407-4784dbaf1005"
        },
        {
            "id": "467229f1-2033-4879-adab-d9272da8b43a",
            "createdAt": "2021-08-09T14:37:07.916113Z",
            "updatedAt": "2021-08-09T14:37:07.916162Z",
            "fromUser": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
            "toUser": "60e40b98-527e-409e-89ce-d517af15a0eb"
        },
        {
            "id": "71fd852a-d8eb-4b2a-b5d1-d95f19762852",
            "createdAt": "2021-08-10T06:58:41.563718Z",
            "updatedAt": "2021-08-10T06:58:41.563831Z",
            "fromUser": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
            "toUser": "aa9ea63b-c3e9-41d3-9d54-68d09b87f634"
        },
        {
            "id": "2a43948a-3842-4db3-9692-978c22b3d6ff",
            "createdAt": "2021-08-10T06:58:44.301552Z",
            "updatedAt": "2021-08-10T06:58:44.301660Z",
            "fromUser": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
            "toUser": "a1db0d0a-210b-4b7d-bcc8-9e6d09ebcaed"
        },
        {
            "id": "33e21813-e5ed-47c3-a1a7-056251fa3ddf",
            "createdAt": "2021-08-10T06:58:46.357281Z",
            "updatedAt": "2021-08-10T06:58:46.357388Z",
            "fromUser": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
            "toUser": "be61aeae-768e-47e2-b99b-9e11c730e633"
        }
    ]
}

But this API returns all existing chats not only those involving our current user application. We need to modify the code to filter data.

Let’s edit the api/views.py file :

class ChatListView(generics.ListCreateAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = Chat.objects.all()
    serializer_class = ChatSerializer
    filterset_fields = ['id']
    filter_backends = [DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter]

    def get_queryset(self):
        user = self.request.user
        queryset = Chat.objects.filter(Q(fromUser_id=user.id)|Q(toUser_id=user.id)).select_related("fromUser").select_related("toUser")
        return queryset

We added the get_queryset method, to override the default queryset, and we filter the list with the fromUser or toUser fields having our current user id.

Now the list is filtered for our user. But the information returns in the JSON are not so useful. We just have user identifiers. Let’s modify the ChatSerializer to add more relevant information about the users.

Edit the api/serializers.py file:

class ChatUserSerializer(ModelSerializer):
    class Meta:
        model = User
        fields = ['id','first_name','last_name']

class ChatSerializer(ModelSerializer):
    fromUser = ChatUserSerializer()
    toUser = ChatUserSerializer()
    class Meta:
        model = Chat
        fields = '__all__'

First we create a new ChatUserSerializer with restricted information (we just want id, first name and last name).

We don’t use the existing UserSerializer to avoid returns all user fields information, which could be a security issue.

Then we modify the ChatSerializer, to specify that the fields fromUser, toUser needs to use the new ChatUserSerializer.
Now if we look at our API call, it is much more better:

{
    "count": 5,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": "26fd40d1-fdf1-42bc-a7d9-d6b11f5d3654",
            "fromUser": {
                "id": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
                "first_name": "Christophe",
                "last_name": "Surbier"
            },
            "toUser": {
                "id": "fffee82d-924a-4da4-b407-4784dbaf1005",
                "first_name": "Julie",
                "last_name": "Wright"
            },
            "createdAt": "2021-08-09T14:20:44.765814Z",
            "updatedAt": "2021-08-09T14:20:44.765882Z"
        },
        {
            "id": "467229f1-2033-4879-adab-d9272da8b43a",
            "fromUser": {
                "id": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
                "first_name": "Christophe",
                "last_name": "Surbier"
            },
            "toUser": {
                "id": "60e40b98-527e-409e-89ce-d517af15a0eb",
                "first_name": "David",
                "last_name": "Medina"
            },
            "createdAt": "2021-08-09T14:37:07.916113Z",
            "updatedAt": "2021-08-09T14:37:07.916162Z"
        },
        {
            "id": "71fd852a-d8eb-4b2a-b5d1-d95f19762852",
            "fromUser": {
                "id": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
                "first_name": "Christophe",
                "last_name": "Surbier"
            },
            "toUser": {
                "id": "aa9ea63b-c3e9-41d3-9d54-68d09b87f634",
                "first_name": "Paul",
                "last_name": "Walker"
            },
            "createdAt": "2021-08-10T06:58:41.563718Z",
            "updatedAt": "2021-08-10T06:58:41.563831Z"
        },
        {
            "id": "2a43948a-3842-4db3-9692-978c22b3d6ff",
            "fromUser": {
                "id": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
                "first_name": "Christophe",
                "last_name": "Surbier"
            },
            "toUser": {
                "id": "a1db0d0a-210b-4b7d-bcc8-9e6d09ebcaed",
                "first_name": "Joseph",
                "last_name": "Daniel"
            },
            "createdAt": "2021-08-10T06:58:44.301552Z",
            "updatedAt": "2021-08-10T06:58:44.301660Z"
        },
        {
            "id": "33e21813-e5ed-47c3-a1a7-056251fa3ddf",
            "fromUser": {
                "id": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
                "first_name": "Christophe",
                "last_name": "Surbier"
            },
            "toUser": {
                "id": "be61aeae-768e-47e2-b99b-9e11c730e633",
                "first_name": "Jennifer",
                "last_name": "Patrick"
            },
            "createdAt": "2021-08-10T06:58:46.357281Z",
            "updatedAt": "2021-08-10T06:58:46.357388Z"
        }
    ]
}

We have our user information in our toUser or fromUser dictionnaries.

Final step, usually in Chat application, it is usual to display the last message sent in the chat.
We need to find and add this information into our JSON.

Let’s again modify our ChatSerializer to include this last message information:

class ChatSerializer(ModelSerializer):
    fromUser = ChatUserSerializer()
    toUser = ChatUserSerializer()
    lastMessage = serializers.SerializerMethodField()

    class Meta:
        model = Chat
        fields = '__all__'

    def get_lastMessage(self, obj):
        # get last message between users
        try:
            messages = Message.objects.filter(refChat=obj.id).select_related("refChat").select_related("author").order_by('-createdAt')[:1]
            return MessageSerializer(messages,many=True).data
        except Exception as e:
            print(e)
            return None

We add a lastMessage field:

lastMessage = serializers.SerializerMethodField()

and we write the method to get the last message for this chat:

def get_lastMessage(self, obj):
       # get last message between users
       try:
           messages = Message.objects.filter(refChat=obj.id).select_related("refChat").select_related("author").order_by('-createdAt')[:1]
           return MessageSerializer(messages,many=True).data
       except Exception as e:
           print(e)
           return None

To test our code, we need to add a message to an existing chat. Because we can’t do this yet with our Ionic application, we can use the Django Admin and then check in our return API json that we have the lastMessage information:

 {
            "id": "33e21813-e5ed-47c3-a1a7-056251fa3ddf",
            "fromUser": {
                "id": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
                "first_name": "Christophe",
                "last_name": "Surbier"
            },
            "toUser": {
                "id": "be61aeae-768e-47e2-b99b-9e11c730e633",
                "first_name": "Jennifer",
                "last_name": "Patrick"
            },
            "lastMessage": [
                {
                    "id": "c6c14089-b8ae-40c6-b5a1-eec11eb6bc7d",
                    "message": "my last message",
                    "type": 0,
                    "extraData": null,
                    "isRead": false,
                    "createdAt": "2021-08-10T07:26:56.960389Z",
                    "updatedAt": "2021-08-10T07:26:56.960470Z",
                    "refChat": "33e21813-e5ed-47c3-a1a7-056251fa3ddf",
                    "author": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0"
                }
            ],
            "createdAt": "2021-08-10T06:58:46.357281Z",
            "updatedAt": "2021-08-10T06:58:46.357388Z"
        }

Ok now with all that backend code ready, we can focus on the Ionic application to display the existing chat list.

Managing chat list in Ionic

Let’s first add our new API in our api-service.service.ts file

 this.getChatUrl = this.virtualHostName + this.apiPrefix + "/chat/"

and create a getChat method:

getChats() {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    return Observable.create(observer => {
      this.http.get(this.getChatUrl, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

Then we will edit our HomePage to load our chat list

export class HomePagePage implements OnInit {

  listOfUser : User[] = []
  isSearching = false
  chatList : any; 

  constructor(public apiService:ApiserviceService,
    public userManager:UserManagerServiceService) {
      this.loadExistingChat()
  }

The method for loading chat will check the network and then call our new API method:

loadExistingChat(){
    if (this.apiService.networkConnected){
      this.isSearching = true

        this.apiService.getChats().subscribe((list)=>{
          console.log(list)
        })
    }
  }

The list variable should contains our list (if exists). We can check the count value in the returned JSON and iterate it if we have values, to put chats in our chatList array:

 loadExistingChat(){
    if (this.apiService.networkConnected){
      this.isSearching = true

        this.chatList = []
        this.apiService.getChats().subscribe((list)=>{

          if (list){
            let count = list["count"]
            if (count>0){
              //Iterate existing chat
              for (let aChat of list["results"]){
                console.log(aChat)
                this.chatList.push(aChat)
              }
            }
          }

      })
    }
  }

And see in our javascript console logs:

{id: "467229f1-2033-4879-adab-d9272da8b43a", fromUser: {…}, toUser: {…}, lastMessage: Array(0), createdAt: "2021-08-09T14:37:07.916113Z", …}
{id: "71fd852a-d8eb-4b2a-b5d1-d95f19762852", fromUser: {…}, toUser: {…}, lastMessage: Array(0), createdAt: "2021-08-10T06:58:41.563718Z", …}
{id: "2a43948a-3842-4db3-9692-978c22b3d6ff", fromUser: {…}, toUser: {…}, lastMessage: Array(0), createdAt: "2021-08-10T06:58:44.301552Z", …}
{id: "26fd40d1-fdf1-42bc-a7d9-d6b11f5d3654", fromUser: {…}, toUser: {…}, lastMessage: Array(0), createdAt: "2021-08-09T14:20:44.765814Z", …}
{id: "33e21813-e5ed-47c3-a1a7-056251fa3ddf", fromUser: {…}, toUser: {…}, lastMessage: Array(1), createdAt: "2021-08-10T06:58:46.357281Z", …}

Now we need to display the chat but be careful, our current user could be in the fromUser OR toUser variable depending on who created the chat. So we don’t want to display our own user in the list but instead we want to display the other user of the chat. So we need to do modify the code above to take care of this.

And before we will create a new class chat.ts in our models directory to deal with typescript object instead of json:

import { User } from "./user";

export class Chat {
    id:string;
    fromUser:User;
    toUser:User;
    lastMessage : any;
    createdAt : Date;
    updateAt : Date;

    constructor() {

    }

    initWithJSON(json) : Chat{
      for (var key in json) {
          if (key=="fromUser" || key=="toUser"){
            let aUser = new User().initWithJSON(json[key])
            this[key]=aUser
          }
          else {
            this[key] = json[key];
          }
      }
      return this;
    }
}

The initWithJSON method will iterate the json and for keys fromUser, toUser will create a User object too.

We can modifiy our method loadExistingChat to use this class:

loadExistingChat(){
    if (this.apiService.networkConnected){
      this.isSearching = true

        this.chatList = []
        this.apiService.getChats().subscribe((list)=>{
          if (list){
            let count = list["count"]
            if (count>0){
              //Iterate existing chat
              for (let aChat of list["results"]){
                let theChat = new Chat().initWithJSON(aChat)
                console.log(theChat)
                theChat["backgroundColor"]= this.getRandomColor()
                this.chatList.push(theChat)
              }
            }
          }
      })
    }
  }

We also added an extra variable backgroundColor to have same behaviour as our search and display a random color for the user.

Now it’s time to modify our home-page.page.html file to display list:

  
   
    Chats
  
    
    
      

      
      {{chat.fromUser.first_name}} {{chat.fromUser.last_name}}
      {{chat.toUser.first_name}} {{chat.toUser.last_name}}

We iterate the chatList variable and to know which user to display, we need to check the identifier between our Ionic current user and the fromUser or toUser.

The chat list should look like this:

Now we need to display the lastMessage received and the date of the message. Before modifying the Html again, a little remember of the JSON structure for a Chat:

 {
            "id": "33e21813-e5ed-47c3-a1a7-056251fa3ddf",
            "fromUser": {
                "id": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0",
                "first_name": "Christophe",
                "last_name": "Surbier"
            },
            "toUser": {
                "id": "be61aeae-768e-47e2-b99b-9e11c730e633",
                "first_name": "Jennifer",
                "last_name": "Patrick"
            },
            "lastMessage": [
                {
                    "id": "c6c14089-b8ae-40c6-b5a1-eec11eb6bc7d",
                    "message": "mon dernier message",
                    "type": 0,
                    "extraData": null,
                    "isRead": false,
                    "createdAt": "2021-08-10T07:26:56.960389Z",
                    "updatedAt": "2021-08-10T07:26:56.960470Z",
                    "refChat": "33e21813-e5ed-47c3-a1a7-056251fa3ddf",
                    "author": "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0"
                }
            ],
            "createdAt": "2021-08-10T06:58:46.357281Z",
            "updatedAt": "2021-08-10T06:58:46.357388Z"
        }

The lastMessage is an array which contains only one element: the last message received. If there is no message yet the array is empty.

The isRead parameter is used to know if the message has been read or not.

The author parameter is the user identifier of who sent the message.

Based on that here is the modified HTML:

 
  
    Chats
  
    
    
      

      
      
        
          
            {{chat.fromUser.first_name}} {{chat.fromUser.last_name}}
            
              {{chat.lastMessage[0].message}} 
            
          
          
              {{ chat.lastMessage[0].updatedAt | date: 'HH:mm' }}
              
              {{ chat.lastMessage[0].updatedAt | date: 'HH:mm' }}
              
          
        
      
      
        
          
            {{chat.toUser.first_name}} {{chat.toUser.last_name}}
            
              {{chat.lastMessage[0].message}} 
            
          
          
            {{ chat.lastMessage[0].updatedAt | date: 'HH:mm' }}
            
              {{ chat.lastMessage[0].updatedAt | date: 'HH:mm' }}

And the result:

Ok we can improve again the view by showing the last message at the top of the list. To do that, we can order our chat list queryset using an order_by instruction:

class ChatListView(generics.ListCreateAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = Chat.objects.all()
    serializer_class = ChatSerializer
    filterset_fields = ['id']
    filter_backends = [DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter]

    def get_queryset(self):
        user = self.request.user
        queryset = Chat.objects.filter(Q(fromUser_id=user.id)|Q(toUser_id=user.id)).order_by("-updatedAt").select_related("fromUser").select_related("toUser")
        return queryset

and display the last message in bold and red if not already read. Let’s add our home-page.page.scss to add two variables:

 .messageUnread{
     p{
        font-weight: bold;
        color: red;
     }
 }

 .messageread{
    p{
       font-weight: normal;
       color: black;
    }

Then we modify our loadExistingChat method to check the status of the isRead variable:

loadExistingChat(){
    if (this.apiService.networkConnected){
      this.isSearching = true

        this.chatList = []
        this.apiService.getChats().subscribe((list)=>{
          if (list){
            let count = list["count"]
            if (count>0){
              //Iterate existing chat
              for (let aChat of list["results"]){
                let theChat = new Chat().initWithJSON(aChat)
                console.log(theChat)
                theChat["backgroundColor"]= this.getRandomColor()
                if (theChat.lastMessage.length>0){
                  let lastmessage = theChat.lastMessage[0]
                  let classMessage = 'messageUnread'
                  if (lastmessage.isRead){
                    classMessage="messageread"
                  }
                  theChat["classMessage"]=classMessage
                }
                this.chatList.push(theChat)
              }
            }
          }
      })
    }
  }

Based on the isRead value with set the appropriate CSS class. And then we modify our css to set the correct class to our ion-row element:

  
   
    Chats
  
    
    
      

      
      
        
          
            {{chat.fromUser.first_name}} {{chat.fromUser.last_name}}
            
              {{chat.lastMessage[0].message}} 
            
          
           
              {{ chat.lastMessage[0].updatedAt | date: 'HH:mm' }}
              
              {{ chat.lastMessage[0].updatedAt | date: 'HH:mm' }}
              
          
        
      
      
        
          
            {{chat.toUser.first_name}} {{chat.toUser.last_name}}
            
              {{chat.lastMessage[0].message}} 
            
          
          
            {{ chat.lastMessage[0].updatedAt | date: 'HH:mm' }}
            
              {{ chat.lastMessage[0].updatedAt | date: 'HH:mm' }}

And voila, the message and date should be bold and red. To check our code is working, you can use the Django Admin again, find the message and set the isRead value to True. Then you can reload your Ionic page and verify that bold and red color has disappeared.

Of course you can still use the search bar to search users.

Before to conclude, you should have notice that when searching a user and displaying the result list, the search bar is loosing focus and we need to click on it again. This is quite annoying. Let’s fix this:

First we modify our searchBar html to tag it : #searchbar

Then from our typescript code, we will get a reference to this searchbar element and at the end of the search, we will set the focus on it again:

export class HomePagePage implements OnInit {
  @ViewChild('searchbar', { static: true }) searchbarElement;

and

 onSearchChange(event) {
    if (this.isSearching == false && event.detail.value.length > 0) {
      if (this.apiService.networkConnected) {
        this.isSearching = true
        this.apiService.showLoading().then(() => {
          console.log("===Call api with ", event.detail.value)
          this.apiService.searchUser(event.detail.value).subscribe((results) => {
            this.apiService.stopLoading()
            this.isSearching = false
            console.log(results)
            let count = results["count"]
            if (count > 0) {
              let data = results["results"]
              this.listOfUser = []
              for (let item of data) {
                item["backgroundColor"] = this.getRandomColor()
                this.listOfUser.push(item)
              }
              //Focus on searchbar again
              this.searchbarElement.setFocus();
            }
          })
        })
      }
      else {
        this.apiService.showNoNetwork()
      }
    }
    else {
      this.listOfUser = []
      this.isSearching = false
    }
  }

The main instruction is :

this.searchbarElement.setFocus();

We will stop here and in next day tutorial, we will learn how to chat with a User.

The source code for this tutorial can be found on my Github

Questions/Answers

In a Django Rest framework serializer, how to specify which fields to include in the response

Use the fields instruction and list the fields.
fields = ["id","first_name","last_name"]
How to generate fake data with Django

Use the Faker library
Which Ionic file should we modify to modify the stylesheet of a page ?

The scss file of the page
How to add custom fields to a serializers ?

Add a new field of type serializers.SerializerMethodField() and write the method get_

    myCustomField  = serializers.SerializerMethodField()

    def get_myCustomField(self,obj):
        return "MyValue"

How to get an HTML element reference from typescript ?

Tag the element in the Html and use the @ViewChild instruction in the typescript code.

The post Day 8 : Searching users, creating / displaying chats appeared first on Ionic and Django Tutorial.

Day 7 : Deploy on simulator or mobile device

Christophe Surbier — Fri, 13 Aug 2021 15:33:43 +0000

Create a chat application with Ionic 5/ Angular 12/ Capacitor 3 and Django 3 – Series – Part seven

In previous tutorials, we learned how to register or login a user, to redirect to an home page and to protect the application using Angular guards.

However we made all our tests using a browser since Ionic can be used to build progressive web app application (running on the web).

Now we will learn how to use Capacitor to deploy our code on a real mobile device.

Day 7 : Deploy on simulator or mobile device

Capacitor, which is developped by the Ionic team, is the new tool to build native apps with Web technologies (such as Ionic). Before Capacitor the most used framework was Cordova but this is the past.

With Capacitor you can access and use native mobile code within your web application (using native Plugins and thru javascript). There are some official Capacitor plugins but there are also plugins created by the community, and it’s even possible to create it’s own plugin (if you know how to develop nativley for iOS or Android).

Use capacitor to build ios and android application

To iniatialize Capacitor with a Ionic project you can just type:

ionic integrations enable capacitor

But this is useless because since we started from a fresh Ionic project, we already configure our Ionic project to use Capacitor.

In tutorial 4, we created the project with the –capacitor option :

ionic start ChatTuto sidemenu –capacitor –project-id=chattuto –package-id=com.idevotion.chattuto

We also installed the iOS package with the command:

npm install @capacitor/ios

Now let’s add the Android package:

npm install @capacitor/android@3.0.0

When i started this tutorial, the Capacitor version was 3.0.0 so we need to specify this version, otherwise some conflict issues/error will occured because Capacitor has moved to version 3.1.1 when writing this tutorial 7.

If you want to update the full project with latest version of Capacitor it’s possible but quite annoying. You need to uninstall previous package (ios, android) or conflict will raise, then install latest version of plugins used (or conflict will raise) and install latest version of Capacitor client and core libraries.

Then you can install again ios and Android packages:

npm uninstall @capacitor/ios
npm uninstall @capacitor/android
npm install @capacitor/{network,splash-screen,status-bar,storage,keyboard,app,haptics}@latest
npm install @capacitor/cli@latest
npm install @capacitor/core@latest
npm install @capacitor/ios@latest
npm install @capacitor/android@latest

Then to generate the iOS and Android projects you can launch the command:

npx cap add ios
npx cap add android

Capacitor will create an ios directory in which you will find the iOS xcode project, and an android directory in which you will find the Android studio project.

To launch the desired project, just type:

npx cap open ios

npx cap open android

And the desired IDE (Xcode or Android studio) will open.

Please notice that you need a Mac to do iOS developement.

Update Capacitor with latest Ionic code source

To build the application, launch the command:

ionic build --prod

When building with –prod option, Ionic will make more verification on your code and do lot of optimizations to reduce the bundle size of your app. Sometimes some development error can occurs that didn’t happenned with ionic serve command.

As example, i had the error Property ‘submitAttempt’ does not exist on type ‘LoginPagePage’. which is true since i didn’t declare this variable in my code. I removed this parameter from my HTML page and build again to solve the issue.

Then if compilation is successfull, you can update your iOS/Android IDE with the latest code with the command:

npx cap copy

or just specify the platform you want to update:

npx cap copy ios
npx cap copy android

If you install a new Capacitor library (we will see this soon), then you need to launch a

npx cap sync

npx cap sync ios
npx cap sync android

The command is sync and not copy.

Running project in simulator or device

To run and test our application on a simulator or a device, we just need to open the desired IDE (Xcode or Android) and proceed as we will do with native development.

For iOS, i just launch Xcode

npx cap open ios

then select an iOS simulator and click the Run button. After compiling, the simulator launchs and i’m able to see the LoginPage of your application.

Everything is working perfectly, meaning you can login (or register) and see the HomePage

You can do the same with Android studio

Another command is also possible if you want to run the project without opening Xcode/Android studio. Just launch the command

npx cap run ios

npx cap run android

And Capacitor will update project with your latest ionic code, and then will launch automatically Xcode or Android studio and will ask you on which device (or simulator) you want to run the application, before running it.

Generate application icons and splashscreen

When using Capacitor, the application icon and splashscreen will be the default Capacitor one. But of course, we can change it easily. To do that we need to create a resources directory into our Chattuto root folder:

mkdir resources

And then inside this folder, we need to put 2 files:

icon.png : should be an image of 1024*1024 pixels with your logo
splash.png : should be an image of 2732*2732 pixels with your splashcreen

Then we will install a library to generate images:

npm install cordova-res --save-dev

Then create a scripts folder still inside our chattuto root folder:

mkdir scripts

and create a resources.js file with the following code:

const fs = require('fs');

const SOURCE_IOS_ICON = 'resources/ios/icon/';
const SOURCE_IOS_SPLASH = 'resources/ios/splash/';

const TARGET_IOS_ICON = 'ios/App/App/Assets.xcassets/AppIcon.appiconset/';
const TARGET_IOS_SPLASH = 'ios/App/App/Assets.xcassets/Splash.imageset/';

const SOURCE_ANDROID_ICON = 'resources/android/icon/';
const SOURCE_ANDROID_SPLASH = 'resources/android/splash/';

const TARGET_ANDROID_ICON = 'android/app/src/main/res/';
const TARGET_ANDROID_SPLASH = 'android/app/src/main/res/';

const IOS_ICONS = [
  { source: 'icon-20.png', target: 'AppIcon-20x20@1x.png' },
  { source: 'icon-20@2x.png', target: 'AppIcon-20x20@2x.png' },
  { source: 'icon-20@2x.png', target: 'AppIcon-20x20@2x-1.png' },
  { source: 'icon-20@3x.png', target: 'AppIcon-20x20@3x.png' },
  { source: 'icon-29.png', target: 'AppIcon-29x29@1x.png' },
  { source: 'icon-29@2x.png', target: 'AppIcon-29x29@2x.png' },
  { source: 'icon-29@2x.png', target: 'AppIcon-29x29@2x-1.png' },
  { source: 'icon-29@3x.png', target: 'AppIcon-29x29@3x.png' },
  { source: 'icon-40.png', target: 'AppIcon-40x40@1x.png' },
  { source: 'icon-40@2x.png', target: 'AppIcon-40x40@2x.png' },
  { source: 'icon-40@2x.png', target: 'AppIcon-40x40@2x-1.png' },
  { source: 'icon-40@3x.png', target: 'AppIcon-40x40@3x.png' },
  { source: 'icon-60@2x.png', target: 'AppIcon-60x60@2x.png' },
  { source: 'icon-60@3x.png', target: 'AppIcon-60x60@3x.png' },
  { source: 'icon-76.png', target: 'AppIcon-76x76@1x.png' },
  { source: 'icon-76@2x.png', target: 'AppIcon-76x76@2x.png' },
  { source: 'icon-83.5@2x.png', target: 'AppIcon-83.5x83.5@2x.png' },
  { source: 'icon-1024.png', target: 'AppIcon-512@2x.png' }
];
const IOS_SPLASHES = [
  { source: 'Default-Portrait@~ipadpro.png', target: 'splash-2732x2732.png' },
  { source: 'Default-Portrait@~ipadpro.png', target: 'splash-2732x2732-1.png' },
  { source: 'Default-Portrait@~ipadpro.png', target: 'splash-2732x2732-2.png' }
];

const ANDROID_ICONS = [
  { source: 'drawable-ldpi-icon.png', target: 'drawable-hdpi-icon.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher_round.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher_foreground.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher_round.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher_round.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher_round.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher_round.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher_foreground.png' }
];
const ANDROID_SPLASHES = [
  { source: 'drawable-land-mdpi-screen.png', target: 'drawable/splash.png' }, 
  { source: 'drawable-land-mdpi-screen.png', target: 'drawable-land-mdpi/splash.png' },
  { source: 'drawable-land-hdpi-screen.png', target: 'drawable-land-hdpi/splash.png' },
  { source: 'drawable-land-xhdpi-screen.png', target: 'drawable-land-xhdpi/splash.png' },
  { source: 'drawable-land-xxhdpi-screen.png', target: 'drawable-land-xxhdpi/splash.png' },
  { source: 'drawable-land-xxxhdpi-screen.png', target: 'drawable-land-xxxhdpi/splash.png' },
  { source: 'drawable-port-mdpi-screen.png', target: 'drawable-port-mdpi/splash.png' },
  { source: 'drawable-port-hdpi-screen.png', target: 'drawable-port-hdpi/splash.png' },
  { source: 'drawable-port-xhdpi-screen.png', target: 'drawable-port-xhdpi/splash.png' },
  { source: 'drawable-port-xxhdpi-screen.png', target: 'drawable-port-xxhdpi/splash.png' },
  { source: 'drawable-port-xxxhdpi-screen.png', target: 'drawable-port-xxxhdpi/splash.png' }
];

function copyImages(sourcePath, targetPath, images) {
  for (const icon of images) {
    let source = sourcePath + icon.source;
    let target = targetPath + icon.target;
    fs.copyFile(source, target, err => {
      if (err) throw err;
      console.log(${source} >> ${target});
    });
  }
}

copyImages(SOURCE_IOS_ICON, TARGET_IOS_ICON, IOS_ICONS);
copyImages(SOURCE_IOS_SPLASH, TARGET_IOS_SPLASH, IOS_SPLASHES);

copyImages(SOURCE_ANDROID_ICON, TARGET_ANDROID_ICON, ANDROID_ICONS);
copyImages(SOURCE_ANDROID_SPLASH, TARGET_ANDROID_SPLASH, ANDROID_SPLASHES);

(c) information : This script comes from this tutorial

Then we can add "resources": "cordova-res ios && cordova-res android && node scripts/resources.js" to scripts in package.json :

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "resources": "cordova-res ios && cordova-res android && node scripts/resources.js"
  },

And now each time we want to generate our application icons and splashcreen (for different devices screen sizes), we can launch the command:

npm run resources

Now if run again our application, the application icon should have change on your mobile/simulator home screen, and the splashscreen should be the new one.

Add Splashscreen

To manage Splashscreen displays, we can install the Capacitor Splashscreen plugin

npm install @capacitor/splash-screen
npx cap sync

Please notice the sync keywork since we installed a new plugin.

Now we will modify the capacitor.config.ts file (in chattuto folder), to configure some default options:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.idevotion.chattuto',
  appName: 'ChatTuto',
  webDir: 'www',
  bundledWebRuntime: false,
  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "androidScaleType": "CENTER_CROP",
      "androidSpinnerStyle": "large",
      "iosSpinnerStyle": "large",
      "spinnerColor": "#ffffff",
      "showSpinner": true,
      "splashFullScreen": true,
      "splashImmersive": true
    }
  }
};

export default config;

You can learn more about available options in the Capacitor documentation but one of the most important option is :

 "launchAutoHide": false,

By default Capacitor will automatically hide the Splashscreen after an amount of time. Using this option let’s us manage the show/hide of the Splashscreen from the code.

In our code, we can have 2 options : the user is unauthenticated (application goes to login page) or is authenticated and the application goes to the HomePage.

Let’s edit these two files, to manage the Splashscreen and hide it when our page is ready. It’s quite easy, first we need to import the Splashscreen library

import { SplashScreen } from '@capacitor/splash-screen';

and then when our view is ready we can hide this splashscreen.

 ngAfterViewInit() {
    SplashScreen.hide()
  }

To test our code, we need to build our project

ionic build --prod

and then launch again (i’m testing on iOS)

npx cap copy ios
npx cap run ios

To verify it is working fine, comment the line:

 //SplashScreen.hide()

build and run again, and the splashscreen will never hide.

Voila now you know how to manage the Splashscreen. Because sometimes it can be useful to let the splashscreen showned while doing some heavy tasks.

But don’t remember a good application should show the page as quick as possible and avoid showing a splashscreen for a long time.

This is also the main reason why i’m hiding the Splashscreen as soon as possible. Because default Capacitor time for hiding automatically Splashscreen can be 3 seconds so user will wait and see Splashscreeen during 3 seconds even if the app is ready and could be showned within 1 second.

Manage Pause or Resume (Background/Foreground) status

It can be really helpful to know if the application is going to foreground or background state. Foreground means that the user launchs the application, and background that he leaves the application.

To know and observe our application state, we can install the Capacitor App plugin.

npm install @capacitor/app
npx cap sync

Now to use it, edit the app.component.ts file and import the library

import { App } from '@capacitor/app';

Then we can create a method to watch the events of the application:

import { Component } from '@angular/core';
import { App } from '@capacitor/app';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  constructor() {
    this.initApplication()
  }

 initApplication(){

      App.addListener('appStateChange', ({ isActive }) => {
        console.log('App state changed. Is active?', isActive);
        if (isActive){
          console.log("Application is foreground")
        }
        else{
          console.log("Application is background ")
        }
      });
  }
}

the isActive variable tells us if the application is active (meaning foreground) or no (background).

Run the application again and click on the Home button of the simulator or your iphone device and you will see in Xcode logs:

[log] - App state changed. Is active? false
⚡  [log] - Application is background

Now click again the icon of your application and you will see:

[log] - App state changed. Is active? true
⚡  [log] - Application is foreground

Of course when launching the application for the first time or when the application has been killed by the device os, and launched again, no trace will be displayed because the plugin will be initialize from start and appState didn’t change.

The same behaviour is also possible using Platform and the events resume and pause which comes from Ionic. Let’s modify our app.component.ts file with the following code:

import { Component } from '@angular/core';
import { App } from '@capacitor/app';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  constructor(public platform:Platform) {
    this.initApplication()
  }

  initApplication(){

     //Subscribe on resume
     this.platform.resume.subscribe(() => {
      console.log("foreground ")
     })

    // Quit app
    this.platform.pause.subscribe(() => {
      console.log("goes to background ")

    });

      // App.addListener('appStateChange', ({ isActive }) => {
      //   console.log('App state changed. Is active?', isActive);
      //   if (isActive){
      //     console.log("Application is foreground")
      //   }
      //   else{
      //     console.log("Application is background ")
      //   }
      // });
  }
}

Try again the application and same as before you should see the different states.

It’s up to you to decice which method you would like to use.

Update User based on Foreground/Background state

You may wonder why it should be useful to know when the application is in foreground or background. As concrete example, let’s go back to our User model definion in our backend. We have the fields:

is_active = models.BooleanField(_('active'), default=True)
lastConnexionDate = models.DateTimeField(null=True, blank=True)

So now by managing application state, we can update these fields to set correct values.

When application launchs the user is active and we can update the lastConnexionDate and when the user leaves the application, he is not active anymore.

Here is the updated code of our app.component.ts file :

import { Component } from '@angular/core';
import { App } from '@capacitor/app';
import { Platform } from '@ionic/angular';
import { User } from './models/user';
import { ApiserviceService } from './services/api-service.service';
import { UserManagerServiceService } from './services/user-manager-service.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

   constructor(public platform:Platform,
    public apiService:ApiserviceService,
    public userService: UserManagerServiceService) {
    // When application launchs for first time
    this.userService.getUser().then((user:User)=>{
        if (user){
          this.setActiveAndLastDate(user)
        }
    })
    this.initApplication()
  }

  initApplication(){
      // App already launches and state change 
      App.addListener('appStateChange', ({ isActive }) => {
        if (isActive){
          console.log("Application is foreground")
          this.userService.getUser().then((user:User)=>{
            if (user){
              this.setActiveAndLastDate(user)
            }
          })

        }
        else{
          console.log("Application is background ")
          this.userService.getUser().then((user:User)=>{
            if (user){
              this.setInactive(user)
            }
          })
        }
      });
  }

  setActiveAndLastDate(user:User){

  }

  setInactive(user:User){

  }
}

Now we need to write the code of the methods setActiveAndLastDate and setInactive methods:

 setActiveAndLastDate(user: User) {
    if (this.apiService.networkConnected) {
      this.apiService.showLoading().then(() => {
        this.apiService.showLoading().then(() => {
          let params = {
            "is_active": true,
            "lastConnexionDate": new Date()
          }
          this.apiService.updateUser(user.id, params).subscribe((done) => {
            this.apiService.stopLoading()
          })
        })
      })
    }
  }

  setInactive(user: User) {
    if (this.apiService.networkConnected) {
      this.apiService.showLoading().then(() => {
        let params = {
          "is_active": false
        }
        this.apiService.updateUser(user.id, params).subscribe((done) => {
          this.apiService.stopLoading()
        })
      })
    }
  }

First we check if the network is connected using our ApiService networkConnected variable. And if so, we update the User with our updateUser methods.

Warning : Modifying the is_active field for a Django user is really a bad idea, because Django will consider that the User is not active anymore (as we asked) and so the User will not be able to login again to the application… If you want to manage the online/offline presence of the User as we will learn later, we should add a new field to Django User and not using the is_active one.

Please comment the setInactive method calls to avoid error with logins.

Manage Network events

The apiService.networkConnected is a variable managed by our ApiService based on Network events. We can study this method now that we know Capacitor better. At the beginning of our tutorial, when we created the Ionic application, we have installed the Capacitor Network library.

When the ApiService initialize it calls a initializeNetworkEvents() method :

constructor(public http: HttpClient,
    public loadingController: LoadingController,
    public alertCtrl: AlertController,
    public platform: Platform) {

    this.initializeNetworkEvents();
    this.initProvider(domainConfig.virtual_host, domainConfig.client, "api")
    this.http = http
  }

which is really simple and use the Capacitor network plugin to check the status of the network, and update the networkConnected variable based on the status received.

 public async initializeNetworkEvents() {
    console.log("======== Initialise Network Events ======")
    if (this.platform.is("capacitor")) {
      let status = await Network.getStatus();
      if (status["connected"] == false) {
        this.networkConnected = false
        this.updateNetworkStatus(ConnectionStatus.Offline);
      }
      else {
        this.networkConnected = true;
        this.updateNetworkStatus(ConnectionStatus.Online);
      }
      let handler = Network.addListener('networkStatusChange', (status) => {
        console.log("Network status changed", status);
        if (status["connected"] == false) {
          this.networkConnected = false
          this.updateNetworkStatus(ConnectionStatus.Offline);
        }
        else {
          this.networkConnected = true;
          this.updateNetworkStatus(ConnectionStatus.Online);
        }
      });
    }
    else {
      if (navigator.onLine) {
        this.updateNetworkStatus(ConnectionStatus.Online);
      }
      else {
        this.updateNetworkStatus(ConnectionStatus.Offline);
      }
    }
  }

  private async updateNetworkStatus(status: ConnectionStatus) {
    this.status.next(status);
    this.networkConnected = status == ConnectionStatus.Offline ? false : true;
    console.log("networkConnected " + this.networkConnected)
  }

Learn to code/debug with hot live reload !

We learned how to deploy our code to a simulator or a device but on each modification we had to build and copy the code again and again. When developping and testing on a browser (with Ionic serve), on each modification, Ionic detect the change and reload the browser automatically. This behaviour is super useful to develop and debug rapidly.

What about Capacitor ? Should it be great if we could develop and debug at same time on our Simulator / Device and/or in our Browser ?

In Fact it is possible with the –live-reload option. This command is really magic and will improve a lot your development time.

ionic capacitor run ios -l --external

or ionic capacitor run android -l –external if you want to test on an android mobile device.

The -l option is a shortcut for –live-reload.

The –external is for using all network interfaces available

If you are testing on a real device, please be sure that your device is connected and using the same WIFI hotspot than your computer, otherwise the device will be unable to find your ionic server.

When running Ionic with that command, you will be able to test your application:

On browser
On iOS
On Android

At the same time ! Yes really…

You will need a Mac with lot of memory to launch Xcode and Android Studio at the same time (16 Go at least).

And if you modify your Ionic code, Browser, iOS device/simulator and Android device/simulator will refresh automatically.

Wow really really great feature.

Please notice that sometimes application will not refresh in XCode or Android Studio. Just stop your app running and click the button of your IDE to run it again.

The source code for this tutorial is available on my GitHub repository.

Questions/Answers

What is the framework to deploy Ionic application on a real device ?

Capacitor
If we want to access native functionality what should we used ?

Existing Capacitor plugins (https://capacitorjs.com/docs/apis) or Community plugin (https://capacitorjs.com/docs/plugins/community) or even develop our own native plugin (https://capacitorjs.com/docs/plugins/creating-plugins)
What is the command to update our code in the native project (ios and android) (many answers possible)

npx cap copy or npx cap sync or npx cap copy ios or npx cap copy android or npx cap sync ios or npx cap sync android
With Ionic coupled to Capacitor it is possible to develop and test a PWA (progressive web app) and native application at the same time. True or False ?

True

The post Day 7 : Deploy on simulator or mobile device appeared first on Ionic and Django Tutorial.

Day 6 : Improve signin/signup process and application workflow

Christophe Surbier — Fri, 13 Aug 2021 15:33:19 +0000

Create a chat application with Ionic 5/ Angular 12/ Capacitor 3 and Django 3 – Series – Part six

Day 6 : Improve signin/signup process and application workflow

On previous tutorial, we learned how to register or signin to our application and made some modifications to pass the JWT Token to methods. Now we will learn how to improve the code and use Angular guards, to automatically add the jWT access token to our requests.

But first, we will remove the menu generated by Ionic template, which displays on the left side when navigating on web mode.

Let’s edit the src/app/app.component.html file to remove the ion-split-plane component and just keep the following code:

Now we can edit the src/app/app.component.ts file and remove the variables appPages and label:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  constructor() {}
}

With these modifications, if you refresh your browser (http://localhost:8100/login-page), the login page or register page should take the full width of your browser with no menu on the left side.

Add JWT access token automatically with Angular Http interceptors

Angular provides a nice component called HttpInterceptor which intercepts any HttpRequest or HttpResponse to let us do some treatment before passing the request to the next usual process.

For example, we can edit the src/app/app.module.ts file and add the following code :

@Injectable()
export class AngularInterceptor implements HttpInterceptor {

  constructor(){
  }

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    let defaultTimeout = 10000;

      return next.handle(req).pipe(timeout(defaultTimeout),
        retryWhen(err=>{
          let retries = 1;
          return err.pipe(
            delay(500),
            map(error=>{
              if (retries++ ===3){
                throw error
              }
              return error;
            })
          )
        }),catchError(err=>{
          console.log(err)
          return EMPTY
        }), finalize(()=>{

        })
      )
    };    
}

To declare an HttpInterceptor and to use it we need to add the following code:

 { provide: HTTP_INTERCEPTORS, useClass: AngularInterceptor, multi: true }

in our providers array list. Here is the full code of the src/app/app.module.ts file:

 import { Injectable, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClient, HttpClientModule, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { IonicStorageModule } from '@ionic/storage-angular';
import { Observable, EMPTY } from 'rxjs';
import { timeout, retryWhen, delay, map, catchError, finalize } from 'rxjs/operators';

@Injectable()
export class AngularInterceptor implements HttpInterceptor {

  constructor(){
  }

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    let defaultTimeout = 10000;

      return next.handle(req).pipe(timeout(defaultTimeout),
        retryWhen(err=>{
          let retries = 1;
          return err.pipe(
            delay(500),
            map(error=>{
              if (retries++ ===3){
                throw error
              }
              return error;
            })
          )
        }),catchError(err=>{
          console.log(err)
          return EMPTY
        }), finalize(()=>{

        })
      )
    };    
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    IonicStorageModule.forRoot(),
    BrowserModule, 
    HttpClientModule,
    IonicModule.forRoot(), 
    AppRoutingModule
  ],
  providers: [
    InAppBrowser,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: AngularInterceptor, multi: true } 
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

This HttpInterceptor will be called at the start of every http request to add a default timeout of 10 secondes for the request, and if the request failed it will try again 3 times with 500ms between each request. Then after 3 times the request will failed.

It’s quite simple to understand the mecanism.

So now we will create a new file src/app/services/token.interceptor.ts file to manage our JWT token with the following code:

 import { UserManagerServiceService } from './user-manager-service.service';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { catchError, filter, switchMap, take } from 'rxjs/operators';
import { AuthenticationService } from './authentication.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  private refreshingInProgress: boolean;
  private accessTokenSubject: BehaviorSubject = new BehaviorSubject(null);

  constructor(private authService: AuthenticationService,
                private userManager:UserManagerServiceService,
              private router: Router) {}

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const accessToken = this.authService.token;
    //console.log("=== Intercept token ")
    // console.log(accessToken)
    return next.handle(this.addAuthorizationHeader(req, accessToken)).pipe(
      catchError(err => {
        // in case of 401 http error
        console.log("====MODIF ERROR url:"+req.url)
        console.log("====STATUS:"+err.status)
        if (req.url.indexOf("/devices")>0){
          return throwError(err);
        }
        if (req.url.indexOf("/refresh")>0){
          //REFRESHTOKEN KO 
          console.log("==== 401 LOGOUT CAR ERROR")
          // otherwise logout and redirect to login page
          return this.logoutAndRedirect(err);
        }
        if (err instanceof HttpErrorResponse && err.status === 401) {
          // get refresh tokens

          console.log("===401 ask for a new TOKEN using the refresh token ============")
          const refreshToken = this.authService.refresh;

          // if there are tokens then send refresh token request
          if (refreshToken && accessToken) {
            return this.refreshToken(req, next);
          }
          console.log("No refresh or access token. Logout user ",req.url)
          // otherwise logout and redirect to login page
          return this.logoutAndRedirect(err);
        }

        // in case of 403 http error (refresh token failed)
        if (err instanceof HttpErrorResponse && err.status === 403) {
          // logout and redirect to login page
          console.log("Error 403 LOGOuT ",req.url)
          return this.logoutAndRedirect(err);
        }
        // if error has status neither 401 nor 403 then just return this error
        return throwError(err);
      })
    );
  }

  private addAuthorizationHeader(request: HttpRequest, token: string): HttpRequest {
    if (token) {
        let bearer = Bearer ${token};
      ///  console.log("=== Clone request et add header avec token ",bearer)

      return request.clone({setHeaders: {Authorization: bearer}});
    }
    return request;
  }

  private logoutAndRedirect(err): Observable> {
    console.log("==== LOGOUT")
    this.userManager.logoutUser().then(()=>{

    })
    this.router.navigateByUrl('/login');
    return throwError(err);
  }

  private refreshToken(request: HttpRequest, next: HttpHandler): Observable> {
    if (!this.refreshingInProgress) {
      this.refreshingInProgress = true;
      this.accessTokenSubject.next(null);

      return this.authService.refreshToken().pipe(
        switchMap((res) => {
          this.refreshingInProgress = false;
          this.authService.token = res["access"]
          this.authService.refresh = res["refresh"]
          console.log("==== REFRESH SET VALUES")
          this.accessTokenSubject.next(res["access"]);
          // repeat failed request with new token
          return next.handle(this.addAuthorizationHeader(request, res["access"]));
        }), catchError((err, caught) => {
            console.log("=========== ERROR REFRESH TOKEN")
           // return throwError(err);
            return this.logoutAndRedirect(err);
          })
      );
    } else {
      // wait while getting new token
      return this.accessTokenSubject.pipe(
        filter(token => token !== null),
        take(1),
        switchMap(token => {
          // repeat failed request with new token
          return next.handle(this.addAuthorizationHeader(request, token));
        }));
    }
  }
}

and then edit our app.module.ts to use this new HttpInterceptor class:

  { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }

We can remove the HttpInterceptor added as example.

Full code should be now:

import { Injectable, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClient, HttpClientModule, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { IonicStorageModule } from '@ionic/storage-angular';
import { TokenInterceptor } from './services/token.interceptor';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    IonicStorageModule.forRoot(),
    BrowserModule, 
    HttpClientModule,
    IonicModule.forRoot(), 
    AppRoutingModule
  ],
  providers: [
    InAppBrowser,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true } 
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Ok it’s a lot of code. The TokenInterceptor class is quite complex (you can read more about it in this article, which is used and adapted to our Ionic application).

First our interceptor will automatically add the JWT token (that it gets from our AuthenticationService) to each request:

  const accessToken = this.authService.token;
  return next.handle(this.addAuthorizationHeader(req, accessToken))

using this method:

  private addAuthorizationHeader(request: HttpRequest, token: string): HttpRequest {
    if (token) {
        let bearer = Bearer ${token};
      ///  console.log("=== Clone request et add header avec token ",bearer)

      return request.clone({setHeaders: {Authorization: bearer}});
    }
    return request;
  }

And then using a pipe will analyze the HttpResponse to check Http status code.

If the status code is 401 it means the token has expired and will try to refresh it using the JWT refresh token except if the status 401 is from the request with url path /refresh which means our JWT refresh token has expired too. In that case we have no choice to logout the user, to ask him again it’s credentials.

If the status code is 403, it means credentials are not valid anymore and again we have no choice to logout the user, to ask him again it’s credentials.

If you don’t understand the full code, it’s ok you can just used it as it is in your application. You just need to know it will manage JWT authentication for you.

Now we can modify the code to remove the accessToken parameters we passed to our User ApiService methods:

src/app/services/api-service.service.ts file :

  // Create a user 
  createUser(modelToCreate) {
    // model JSON
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    console.log("URL " + this.getUserUrl)
    return this.http.post(this.getUserUrl, modelToCreate, options).pipe(retry(1))
  }

  //Find user based on parameters
  findUserWithQuery(query) {
    let url = this.getUserUrl + query;
    return this.findUser(url)
  }

  private findUser(url) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };

    return Observable.create(observer => {
      this.http.get(url, options)
        .pipe(retry(1))
        .subscribe(res => {
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next();
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

  getUserDetails(id) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    return Observable.create(observer => {
      this.http.get(this.getUserUrl + id + "/", options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

  updateUser(id, patchParams) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    return Observable.create(observer => {
      this.http.patch(this.getUserUrl + id + "/", patchParams, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(true);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

  putUser(object) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'

      })
    };
    return Observable.create(observer => {
      this.http.put(this.getUserUrl + object.id + "/", object, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(true);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

  deleteUser(id) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    return this.http.delete(this.getUserUrl + id + "/", options).pipe(retry(1))
  }

}

and adapt our Login and Register pages, to remove the accessToken parameter from the call:

this.apiService.findUserWithQuery("?email="+email).subscribe((list) => {

this.apiService.updateUser(this.userManager.currentUser.id, updateParams).subscribe((done) => {

If you run again your Ionic application and try to login or register again, it should work which means our HttpInterceptor is working fine and added the token to our requests.

Auto login with Angular guards

Once registered or logged in, we would like to go to our main page named home. Let’s create it:

ionic g page HomePage
mv src/app/home-page src/app/pages

and let’s modify the app.routing.module.ts file as we learned to reflect the path change:

,
  {
    path: 'home-page',
    loadChildren: () => import('./pages/home-page/home-page.module').then( m => m.HomePagePageModule)
  },

At this stage, our declared routes should be :

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login-page',
    pathMatch: 'full'
  },
  {
    path: 'register-page',
    loadChildren: () => import('./pages/register-page/register-page.module').then( m => m.RegisterPagePageModule)
  },
  {
    path: 'login-page',
    loadChildren: () => import('./pages/login-page/login-page.module').then( m => m.LoginPagePageModule)
  },
  {
    path: 'home-page',
    loadChildren: () => import('./pages/home-page/home-page.module').then( m => m.HomePagePageModule)
  },

];

login-page, register-page and home-page which correspond to the url /login-page/, /register-page/ and /home-page/.

To change the urls path and remove the -page, we could rewrite our routes to:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'register',
    loadChildren: () => import('./pages/register-page/register-page.module').then( m => m.RegisterPagePageModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login-page/login-page.module').then( m => m.LoginPagePageModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./pages/home-page/home-page.module').then( m => m.HomePagePageModule)
  },

];

Ok now as you should have notice, each time you will launch Ionic, you will be redirected to the Login page because of our default route :

 {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },

But if the user is already login or registered, we should go to the HomePage. To do that, we will use another Angular functionality which is Guards.

We will use the canLoad instruction. Let’s create a new directory and ask Ionic to create our class:

mkdir src/app/guards
ionic g guard guards/autoLogin --implements CanLoad

The class will be called AutoLoginGuard. Let’s replace the generated code with our own code implementation:

import { Injectable } from '@angular/core';
import { CanLoad, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticationService } from '../services/authentication.service';
import { filter, map, take } from 'rxjs/operators';
import { User } from '../models/user';
import { UserManagerServiceService } from 'src/app/services/user-manager-service.service';

@Injectable({
  providedIn: 'root'
})
export class AutoLoginGuard implements CanLoad {
  constructor(private authService: AuthenticationService, private router: Router,private userManager:UserManagerServiceService) {

   }

  canLoad(): Observable {    
    return this.authService.isAuthenticated.pipe(
      filter(val => val !== null), // Filter out initial Behaviour subject value
      take(1), // Otherwise the Observable doesn't complete!
      map(isAuthenticated => {
        console.log('Found previous token ?, automatic login '+isAuthenticated);
        if (isAuthenticated) {
          //Load user 
          this.userManager.getUser().then((user:User)=>{
           if (user){
              this.router.navigateByUrl('/home', { replaceUrl: true });
            }
            else{
              console.log("=== No user")
              this.authService.isAuthenticated.next(false);
              this.router.navigateByUrl('/login', { replaceUrl: true });
              return true;
            }
          })
        } else {          
          return true;
        }
      })
    );
  }
}

In the canLoad method, we use our AuthenticationService to check if we are authenticated and if we can found a user, and if so we can redirect to our HomePage otherwise the user is not authenticated and will be redirected to the login page.

We just need to modify our routes, to add this canLoad instruction:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AutoLoginGuard } from './guards/auto-login.guard';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'register',
    canLoad: [AutoLoginGuard],
    loadChildren: () => import('./pages/register-page/register-page.module').then( m => m.RegisterPagePageModule)
  },
  {
    path: 'login',
    canLoad: [AutoLoginGuard],
    loadChildren: () => import('./pages/login-page/login-page.module').then( m => m.LoginPagePageModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./pages/home-page/home-page.module').then( m => m.HomePagePageModule)
  },

];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

And voila, if you run your Ionic application again

ionic serve

You should be redirected to the HomePage automatically (if you had register or login before).

Cleaning Ionic cache in the browser

To verify the behaviour is correct, we can cleaned our application cache using the developer tools of the browser:

Just click the Clear site data button, and then refresh the page or go to the default Ionic url (http://localhost:8100/) and this time, you should see the LoginPage.

You could try to login again, and once again call the default ionic url (http://localhost:8100/), you should be redirected to the HomePage

Now that we have an HomePage we could modify our LoginPage and RegisterPage to redirect to this page using the router.navigateByUrl method:
// Next screen
console.log("===Can go to next screen")
this.router.navigateByUrl('/home', { replaceUrl: true });

Create and protect our application Home page

We just saw how to automatically redirect the user to the HomePage once authenticated. However we didn’t protect the HomePage from unathorized access. Once again clean your application cache as we learned previously, and just go to the url : http://localhost:8100/home.

The HomePage will appear even if the user is not registered or logged in (we just clean the cache remember.)

To avoid this behaviour and protect all the pages of our application, we will create another Angular Guard class named AuthGuard :

ionic g guard guards/auto --implements CanLoad

and modify our app-routing.module.ts to add the canLoad instruction to our HomePage:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AutoLoginGuard } from './guards/auto-login.guard';
import { AutoGuard } from './guards/auto.guard';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'register',
    canLoad: [AutoLoginGuard],
    loadChildren: () => import('./pages/register-page/register-page.module').then( m => m.RegisterPagePageModule)
  },
  {
    path: 'login',
    canLoad: [AutoLoginGuard],
    loadChildren: () => import('./pages/login-page/login-page.module').then( m => m.LoginPagePageModule)
  },
  {
    path: 'home',
    canLoad:[AutoGuard],
    loadChildren: () => import('./pages/home-page/home-page.module').then( m => m.HomePagePageModule)
  },

];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Now we can edit our auto.guard.ts file to check if the user is authenticated or not:

import { AuthenticationService } from './../services/authentication.service';
import { Injectable, NgZone } from '@angular/core';
import { CanLoad, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { filter, map, take } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class AutoGuard implements CanLoad {
  constructor(private authService: AuthenticationService,private router: Router) { }

  canLoad(): Observable {    
    return this.authService.isAuthenticated.pipe(
      filter(val => val !== null), // Filter out initial Behaviour subject value
      take(1), // Otherwise the Observable doesn't complete!
      map(isAuthenticated => {
        if (isAuthenticated) {  
          return true;
        } else {          
          this.router.navigateByUrl('/login', { replaceUrl: true })
          return false;
        }
      })
    );
  }
}

This code will check if the user is authenticated and if not will redirect it to the LoginPage.

Try again to call the url http://localhost:8100/home and you will see the LoginPage redirection.

The source code for this tutorial is available on my GitHub repository.

Questions / Answers

How to add custom code behaviour to HTTP request or response ?

Use Angular Http Interceptor
How to add specific code behaviour to be called before Ionic routes to urls ?

Use Angular guards such as canLoad

The post Day 6 : Improve signin/signup process and application workflow appeared first on Ionic and Django Tutorial.

Day 5 : Registering – Sign in users in our Ionic application

Christophe Surbier — Fri, 13 Aug 2021 15:32:57 +0000

Create a chat application with Ionic 5/ Angular 12/ Capacitor 3 and Django 3 – Series – Part five

Day 5 : Registering – Sign in users in our Ionic application

In previous day, we saw how to create a register page and how to register a user using our backend API.

Updating user profil

Now to complete the registration process, we need to update the created user with all the fields filled in the form (last name, first name), and need to get a JWT access token.

First we will create another service class to deal with some common methods to manage a user:

ionic g service UserManagerService

and then we will move the created service in the services directory:

mv src/app/user-manager-service.service.* src/app/services

We will create an new file in the directory src/app/models/ named user.ts and will write the following code:

export class User {
    fcmdevice:any;
    password:string;
    last_login:string;
    is_superuser:any;
    id:any;
    email:string;
    first_name:string;
    last_name:string;
    date_joined:Date;
    is_active:boolean;
    is_staff:boolean;
    avatar:string;
    groups:any;
    user_permissions:any;
    lastConnexionDate : Date;
    valid:boolean;

    constructor() {

    }

    initWithJSON(json) : User{
      for (var key in json) {
          this[key] = json[key];
      }
      return this;
    }
}

This code is the User typescript object (similar to our User class in Django), which will be more easy to manipulate rather than dealing with JSON object.

To store objects (such as our User) on the disk, we will install Ionic storage library:

npm install @ionic/storage-angular

and then add it in our /src/app/app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    IonicStorageModule.forRoot(),
    BrowserModule, 
    HttpClientModule,
    IonicModule.forRoot(), 
    AppRoutingModule
  ],
  providers: [
    InAppBrowser,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now in our new src/app/services/user-manager-service.service.ts file we will add the following code:

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { User } from '../models/user';
import { ApiserviceService } from './api-service.service';
import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root'
})
export class UserManagerServiceService  {

  currentUser: User;

  constructor(public storage: Storage, 
    public apiService: ApiserviceService,
     public platform: Platform) {
    console.log('-------- INIT UserManagerProviderService Provider --------- ');
    this.initStorage()
  }

  async initStorage() {
    console.log("==== INIT STORAGE ==========")
    // If using a custom driver:
    // await this.storage.defineDriver(MyCustomDriver)
    await this.storage.create();
  }

  saveUser() {
    this.storage.set(this.apiService.appName + '_currentUser', this.currentUser);
  }

  setUser(user) {
    return new Promise(resolve => {
        let aUser = new User().initWithJSON(user);
        this.currentUser = aUser;
        console.log('User ID ' + aUser.id + ' email ' + aUser.email);
       this.storage.set(this.apiService.appName + '_currentUser', user).then(()=>{
          resolve(true)
        })
     });
  }

  getUser() {
    return new Promise(resolve => {
      this.storage.get(this.apiService.appName + '_currentUser').then((result) => {
        console.log(result)
        if (result) {
          let aUser = new User().initWithJSON(result);
          this.currentUser = aUser;
          resolve(this.currentUser)
        }
        else {
          this.currentUser=null
          resolve(null)
        }
      });
    });
  }
}

Basically, we added methods to save a user on the disk, to get a previously saved user from the disk, and a method to set the user object in memory.

Before moving forward and write the code to finish the registration process, we need to create another service to deals with authentication and JWT token.

ionic g service Authentication 
mv src/app/authentication.service.* src/app/services

Then we can edit our src/app/services/authentication.service.ts file to add methods to load existing JWT access token from disk, login or logout the user, and refresh the JWT access token :

import { Injectable } from '@angular/core';
import { BehaviorSubject, from, Observable, Subject } from 'rxjs';
import { ApiserviceService } from './api-service.service';

const TOKEN_KEY = 'access';
const REFRESH_TOKEN_KEY = 'refresh';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  // Init with null to filter out the first value in a guard!
  isAuthenticated: BehaviorSubject = new BehaviorSubject(null);
  token = '';
  refresh=''
  constructor(private apiService:ApiserviceService) {
    this.loadToken();
  }

  loadToken() {
    this.apiService.getLocalData(TOKEN_KEY).then((value:string)=>{
      if (value){
        console.log('set token: ', value);
        this.token = value["access"];
        this.apiService.getLocalData(REFRESH_TOKEN_KEY).then((value:string)=>{
          this.refresh=value["refresh"]
          this.isAuthenticated.next(true);
        })       
      }
      else{
        this.isAuthenticated.next(false);
      }
    })

  }

  //Get a JWT access token from provided credentials
  login(params){
    return new Promise(async resolve => {
    this.apiService.login(params).subscribe((resultat)=>{
       if (resultat) {
         console.log("Login result ",resultat)
          let accessToken = resultat["access"]
          let refreshToken = resultat["refresh"]
          this.apiService.setLocalData("access",{"access":accessToken})
          this.apiService.setLocalData("refresh",{"refresh":refreshToken})
          this.token = accessToken;
          this.refresh=refreshToken
          this.isAuthenticated.next(true);

         resolve(true)
        }
      else{
        resolve(false)
      }
      })
    })
  }

  logout(): Promise {
    this.isAuthenticated.next(false);
    return new Promise(async resolve => {
       this.apiService.removeLocalData(TOKEN_KEY).then(()=>{
          this.apiService.removeLocalData(REFRESH_TOKEN_KEY).then(()=>{
            resolve()
          }
        )
       });
    })
  }

  refreshToken(){
    return this.apiService.refreshToken(this.refresh)
  }
}

Ok so now we are be able to modify our src/pages/register-page/register-page.page.ts file to include these new methods.

First we will modify the constructor of our class to include the new services UserManagerServiceService and AuthenticationService created:

constructor(
    public loadingController: LoadingController,
    public router: Router,
    public platform: Platform,
    public alertController: AlertController,
    public apiService: ApiserviceService,
    public formBuilder: FormBuilder,
    public inAppBrowser: InAppBrowser,
    public userManager:UserManagerServiceService,
    public authentificationService:AuthenticationService) {

    this.userForm = formBuilder.group({
      firstName: ['', Validators.compose([Validators.minLength(3), Validators.required])],
      lastName: ['', Validators.compose([Validators.minLength(3), Validators.required])],
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
      password: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
      confirmpassword: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
    });

  }

And now we can modify our createAccount method to complete the process:

createAccount(params) {
    if (this.apiService.networkConnected) {
      this.apiService.registerUser(params).subscribe((resultat) => {
        let status = resultat["status"];
        console.log(status)
        if (status == "OK") {
          this.apiService.stopLoading();
          //User created 
          let data = resultat["data"]
          console.log(data)

          //Set user on memory and save on disk
          this.userManager.setUser(data)

          let paramsToLogin = {
            "email": params.email,
            "password": params.password,

          }

          // Log the user to get the JWT access token 
          this.authentificationService.login(paramsToLogin).then((resultat) => {
            if (resultat) {
              //Need to update first_name and lastname and lastConnexionDate
              let updateParams = {
                "first_name": params.firstName,
                "last_name": params.lastName,
                "lastConnexionDate": new Date()
              }
              this.apiService.updateUser(this.userManager.currentUser.id, updateParams).subscribe((done) => {
                console.log("resultat update ", done)
              })

              this.userManager.saveUser()
              // Next screen
              console.log("===Can go to next screen")
            }
            else {
              this.apiService.stopLoading();
              this.apiService.showError("An error occured with credentials")
            }
          })
        }
        else {
          this.apiService.stopLoading();
          let error = resultat["error"]
          console.log(error)
          if (error.status == 400) {
            this.apiService.showError('An account already exists for this email. Please login');
          }
          else {
            this.apiService.showError("An error occured")
          }
      }
      })
    }
    else {
      this.apiService.stopLoading();
      this.apiService.showNoNetwork()
    }
  }

Once the user has been created, we can now save the results on disk:

//Set user on memory and save on disk
this.userManager.setUser(data)

Then we can use the credentials to login and get the JWT access token from the backend, and then if we have a results it means we have the access token, so we can update the user with it’s missing fields (last name, first name, last connexion date), then we can save again the user value to the disk, and then we should be able to continue and go to the main page of our application (which doesn’t exist yet). This is the purpose of this piece of code:

 let paramsToLogin = {
            "email": params.email,
            "password": params.password,
          }

// Log the user to get the JWT access token 
this.authentificationService.login(paramsToLogin).then((resultat) => {
    if (resultat) {
        //Need to update first_name and lastname and lastConnexionDate
        let updateParams = {
                "first_name": params.firstName,
                "last_name": params.lastName,
                "lastConnexionDate": new Date()
              }

        this.apiService.updateUser(this.userManager.currentUser.id, updateParams).subscribe((done) => {
            console.log("resultat update ", done)
        })

        this.userManager.saveUser()

        // Next screen
        console.log("===Can go to next screen")
    }
    else {
            this.apiService.stopLoading();
            this.apiService.showError("An error occured with credentials")
        }
    })

Please notice that the else code should not exists because we are in the registration process, so credentials can’t be incorrect because we just created the user account with these credentials.

To complete our job, we need to create the following methods which don’t exists yet in our ApiService:

this.apiService.login(params)
this.apiService.updateUser(this.userManager.currentUser.id, updateParams)

And because we need to be authenticated to call our backend API endoints User, Chat, Message, we will also need to manage the JWT access token and add it automatically to each request we make (in the Http header of the request).

login method

The login method will call the /jwt/create/ API endpoint with provided credentials to get the JWT access and refresh tokens.

Edit the /src/app/services/api-service.service.ts file to add the following code:

 login(params) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };

    console.log("URL " + this.getLoginUrl)
    console.log(params)
    return new Observable(observer => {
      this.http.post(this.getLoginUrl, params, options).subscribe(
        (val) => {
          observer.next(val)
          observer.complete()
        },
        response => {
          console.log("POST call in error", response);
          observer.next()
          observer.complete()
        },
        () => {

        });
    })
  }

If the API call succeed, we should receive a JSON containing the access and refresh tokens as we learned in day two of these tutorials.

{refresh: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90e…Q1In0.E8lFvotzMA2G5-ciJqUIyRVnNot3tmwrZJlts_dJfuw", access: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90e…DUifQ.lqMuEyd1J5IetaJmlvFgjcEunB7NcjxoUc2E5zdr7A4"}

update user method

The updateUser method will call the HTTP Patch method of our User endpoint to set first name, last name and lastConnexionDate.

 updateUser(id, patchParams) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    return Observable.create(observer => {
      // At this point make a request to your backend to make a real check!
      this.http.patch(this.getUserUrl + id + "/", patchParams, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(true);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

If we wanted to update the full User object (all fields) we should have made a PUT request and not a Patch one.

Now you can run again the ionic application:

ionic serve

and try to register. Then if you look at the javascript console, you should see the JWT access and refresh tokens but the update of the user will fail with an HTTP 401 error code.

PATCH http://127.0.0.1:8000/api/user/59d99e58-2a32-430a-b20d-96386f0514af/ 401 (Unauthorized)

As we learned to call our API endpoints we need to be authenticated and add the JWT token in the header of the request.

One of the simple solution could be to pass the JWT Token to our updateUser method

this.apiService.updateUser(this.userManager.currentUser.id, updateParams,this.authentificationService.token).subscribe((done) => {
                console.log("resultat update ", done)
})

and modify the updateUser method to add it in the headers of the request:

updateUser(id, patchParams,accessToken) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+accessToken
      })
    };
    return Observable.create(observer => {
      // At this point make a request to your backend to make a real check!
      this.http.patch(this.getUserUrl + id + "/", patchParams, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(true);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

Now if we try to register again, everything should be fine and our User should be updated with specified values (which you can check using the Django admin).

Passing the JWT token to the method is not really the solution because tokens can expire and we need a more generic way to deal with this problem. We will learn how to do soon but first let’s write the login page code.

Login user

We will create the login page and move the code to our src/app/pages directory:

ionic g page LoginPage
mv src/app/login-page src/app/pages

Then we will edit the src/app/app-routing.module.ts file to reflect the directory change :

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'register-page',
    loadChildren: () => import('./pages/register-page/register-page.module').then( m => m.RegisterPagePageModule)
  },
  {
    path: 'login-page',
    loadChildren: () => import('./pages/login-page/login-page.module').then( m => m.LoginPagePageModule)
  },

];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

As we have done for our register page, we will have a form in which the user can enters it’s email and password. Furthermore we will add a link to redirect to the register page, if the user has no account.

Let’s edit the login-page.module.ts to include the Angular ReactiveFormsModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LoginPagePageRoutingModule } from './login-page-routing.module';

import { LoginPagePage } from './login-page.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPagePageRoutingModule
  ],
  declarations: [LoginPagePage]
})
export class LoginPagePageModule {}

Then we can write our login-page.page.html code:


  
    
      
        Sign In 
      
      
      
        
          
          
        
         
              An email is required
              
          

        
          
          
        
         
              min. 8 characters required with lowercase, uppercase, number and special character
          
      
      

        
          Sign in
        
      

      
      By signin, you will accept our terms and condition.
    
  


  
    
      Not yet registered?
      Sign up

And write the associated scss login-page.page-scss:

.buttons-forgot {
    ion-button {
        &.forgot-password {
            font-size: 15px;
            margin: 0;
            min-height: unset;
            height: 34px;
            margin-bottom: 12px;
        }
    }
}

.option-auth{
    display: flex;
    flex-direction: column;
    align-items: center;
}
p {
    font-size: 0.8em;
    color: red;
}

The Login page is really simple. It just displays two inputs box for email and password, a clickable text to see the terms & conditions, a button to login and a button to redirect to the Register page.

Let’s write our src/app/pages/login.page/login-page.page.ts file :

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LoadingController, Platform, AlertController } from '@ionic/angular';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { AuthenticationService } from 'src/app/services/authentication.service';
import { UserManagerServiceService } from 'src/app/services/user-manager-service.service';
import { ApiserviceService } from 'src/app/services/api-service.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.page.html',
  styleUrls: ['./login-page.page.scss'],
})
export class LoginPagePage implements OnInit {

  public userForm: FormGroup;

  loading: any;
  constructor(
    public loadingController: LoadingController,
    public router: Router,
    public platform: Platform,
    public formBuilder: FormBuilder,
    public userManager: UserManagerServiceService,
    public alertController: AlertController,
    public apiService: ApiserviceService,
    public authentificationService: AuthenticationService,
    public inAppBrowser: InAppBrowser) {

    this.userForm = formBuilder.group({
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
      password: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])]
    });
  }

  ngAfterViewInit() {

  }

  login() {

    let email = this.userForm.value["email"]
    let password = this.userForm.value["password"]

    //chek si le pseudo est disponible
    if (this.apiService.networkConnected) {
      this.apiService.showLoading();
      // Check email
      // Check email
      let params = {
        "email": email,
        "password": password,
      }
      this.authentificationService.login(params).then((resultat) => {
        this.apiService.stopLoading();
        if (resultat) {
          this.apiService.findUserWithQuery("?email="+email,this.authentificationService.token).subscribe((list) => {
         {
            if (list) {
              let count = list["count"]
              console.log("Count " + count)
              if (count == 0) {
                this.apiService.showError('Identification failed ! No account found');
              }
              else {
                let result = list["results"][0]
                console.log(result)
                this.userManager.setUser(result).then((done) => {
                   // Next screen
                  console.log("===Can go to next screen")
                })

              }
            }
            else {
              this.apiService.showError("An error occured with credentials, no account found")
            }

          })
        }
        else {
          this.apiService.showError("An error occured with credentials")
        }
      })
    }
    else {
      this.apiService.showNoNetwork();
    }

  }

  cgu(){
    let url = "https://policies.google.com/terms"
    let target = "_blank"
    this.inAppBrowser.create(url, target, "location=no,zoom=no")
  }

  ngOnInit() {
  }
}

Like for the Register page, we configure our Angular form to manage the email and the password:

 this.userForm = formBuilder.group({
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
      password: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])]
    });

Email is required and the input should be an email format.

Password is required and should have 8 caracters minimum, with number and special caracter.

The login() method will check the credentials of the user using our AuthentificationService:

 let params = {
        "email": email,
        "password": password,
      }
      this.authentificationService.login(params).then((resultat) => {

And if credentials are correct, we will retrieve the user using a new method which we need to create:

 this.apiService.findUserWithQuery("?email="+email,this.authentificationService.token).subscribe((list) => {

As we did before, for simplication and demo purpose, we will pass the JWT access token to the method.
If the method has a result, we can set our User and then go to next screen otherwise we need to display an error message.

Adding methods to deal with User in our APIService

In Register process, we added an updateUser method. Now let’s write all CRUD methods to deal with User.

Let’s add the following methods to our src/app/services/api-service.service.ts:

 // Create a user 
  createUser(modelToCreate,accessToken) {
    // model JSON
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+accessToken
      })
    };
    console.log("URL " + this.getUserUrl)
    return this.http.post(this.getUserUrl, modelToCreate, options).pipe(retry(1))
  }

  //Find user based on parameters
  findUserWithQuery(query,accessToken) {
    let url = this.getUserUrl + query;
    return this.findUser(url,accessToken)
  }

  private findUser(url,accessToken) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+accessToken
      })
    };

    return Observable.create(observer => {
      this.http.get(url, options)
        .pipe(retry(1))
        .subscribe(res => {
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next();
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

  getUserDetails(id,accessToken) {
    const options = {
      headers: new HttpHeaders({
        'Authorization': 'Bearer '+accessToken,
        'Content-Type': 'application/json'
      })
    };
    return Observable.create(observer => {
      this.http.get(this.getUserUrl + id + "/", options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

  updateUser(id, patchParams,accessToken) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+accessToken
      })
    };
    return Observable.create(observer => {
      this.http.patch(this.getUserUrl + id + "/", patchParams, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(true);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

  putUser(object,accessToken) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+accessToken
      })
    };
    return Observable.create(observer => {
      this.http.put(this.getUserUrl + object.id + "/", object, options)
        .pipe(retry(1))
        .subscribe(res => {
          this.networkConnected = true
          observer.next(true);
          observer.complete();
        }, error => {
          observer.next(false);
          observer.complete();
          console.log(error);// Error getting the data
        });
    });
  }

  deleteUser(id,accessToken) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+accessToken
      })
    };
    return this.http.delete(this.getUserUrl + id + "/", options).pipe(retry(1))
  }

Redirect user to login page

Now we will add as default route our login page. Edit the src/app/app-routing.module.ts file and add this path :

 {
    path: '',
    redirectTo: 'login-page',
    pathMatch: 'full'
  },

With this instruction, every request with no relative path will be redirected to the /login-page url. So if you try to run ionic again:

ionic serve

You browser will launch at http://localhost:8100/ and will be automatically redirected to the login page http://localhost:8100/login-page

Now you should be able to login with the account created with the Register page and see the successful login in the console log

Login result  {refresh: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90e…YwIn0.URQGnnZ9g3Ms8QdCC3JPT0ChKX1X-WL85XgyQAj9jKs", access: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90e…jAifQ.v2kCSHwK9TAIhUSzrBbYGgG4nZTg5wWu3SMxs9peCFA"}
login-page.page.ts:67 Count 1
login-page.page.ts:73 {id: "3cde3f7e-261e-4ebb-8437-fa4c27d35bf0", password: "pbkdf2_sha256$216000$adrKF75lkxvH$kxQL19HuzE4Qsp+e3SPsZYSxkJrP7wFW6TercA9K7hc=", is_superuser: false, email: "christophe@idevotion.fr", first_name: "Christophe", …}
user-manager-service.service.ts:38 User ID 3cde3f7e-261e-4ebb-8437-fa4c27d35bf0 email christophe@idevotion.fr
login-page.page.ts:76 ===Can go to next screen

The source code of this tutorial could be found on my Github repository.

Questions / Answers

Which Angular library can we use to manage forms easily ?

Reactive forms
What should we add to an HTTP request to be authenticated ?

A JWT access token
How to do that ?

Add a ‘Authorization’: ‘Bearer ‘+accessToken instruction in the HTTP headers of the request
Which file is used in Ionic to manage the authorized urls ?

app-routing.module.ts file

The post Day 5 : Registering – Sign in users in our Ionic application appeared first on Ionic and Django Tutorial.

Day 4 : Ionic application

Christophe Surbier — Fri, 13 Aug 2021 15:32:35 +0000

Create a chat application with Ionic 5/ Angular 12/ Capacitor 3 and Django 3 – Series – Part four

Day 4 : Ionic application

Create our Ionic project skeleton

To create our Ionic application project just open a terminal and type:

ionic start ChatTuto sidemenu --capacitor --project-id=chattuto --package-id=com.idevotion.chattuto

And pick the Angular framework. Then since we will deploy our application to iOS and Android , we will add these platforms with Capacitor

npm install @capacitor/ios

I will suppose that you have already setup your environment for using Ionic. If not you will find the how to do it here.

The source are generated into a folder named chattuto so we can go inside this folder

cd chattuto

Now we will create some empty folders into the src/app directory to better organised our code.

mkdir src/app/pages src/app/models src/app/services

Directory	Definition
pages	Will contain our application pages (views)
models	Will contain our entity models
services	Will contain our services

Adding a service to dialog with our Backend

Because we will need to dialog with our Backend to get or send data, we will add a service file for this with some other useful methods.

ionic g service ApiService
mv src/app/api-service.service.* src/app/services

And we will move the generated file into our services directory. Next we will install two Capacitor libraries to deal with Network and Storage:

npm install @capacitor/storage @capacitor/network

Then we will write some common and useful methods into our api-service.service.ts file.

You can refer to comment in the code to understand the purpose of methods

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { from, of, forkJoin } from 'rxjs';
import { catchError, retry, map, tap } from 'rxjs/operators';
import { AlertController, LoadingController } from '@ionic/angular';
import { Platform } from '@ionic/angular';
import { Storage } from '@capacitor/storage';
import { Network } from '@capacitor/network';

export const domainConfig = {
  client: 'chattuto',
  virtual_host: 'http://127.0.0.1:8000/',
  domainApp: 'http://127.0.0.1:8000/',
  staticStorage: "static/storage/"
}

export enum ConnectionStatus {
  Online,
  Offline
}

@Injectable({
  providedIn: 'root'
})
export class ApiserviceService {

  public status: BehaviorSubject = new BehaviorSubject(ConnectionStatus.Offline);
  public tokenSet: BehaviorSubject = new BehaviorSubject(false);

  public tokenSSO: String = "";
  networkConnected: boolean = true;
  virtualHostName: string = ''
  appName: string = '';
  apiPrefix = "/api"
  loader: any;
  isShowingLoader = false;

  // ================ AUTHENTIFICATION METHODS ====================
  getLoginUrl: string = ""

  getResetPwdUrl: string = "";
  getRefreshTokenUrl: string = ""
  getMeUrl: string = ""

  getUserUrl: string = '';
  getCreateUserUrl: string = '';

  initProvider(url, app_name, apiPrefix) {
    this.virtualHostName = url;
    this.appName = app_name;
    this.apiPrefix = apiPrefix;
    console.log("init provider appName " + this.appName);
    this.initUrls()
  }

  private initUrls() {
    // ================ AUTHENTIFICATION METHODS ====================
    this.getLoginUrl = this.virtualHostName + "auth/jwt/create/"
    this.getCreateUserUrl = this.virtualHostName + "auth/users/"
    this.getResetPwdUrl = this.virtualHostName + "auth/users/reset_password/"
    this.getRefreshTokenUrl = this.virtualHostName + "auth/jwt/refresh/"
    this.getMeUrl = this.virtualHostName + "auth/users/me/"
    // =================================================================

    this.getUserUrl = this.virtualHostName + this.apiPrefix + "/user/"
  }

  constructor(public http: HttpClient,
    public loadingController: LoadingController,
    public alertCtrl: AlertController,
    public platform: Platform) {

    this.initializeNetworkEvents();
    this.initProvider(domainConfig.virtual_host, domainConfig.client, "api")
    this.http = http
  }

  /**
   * This method will check network events and if a change occurs will store the current network status
   */
  public async initializeNetworkEvents() {
    console.log("======== Initialise Network Events ======")
    if (this.platform.is("capacitor")) {
      let status = await Network.getStatus();
      if (status["connected"] == false) {
        this.networkConnected = false
        this.updateNetworkStatus(ConnectionStatus.Offline);
      }
      else {
        this.networkConnected = true;
        this.updateNetworkStatus(ConnectionStatus.Online);
      }
      let handler = Network.addListener('networkStatusChange', (status) => {
        console.log("Network status changed", status);
        if (status["connected"] == false) {
          this.networkConnected = false
          this.updateNetworkStatus(ConnectionStatus.Offline);
        }
        else {
          this.networkConnected = true;
          this.updateNetworkStatus(ConnectionStatus.Online);
        }
      });
    }
    else {
      if (navigator.onLine) {
        this.updateNetworkStatus(ConnectionStatus.Online);
      }
      else {
        this.updateNetworkStatus(ConnectionStatus.Offline);
      }
    }
  }

  private async updateNetworkStatus(status: ConnectionStatus) {
    this.status.next(status);
    this.networkConnected = status == ConnectionStatus.Offline ? false : true;
    console.log("networkConnected " + this.networkConnected)
  }

  public onNetworkChange(): Observable {
    return this.status.asObservable();
  }

  public getCurrentNetworkStatus(): ConnectionStatus {
    return this.status.getValue();
  }

  // Store data (as json) with provided key name 
  public setLocalData(key, jsonData) {
    return new Promise(async resolve => {
      await Storage.set({ key: ${domainConfig.client}-${key}, value: JSON.stringify(jsonData) })
      resolve(true)

    });
  }

  // Remove local data for a specific key
  public removeLocalData(key) {
    return new Promise(async resolve => {
      let ret = await Storage.remove({ key: ${domainConfig.client}-${key} })

    });
  }

  // Get local data for a specific key
  public getLocalData(key) {
    return new Promise(async resolve => {
      let ret = await Storage.get({ key: ${domainConfig.client}-${key} })

      if (ret.value) {
        resolve(JSON.parse(ret.value))
      }
      else {
        resolve(null)
      }
    });
  }

  //========= Useful methods =========
  // show a No network alert

  async showNoNetwork() {
    let alert = await this.alertCtrl.create({
      header: 'Sorry',
      message: 'No network detected, please check your connexion',
      buttons: ['OK']
    });
    return await alert.present();

  }

  // Show a loader
  async showLoading() {
    if (!this.isShowingLoader) {
      this.isShowingLoader = true
      this.loader = await this.loadingController.create({
        message: 'Merci de patienter',
        duration: 4000
      });
      return await this.loader.present();

    }

  }

  //Dismiss loader 
  async stopLoading() {
   if (this.loader) {
      this.loader.dismiss()
      this.loader = null
      this.isShowingLoader = false
    }

  }

  // Show a loader with a specific message
  public async showLoadingMessage(message) {
    this.loader = await this.loadingController.create({
      message: message,
    });
    this.loader.present();
  }

  // Show an error message
  async showError(text) {
    let alert = await this.alertCtrl.create({
      header: 'Error',
      message: text,
      buttons: ['OK']
    });
    return await alert.present();
  }

  /**
  * Show a message  
  *
  * @param title - The title of the message to show
  * @param message - The text of the message to show
  * 
  */
  async showMessage(title, message) {
    let alert = await this.alertCtrl.create({
      header: title,
      message: message,
      buttons: ['OK']
    });
    return await alert.present();
  }

  // ================ JWT AUTHENTIFICATION METHODS ====================

  /**
   * This method is used to obtain a new access token using the refresh token value
   * @param refreshToken 
   * @returns 
   */
  refreshToken(refreshToken) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };

    let params = {
      "refresh": refreshToken
    }
    console.log("=== ask new access token with refresh token ", params)
    return this.http.post(this.getRefreshTokenUrl, params, options).pipe(
      tap(response => {
        console.log("=== REFRESH response", response)
        this.setLocalData("access", { "access": response["access"] })
        this.setLocalData("refresh", { "refresh": response["refresh"] })

      })
    );
  }

}

We will use these methods later while implementing our application pages.

Creating a Register page

The first step for our application, will be to create a page on which our users will be able to register. Let’s do it and create that page. In a terminal, launch the command:

ionic g page RegisterPage

Then move generated code to our pages directory

 mv src/app/register-page src/app/pages

Then we need to edit the app-routing.module.ts to reflect the new path of our page:

  {
    path: 'register-page',
    loadChildren: () 
        => import('./pages/register-page/register-page.module').then( m => m.RegisterPagePageModule)
  }

Because we will not use the default ionic generated pages we will erase the folder named folder and will remove reference of it from the app-routing.module.ts file which should look like this:

  import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'register-page',
    loadChildren: () => import('./pages/register-page/register-page.module').then( m => m.RegisterPagePageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Adding a form to register

First we will focus on the design of the page. Basically it will be a form asking our user his last name, first name, email and password.

Let’s edit the src/pages/register-page/register-page.page.html and add the following code:


  

    

      
        Register
      
        Please filled all fields correctly

      

      
         
             
            
          
           
              3 characters min.
          
        
          
           
        
          
              3 characters min.
          
        
          
          
        
         
              An email is required
              
          

        
          
          
        
         
              min. 8 characters required with lowercase, uppercase, number and special character
          
        
          
          
        
           
              Please confirm password
          
      
      
        Create account
      

      
      By registering you are accepting our terms and conditions
    
  




  
    
      Already a member ?
      Sign in

Our form will contain some validation methods to check if values entered are in correct format. We will see in a moment how to specify this. But before that let’s edit the src/pages/register-page/register-page.page.scss file to focus on CSS design and add the following code:

p {
    font-size: 0.8em;
    color: red;
}

.option-auth{
    display: flex;
    flex-direction: column;
    align-items: center;
}

We use Flex to center the items in our view, and we set the color of p html tag to be red, because it will be used to display validation error messages.

Now we will define some global CSS style for our Ionic project.

First we can edit the autogenerated file src/app/theme/variables.scss and type:

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/
:root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  /** secondary **/
  --ion-color-secondary: #0cd1e8;
  --ion-color-secondary-rgb: 12, 209, 232;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0bb8cc;
  --ion-color-secondary-tint: #24d6ea;

  /** tertiary **/
  --ion-color-tertiary: #005B82;
  --ion-color-tertiary-rgb: 0, 91, 130;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #004968;
  --ion-color-tertiary-tint: #337c9b;

  /** success **/
  --ion-color-success: #10dc60;
  --ion-color-success-rgb: 16, 220, 96;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #0ec254;
  --ion-color-success-tint: #28e070;

  /** warning **/
  --ion-color-warning: #FFE482;
  --ion-color-warning-rgb: 255, 228, 130;
  --ion-color-warning-contrast: #D93025;
  --ion-color-warning-contrast-rgb: 217, 48, 37;
  --ion-color-warning-shade: #e6cd75;
  --ion-color-warning-tint: #ffe99b;

  /** danger **/
  --ion-color-danger: #ff5b61;
  --ion-color-danger-rgb: 255, 91, 97;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cc484c;
  --ion-color-danger-tint: #ff7b7f;

  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  /** medium **/
  --ion-color-medium: #f0f0f0;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #f0f0f0;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #f0f0f0;
  --ion-color-medium-tint: #f0f0f0;

  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 244, 244;
  --ion-color-light-contrast: #AEAEAE;
  --ion-color-light-contrast-rgb: 174, 174, 174;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;

    /** facebook **/
    --ion-color-facebook: #3578E5;
    --ion-color-facebook-rgb: 53, 120, 229;
    --ion-color-facebook-contrast: #ffffff;
    --ion-color-facebook-contrast-rgb: 255, 255, 255;
    --ion-color-facebook-shade: #2a60b7;
    --ion-color-facebook-tint: #5d93ea;

    /** google **/
    --ion-color-google: #D93025;
    --ion-color-google-rgb: 217, 48, 17;
    --ion-color-google-contrast: #ffffff;
    --ion-color-google-contrast-rgb:  255, 255, 255;
    --ion-color-google-shade: #ae261e;
    --ion-color-google-tint: #e15951;

    /** apple **/
    --ion-color-apple: #222428;
    --ion-color-apple-rgb: 34, 34, 34;
    --ion-color-apple-contrast: #ffffff;
    --ion-color-apple-contrast-rgb:  255, 255, 255;
    --ion-color-apple-shade: #1e2023;
    --ion-color-apple-tint: #383a3e;

}

.ion-color-facebook {
  --ion-color-base:  #3578E5;
  --ion-color-base-rgb: 53, 120, 229;
  --ion-color-contrast:  #ffffff;
  --ion-color-contrast-rgb:  255, 255, 255;
  --ion-color-shade: #2a60b7;
  --ion-color-tint: #5d93ea;
}

.ion-color-google {
  --ion-color-base:  #D93025;
  --ion-color-base-rgb: 217, 48, 17;
  --ion-color-contrast:  #ffffff;
  --ion-color-contrast-rgb:  255, 255, 255;
  --ion-color-shade: #ae261e;
  --ion-color-tint: #e15951;
}

.ion-color-apple {
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;
}

.ion-color-custombackground {
  --ion-color-dark: #f0f0f0;
  --ion-color-dark-rgb: 240, 240, 240;
  --ion-color-dark-contrast: #f0f0f0;
  --ion-color-dark-contrast-rgb: 240, 240, 240;

}

and global scss style with modifying the src/app/global.scss file:

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

// Font
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,900&display=swap');

:root,
.md,
.ios {
    --ion-font-family: 'Lato', sans-serif;
    --ion-danger-gradient-start: #FF5A5F;
    --ion-danger-gradient-end: #FE4D88;
}

ion-title {
    font-size: 26px;
    font-weight: 700;
} 
[padding-24] {
    --padding-start: 24px;
    --padding-end: 24px;
    --padding-top: 24px;
    --padding-bottom: 24px;
}

[padding-lr-24] {
    --padding-start: 24px;
    --padding-end: 24px;
}

[padding-lr-16] {
    --padding-start: 16px;
    --padding-end: 16px;
}

ion-button {

    &:not([shape="round"]) {
        --border-radius: 10px;
    }

    font-weight: 700;
    letter-spacing: normal;

    &:not(.button-large) {
        &:not(.button-small) {
            min-height: 44px;
            font-size: 12px;
        }

    }

    &:not(.button-small) {
        &:not(.button-large) {
            min-height: 44px;
            font-size: 12px;
        }

    }

    &.button-large {
        font-size: 16px;
        min-height: 54px;

        ion-icon {
            font-size: 18px;

        }
    }

    &.danger-gradiant {

         --ion-color-base: linear-gradient(135deg, var(--ion-danger-gradient-start) 0%, var(--ion-danger-gradient-end) 100%) !important;
    }
}

.auth-container {
    background-color: #f0f0f0;
    .form {
        background-color: #f0f0f0;
        .logo {
            margin: 8vh 0;
        }
    }

    .form-title {
        font-size: 40px;
        color: var(--ion-color-dark);
        margin-bottom: 24px;
        margin-top: 43px;
    }
}

.instruction {
    text-align: center;
    margin-top: 5vh;
    font-size: 15px;
    color: var(--ion-color-dark)
}

.buttons {
    ion-button {
        margin-top: 24px;
        margin-bottom: 24px;

        ion-icon {
            font-size: 14px;
            margin: 10px;
        }
    }
}

ion-footer {
    &[auth] {
        .option-auth {
            p {
                margin: 0;
                font-size: 15px;
                color: var(--ion-color-dark)
            }

            ion-button {
                font-size: 15px;
                text-transform: none;
                height: 20px;
                margin: 0;
                margin-bottom: 8px;
                min-height: unset;
            }
        }

    }
}

ion-list {
    &[login-form] {
        margin-bottom: 0;
        background-color: #f0f0f0;
        ion-item {
            border-radius: 5px;
            border: 1px solid #E7E9EB;
            margin: 16px 0;

            ion-icon {
                &[slot="start"] {
                    font-size: 20px;
                    color: #707070;
                }
            }
        }
    }
}

.or {
    display: block;
    position: relative;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;

    &:before {
        $lineWidth: 120px;
        width: $lineWidth;
        height: 1px;
        content: "";
        background: #E4E4E4;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -$lineWidth/2;
    }

    span {
        background: #f0f0f0;
        font-size: 14px;
        color: #707070;
        font-weight: 700;
        padding: 0 16px;
        position: relative;
        z-index: 1;
    }
}

.toolbar-logo-back {
    margin-left: -27px;
    text-align: center;

    img {
        max-height: 90px;
        object-fit: contain;
        margin: 0 auto;
    }
}

.toolbar-logo {
    text-align: center;
    color:#f0f0f0;
    img {
        width: 150px;
        object-fit: contain;
        margin: 0 auto;
        margin-top: 20px;
    }
}

.footer-partner {
    padding: 16px 24px;

    ion-button {
        margin-bottom: 16px;
    }

    .partners {
        margin-left: -8px;
        margin-right: -8px;

        .row-partners {
            padding: 8px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
                max-width: 58px;
                margin: 0 auto;
            }
        }
    }
}

ion-footer {
    &[onrow] {
        ion-button {
            margin-bottom: 4px;
        }

        .footer-partner {
            padding-top: 0;

            .partners {
                .row-partners {
                    margin-left: -1px;
                    margin-right: -1px;
                    display: flex;
                    align-items: center;

                    .img {
                        padding-left: 1px;
                        padding-right: 1px;

                        img {
                            width: auto;
                            height: auto;
                            max-width: 100%;
                        }
                    }
                }
            }
        }
    }
}
ion-segment{
    padding: 3px;
    background: rgba(118,118,128,0.24);
    width: 100%;
    &[shorting]{
        ion-segment-button{
            --background-checked:var(--ion-color-danger) !important;
            --color-checked: var(--ion-color-danger-contrast) !important;
            --indicator-height:0px;
            min-height: 42px;
            border-radius: 8px;
            border: none;
            position: relative;
            max-width: unset !important;
            &+ion-segment-button{
                &:before{
                    position: absolute;
                    left: 0;
                    height: 70%;
                    top: 15%;
                    width: 1px;
                    content: "";
                    background: rgba(142,142,147,0.30);
                }
            }
        }
    }
}
.setting-modal .modal-wrapper {
    height: 35%;
    top: 65%;
    background-color: white;
    position: absolute; 
    display: block;  
}

.popover-content.sc-ion-popover-ios {
    border-radius: 10px;
    top: 189px;
    left: calc(50px - var(--ion-safe-area-right, 0px))!important;
    transform-origin: right top;
    width: auto;
}

Please note you don’t need to understand everything in this code. Usually i used a purchased template or ask a designer to create the Ionic design template files for me.

Now we will modify the src/pages/register-page/register-page.module.ts file to load ReactiveFormsModule library which is mandatory to use the form we defined previously:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { RegisterPagePageRoutingModule } from './register-page-routing.module';

import { RegisterPage } from './register-page.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RegisterPagePageRoutingModule
  ],
  declarations: [RegisterPage]
})
export class RegisterPagePageModule {}

Last step is to edit our src/pages/register-page/register-page.page.ts file to implement the code of our RegisterPage.

If you pay attention to the HTML code that we wrote, the user can read the terms and conditions of our application. This is a mandatory step if you want your app to be validated by Apple. To do so we will use a Ionic library called IAppBrowser to open an external page in a browser pointing to an external terms & conditions page.

Let’s install this library. Open a terminal, and write:

npm install cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

Now we can write the code of our view:

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LoadingController, Platform, AlertController } from '@ionic/angular';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ApiserviceService } from 'src/app/services/api-service.service';

@Component({
  selector: 'app-register',
  templateUrl: './register-page.page.html',
  styleUrls: ['./register-page.page.scss'],
})
export class RegisterPage implements OnInit, AfterViewInit {
  public submitAttempt: boolean = false;
  public userForm: FormGroup;

  showWrongPattern = false;
  constructor(
    public loadingController: LoadingController,
    public router: Router,
    public platform: Platform,
    public alertController: AlertController,
    public apiService: ApiserviceService,
    public formBuilder: FormBuilder,
    public inAppBrowser: InAppBrowser) {

    this.userForm = formBuilder.group({
      firstName: ['', Validators.compose([Validators.minLength(3), Validators.required])],
      lastName: ['', Validators.compose([Validators.minLength(3), Validators.required])],
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
      password: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
      confirmpassword: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
    });

  }

  ngOnInit() {
  }

  ngAfterViewInit() {
  }

  cgu() {
    // Your CGU url
    let url = "https://policies.google.com/terms"
    let target = "_blank"
    this.inAppBrowser.create(url, target, "location=no,zoom=no")
  }
}

The most important part in this code is the:

this.userForm = formBuilder.group({
      firstName: ['', Validators.compose([Validators.minLength(3), Validators.required])],
      lastName: ['', Validators.compose([Validators.minLength(3), Validators.required])],
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
      password: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
      confirmpassword: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
    });

We create an Angular form group which indicates which fields are required and which are the validation rules.
It’s quite easy to read and understand the rules by reading this code.

If the form is invalid (rules are not valid), then the Create account button will be disable)

Ok let’s try to run our Ionic application to see the results in a browser:

ionic serve

Once compiled and ready, Ionic will automatically opens your browser at the following url : http://localhost:8100/ which is the default one. You should see a blank page on the right side and a menu on the left side:

The menu is a Ionic default standard one and is configured in the app.component.html file. We will focus on it later.

To get our RegisterPage we need to go to the specific url we define in our app-routing.module.ts file which is : http://localhost:8100/register-page

If you want to check the result on a mobile screen, you can switch your browser to development mode and choose an iPhone to render the view:

Now if you fill the form with required information, the Create account button should activate, but with no effect since we didn’t implement the register() method.

Let’s focus on this. Edit our src/pages/register-page/register-page.page.ts file to implement the code:

register() {
    this.submitAttempt = true;
    let firstName = this.userForm.value["firstName"]
    let lastName = this.userForm.value["lastName"]
    let email = this.userForm.value["email"]
    let password = this.userForm.value["password"]
    let confirmpassword = this.userForm.value["confirmpassword"]

    if (password != confirmpassword) {
      this.apiService.showError("Passwords don't match");
    }
    else if (password.length<6){

    }
    else {
      //chek si le pseudo est disponible

      if (this.apiService.networkConnected) {
        this.apiService.showLoading().then(() => {
          this.showWrongPattern=false;
           let params = {
                  "email": email,
                  "password": password,
                  "firstName":firstName,
                  "lastName":lastName
          }
          this.createAccount(params)
        })
      }
      else {
        this.apiService.showNoNetwork();
      }
    }
  }

This method will get the values submitted with the form, then check if passwords are matching, then checks if network is connected (we will use our standard methods defined earlier to do this) or display a no network message, and if everything is ok will call a createAccount method that we will implement now:

 createAccount(params) {
    if (this.apiService.networkConnected) {
      this.apiService.registerUser(params).subscribe((resultat) => {
        let status = resultat["status"];
        console.log(status)
        if (status == "OK") {
          //User created 
          this.apiService.stopLoading();
          let data = resultat["data"]
          console.log(data)
        }
        else {
          this.apiService.stopLoading();
          let error = resultat["error"]
          console.log(error)
          if (error.status == 400) {
            this.apiService.showError('An account already exists for this email. Please login');
          }
          else {
            this.apiService.showError("An error occured")
          }
      }
      })
    }
    else {
      this.apiService.stopLoading();
      this.apiService.showNoNetwork()
    }
  }

This method is quite simple too. It checks if network is still connected (or display an error message), then call a method registerUser of our apiService file and check the result status of this call. If the status is OK the account has been created otherwise an error message is showned.

Adding a registerUser method in our ApiService file

The registerUser method will call our backend to create a user as we have seen earlier on previous tutorial.

If we refer to the documentation of our JWT API, we can create a user with an HTTP post call and passing paramaters email,password:

curl -X POST \
  http://127.0.0.1:8000/auth/users/ \
  -H 'Content-Type: application/json' \
  -d '{"email": "csurbier@idevotion.fr", "password": "YOURPASSWORD_75$"}'

So let’s implement this method in our api-service.service.ts file by adding the following code:

registerUser(params) {
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    return new Observable(observer => {
      this.http.post(this.getCreateUserUrl, params, options).subscribe(
        (val) => {
          observer.next({ "status": "OK", "data": val })
          observer.complete()
        },
        response => {
          console.log("POST call in error", response);
          observer.next({ "status": "KO", "error": response })
          observer.complete()
        },

        () => {

        });
    })
  }

the getCreateUserUrl has already been defined in our api-service.service.ts file and it’s value is
this.getCreateUserUrl = this.virtualHostName + "auth/users/"

The virtualHostName comes from the definition:

export const domainConfig = {
  client: 'chattuto',
  virtual_host: 'http://127.0.0.1:8000/',
  domainApp: 'http://127.0.0.1:8000/',
  staticStorage: "static/storage/"
}

We will see later how to deploy our backend code on a real server but for now we run it on our local machine.

With that in place, we can test our Create account button, but of course we need to have our backend running by launching the command:

python manage.py runserver

Now if you fill the form and click the Create account button, you should see in your javascript console log, the following values:

OK
register-page.page.ts:88 {email: "testcsurbier@idevotion.fr", id: "42266767-119e-486f-890d-db67c85cf5ec"}

Our backend processes the request correctly and send us back the identifier (id parameter in the json) of our user.

We can also use the Django admin to check that the user has been created.

If we check the user values with the Django admin we can see that first_name and last_name values are empty. It’s because the JWT API only takes an email and a password as arguments.

You can find code of this tutorial as usual on my Github

In next tutorial, we will see how to complete the User fields and how to get the JWT access token to automatically authenticate the user when doing API calls.

Questions/Answers

Modify this code snippet to have first name and last name not mandatory

this.userForm = formBuilder.group({
      firstName: ['', Validators.compose([Validators.minLength(3), Validators.required])],
      lastName: ['', Validators.compose([Validators.minLength(3), Validators.required])],
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
      password: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
      confirmpassword: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
    });

  }

Answer

this.userForm = formBuilder.group({
      firstName: [''],
      lastName: [''],
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
      password: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
      confirmpassword: ['', Validators.compose([
        Validators.minLength(8),
        Validators.required,
        Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[€$@$!%*?&])[A-Za-z\d$@€$!%*?&].{8,}')
      ])],
    });

  }

How to run a ionic project and see results into a browser ?

Answer
ionic serve

If we want to add a method to dialog with our backend API (such a login for instance), in which file should we do this ?

Answer
api-service.service.ts file

In next tutorial, we will add code to update a User and set it’s first name and last name values. Refering to our previous tutorial and the API documentation (http://127.0.0.1:8000/documentation/) which endpoint should we use ?

Answer

The /api/user/{id}/ endpoint with a Patch Http request

The post Day 4 : Ionic application appeared first on Ionic and Django Tutorial.

Day 3 : Django Rest Framework API

Christophe Surbier — Fri, 13 Aug 2021 15:32:06 +0000

Create a chat application with Ionic and Django – Series – Part three

Day 3 : Django Rest Framework API

In the previous tutorial, we saw how to secure our Chat with JWT Token

In this tutorial, we will implement our API to manage our Chat and Message models.

First we will create a python directory in the root folder of our chattuto project:

mkdir api

Then we will add a new router api route in the chattuto/urls.py file:

from django.conf.urls import include
from django.urls import path
from django.contrib import admin

urlpatterns = [
    path('chat/', include('chat.urls')),
    path('admin/', admin.site.urls),
    path('auth/', include('djoser.urls')),
    path('auth/', include('djoser.urls.jwt')),
    path('api/', include('api.urls')),
]

and add some configuration about Django Rest Framework in our chattuto/settings.py file:

REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
   'rest_framework_simplejwt.authentication.JWTAuthentication',
),
'DEFAULT_FILTER_BACKENDS': (
'django_filters.rest_framework.DjangoFilterBackend',
    'rest_framework.filters.OrderingFilter',
),
'DEFAULT_RENDERER_CLASSES': (
    'rest_framework.renderers.JSONRenderer',
    'rest_framework.renderers.BrowsableAPIRenderer',
),
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
'PAGE_SIZE': 20,
}

To secure our API we ask the framework to use the JWTAuthentication class.

We will also add new libraries to our requirements.txt, one to extend filter possibilities with Rest framework and the other one to avoid CORS issues when we will call our API from Ionic application.
The last one drf-yasg will generate the documentation for our API

Django==3.1.7
pillow==8.0.1
psycopg2==2.8.5 --no-binary psycopg2
channels==3.0.3
channels-redis==3.2.0
django-channels-jwt-auth-middleware==1.0.0
djoser==2.1.0
djangorestframework_simplejwt==4.6.0
djangorestframework==3.12.2
django-filter==2.4.0
django-cors-headers==3.7.0
drf-yasg==1.20.0

We modify once again our chattuto/settings.py file to fullfill requirements of the Corsheaders library

INSTALLED_APPS = [
    'drf_yasg',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'channels',
    'chat',
    'rest_framework',
    'djoser',
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ALLOW_ALL_ORIGINS=True

Let’s modify our chattuto/urls.py file to include a self generated documentation for our API

from django.conf.urls import include
from django.urls import path
from django.contrib import admin
from drf_yasg.views import get_schema_view
from drf_yasg import openapi
from rest_framework import permissions

schema_view = get_schema_view(
    openapi.Info(
        title="API",
        default_version='v1',
        description="API description",
        terms_of_service="https://www.google.com/policies/terms/",
        contact=openapi.Contact(email="contact@snippets.local"),
        license=openapi.License(name="BSD License"),
    ),
    public=True,
    permission_classes=(permissions.AllowAny,),
)
urlpatterns = [
    path('chat/', include('chat.urls')),
    path('admin/', admin.site.urls),
    path('auth/', include('djoser.urls')),
    path('auth/', include('djoser.urls.jwt')),
    path('api/', include('api.urls')),
    path('documentation/', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),
]

Ok now let’s implement our API. Create an api/urls.py file into our api folder:

from django.conf.urls import include, url
from .views import *
from rest_framework.decorators import api_view
from rest_framework.routers import DefaultRouter
router = DefaultRouter()

urlpatterns = [
  url(r'^user/(?P[0-9A-Fa-f-]+)/$', UserDetailView.as_view()),
  url(r'^user/$', UserListView.as_view()),

  url(r'^chat/(?P[0-9A-Fa-f-]+)/$', ChatDetailView.as_view()),
  url(r'^chat/$', ChatListView.as_view()),

  url(r'^message/(?P[0-9A-Fa-f-]+)/$', MessageDetailView.as_view()),
  url(r'^message/$', MessageListView.as_view()),

]

We added some endpoints on User, Chat and Message. now let’s write the api/serializers.py file :

from rest_framework.serializers import ModelSerializer
from chat.models import *

class UserSerializer(ModelSerializer):
    class Meta:
        ref_name="MyCustomUser"
        model = User
        fields = '__all__'

class ChatSerializer(ModelSerializer):
    class Meta:
        model = Chat
        fields = '__all__'

class MessageSerializer(ModelSerializer):
    class Meta:
        model = Message
        fields = '__all__'

The ref_name field on User Meta class is to avoid conflict with the DRF YASG library (which implement user endpoint too).

and finally an api/views.py file:

from django.contrib.auth.models import User
from rest_framework import generics, permissions
from django_filters.rest_framework import DjangoFilterBackend
from rest_framework import filters
from api.serializers import *
from chat.models import *
import logging

# Get an instance of a logger
logger = logging.getLogger('django')

class UserListView(generics.ListCreateAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = User.objects.all()
    serializer_class = UserSerializer
    filterset_fields = ['password','id','email','first_name','last_name','valid']
    filter_backends = [DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter]
    # Filter for connected user
    def get_queryset(self):
        user = self.request.user
        queryset = User.objects.filter(pk=user.id)
        return queryset

class UserDetailView(generics.RetrieveUpdateDestroyAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = User.objects.all()
    serializer_class = UserSerializer

class ChatListView(generics.ListCreateAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = Chat.objects.all()
    serializer_class = ChatSerializer
    filterset_fields = ['id']
    filter_backends = [DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter]

class ChatDetailView(generics.RetrieveUpdateDestroyAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = Chat.objects.all()
    serializer_class = ChatSerializer

class MessageListView(generics.ListCreateAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = Message.objects.all()
    serializer_class = MessageSerializer
    filterset_fields = ['id','type','isRead']
    filter_backends = [DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter]

class MessageDetailView(generics.RetrieveUpdateDestroyAPIView):
    permission_classes = [permissions.IsAuthenticated]
    queryset = Message.objects.all()
    serializer_class = MessageSerializer

And voila if you launch the server and go to url http://127.0.0.1:8000/documentation/

You should see the documentation:

Now you can refer to this documentation to know how to do CRUDS operations for our models User, Chat,Message.

And because we secured the API with JWT, you should not be able to try the endpoints without being authenticated

which is why you can see a Django login button on the interface.

We can also identified ourselves as we learn in previous tutorial:

curl -X POST \
  http://127.0.0.1:8000/auth/jwt/create/ \
  -H 'Content-Type: application/json' \
  -d '{"email": "csurbier@idevotion.fr", "password": "YOURPASSWORD"}'

Don’t forger to replace with your user and password values

And once you have your access token, try to access the Chat api by specifying the JWT token in the Authorization header of your request:

  curl --location --request GET 'http://127.0.0.1:8000/api/chat/' \
--header 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjE2MDYxNTU0LCJqdGkiOiJiZGUwYjZkMTg1MGI0ZDlmYjJmNmViNzgwYzRlMWRjNyIsInVzZXJfaWQiOiI5MDUyYTA4MC0yNGQ4LTRhMGUtOGQ5YS03NDIyMTNjMGJmOTEifQ.H0rU-trZdO_rPSD9HAqU-mlKb8JIY52STo68iDiL8wc'

You should receive a JSON with the list of existing Chat (if you created one before with the admin):

{
    "count": 1,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": "53713a91-e936-4169-9fef-4bc870a0babc",
            "createdAt": "2021-03-08T08:11:30.677821Z",
            "updatedAt": "2021-03-08T08:11:30.677921Z",
            "fromUser": "9052a080-24d8-4a0e-8d9a-742213c0bf91",
            "toUser": "b4db6ca7-21e0-4c83-b56b-f5c86c4cbc43"
        }
    ]
}

Ok now that we have our API ready to use, it’s time to dive into our Ionic application in our next tutorial.

Questions / Answers

What is the name of the library used to create an API ?

Django Rest Framework
Is it possible to use the library without beeing authenticated ?

Yes.
What should we add to our settings to require a JWT authentication ?
Specify the authentication class in the Django Rest Framework configuration dictionnary:
```
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_simplejwt.authentication.JWTAuthentication',
),
```
What should we add to each http query header to be authenticated ?

Add an ‘Authorization: Bearer ‘ parameter.

The post Day 3 : Django Rest Framework API appeared first on Ionic and Django Tutorial.

Day 2 : Save history of chat messages with Django and Django channel

Christophe Surbier — Fri, 13 Aug 2021 15:29:51 +0000

Create a chat application with Ionic and Django – Series – Part two

Day 2 : Save history of chat messages with Django and Django channel

In the previous tutorial, we saw how to setup a Django project, and create models to manage a Chat application. Then we saw how to implement Django channel to have the foundation of our Chat backend server with Django.

In this tutorial, we will use our Chat and Message models to save our chats history, then we will add authentication to secure our application and we will also add an API with Django Rest Framework to allow our Ionic mobile application interacts with our backend.

Using our Django models with Django channel to implement a chat

In previous journey, we saw that we can create and access a chat using any string for our chat name, just by accessing an url like these :

http://127.0.0.1:8000/chat/lobby/
http://127.0.0.1:8000/chat/toto/
http://127.0.0.1:8000/chat/titi/
...

Because in the routing.py file we just define a path like this:

websocket_urlpatterns = [
    re_path(r'ws/chat/(?P\w+)/$', consumers.ChatConsumer.as_asgi()),
]

Now we will secure our channel and allow access only to existing Chat. To do that while etablishing the chat connexion, we will check that the chat identifier exists otherwise the connexion will be rejected.

To do so, we will modify our consumers.py file like this:

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        try:
            self.room_name = self.scope['url_route']['kwargs']['room_name']
            chat = Chat.objects.get(id=self.room_name)
            self.room_group_name = 'chat_%s' % str(chat.id)
            # Join room group
            async_to_sync(self.channel_layer.group_add)(
                self.room_group_name,
                self.channel_name
            )

            self.accept()
        except Chat.DoesNotExist as e:
            print(e)
            return

Nothing really difficult. We get the Chat id from the url path and we check in our Chat model if we have one with such id. If so we can etablish a Chat connexion otherwise an exception is thrown and we return without etablishing connexion.

The Chat id is an UDID field (like any ID in our models)

  id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)

So security is even stronger because it will not be a "guessable" id such as usual integers (1,2…)

Finally our last step is to modify the routing.py url pattern regex to match UDID format:

websocket_urlpatterns = [
    re_path('ws/chat/(?P[-a-zA-Z0-9_]+)/', consumers.ChatConsumer.as_asgi()),
]

And voilà, now if you try to access any url like previous one, it will fails.

To test our modifications, we can use the Django Admin to create a chat, grab the ID and then access our url with this id.

To create a Chat, we need two users. We already created a superuser so we can create a new one, or use the admin to create Users. To do so, just register the User model in the admin.py file :
admin.site.register(User)

Saving messages to have chat history

Now we will modify our consumers.py file to save history of sent messages. To do so we will send a json message containing information required by our models.py such as the refChat, refUser, message, type and extraData

{
    refChat : refChat
    author : refUser
    message : message
    type : 0
    extraData : ""
}

So we first need to modify our room.html file to hardcode values (for now):

document.querySelector('#chat-message-submit').onclick = function(e) {
            const messageInputDom = document.querySelector('#chat-message-input');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                "message"': message,
                "refChat" : "53713a91-e936-4169-9fef-4bc870a0babc",
                "author" : "9052a080-24d8-4a0e-8d9a-742213c0bf91",
                "type" : 0,
                "extraData" : ""
            }));
            messageInputDom.value = '';
        };

I have hardcoded the refChat and author with values that i got from the admin/databases. You need to adapt with your own values.

Now we can modify the receive method of our consumers.py:

def receive(self, text_data):
    data_json = json.loads(text_data)
    print("===Received")
    print(data_json)

    message = data_json['message']
    # save message to database
    self.new_message(data_json)
    # Send message to room group
    async_to_sync(self.channel_layer.group_send)(
        self.room_group_name,
        {
            'type': 'chat_message',
            'message': message
        }
    )

The method expects a JSON, grabs the message from the JSON and transmit to the room as usual, but before that it call a new_message function to save values to database. Here is the code of the new_message function:

def new_message(self,data):
    message = Message()
    message.refChat_id = data["refChat"]
    message.message = data["message"]
    message.author_id = data["author"]
    message.isRead = False
    message.type = data["type"]
    message.extraData = data["extraData"]
    message.save()

Now you can try as usual the chat room to send a message : http://127.0.0.1:8000/chat/53713a91-e936-4169-9fef-4bc870a0babc/

Don’t forget to replace the chatId in the url with your own value

After that go to the Django Admin and check that a value exists in your Message model

Super easy. We will learn later how to use the type and extraData parameters and how to not hardcoded refChat and author while developping the real Ionic application.

Next step, we will secure our Chat to avoid anonymous user connexion.

Secure our chat

To secure our chat, users will need to be authenticated. To manage this easily, we will install the Django Channels Jwt Auth Middleware library. I choose this library because in our Ionic application, users will have to authenticate and we will use JWT token authentication.
First we need to install the library by adding it in our requirements.txt file:

Django==3.1.7
pillow==8.0.1
psycopg2==2.8.5 --no-binary psycopg2
channels==3.0.3
channels-redis==3.2.0
django-channels-jwt-auth-middleware==1.0.0

or install it manually :

pip install django-channels-jwt-auth-middleware==1.0.0

And then we need to modify our asgi.py file to add a JWTAuthMiddlewareStack

# chattuto/asgi.py
import os

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application
import chat.routing
from django_channels_jwt_auth_middleware.auth import JWTAuthMiddlewareStack

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "chattuto.settings")

application = ProtocolTypeRouter({
  "http": get_asgi_application(),
  "websocket": JWTAuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

Now we will modify our consumers.py file to reject each unauthenticated connexion:

def connect(self):
    try:
        user = self.scope['user']
        print("=== user %s" % user)
        if str(user)=="AnonymousUser":
            print("==Not authorized")
            return
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        chat = Chat.objects.get(id=self.room_name)
        self.room_group_name = 'chat_%s' % str(chat.id)
        # Join room group
        async_to_sync(self.channel_layer.group_add)(
            self.room_group_name,
            self.channel_name
        )

        self.accept()
    except Chat.DoesNotExist as e:
        print(e)
        return

If a user is unauthenticated the library provides an AnonymousUser value so we just need to check the value of our user and reject the connexion if it equals.

Now if you try to access the chat room, you will see in the console logs, that an error occurs and that the connexion is closed.

Implementing an API with Dango Rest Framework

At this step of the tutorial, we need to implement the JWT token authentication to be able to access and use our chat room, but we also want to manipulate the Chat and Message models to do C.R.U.D operations (Create, Read, Update, Delete). It’s time to implement an API for that.

This API will be the link between our Django backend and our Ionic application to communicate.

As a reminder JWT (Json Web Token) is an authentication system based on secured token. To obtain a token, the user needs to provide his credentials. Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources that are permitted with that token.

Django Simple JWT is a simple package to manage JWT authentication with Django.

Django DJOSER is another package with more features and which include Django Simple JWT. So we will use this package.

Django Rest Framework is a powerful and flexible toolkit for building Web APIs.

Let’s add them to our requirements.txt

djoser==2.1.0
djangorestframework_simplejwt==4.6.0
djangorestframework==3.12.2

Then we need to modify our settings.py and INSTALLED_APPS dictionnary to list them:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'channels',
    'chat',
    'rest_framework',
    'djoser',
]

And add new routes to our urls.py file :

from django.conf.urls import include
from django.urls import path
from django.contrib import admin

urlpatterns = [
    path('chat/', include('chat.urls')),
    path('admin/', admin.site.urls),
    path('auth/', include('djoser.urls')),
    path('auth/', include('djoser.urls.jwt')),
]

Ok now with all that in place, we can use Django DJOSER to get our JWT token. Available endpoints can be found in the documentation but we will focus on the:

/jwt/create/ (JSON Web Token Authentication)
- Use to authenticate and obtain a JWT TOKEN
/jwt/refresh/ (JSON Web Token Authentication)
- Use to refresh an expired JWT Token
/jwt/verify/ (JSON Web Token Authentication)
- Use to verify if a JWT Token is still valid

JWT Tokens expires very quickly (5 minutes). It’s possible to modify some configuration values in the settings.py

from datetime import timedelta

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=30),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=180),
    'ROTATE_REFRESH_TOKENS': True,
    'BLACKLIST_AFTER_ROTATION': True,

    'ALGORITHM': 'HS256',
    'SIGNING_KEY': SECRET_KEY,
    'VERIFYING_KEY': None,
    'AUDIENCE': None,
    'ISSUER': None,

    'AUTH_HEADER_TYPES': ('Bearer',),
    'USER_ID_FIELD': 'id',
    'USER_ID_CLAIM': 'user_id',

    'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken',),
    'TOKEN_TYPE_CLAIM': 'token_type',

    'JTI_CLAIM': 'jti',

    'SLIDING_TOKEN_REFRESH_EXP_CLAIM': 'refresh_exp',
    'SLIDING_TOKEN_LIFETIME': timedelta(minutes=30),
    'SLIDING_TOKEN_REFRESH_LIFETIME': timedelta(days=180),
}

Ok now let’s try to authenticate a User. We can try with one of the superuser we created earlier.

curl -X POST \
  http://127.0.0.1:8000/auth/jwt/create/ \
  -H 'Content-Type: application/json' \
  -d '{"email": "csurbier@idevotion.fr", "password": "YOURPASSWORD"}'

Don’t forger to replace with your user and password values

And you should get a JSON response:

{
"refresh":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTYzMTUyMDg2MSwianRpIjoiNzc0Mjk1Y2I4OTA1NDZlMzkyM2Y0OWI1ZGVhZTNmM2EiLCJ1c2VyX2lkIjoiOTA1MmEwODAtMjRkOC00YTBlLThkOWEtNzQyMjEzYzBiZjkxIn0.lwvDFS-2CR_xKHBPe4rvPnT_IKVac1oVtTaM-Abuo2I",
"access":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjE1OTcwNjYxLCJqdGkiOiJjNGQ4ZTkzZjhhZjM0MzcxODMxYWM1MDNkZGJjMjk5NiIsInVzZXJfaWQiOiI5MDUyYTA4MC0yNGQ4LTRhMGUtOGQ5YS03NDIyMTNjMGJmOTEifQ.__IVxioV8RWahcdpC6GLeEUuk52r-UZ4zFoNgDoCzPM"
}

The response contains the access token (our JWT token) and the refresh token to use when the access token expires.

If credentials are not correct or if the TOKEN has expired, the endpoint will return an HTTP 401 response (unauthorised).

To get a new token just use the refresh token

curl -X POST \
  http://127.0.0.1:8000/auth/jwt/refresh/ \
  -H 'Content-Type: application/json' \
  -d '{"refresh": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTYzMTUyMDg2MSwianRpIjoiNzc0Mjk1Y2I4OTA1NDZlMzkyM2Y0OWI1ZGVhZTNmM2EiLCJ1c2VyX2lkIjoiOTA1MmEwODAtMjRkOC00YTBlLThkOWEtNzQyMjEzYzBiZjkxIn0.lwvDFS-2CR_xKHBPe4rvPnT_IKVac1oVtTaM-Abuo2I"}'

In next tutorial, we will continue to implement our Django Rest Framework API to have all required stuff to be able to start our Ionic application.

Questions / Answers

How to avoid having integers as primary keys in a model ?
Use an UDID by implement this line of code in the model
```
id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
```
What is the use of JWT for ?

JSON WEB TOKEN is used to secure API
What is an access token ?

An access token is obtained with user credentials and is used on each request to access resources.
What is the use of a refresh token ?

An access token is expiring after some delay. A Refresh token is used to get a new fresh access token

The post Day 2 : Save history of chat messages with Django and Django channel appeared first on Ionic and Django Tutorial.

Day 1: Setup and design Backend

Christophe Surbier — Fri, 13 Aug 2021 14:40:57 +0000

What will we build ?

This tutorials will focus on how to create a real world mobile chat application with Ionic 5 / Angular 12, Capacitor 3 and Django 3. The Chat application will manage private chat between two persons and is not a group chat application.

For this application, we can list these main functionalities :

Login / Register / Forget password screens
List of chats screen with search user features
Chat screen : real time message with WebSocket, loading previous messages, sending attachments
Receiving push notifications

So this is what this book is about: We will learn each steps required to create a real world chat mobile application with it’s associated backend in a day to day process.

On backend, we will use Django and Django channels to have a socket based chat and we will also learn how to save and retrieve chat history.

On frontend, we will develop a Ionic application with angular framework, which will communicate with our backend to manage the chats. we will deploy the application on mobile devices using Capacitor.

Ready to start ?

Day 1 : setup and design Backend

First we will focus on the backend development before diving into the Ionic part.

You can find the source code for this day one journey in GitHub

Setup : Software required

Before diving into the subject of this book, we need to install software and set up our environment for the backend part. If you are familiar with Django development you can skip this section.

Python 3

All the development will be done with python 3 so i will assume that python 3 is already install on your computer. If not, you will find tutorials on the internet on how to install it.

Pip

PIP is the Python Package Installer and is really helpful to install Django and all the libraries required to develop any Django project.

If you are on a Mac just open a terminal and enter

sudo easy_install pip

Virtualenv

Virtualenv is a tool to create isolated python environment. It is a recommended and standard way to develop Django projetcs. So let’s begin.
First go in a directory where you would like to create the backend.

cd Programmation
mkdir ChatTuto
mkdir ChatTuto/Backend
mkdir ChatTuto/Frontend

I create a ChatTuto directory and inside this directory, i create the Backend in which we will develop our backend and a Frontend directory in which we will develop the Ionic application.

To install virtualenv

sudo pip install virtualenv

And now we create the virtual environment into a directory named venv

virtualenv -p python3 venv

Once installed, we need to activate the environment using the command:

source venv/bin/activate

Django

We can install Django 3

pip install Django==3

And now we can create our django backend which will be called chattuto

django-admin startproject chattuto
cd chattuto

Ok now we can begin to implement our models that will be used to deal with our Chat application.

Conception

For each mobile app that you need to develop, the process is always the same. Starting from the storyboard of the application, we can deduce which entities will be needed. From these entities, we can conceptualize the models, the back-office (web administration) required to manage data and finally as last step, design the API which will be consumed by the frontend application.

Usually, i don’t recommend to implement the API without having seen application storyboards. Because it is better to implement API endpoints that will fulfill each screen requirements and then improve drastically the performance.
If you don’t proceed that way, to provide data to a screen, then may be you will need to make multiple http requests whereas only one request could have done the job.

For our Chat application, we need to display a list of chats and messages inside a choosen chat. And of course a chat is between two users, so we can easily deduce the following models:

User
Chat
Message

This is a good start to design our Django models.

Designing models

We need to create our first app in Django to declare our models and then we will add a backoffice which will be used by the administrator of the mobile application. To create this chat application in Django:

python manage.py startapp chat

Inside the newly created chat directory, Django will initialize some standard files for us. At this stage, we are interested with the models.py file.

I didn’t mentioned earlier but i use PyCharm to develop all my Django projects. You will find a community edition (FREE to use) or a PRO edition. But you can also use Eclipse with PyDev plugin, or VSCode. It’s really up to you.

User model

Most of mobile application have users who can subscribe or login, so this will be the first entity we need. By default, Django includes a User model entity and all required methods to deals with authentification.

But by default in a Django project, the field used to manage authentication is a username whereas for a mobile application it makes more sense to use an email for authentication process.

However it is possible to easily modify the Django default mechanism to use an email. To do so we have to extend the default User entity.

So let’s do it:

class UserManager(BaseUserManager):
    use_in_migrations = True

    def _create_user(self, email, password, **extra_fields):
        """
        Creates and saves a User with the given email and password.
        """
        if not email:
            raise ValueError('The given email must be set')
        email = self.normalize_email(email)
        user = self.model(email=email, **extra_fields)
        user.set_password(password)
        user.save(using=self._db)
        return user

    def create_user(self, email, password=None, **extra_fields):
        extra_fields.setdefault('is_superuser', False)
        return self._create_user(email, password, **extra_fields)

    def create_superuser(self, email, password, **extra_fields):
        extra_fields.setdefault('is_superuser', True)

        if extra_fields.get('is_superuser') is not True:
            raise ValueError('Superuser must have is_superuser=True.')

        return self._create_user(email, password, **extra_fields)

class User(AbstractBaseUser, PermissionsMixin):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    email = models.EmailField(_('email address'), unique=True)
    first_name = models.CharField(_('first name'), max_length=30, blank=True)
    last_name = models.CharField(_('last name'), max_length=30, blank=True)
    date_joined = models.DateTimeField(_('date joined'), auto_now_add=True)
    is_active = models.BooleanField(_('active'), default=True)
    is_staff = models.BooleanField(_('active'), default=True)
    avatar = models.ImageField(upload_to='avatars/', null=True, blank=True)
    lastConnexionDate = models.DateTimeField(null=True, blank=True)
    valid = models.BooleanField(default=True)

    objects = UserManager()

    USERNAME_FIELD = 'email'
    REQUIRED_FIELDS = []

    class Meta:
        verbose_name = _('user')
        verbose_name_plural = _('users')
    createdAt = models.DateTimeField(auto_now_add=True)
    updatedAt = models.DateTimeField(auto_now=True)

    @property
    def last_login(self):
        return self.lastConnexionDate

    def __str__(self):
        return u'%s' % (self.email)

Now User can be authenticated with email because we set

USERNAME_FIELD = 'email'

The lastConnexionDate can be used to track last connexion of the user into the mobile application.

Chat models

A chat is a dialog conversation between two users. The dialog is composed of a list of text messages but it also can be something else than text such as photos, videos, …
We can deduce that we will need two more models to store Chats and Messages.

class Chat(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    fromUser = models.ForeignKey(User, db_index=True,on_delete=models.SET_NULL, null=True,related_name="fromuser")
    toUser = models.ForeignKey(User, db_index=True,on_delete=models.SET_NULL, null=True,related_name="toUser")
    createdAt = models.DateTimeField(auto_now_add=True)
    updatedAt = models.DateTimeField(auto_now=True)
    unique_together = (("fromUser", "toUser"),)

    def __str__(self):
        return u'%s - %s' % (self.fromUser,self.toUser)

class Message(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    refChat = models.ForeignKey(Chat, db_index=True,on_delete=models.CASCADE)
    message = models.TextField()
    msg_type = (
        (0, "TEXT"),
        (1, "GEOLOC"),
        (2, "PHOTO"),
    )
    type = models.IntegerField(choices=msg_type, default=0)
    extraData = models.CharField(default='', null=True, blank=True, max_length=255)
    author = models.ForeignKey(User, db_index=True,related_name='author',on_delete=models.SET_NULL,null=True)
    isRead = models.BooleanField(default=False)
    createdAt = models.DateTimeField(auto_now_add=True)
    updatedAt = models.DateTimeField(auto_now=True)

    def __str__(self):
        return u'%s - %d' % (self.refChat,self.type)

A chat must be unique between two users so we set a unique_together key based on users primary keys.

A message refers to a chat, can be a text, a geolocation position (using latitude/longitude) or a photo. We could extend this message type based on the application requirements like videos, sound… And of course a message has an author (the User who wrotes the message)

Setup database

To create our models, we need to install a database. I will use PostgreSQL with postgis extension.

On Mac, you will need Postres software and you can use Postico on your local machine while developping. It’s quite easy to use and install.

On Windows or Linux, you will have to setup your database which can be quite painful. To connect to your database, you can use the free DBeaver software.

I will assume that this step is done and will move forward on to next section.

I strongly recommend to use Clever cloud services, a french provider that i will use for these tutorials. With Clever cloud services, you can focus on your development features and not architecture. They offer a FREE database hosting for development. It’s like Heroku but cheaper and more performant.

Configure Django project

We can configure our Django project to use our database. First we will need the psycopg2 package which is the PostgreSQL python driver. Let’s add it to our requirements.txt file

Django==3.1.7
pillow==8.0.1
psycopg2==2.8.5 --no-binary psycopg2

I’m using the non binary version to be sure that the driver will be accurate with the server system libraries (it was a recommendation from the Clever cloud team).

As you could have notice, i’m always specifiying the version of the library that i want to use. If you don’t do that while deploying your project on a server, the latest version of libraries will be installed and could lead to a bug (if something changed in a library). Specifying the version will avoid that.

Don’t forget to install the libraries

pip install -r requirements.txt

Now, we can configure Django to use our database. We edit the settings.py file inside the chattuto directory and will replace the DATABASES section with:


AUTH_USER_MODEL = "chat.User"

# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases
POSTGRESQL_ADDON_URI = os.getenv("POSTGRESQL_ADDON_URI")
POSTGRESQL_ADDON_PORT = os.getenv("POSTGRESQL_ADDON_PORT")
POSTGRESQL_ADDON_HOST = os.getenv("POSTGRESQL_ADDON_HOST")
POSTGRESQL_ADDON_DB = os.getenv("POSTGRESQL_ADDON_DB")
POSTGRESQL_ADDON_PASSWORD = os.getenv("POSTGRESQL_ADDON_PASSWORD")
POSTGRESQL_ADDON_USER = os.getenv("POSTGRESQL_ADDON_USER")
REDIS_URL= os.getenv("REDIS_URL")
DATABASES = {
    'default': {
        'ENGINE': 'django.contrib.gis.db.backends.postgis',
        'NAME': POSTGRESQL_ADDON_DB,
        'USER': POSTGRESQL_ADDON_USER,
        'PASSWORD': POSTGRESQL_ADDON_PASSWORD,
        'HOST': POSTGRESQL_ADDON_HOST,
        'PORT': POSTGRESQL_ADDON_PORT,
        'CONN_MAX_AGE': 1200,
    }
}

I’m getting my database connexion parameters from environment variables and then set the databases dictionary keys with these values.

Using environment variables it’s easy to switch from a development database to a production database. Values are not hardcoded.

Please notice the line AUTH_USER_MODEL = "chat.User". Since we override the default Django User entity, this line is very important and tells Django that it needs to use our custom model.

With PyCharm you can declare your environment variables in the settings of your project, or you can use a environment.env file and use this plugin to declare them, which is more easy.

Within my environment.env file, i declare my database connection parameters like this:

POSTGRESQL_ADDON_URI=postgresql://u6rogoiqgpupp3mvhqi9:F1Kc6J1pKEt5X28iX4Fn@bx8gb6agpf58jh3rtupa-postgresql.services.clever-cloud.com:5432/bx8gb6agpf58jh3rtupa
POSTGRESQL_ADDON_PORT=5432
POSTGRESQL_ADDON_HOST=bx8gb6agpf58jh3rtupa-postgresql.services.clever-cloud.com
POSTGRESQL_ADDON_DB=b9pgqzgccizfpklha4gv
POSTGRESQL_ADDON_USER=u6rogoiqgpupp3mvhqi9
POSTGRESQL_ADDON_PASSWORD=
DEBUG=True
MEDIA_URL_PREFIX=/media
STATIC_URL_PREFIX=/static

Don’t forget to replace these values with your own database connexion values

We could also do the same for the DEBUG variable

DEBUG = os.getenv("DEBUG")

and add the DEBUG value in our environment.env file:

DEBUG=True

We can try to run our Django project with PyCharm and if database connexion is OK, we should see the following:

Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
August 07, 2020 - 11:24:32
Django version 3.0, using settings 'chattuto.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

To launch Django with command line, you will need to export your environment variables and then run in a terminal:

python manage.py runserver

To export my environment variables, i usually use a text file and then source it (on Mac or Linux).

Create database tables

At this point, Django tells us that we need to run migrations. You can learn more about migrations here but basically it means that we have modifications in our models.py file that are not reflected on the database which is true since we haven’t created it yet.

First we need to edit again the settings.py file to add our application chat to the INSTALLED_APPS dictionnary:

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'chat'
]

Now because we have overrided the default Django User, we first need to make a migrations with our chat application (which will tell Django where to find the User model) and then we can migrate to create all other tables required by Django.
So let’s do it by typing in a terminal:

python manage.py makemigrations chat
python manage.py migrate

Implement Chat server with Websockets and django channels

[swpm_protected format_protected_msg=1 custom_msg=’This content is for members only ! You can learn more here here to access the content’]
To implement our Chat backend we will use websockets which are more performant than HTTP requests and are asynchronous.
To implement websockets within Django, [**Channels**](https://channels.readthedocs.io/en/stable/) has been introduce recently. You can read more about the definition on the channel website documentation.

Let’s add channel and daphne to our **requirements.txt** file

Django==3.1.7
pillow==8.0.1
psycopg2==2.8.5 --no-binary psycopg2
daphne==3.0.1
channels
channels_redis

and install it

pip install -r requirements.txt

From now and to finish this day one tutorial, we will just follow the [Channel Tutorials](https://channels.readthedocs.io/en/stable/tutorial/index.html) part 1 to 2. We will stop at tutorial two, because we don’t want our chat server to be asynchronous.

Before diving into that, we will create a superuser for our Django backend:

python manage.py createsuperuser

and we will implement our **admin.py** file to be able to manage Chat or Message models thru the admin:

from django.contrib import admin

from chat.models import *


class ChatAdmin(admin.ModelAdmin):
    fieldsets = [
        (None, {'fields': ['fromUser','toUser']}),
    ]
    list_display = ('fromUser','toUser','createdAt','updatedAt',)
    search_fields = ('fromUser__email','toUser__email','fromUser__last_name','toUser__last_name',)
    raw_id_fields = ('fromUser','toUser',)
    list_select_related = ('fromUser','toUser',)


class MessageAdmin(admin.ModelAdmin):
    fieldsets = [
        (None, {'fields': ['refChat','message','author','isRead','type','extraData']}),
    ]
    list_display = ('refChat','message','author','isRead','createdAt',)
    ordering = ('-createdAt',)
    search_fields = ('message','author__email',)
    raw_id_fields = ('author',)
    list_select_related = ('refChat','author',)

# Register your models here.
admin.site.register(Chat,ChatAdmin)
admin.site.register(Message,MessageAdmin)

Ok so now as i said we will just follow the [**Channel tutorials**](https://channels.readthedocs.io/en/stable/tutorial/index.html) to learn basics on Django channels.

### Adding an index view

Inside our **chat** directory, let’s create a template directory containing a **chat** directory

mkdir templates
mkdir templates/chat

Then we create an **index.html** file with the code





    
    Chat Rooms


    What chat room would you like to enter?

This page will let us specify wich **chat** room we would like to join.
Let’s write the Django view which will render this template. Edit the **views.py** file inside the **chat** directory (not the one from the template directory but from the Django chat application)

# chat/views.py
from django.shortcuts import render

def index(request):
    return render(request, 'chat/index.html')

Then we need to create an url for this view. Edit or create an **urls.py** file if it doesn’t exists, and write

# chat/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

The next step is to point the root URLconf at the chat.urls module. In **chattuto/urls.py**, add an import for django.conf.urls.include and insert an include() in the urlpatterns list, so you have:

from django.conf.urls import include
from django.urls import path
from django.contrib import admin

urlpatterns = [
    path('chat/', include('chat.urls')),
    path('admin/', admin.site.urls),
]

Now we can launch the server

python manage runserver

And go to the following url : http://127.0.0.1:8000/chat/

You should see the text “What chat room would you like to enter?” along with a text input to provide a room name.

### Adding the channel library

Now it’s time to integrate Channels.

Let’s start by creating a root routing configuration for Channels. A Channels routing configuration is an ASGI application that is similar to a Django URLconf, in that it tells Channels what code to run when an HTTP request is received by the Channels server.

Start by adjusting the **chattuto/asgi.py** file to include the following code:

# chattuto/asgi.py
import os

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application
import chat.routing

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "chattuto.settings")

application = ProtocolTypeRouter({
  "http": get_asgi_application(),
  "websocket": AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

Now add the Channels library to the list of installed apps. Edit the **chattuto/settings.py** file and add ‘channels’ to the INSTALLED_APPS **settings.py** file

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'channels',
    'chat'
]

We also need to point Channels at the root routing configuration. Edit the **chattuto/settings.py** file again and add the following line:

# Channels
ASGI_APPLICATION = 'chattuto.asgi.application'

With Channels now in the installed apps, it will take control of the runserver command, replacing the standard Django development server with the Channels development server.

python manage runserver

And we will see in the console logs :

Django version 3.1.7, using settings 'chattuto.settings'
Starting ASGI/Channels version 3.0.4 development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

The important line is **Starting ASGI/Channels**

### Adding the room view

Create a new file chat/templates/chat/room.html





    
    Chat Room


    

    

    
    {{ room_name|json_script:"room-name" }}

Then we can add the view function for the room view in **chat/views.py**

# chat/views.py
from django.shortcuts import render

def index(request):
    return render(request, 'chat/index.html')

def room(request, room_name):
    return render(request, 'chat/room.html', {
        'room_name': room_name
    })

And create the route for the room view in **chat/urls.py**:

# chat/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('/', views.room, name='room'),
]

We can start the server again :

python manage runserver

Go to http://127.0.0.1:8000/chat/ in your browser and to see the index page.

Type in “lobby” as the room name and press enter. You should be redirected to the room page at http://127.0.0.1:8000/chat/lobby/ which now displays an empty chat log.

Type the message “hello” and press enter. Nothing happens. In particular the message does not appear in the chat log. Why?

The room view is trying to open a WebSocket to the URL ws://127.0.0.1:8000/ws/chat/lobby/ but we haven’t created a consumer that accepts WebSocket connections yet. If you open your browser’s JavaScript console, you should see an error that looks like:

WebSocket connection to 'ws://127.0.0.1:8000/ws/chat/lobby/' failed: Unexpected response code: 500

### Creating a consumer

When Django accepts an HTTP request, it consults the root URLconf to lookup a view function, and then calls the view function to handle the request. Similarly, when Channels accepts a WebSocket connection, it consults the root routing configuration to lookup a consumer, and then calls various functions on the consumer to handle events from the connection.

We will write a basic consumer that accepts WebSocket connections on the path /ws/chat/ROOM_NAME/ that takes any message it receives on the WebSocket and echos it back to the same WebSocket.

Create a new file **chat/consumers.py**

# chat/consumers.py
import json
from channels.generic.websocket import WebsocketConsumer

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.accept()

    def disconnect(self, close_code):
        pass

    def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        self.send(text_data=json.dumps({
            'message': message
        }))

We need to create a routing configuration for the chat app that has a route to the consumer. Create a new file **chat/routing.py**:

from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/(?P\w+)/$', consumers.ChatConsumer.as_asgi()),
]

Let’s verify that the consumer for the **/ws/chat/ROOM_NAME/** path works. Run migrations to apply database changes (Django’s session framework needs the database) and then start the Channels development server:

python manage.py migrate
python manage.py runserver

Go to the room page at http://127.0.0.1:8000/chat/lobby/ which now displays an empty chat log.

Type the message “hello” and press enter. You should now see “hello” echoed in the chat log.

However if you open a second browser tab to the same room page at http://127.0.0.1:8000/chat/lobby/ and type in a message, the message will not appear in the first tab. For that to work, we need to have multiple instances of the same ChatConsumer be able to talk to each other. Channels provides a channel layer abstraction that enables this kind of communication between consumers.

A channel layer is a kind of communication system. It allows multiple consumer instances to talk with each other, and with other parts of Django.

We will use **REDIS** has a channel layer. Once again i will use [**Clever cloud**](https://www.clever-cloud.com/en/) to setup a Redis server really easily.

Then i just need to update the **channel layer** config in my **chattutu/settings.py** file:

REDIS_URL= os.getenv("REDIS_URL")
# Channels
ASGI_APPLICATION = 'chattuto.asgi.application'
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [REDIS_URL],
        },
    },
}

and declare a new environment variable based on the value provided by the **Clever cloud** add-on:

export REDIS_URL='redis://:@btka0rdhzdplteztka9i-redis.services.clever-cloud.com:3067'

Now we can edit the **consumers.py* file again and replace the existing code with:

# chat/consumers.py
import json
from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name

        # Join room group
        async_to_sync(self.channel_layer.group_add)(
            self.room_group_name,
            self.channel_name
        )

        self.accept()

    def disconnect(self, close_code):
        # Leave room group
        async_to_sync(self.channel_layer.group_discard)(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        # Send message to room group
        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )

    # Receive message from room group
    def chat_message(self, event):
        message = event['message']

        # Send message to WebSocket
        self.send(text_data=json.dumps({
            'message': message
        }))

When a user posts a message, a JavaScript function will transmit the message over WebSocket to a ChatConsumer. The ChatConsumer will receive that message and forward it to the group corresponding to the room name. Every ChatConsumer in the same group (and thus in the same room) will then receive the message from the group and forward it over WebSocket back to JavaScript, where it will be appended to the chat log.

And voila.

>Remember we use the the [**Channel tutorials**](https://channels.readthedocs.io/en/stable/tutorial/index.html) to learn basics on Django channels so please refer to it for more information or clarifications.

You can find the source code for this day one journey in [GitHub](https://github.com/csurbier/chattuto.git)

In next tutorial **Day two** we will learn how to modify our **Channel** to use our models **Chat** and **Message** and to implement persistent messages. We will also learn how to secure our **Chat server** with authentication and we will setup an API with **Django Rest Framework**.

## Questions / Answers

1. What are Django models ?

>Models are classed which will represent your entities and will be used to create the database tables.
2. By default, which field is using Django for authenticating users : Username or email ?
>Username
3. What is the library name to create web sockets with Django ?
>Django Channels
4. What do we have to setup to enable multiple asynchronous connection with Django Channels ?
>A channel layer

[/swpm_protected]

The post Day 1: Setup and design Backend appeared first on Ionic and Django Tutorial.

How to validate a phone number by sending an SMS code using Ionic,Django and SmsApi ?

Christophe Surbier — Mon, 22 Feb 2021 13:25:17 +0000

In this tutorial, we will learn how to enter an international phone number within a Ionic application, and how to validate this phone number by sending an SMS code using a Django backend and SMSAPI services.

Please notice, you should have read previous tutorials to know how to create and manage API services with Ionic (like checking the network, displaying loading alert, passing data to pages) or how to manage API with Django and Rest framework.

You can find source code on my Github

How to enter an international phone number using ionic ?

First we will create a new Ionic/Capacitor project called PhoneValidation

ionic start PhoneValidation blank --capacitor --project-id=phonevalidation --package-id=com.idevotion.phonevalidation

Next we will install and use an external library to deal with international phone number (no need to re-invent the wheel).

npm install --force ion-intl-tel-input ionic-selectable flag-icon-css google-libphonenumber --save

To use this library we need to import it. So we will modify the home.module.ts file to import the library and also to use Reactive Forms with Angular.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import { IonIntlTelInputModule } from 'ion-intl-tel-input';

 @NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    IonIntlTelInputModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Then we will modify the home.page.html to use the library within a reactive form


  
    
      Phone Validation
    
  



  
    
      Tel Input
      
      
    
    
      Validate

and the home.page.ts file to declare our form and select some preferred countries.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  formValue = {phoneNumber: '', test: ''};
  form: FormGroup;
  preferredCountries = ["fr","gb","us"]
  constructor() { }

  ngOnInit() {
    this.form = new FormGroup({
      phoneNumber: new FormControl({
        value: this.formValue.phoneNumber
      })
    });
  }

  get phoneNumber() { return this.form.get('phoneNumber'); }

  onSubmit() {
    console.log(this.phoneNumber.value);
  }

}

To display country flag into the modal list of countries, we need to import a specific css file. To do so, we need to edit our global.scss file and add the line

@import "node_modules/flag-icon-css/sass/flag-icon.scss";

Ok so now we can enter a phone number and when clicking on the validate button, the onSubmit function will be called and will display the phone number information

{internationalNumber: "+34 695 96 XX XX", nationalNumber: "695 96 XX XX", isoCode: "es", dialCode: "+34"}

At this point we need to send the phone number information to our Django backend, which will send an SMS with a code that the user will need to enter on a new page to validate his phone number.

Let’s see first how we can send an sms using Django and a sms provider like www.smsapi.com or whatever sms provider you will choose.

How to send an sms code using Django and SMSAPI ?

As we learned in previous tutorials how to create and manage a backend using Django (and deploying it using Clever cloud), we will just focus on how to send the Sms code.

To use SMSAPI with Django, we need to edit our requirements.txt file and add the library

smsapi-client==2.4.2

Then we will create a new endpoint in our API by adding in our urls.py file

 url(r'^sendSmsCode/$',
        sendSmsCode,
        name='sendSmsCode'),

And then we will write the view sendSmsCode which will generate a code, send it by sms and return a JSON response to our Ionic application with the code generated:

def generateSmsCode():
    # select a random sample without replacement
    codeSms = ''.join(random.choice(string.digits) for _ in range(4))
    return codeSms

@api_view(['GET'])
def sendSmsCode(request):
    from phonevalidation.settings import SMSAPI_API_KEY
    client = SmsApiComClient(access_token=SMSAPI_API_KEY)
    phone = request.GET.get('phone', None)
    code = generateSmsCode()
    message="SMS code:"+code
    try:
      client.sms.send(to=phone, message=message)
      smsSent = SMSSent()
      smsSent.phoneNumber = phone
      smsSent.codeEnvoye = code
      smsSent.save()
      json = {"status":"OK","code": code}
    except Exception as e:
        print(e)
        json = {"status": "KO"}

    return JsonResponse(json)

Of course you need to create and set a valid SMSAPI_API_KEY to use smsapi.com service.

How to check and validate an SMS code using Ionic ?

Now on our submit method, we can:

. check if network is available

. call our new API and passed the phone number that the user entered.

. check our JSON response status. If it’s ok we can go to a new page/url : sms/code otherwise we should display an error to the end user.

 onSubmit() {
    console.log(this.phoneNumber.value);
    if (this.apiService.networkConnected){
      let formatedNumber = this.phoneNumber.value.internationalNumber
      this.apiService.sendSmsCode(formatedNumber).subscribe((results)=>{
        if (results){
          let statuts = results["status"]
          if (statuts=="OK"){
            let code = results["code"]
            this.navData.setDataWithoutId({
                  "phoneNumber": formatedNumber,
                  "smscode": code
                })
                this.router.navigate(['/sms-code']).catch(err => console.error(err));
          }
          else{
            //Display error
          }

        }
        else{
          //Display error
        }
      })
    }    
  }

Now we need to create the page that will ask the sms code received and will verify it with the code sent by our backend.

First let’s add our new page

ionic g page SmsCode

Now let’s edit our sms-code.page.html


  
 
   
 
 Code
  



  
    
      Validation code
      Please enter the code send to 
        
Phone: {{phoneNumber}}

and the sms.code.page.scss tohave our digit input design

ion-list {
    &[form] {
        ion-item {
            &.item {
                --border-width: 1px;
                --border-radius: 5px;
                --min-height: 60px;
                --ion-border-color: rgba(0, 0, 0, 0.10);

                ion-select {
                    --padding-start: 0;
                    width: 100%;
                    //font-size: 1.8rem;
                    max-width: unset;
                }

                &+.item {
                    margin-top: 16px;
                }
            }

        }

        ion-row {
            &[lrm] {
                margin-left: -8px;
                margin-right: -8px;
            }

            ion-col {
                padding: 8px;
                padding-top: 16px;
            }
        }
    }

 &[formCodeValidate] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 310px;
    margin-left: auto;
    margin-right: auto;

    ion-item {
        &.item {
            --border-width: 1px;
            --border-radius: 5px;
            --min-height: 60px;
            max-width: 55px;
            text-align: center;
            font-size: 18px;
        }

    }
    }
}

and the sms-code.page.ts to verify if the code entered by the user is matching the code sent by our backend

import { ChangeDetectorRef, Component, NgZone, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Platform, ToastController } from '@ionic/angular';
import { NavDataServiceService } from '../services/nav-data-service.service';

@Component({
  selector: 'app-sms-code',
  templateUrl: './sms-code.page.html',
  styleUrls: ['./sms-code.page.scss'],
})
export class SmsCodePage implements OnInit {

  phoneNumber= ''
  verificationId="1245";
  code = Array();
  started=false;
  verificationInProgress=false;
  @ViewChild('codesInpunt0') codesInpunt0;
  @ViewChild('codesInpunt1') codesInpunt1;
  @ViewChild('codesInpunt2') codesInpunt2;
  @ViewChild('codesInpunt3') codesInpunt3;

  constructor(
    public router: Router,
    public navData:NavDataServiceService,
    public platform : Platform,
    public toastCtrl: ToastController) {
      this.started=false;
  }

  ngOnInit() {

      let data = this.navData.getDataWithoutId()
      this.phoneNumber = data['phoneNumber'];
      this.verificationId = data['smscode'];
      console.log("route special "+this.phoneNumber+" verif code "+this.verificationId)

  }

  ionViewDidEnter() {
    this.codesInpunt0.setFocus();
  } 

  changeFocus(inputToFocus) {
    switch (inputToFocus) {
      case 1:
        this.codesInpunt1.setFocus();
        break;

      case 2:
        this.codesInpunt2.setFocus();
        break;

      case 3:
        this.codesInpunt3.setFocus();
        break;
       case 4:
        let enteredCode = this.code[0]+this.code[1] + this.code[2] + this.code[3]   ;
        this.resetCode()
        if (this.verificationInProgress==false){
          this.verificationInProgress=true;
          this.activate(enteredCode)
        }
       break;

    }

  }

  activate(enteredCode) {
    if (enteredCode){
      console.log("Compare code sms "+enteredCode+" avec "+this.verificationId)
      if (enteredCode.length == 4) {
        console.log(enteredCode);
        console.log("veificationCode is" + this.verificationId);
        if (enteredCode==this.verificationId){
          //Good job
        }
        else{

          this.presentToastError()
        }
      }
      else{
        this.presentToastError()
      }
    }
    else{
      this.presentToastAgain()
    }
  }

  resetCode(){
      this.code[0]="";
      this.code[1]="";
      this.code[2]="";
      this.code[3]="";

  }

  async presentToastAgain(){
    let toast = await this.toastCtrl.create({
      message: "Please enter code again",
      duration: 2000,
      position: 'bottom'
    });

    toast.present();
    this.verificationInProgress=false;
    this.resetCode()
    this.codesInpunt0.setFocus();
  }

  async presentToastError() {
    this.verificationInProgress=false;
    this.codesInpunt0.setFocus();
    let toast = await this.toastCtrl.create({
      message: "Code invalid",
      duration: 2000,
      position: 'bottom'
    });
   toast.present();
  }

}

The post How to validate a phone number by sending an SMS code using Ionic,Django and SmsApi ? appeared first on Ionic and Django Tutorial.