John David

John David

1560839362

Add authentication, typing indicators and file attachments to an Ionic 4 chat app

In this tutorial, we’ll start by securing the UI of our application using Angular guards then we’ll learn how to add support for typing indicators and file attachments in the Ionic 4 and Chatkit application

We’ve built in these first tutorials:

You can find the complete source code of this application from this GitHub repository.

Most mainstream chat applications nowadays offer the ability to send files like texts or images among other formats. Typing indicators are also a popular feature in many popular chat applications.

Thanks to Chatkit, you can add support for these features with a few lines of code. In this tutorial, we’ll be working on the frontend project so you either follow the steps from the previous tutorials or simply clone the GitHub repository and follow the instructions to setup the backend and frontend apps.

These are the instructions. First clone the project:

    $ git clone https://github.com/techiediaries/chatkit-nestjs-ionic.git


Next, navigate inside the project’s frontend folder and install the dependencies:

    $ cd chatkit-nestjs-ionic/frontend
    $ npm install


Next, open the frontend/src/app/chat.service.ts file and update YOUR_INSTANCE_LOCATOR and YOUR_ROOM_ID with your own values that you can get from your Pusher dashboard once you create a Chatkit instance.

Next start the development server of the frontend project using:

    $ ionic serve


For the backend, open a new terminal and navigate to the server folder then install the dependencies using:

    $ cd chatkit-nestjs-ionic/server
    $ npm install


Next, open the server/src/auth/auth.service.ts file and change YOUR_INSTANCE_LOCATOR, YOUR_SECRET_KEY and YOUR_ROOM_ID with your own values.

Finally, start the development server of the backend application using:

    $ npm start


Note: Please note that you first need to register by visiting localhost:8100/register where you need to enter your name, email and password. After registering you’ll be redirected to the /login page where you need to enter your email and password. If login is successful, you’ll be redirected to the home page where you have the START CHATTING button that you need to click on in order to navigate to the chat page.## Improving the authentication system

Before adding new chat features, let’s improve the authentication system we created in the previous tutorial.

First, navigate inside your frontend project:

    $ cd chatkit-nestjs-ionic/frontend


Next, open the src/app/auth.service.ts file and import BehaviorSubject from rxjs:

    // src/app/auth.service.ts

    import { Observable, BehaviorSubject } from 'rxjs';

Next, add an authState variable of BehaviorSubject type in AuthService:

    // src/app/auth.service.ts

    authState  =  new  BehaviorSubject(false);

We create a new BehaviorSubject with an initial value of false.

BehaviorSubject is a special type of RxJS Observable where you can subscribe to values like any other Observable except that it always returns an initial value. For more information, check out this answer on StackOverflow.

Next, update the login() method to change the authState to send true when the user is successfully logged in:

      // src/app/auth.service.ts

      login(userInfo: User): Observable<any> {
        return this.httpClient.post(`${this.AUTH_SERVER}/login`, userInfo).pipe(
          tap(async (res: { status: number, access_token, expires_in, user_id }) => {
            if (res.status !== 404) {
              await this.storage.set("ACCESS_TOKEN", res.access_token);
              await this.storage.set("EXPIRES_IN", res.expires_in);
              await this.storage.set("USER_ID", res.user_id);
              this.authState.next(true);
            }
          })
        );
      }

We send a POST request to the /login endpoint of our authentication server and we subscribe to the returned Observable. If the status is different than 404, we persist the JWT information on the local storage and we also send a value of true to the authState subject.

Adding the logout() method

In order to allow users to log out from the application we also need to add a button and bind its click event to a logout() method.

First, add the logout() method in the src/app/auth.service.ts file:

      // src/app/auth.service.ts

      async logout(){
        await this.storage.remove("ACCESS_TOKEN");
        await this.storage.remove("EXPIRES_IN");
        await this.storage.remove("USER_ID");
        this.authState.next(false); 
      }

To logout we simply remove the ACCESS_TOKEN, EXPIRES_IN and USER_ID from the local storage and change the authState Observable to send false.

Next, open the src/app/chat/chat.page.ts file, import and inject AuthService:

    // src/app/chat/chat.page.ts

    /* [...] */
    import { AuthService } from  '../auth.service';

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

      messageList: any[] = [];
      chatMessage: string = "";
      constructor(private router: Router, private chatService: ChatService, private authService: AuthService) { }

Next, add the logout() method:

      // src/app/chat/chat.page.ts

      async logout(){
        await this.authService.logout();
        this.router.navigateByUrl('/login');
      }

We call the logout() method of the instance of AuthService and we navigate to the login page using the navigateByUrl() method of the Router.

Next open the src/app/chat/chat.page.html and add a button on the toolbar:

    <!-- src/app/chat/chat.page.html -->

    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>
          Chat Room
        </ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="logout()">
              Logout
          </ion-button>      
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

Let’s also, add a link to the registration page in the login page. Open the src/app/login/login.page.html and add the following code below the <ion-row> containing the login from:

      <!-- src/app/login/login.page.html -->

          <ion-row>
            <ion-col>
              <p>Please <a routerLink='/register'>register</a> first if you don't have an account yet!</p>
            </ion-col>
          </ion-row>

Adding the isLoggedIn() method

Next, we’ll add the isLoggedIn() method which simply returns the value of the authState variable which we need to check in order to get the authentication state in our application:

      // src/app/auth.service.ts

      async isLoggedIn() {
        return this.authState.value;
      }

Adding the checkTokenExists() method

We also need a method that checks if an authentication token does exist in the local storage. It will be combined with the isLoggedIn() method to check the authentication state of users in our router guards:

      // src/app/auth.service.ts

      checkTokenExists(): Promise<boolean>{
        return new Promise((resolve)=>{
          this.storage.get("ACCESS_TOKEN").then(token => {
            if(token !== null){
              this.authState.next(true);
              resolve(true);
            }
            else
            {
              this.authState.next(false);
              resolve(false);
            }
          })
        })
      }

The checkTokenExists() method will also update the authState subject with true if the token exists and false otherwise and will return a Promise that resolves to true when the token exists and false otherwise.

Accessing the home page if the user is already logged in

Until now we need to login each time before getting redirected to the home page because we need to pass the user identifier to the home from the login page.

The user identifier is retrieved from the server when the user is successfully logged in but the user doesn’t actually need to login each time they need to use the application.

In order to fix this, we simply need to access the user ID from the local storage when the user is already logged in.

You need to open the src/app/home/home.page.ts file and import then inject the Ionic Storage service via the component constructor:

    // src/app/home/home.page.ts

    import { Storage } from  '@ionic/storage';
    /* ... */

    export class HomePage implements OnInit {
      userId: string = '';
      userList: any = [];
      constructor(private chatService: ChatService, private route: ActivatedRoute, private storage: Storage)
      { }

Next, update the ngOnInit() life-cycle event as follows:

    // src/app/home/home.page.ts

      async ngOnInit() {
        this.userId = this.route.snapshot.params.id || await this.storage.get("USER_ID");
        this.chatService.connectToChatkit(this.userId);
        this.chatService.getUsers().subscribe((users) => {
          this.userList = users;
        });
      }

Note: Please note that you first need to register by visiting localhost:8100/register where you need to enter your name, email and password. After registering you’ll be redirected to the /login page where you need to enter your email and password. If login is successful, you’ll be redirected to the home page where you have the START CHATTING button that you need to click on in order to navigate to the chat page.
We simply change the line where userId is retrieved. We either retrieve it from the route parameter or from the local storage.

Open the src/app/home/home.module.ts file and add a new path that will allow us to map the home page to the /home route without passing the user identifier:

    // src/app/home/home.module.ts

    /* ... */

    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild([
          {
            path: '',
            component: HomePage
          },
          {
            path: ':id',
            component: HomePage
          }
        ])
      ],
      declarations: [HomePage]
    })
    export class HomePageModule {}

After this, the home page can be either accessed from the /home route or the /home?id=USER_ID route.

Protecting the home and chat pages with Angular Router guards

The home and chat pages should be accessed only by logged in users. We can enforce this on the client side using Angular Router guards.

Angular Router guards allow you to enable or disable access to certain routes in your Angular application.

Angular offers multiple types of guards:

Note: Please note that you first need to register by visiting localhost:8100/register where you need to enter your name, email and password. After registering you’ll be redirected to the /login page where you need to enter your email and password. If login is successful, you’ll be redirected to the home page where you have the START CHATTING button that you need to click on in order to navigate to the chat page.
In our case we can use the CanActivateChild guard. Head back to your terminal and run the following command:

    $ ionic generate guard auth


This command will create two src/app/auth.guard.ts and src/app/auth.guard.spec.ts files.

Open the src/app/auth.guard.ts file, you will already find an example guard implemented using the CanActivate interface:

    // src/app/auth.guard.ts

    import { Injectable } from '@angular/core';
    import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
    import { Observable } from 'rxjs';

    @Injectable({
      providedIn: 'root'
    })
    export class AuthGuard implements CanActivate {
      canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return true;
      }
    }

Let’s change that to use the CanActivateChild interface instead:

    // src/app/auth.guard.ts

    import { Injectable } from '@angular/core';
    import { CanActivateChild , ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
    import { Observable } from 'rxjs';

    @Injectable({
      providedIn: 'root'
    })
    export class AuthGuard implements CanActivateChild {
      canActivateChild(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return true;
      }
    }

Since the canActivateChild() method returns true, this guard will allow access to all users when applied to the /home and /chat paths. We need to grant access to the logged in users only. So, first import and inject AuthService via the the service constructor:

    // src/app/auth.guard.ts

    import { Injectable } from '@angular/core';
    import { CanActivateChild , ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
    import { Observable } from 'rxjs';
    import { AuthService } from './auth.service';
    import { Router } from '@angular/router';

    @Injectable({
      providedIn: 'root'
    })
    export class AuthGuard implements CanActivateChild {
      constructor(private authService: AuthService, private router: Router ){}
      canActivateChild(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

        if(this.authService.isLoggedIn()){
          return true;
        }
        else{
          return new Promise((resolve) => {
            this.authService.checkTokenExists().then((tokenExists)=>{

              if(tokenExists){
                resolve(true);
              }
              else{
                this.router.navigateByUrl('/login');
                resolve(false);
              }
            })
          })
        }  

      }
    }

With this implementation, the canActivateChild() method will return true when the isLoggedIn() method returns true. Otherwise it will return a new Promise that resolves to true, if a token exists in the local storage or false if no token exists.

Since the canActivateChild() method accepts a Boolean value or a Promise that resolves to a Boolean value, this guard will grant access to the children of the route only when the user is logged in (i.e if the authState subject has a value of true or a token exists in the local storage of the application).

Finally, you need to apply the guard on the routes. Open the src/app/app-routing.module.ts file and import AuthGuard and register it:

    // src/app/app-routing.module.ts

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AuthGuard } from './auth.guard';

    const routes: Routes = [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', canActivateChild: [AuthGuard], loadChildren: './home/home.module#HomePageModule' },
      { path:  'login', loadChildren:  './login/login.module#LoginPageModule' },
      { path:  'register', loadChildren:  './register/register.module#RegisterPageModule' },
      { path:  'chat', canActivateChild: [AuthGuard],loadChildren:  './chat/chat.module#ChatPageModule' },
    ];

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

We added the AuthGuard service to the canActivateChild array of the home and chat paths. The login and register paths have public access since they are used to authenticate users.

Note: Please note that you first need to register by visiting localhost:8100/register where you need to enter your name, email and password. After registering you’ll be redirected to the /login page where you need to enter your email and password. If login is successful, you’ll be redirected to the home page where you have the START CHATTING button that you need to click on in order to navigate to the chat page.

Adding support for typing indicators

After finishing with authentication now, let’s add other chat features. We’ll start with the typing indicator which indicates to the other users in the chat room if someone is already typing a message.

Open the src/app/chat.service.ts file and add the typingUsers array which will hold the users that are currently typing:

    // src/app/chat.service.ts

    typingUsers  = [];

Next, in the connectToChatkit() method, add the onUserStartedTyping and onUserStoppedTyping hooks:

    // src/app/chat.service.ts

        await this.currentUser.subscribeToRoom({
          roomId: this.GENERAL_ROOM_ID,
          hooks: {

            onMessage: message => {
              this.messages.push(message);
              this.messagesSubject.next(this.messages);
            },
            onUserStartedTyping: user => {
              this.typingUsers.push(user.name);
            },
            onUserStoppedTyping: user => {
              this.typingUsers = this.typingUsers.filter(username => username !== user.name);
            }        
          },
          messageLimit: 20
        });

On the onUserStartedTyping hook we push the user name of the currently typing user to the typingUsers array and on the onUserStoppedTyping hook we remove it. This will allow us to have an updated list of typing users.

Next, we need to add a method that returns the typingUsers array:

    // src/app/chat.service.ts

    getTypingUsers(){
        return  this.typingUsers;
    }

Finally we need to add a method for sending the typing indicator when the user is typing:

    // src/app/chat.service.ts

    sendTypingEvent(roomId = this.GENERAL_ROOM_ID){
        return this.currentUser.isTypingIn({ roomId: roomId });
    }

Now, open the src/app/chat/chat.page.ts file and add these three methods to the components:

    // src/app/chat/chat.page.ts

      get typingUsers(){
        return this.chatService.getTypingUsers();
      }
      onKeydown(e){
        this.chatService.sendTypingEvent();
      }
      onKeyup(e){
        this.chatService.sendTypingEvent();
      }

Next, open the src/app/chat/chat.page.html file and bind the onKeydown and onKeyup methods to the keydown and keyup events of <textarea>:

    <!-- src/app/chat/chat.page.html -->

    <textarea #messageInput  placeholder="Enter your message!" [(ngModel)]="chatMessage" (keyup.enter)="sendMessage()" (keydown)="onKeydown($event)" (keyup)="onKeyup($event)">
    </textarea>

Next, inside the <ion-footer> component, add the following code which will be displayed if at least one user is currently typing:

    <!-- src/app/chat/chat.page.html -->

    <div *ngIf="typingUsers.length > 0">
    {{ typingUsers[0] }} is typing
    </div>

Note: Please note that you first need to register by visiting localhost:8100/register where you need to enter your name, email and password. After registering you’ll be redirected to the /login page where you need to enter your email and password. If login is successful, you’ll be redirected to the home page where you have the START CHATTING button that you need to click on in order to navigate to the chat page.## Adding support for file (image) attachments

After adding support for typing indicators in our application, let’s proceed to add support for file or image attachments.

We’ll be using the HTML5 FileReader API for working with files instead of native plugins which require you to do part of the testing on a real mobile device instead of the browser.

Let’s start with ChatService. Open the src/app/chat.service.ts file and update the sendMessage() method as follows:

    // src/app/chat.service.ts

      sendMessage(message) {
        if(message.attachment){
          return this.currentUser.sendMessage({
            text: message.text,
            attachment: { file: message.attachment, name: message.attachment.name },
            roomId: message.roomId || this.GENERAL_ROOM_ID
          });
        }
        else
        {
          return this.currentUser.sendMessage({
            text: message.text,
            roomId: message.roomId || this.GENERAL_ROOM_ID
          });
        }

      }

We add the attachment field which contains an object with two fields: the file attachment and the name of the file attachment.

This will allow us to send a file attachment with our message.

Next, open the src/app/chat/chat.page.ts file and add an attachment variable to the component that will be used to hold the file:

    // src/app/chat/chat.page.ts

    attachment:  File  =  null;

The file interface provides information about files and allows JavaScript in a web page to access their content. It’s built in the browser so you don’t need to import it.

Next, add the following method:

    // src/app/chat/chat.page.ts

      attachFile(e){
        if (e.target.files.length == 0) {
          return
        }
        let file: File = e.target.files[0];
        this.attachment = file;
      }

The attachFile() will be used to read the selected file and assign it to the attachment variable. It will be bound to the change event of the file input.

Next, update the sendMessage() method as follows:

    // src/app/chat/chat.page.ts

      sendMessage() {
        this.chatService.sendMessage({ text: this.chatMessage, attachment: this.attachment }).then(() => {
          this.chatMessage = "";
          this.attachment = null;
        });
      }

Now, let’s change the UI of our chat page to allow users to select a file and attach it to a massage.

Open the src/app/chat/chat.page.html file and add a file input just below the <textarea> element where we type the message:

    <!-- src/app/chat/chat.page.html -->

    <input #messageAttachment  type="file" accept="image/x-png,image/gif,image/jpeg"
     name="myAttachment" (change)="attachFile($event)"  style = "display: none;"/>

We add a display:none; style because we want this input element to be hidden and we bind the change event of the element to the attachFile() method.

The input field will only accept images which will allow us to send only images in our chat application.

Now, how users will trigger the file input interface to select a file? Since we hide the file input, we need to add a button that will programatically trigger a click event on the file input element.

Below the file input markup, add the following code:

    <!-- src/app/chat/chat.page.html -->

    <ion-button  shape="round"  fill="outline"  icon-only  item-right (click)="messageAttachment.click()">
    <ion-icon  name="folder"></ion-icon>
    </ion-button>

This will add an Ionic button with a folder icon that will trigger the interface for selecting a file once clicked by the user.

Now, finally we need to display the attached image when the message list is displayed. In the same file, change the code of <ion-content> as follows:

    <!-- src/app/chat/chat.page.html -->

    <ion-content padding>

      <div class="container">
        <div *ngFor="let msg of messageList" class="message left">
          <img class="user-img" [src]="msg.sender.avatarURL" alt="" src="">
          <div class="msg-detail">
            <div class="msg-info">
              <p>
                {{msg.sender.name}}
              </p>
            </div>
            <div class="msg-content">
              <span class="triangle"></span>
              <img *ngIf="msg.attachment" src="{{ msg.attachment.link }}"
              />
              <p class="line-breaker ">{{msg.text}}</p>
            </div>
          </div>
        </div>
      </div>
    </ion-content>

If the message object has an attachment field we display the image using the <img> tag.

Note: Please note that you first need to register by visiting localhost:8100/register where you need to enter your name, email and password. After registering you’ll be redirected to the /login page where you need to enter your email and password. If login is successful, you’ll be redirected to the home page where you have the START CHATTING button that you need to click on in order to navigate to the chat page.
This is a screen shot of the chat UI:

Automatically scrolling down the chat UI

In order to improve the chat experience of our application users we need to automatically scroll down the chat UI when the above the fold area is full of messages. This needs to happen when we first load the chat UI and also when users send new messages.

First, we need to add an ID to the <ion-content> element of the chat page. Open the src/app/chat/chat.page.html file and update it accordingly:

    <!-- src/app/chat/chat.page.html -->

    <!-- [...] -->
    <ion-content #scrollArea  padding>
    <!-- [...] -->
    </ion-content>
    <!-- [...] -->

Now we can query this DOM element from our component using the #scrollArea ID.

Next, open the src/app/chat/chat.page.ts file and import Content from the @ionic/angular package and ViewChild from the @angular/core package:

    // src/app/chat/chat.page.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    import {Content} from "@ionic/angular";

Next, add a content variable of type Content decorated by @ViewChild('scrollArea'):

    // src/app/chat/chat.page.ts

    export class ChatPage implements OnInit {
      @ViewChild('scrollArea') content: Content;

Next, add a scrollToBottom() method that invokes the scrollToBottom() method of the Content interface:

    // src/app/chat/chat.page.ts

      scrollToBottom() {
        if (this.content.scrollToBottom) {
            this.content.scrollToBottom();
        }
      }

Due to many factors, the DOM element that contains the chat message may not have been added to the DOM when the scroll is triggered so the scrollToBottom() method will only scroll to the bottom of the current content, in other words before all or some messages are rendered and added to the DOM.

A common hack to solve this issue is by using the setTimeout() method to start the scroll after waiting a specific duration of time just to make sure that all messages have been added to the DOM.

Let’s change our scrollToBottom() to the following:

    // src/app/chat/chat.page.ts

      scrollToBottom() {

        setTimeout(()=>{
          if (this.content.scrollToBottom) {
            this.content.scrollToBottom();
          }
        }, 1000);

      }

Finally you need to call the scrollToBottom() method on the ngOnInit() when we first fetch the messages from the Chatkit instance:

    // src/app/chat/chat.page.ts

      ngOnInit() {
        this.chatService.getMessages().subscribe(messages => {
          this.messageList = messages;
          this.scrollToBottom();
        });    
      }

You also need to call it when the user successfully sends a new massage:

    // src/app/chat/chat.page.ts

      sendMessage() {
        this.chatService.sendMessage({ text: this.chatMessage, attachment: this.attachment }).then(() => {
          this.chatMessage = "";
          this.attachment = null;
          this.scrollToBottom();
        });
      }

Note: Please note that you first need to register by visiting localhost:8100/register where you need to enter your name, email and password. After registering you’ll be redirected to the /login page where you need to enter your email and password. If login is successful, you’ll be redirected to the home page where you have the START CHATTING button that you need to click on in order to navigate to the chat page.## Conclusion

In this tutorial part, we’ve added more features to our chat application built using Ionic 4, Nest.js and Chatkit such as file attachments that allow users to send photos to the chat room and typing indicators which inform users if someone is already typing a message in the chat room.

You can find the complete source code of this application from this GitHub repository.

#ionic #mobile-apps

What is GEEK

Buddha Community

Add authentication, typing indicators and file attachments to an Ionic 4 chat app

Top Ionic App Development Company in USA

Are you looking for a top Ionic mobile app development company in USA? AppClues Infotech offering top-notch Ionic app development services with advanced technology and features. Contact us if you want to hire dedicated and highly scalable Ionic app developers for your app development project.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#ionic app development company in usa & india #top ionic app development company #ionic mobile app development company usa #trusted ionic app development company #ionic app development services company in usa #leading ionic app development services company

Einar  Hintz

Einar Hintz

1594631472

Pros and Cons of Ionic Development

Entrepreneurs around the world want a top-notch mobile application for their business in both Android and iOS platforms. Most of them get stuck mid-way where they struggle to pick the best technology suitable for their business. From questions such as native mobile development or cross-platform development? Flutter or Ionic or React Native?. Each technology and development approach has its own Pros and Cons from which you will need to choose the right one for your business. If you think Ionic is the right cross-platform application development, here are a few pros and cons of Ionic development. 

What is Ionic Framework?

Being an open-source SDK for building Hybrid mobile applications in both Android and iOS platforms, Ionic is the best choice for building top of the line mobile applications. This Ionic framework is completely based on Apache Cordova and Angular. More precisely, Ionic is an npm module that requires the installation of Node JS to function.

One can build a full functioning mobile application in both platforms using their Javascript, HTML, and CSS knowledge without requiring the basics of Kotlin or Java. More than 5 Million mobile applications are built using this Ionic framework by leveraging its platform-specific UI elements, innumerable libraries, and more exciting features.

The applications that are built using the Ionic framework are cross-platform, web-based, and have access to native device’s APIs.

Ionic Applications are

  • Cross-platform – Single code base for both platforms (except native components)
  • Web-based – Built using web-views and can be displayed in a browser like PWAs.
  • Access to native API components – They can access native device’s camera, files, and others.

Advantages of Ionic Development

Quick Development and Time To Market

For entrepreneurs and business owners, ionic development can be beneficial if they want to develop a mobile application in both platforms in a short period of time while comparing to native applications. Building native applications specifically for each platform can be time-consuming which can imply a delay in time to market and development cost of native applications are generally expensive.

#mobile app development #ionic 4 advantages #ionic 4 best practices #ionic 5 #ionic appflow #ionic capacitor pros and cons #ionic vs react native #react native pros and cons #what is ionic app development

Carmen  Grimes

Carmen Grimes

1595494844

How to start an electric scooter facility/fleet in a university campus/IT park

Are you leading an organization that has a large campus, e.g., a large university? You are probably thinking of introducing an electric scooter/bicycle fleet on the campus, and why wouldn’t you?

Introducing micro-mobility in your campus with the help of such a fleet would help the people on the campus significantly. People would save money since they don’t need to use a car for a short distance. Your campus will see a drastic reduction in congestion, moreover, its carbon footprint will reduce.

Micro-mobility is relatively new though and you would need help. You would need to select an appropriate fleet of vehicles. The people on your campus would need to find electric scooters or electric bikes for commuting, and you need to provide a solution for this.

To be more specific, you need a short-term electric bike rental app. With such an app, you will be able to easily offer micro-mobility to the people on the campus. We at Devathon have built Autorent exactly for this.

What does Autorent do and how can it help you? How does it enable you to introduce micro-mobility on your campus? We explain these in this article, however, we will touch upon a few basics first.

Micro-mobility: What it is

micro-mobility

You are probably thinking about micro-mobility relatively recently, aren’t you? A few relevant insights about it could help you to better appreciate its importance.

Micro-mobility is a new trend in transportation, and it uses vehicles that are considerably smaller than cars. Electric scooters (e-scooters) and electric bikes (e-bikes) are the most popular forms of micro-mobility, however, there are also e-unicycles and e-skateboards.

You might have already seen e-scooters, which are kick scooters that come with a motor. Thanks to its motor, an e-scooter can achieve a speed of up to 20 km/h. On the other hand, e-bikes are popular in China and Japan, and they come with a motor, and you can reach a speed of 40 km/h.

You obviously can’t use these vehicles for very long commutes, however, what if you need to travel a short distance? Even if you have a reasonable public transport facility in the city, it might not cover the route you need to take. Take the example of a large university campus. Such a campus is often at a considerable distance from the central business district of the city where it’s located. While public transport facilities may serve the central business district, they wouldn’t serve this large campus. Currently, many people drive their cars even for short distances.

As you know, that brings its own set of challenges. Vehicular traffic adds significantly to pollution, moreover, finding a parking spot can be hard in crowded urban districts.

Well, you can reduce your carbon footprint if you use an electric car. However, electric cars are still new, and many countries are still building the necessary infrastructure for them. Your large campus might not have the necessary infrastructure for them either. Presently, electric cars don’t represent a viable option in most geographies.

As a result, you need to buy and maintain a car even if your commute is short. In addition to dealing with parking problems, you need to spend significantly on your car.

All of these factors have combined to make people sit up and think seriously about cars. Many people are now seriously considering whether a car is really the best option even if they have to commute only a short distance.

This is where micro-mobility enters the picture. When you commute a short distance regularly, e-scooters or e-bikes are viable options. You limit your carbon footprints and you cut costs!

Businesses have seen this shift in thinking, and e-scooter companies like Lime and Bird have entered this field in a big way. They let you rent e-scooters by the minute. On the other hand, start-ups like Jump and Lyft have entered the e-bike market.

Think of your campus now! The people there might need to travel short distances within the campus, and e-scooters can really help them.

How micro-mobility can benefit you

benefits-micromobility

What advantages can you get from micro-mobility? Let’s take a deeper look into this question.

Micro-mobility can offer several advantages to the people on your campus, e.g.:

  • Affordability: Shared e-scooters are cheaper than other mass transportation options. Remember that the people on your campus will use them on a shared basis, and they will pay for their short commutes only. Well, depending on your operating model, you might even let them use shared e-scooters or e-bikes for free!
  • Convenience: Users don’t need to worry about finding parking spots for shared e-scooters since these are small. They can easily travel from point A to point B on your campus with the help of these e-scooters.
  • Environmentally sustainable: Shared e-scooters reduce the carbon footprint, moreover, they decongest the roads. Statistics from the pilot programs in cities like Portland and Denver showimpressive gains around this key aspect.
  • Safety: This one’s obvious, isn’t it? When people on your campus use small e-scooters or e-bikes instead of cars, the problem of overspeeding will disappear. you will see fewer accidents.

#android app #autorent #ios app #mobile app development #app like bird #app like bounce #app like lime #autorent #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime

Carmen  Grimes

Carmen Grimes

1595491178

Best Electric Bikes and Scooters for Rental Business or Campus Facility

The electric scooter revolution has caught on super-fast taking many cities across the globe by storm. eScooters, a renovated version of old-school scooters now turned into electric vehicles are an environmentally friendly solution to current on-demand commute problems. They work on engines, like cars, enabling short traveling distances without hassle. The result is that these groundbreaking electric machines can now provide faster transport for less — cheaper than Uber and faster than Metro.

Since they are durable, fast, easy to operate and maintain, and are more convenient to park compared to four-wheelers, the eScooters trend has and continues to spike interest as a promising growth area. Several companies and universities are increasingly setting up shop to provide eScooter services realizing a would-be profitable business model and a ready customer base that is university students or residents in need of faster and cheap travel going about their business in school, town, and other surrounding areas.

Electric Scooters Trends and Statistics

In many countries including the U.S., Canada, Mexico, U.K., Germany, France, China, Japan, India, Brazil and Mexico and more, a growing number of eScooter users both locals and tourists can now be seen effortlessly passing lines of drivers stuck in the endless and unmoving traffic.

A recent report by McKinsey revealed that the E-Scooter industry will be worth― $200 billion to $300 billion in the United States, $100 billion to $150 billion in Europe, and $30 billion to $50 billion in China in 2030. The e-Scooter revenue model will also spike and is projected to rise by more than 20% amounting to approximately $5 billion.

And, with a necessity to move people away from high carbon prints, traffic and congestion issues brought about by car-centric transport systems in cities, more and more city planners are developing more bike/scooter lanes and adopting zero-emission plans. This is the force behind the booming electric scooter market and the numbers will only go higher and higher.

Companies that have taken advantage of the growing eScooter trend develop an appthat allows them to provide efficient eScooter services. Such an app enables them to be able to locate bike pick-up and drop points through fully integrated google maps.

List of Best Electric Bikes for Rental Business or Campus Facility 2020:

It’s clear that e scooters will increasingly become more common and the e-scooter business model will continue to grab the attention of manufacturers, investors, entrepreneurs. All this should go ahead with a quest to know what are some of the best electric bikes in the market especially for anyone who would want to get started in the electric bikes/scooters rental business.

We have done a comprehensive list of the best electric bikes! Each bike has been reviewed in depth and includes a full list of specs and a photo.

Billy eBike

mobile-best-electric-bikes-scooters https://www.kickstarter.com/projects/enkicycles/billy-were-redefining-joyrides

To start us off is the Billy eBike, a powerful go-anywhere urban electric bike that’s specially designed to offer an exciting ride like no other whether you want to ride to the grocery store, cafe, work or school. The Billy eBike comes in 4 color options – Billy Blue, Polished aluminium, Artic white, and Stealth black.

Price: $2490

Available countries

Available in the USA, Europe, Asia, South Africa and Australia.This item ships from the USA. Buyers are therefore responsible for any taxes and/or customs duties incurred once it arrives in your country.

Features

  • Control – Ride with confidence with our ultra-wide BMX bars and a hyper-responsive twist throttle.
  • Stealth- Ride like a ninja with our Gates carbon drive that’s as smooth as butter and maintenance-free.
  • Drive – Ride further with our high torque fat bike motor, giving a better climbing performance.
  • Accelerate – Ride quicker with our 20-inch lightweight cutout rims for improved acceleration.
  • Customize – Ride your own way with 5 levels of power control. Each level determines power and speed.
  • Flickable – Ride harder with our BMX /MotoX inspired geometry and lightweight aluminum package

Specifications

  • Maximum speed: 20 mph (32 km/h)
  • Range per charge: 41 miles (66 km)
  • Maximum Power: 500W
  • Motor type: Fat Bike Motor: Bafang RM G060.500.DC
  • Load capacity: 300lbs (136kg)
  • Battery type: 13.6Ah Samsung lithium-ion,
  • Battery capacity: On/off-bike charging available
  • Weight: w/o batt. 48.5lbs (22kg), w/ batt. 54lbs (24.5kg)
  • Front Suspension: Fully adjustable air shock, preload/compression damping /lockout
  • Rear Suspension: spring, preload adjustment
  • Built-in GPS

Why Should You Buy This?

  • Riding fun and excitement
  • Better climbing ability and faster acceleration.
  • Ride with confidence
  • Billy folds for convenient storage and transportation.
  • Shorty levers connect to disc brakes ensuring you stop on a dime
  • belt drives are maintenance-free and clean (no oil or lubrication needed)

**Who Should Ride Billy? **

Both new and experienced riders

**Where to Buy? **Local distributors or ships from the USA.

Genze 200 series e-Bike

genze-best-electric-bikes-scooters https://www.genze.com/fleet/

Featuring a sleek and lightweight aluminum frame design, the 200-Series ebike takes your riding experience to greater heights. Available in both black and white this ebike comes with a connected app, which allows you to plan activities, map distances and routes while also allowing connections with fellow riders.

Price: $2099.00

Available countries

The Genze 200 series e-Bike is available at GenZe retail locations across the U.S or online via GenZe.com website. Customers from outside the US can ship the product while incurring the relevant charges.

Features

  • 2 Frame Options
  • 2 Sizes
  • Integrated/Removable Battery
  • Throttle and Pedal Assist Ride Modes
  • Integrated LCD Display
  • Connected App
  • 24 month warranty
  • GPS navigation
  • Bluetooth connectivity

Specifications

  • Maximum speed: 20 mph with throttle
  • Range per charge: 15-18 miles w/ throttle and 30-50 miles w/ pedal assist
  • Charging time: 3.5 hours
  • Motor type: Brushless Rear Hub Motor
  • Gears: Microshift Thumb Shifter
  • Battery type: Removable Samsung 36V, 9.6AH Li-Ion battery pack
  • Battery capacity: 36V and 350 Wh
  • Weight: 46 pounds
  • Derailleur: 8-speed Shimano
  • Brakes: Dual classic
  • Wheels: 26 x 20 inches
  • Frame: 16, and 18 inches
  • Operating Mode: Analog mode 5 levels of Pedal Assist Thrott­le Mode

Norco from eBikestore

norco-best-electric-bikes-scooters https://ebikestore.com/shop/norco-vlt-s2/

The Norco VLT S2 is a front suspension e-Bike with solid components alongside the reliable Bosch Performance Line Power systems that offer precise pedal assistance during any riding situation.

Price: $2,699.00

Available countries

This item is available via the various Norco bikes international distributors.

Features

  • VLT aluminum frame- for stiffness and wheel security.
  • Bosch e-bike system – for their reliability and performance.
  • E-bike components – for added durability.
  • Hydraulic disc brakes – offer riders more stopping power for safety and control at higher speeds.
  • Practical design features – to add convenience and versatility.

Specifications

  • Maximum speed: KMC X9 9spd
  • Motor type: Bosch Active Line
  • Gears: Shimano Altus RD-M2000, SGS, 9 Speed
  • Battery type: Power Pack 400
  • Battery capacity: 396Wh
  • Suspension: SR Suntour suspension fork
  • Frame: Norco VLT, Aluminum, 12x142mm TA Dropouts

Bodo EV

bodo-best-electric-bikes-scootershttp://www.bodoevs.com/bodoev/products_show.asp?product_id=13

Manufactured by Bodo Vehicle Group Limited, the Bodo EV is specially designed for strong power and extraordinary long service to facilitate super amazing rides. The Bodo Vehicle Company is a striking top in electric vehicles brand field in China and across the globe. Their Bodo EV will no doubt provide your riders with high-level riding satisfaction owing to its high-quality design, strength, breaking stability and speed.

Price: $799

Available countries

This item ships from China with buyers bearing the shipping costs and other variables prior to delivery.

Features

  • Reliable
  • Environment friendly
  • Comfortable riding
  • Fashionable
  • Economical
  • Durable – long service life
  • Braking stability
  • LED lighting technology

Specifications

  • Maximum speed: 45km/h
  • Range per charge: 50km per person
  • Charging time: 8 hours
  • Maximum Power: 3000W
  • Motor type: Brushless DC Motor
  • Load capacity: 100kg
  • Battery type: Lead-acid battery
  • Battery capacity: 60V 20AH
  • Weight: w/o battery 47kg

#android app #autorent #entrepreneurship #ios app #minimum viable product (mvp) #mobile app development #news #app like bird #app like bounce #app like lime #autorent #best electric bikes 2020 #best electric bikes for rental business #best electric kick scooters 2020 #best electric kickscooters for rental business #best electric scooters 2020 #best electric scooters for rental business #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime

Juned Ghanchi

1621423249

Ionic App Development Company in India, Hire Ionic Developers

We are reputed for developing well crafted and optimized Ionic apps in India and across the world. The cross-platforms Ionic apps built by our tech-savvy team are apt for a faster and efficient business development process.

Our developers are well experienced in using this powerful HTML5 SDK and are able to effectively use web technologies like HTML, CSS, and JAVASCRIPT to build the best Ionic apps.

If you are looking for the best technology services around the world, hire Ionic app developers in India. Your business will find the best app development solutions here.

#ionic app development company india #hire ionic developers india #ionic app development company #hire ionic developers #ionic app programmers #ionic app development agency