DEV Community: David

Calendar component example with date-fns (Vue 3)

David — Sun, 11 Sep 2022 15:48:39 +0000

Sometimes we need to implement a custom calendar view and with date-fns it's not as scary as you may think.

First, let's see some code:

const currentDate = ref(startOfDay(new Date()));

const days = computed(() => {
  const monthStart = startOfMonth(currentDate.value);
  const dayNumInWeek = getDay(monthStart);

  const calendarStart = subDays(monthStart, dayNumInWeek !== 0 ? dayNumInWeek - 1 : 6);

  return eachDayOfInterval({
    start: calendarStart,
    end: addDays(calendarStart, 41)
  }).map((date) => {{
    return {
      isCurrent: compareAsc(currentDate.value, date) === 0,
      isCurrentMonth: date.getMonth() === currentDate.value.getMonth(),
      date: date
    }
  }});
});

It's not hard to understand and looks pretty simple. But if you do not understand it immediately let's explain it step by step:

Firstly we need to get the start and end of the current month:

const monthStart = startOfMonth(currentDate.value);
const monthEnd = endOfMonth(currentDate.value);

Our monthStart and monthEnd is Date objects contains date of start and end date of the month. So we can get which day the current month is start:

const dayNumInWeek = getDay(monthStart)

And now we can use it to get the start date for our calendar:

const calendarStart = subDays(monthStart, dayNumInWeek !== 0 ? dayNumInWeek - 1 : 6);

We need it because we display 7 weeks' days in our calendar and the first day of the current month can be on any day of the week. Sometimes a day first day of the month in the week context can be 0(Sunday) and we need to sub 6 days if it happens.

Finally, we need to get an interval between calendarStart and calendarStart + 41 because we want to display 42 days per time and map it into a useful object:

eachDayOfInterval({
    start: calendarStart,
    end: addDays(calendarStart, 41)
  }).map((date) => {{
    return {
      isCurrent: compareAsc(currentDate.value, date) === 0,
      isCurrentMonth: date.getMonth() === currentDate.value.getMonth(),
      date: date
    }
  }});

Finally, let's implement the full example code with Vue 3 and Tailwind:

<template>
  <div class="w-60 bg-white  dark:border-[1px] dark:border-gray_border dark:bg-gray_800 rounded-lg shadow-lg">
    <div class="flex justify-center space-x-2 py-3 items-center rounded-lg">
      <button
          type="button"
          class="-my-1.5 flex flex-none items-center justify-center p-1.5"
          @click="toPreviousMonth"
      >
        <span class="sr-only">Previous month</span>
        <!-- Heroicon name: solid/chevron-left -->
        <svg class="h-5 w-5 icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
             aria-hidden="true">
          <path fill-rule="evenodd"
                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                clip-rule="evenodd"/>
        </svg>
      </button>
      <h2 class="font-normal text-gray_800 text-sm dark:text-white font-inter">
        {{ format(currentDate, 'MMMM yyyy') }}
      </h2>
      <button
          type="button"
          class="-my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
          @click="toNextMonth"
      >
        <!-- Heroicon name: solid/chevron-right -->
        <svg class="h-5 w-5 icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
             aria-hidden="true">
          <path fill-rule="evenodd"
                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                clip-rule="evenodd"/>
        </svg>
      </button>
    </div>
    <div class="mt-2 grid grid-cols-7 text-center text-sm">
      <div class="text-gray_500 font-inter dark:text-white">Mo</div>
      <div class="text-gray_500 font-inter dark:text-white">Tu</div>
      <div class="text-gray_500 font-inter dark:text-white">We</div>
      <div class="text-gray_500 font-inter dark:text-white">Th</div>
      <div class="text-gray_500 font-inter dark:text-white">Fr</div>
      <div class="text-gray_500 font-inter dark:text-white">Sa</div>
      <div class="text-gray_500 font-inter dark:text-white">Su</div>
    </div>
    <div class="mt-2 grid grid-cols-7 text-sm font-inter">
      <button
          v-for="(day, index) in days" :key="`day-${index}`"
          type="button"
          class="mx-auto flex h-8 w-8 items-center justify-center rounded-lg"
          @click="currentDate = day.date"
          :class="{'bg-blue_400 justify-center rounded-lg': day.isCurrent}"
      >
        <time :class="{
          'text-number_calendar': !day.isCurrentMonth,
          'text-gray_800 dark:text-white': day.isCurrentMonth
        }">
          {{ format(day.date, 'd') }}
        </time>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  subDays,
  addDays,
  eachDayOfInterval,
  format,
  startOfMonth,
  compareAsc,
  startOfDay,
  addMonths,
  subMonths,
  getDay,
} from 'date-fns'
import {computed, ref} from "vue";

const currentDate = ref(startOfDay(new Date()));

const days = computed(() => {
  const monthStart = startOfMonth(currentDate.value);
  const dayNumInWeek = getDay(monthStart);

  const calendarStart = subDays(monthStart, dayNumInWeek !== 0 ? dayNumInWeek - 1 : 6);

  return eachDayOfInterval({
    start: calendarStart,
    end: addDays(calendarStart, 41)
  }).map((date) => {{
    return {
      isCurrent: compareAsc(currentDate.value, date) === 0,
      isCurrentMonth: date.getMonth() === currentDate.value.getMonth(),
      date: date
    }
  }});
});

function toNextMonth() {
  currentDate.value = addMonths(startOfMonth(currentDate.value), 1)
}

function toPreviousMonth() {
  currentDate.value = subMonths(startOfMonth(currentDate.value), 1)
}
</script>

Build your «Smart device» for Google Home

David — Fri, 12 Aug 2022 17:21:05 +0000

Creating Google Home project

We will use Cloud-to-cloud integration method. So we need to navigate to Actions on Google console and create a new project:

And we need to name our Smart Home Action:

Set up OAuth2 and backend server

Cloud-to-cloud integration required OAuth2 server for linking your smart device service to Google Home application. In this article, we will implement it with Laravel framework and Passport package. You should pass base steps, like Laravel and Passport installation, database setup, and make fake users or you can find example code here. All additional actions will be described next.

Account linking

Move to your Laravel project and run the command to generate OAuth Client Information for Google Home.

$ php artisan passport:client

Which user ID should the client be assigned to?:
> 1

What should we name the client?:
> Google

Where should we redirect the request after authorization?:
> https://oauth-redirect.googleusercontent.com/r/{your project id}

New client created successfully.
Client ID: 9700039b-92b7-4a79-a421-152747b9a257
Client secret: 813PEwdTAq7kf7vRXuyd75dJEaSzAIZ1GDWjIyRM

Pass received data and oauth2 endpoints to Account Linking settings in your project:

Implement backend

To notify Google Home about our device status, we need to return their data when Google Home requested data by Fulfillment URL. Google Home sends data in 3 types: SYNC, QUERY, and EXECUTE.

Response for sync request will return a list of all devices and their capabilities:

# Request example
{
    "requestId": "ff36a3cc-ec34-11e6-b1a0-64510650abcf",
    "inputs": [{
      "intent": "action.devices.SYNC"
    }]
}

# Response example
{
    "requestId": "6894439706274654512",
    "payload": {
        "agentUserId": "user123",
        "devices": [
            {
                "id": 1,
                "type": "action.devices.types.THERMOSTAT",
                "traits": [
                    "action.devices.traits.TemperatureSetting"
                ],
                "name": {
                    "name": "Thermostat"
                },
                "willReportState": true,
                "attributes": {
                    "availableThermostatModes": [
                        "off",
                        "heat",
                        "cool"
                    ],
                    "thermostatTemperatureRange": {
                        "minThresholdCelsius": 18,
                        "maxThresholdCelsius": 30
                    },
                    "thermostatTemperatureUnit": "C"
                },
                "deviceInfo": {
                    "manufacturer": "smart-home-inc"
                }
            }
        ]
    }
}

Resposne for query request must include a full set of states for each of the traits supported by the requested devices:

# Request example
{
    "requestId": "ff36a3cc-ec34-11e6-b1a0-64510650abcf",
    "inputs": [{
        "intent": "action.devices.QUERY",
        "payload": {
            "devices": [{
                "id": "1"
            }]
        }
    }]
}

# Response example
{
    "requestId": "6894439706274654514",
    "payload": {
        "agentUserId": "user123",
        "devices": {
            "1": {
                "status": "SUCCESS",
                "online": true,
                "thermostatMode": "cool",
                "thermostatTemperatureSetpoint": 23,
                "thermostatTemperatureAmbient": 10,
                "thermostatHumidityAmbient": 10
            }
        }
    }
}

Execute request contain data as same as Query but can contain commands given to a group of devices(response is same as Query):

# request example
{
    "inputs": [
        {
            "context": {
                "locale_country": "US",
                "locale_language": "en"
            },
            "intent": "action.devices.EXECUTE",
            "payload": {
                "commands": [
                    {
                        "devices": [
                            {
                                "id": "1"
                            }
                        ],
                        "execution": [
                            {
                                "command": "action.devices.commands.ThermostatTemperatureSetpoint",
                                "params": {
                                    "thermostatTemperatureSetpoint": 25.5
                                }
                            }
                        ]
                    }
                ]
            }
        }
    ],
    "requestId": "15039538743185198388"
}

Understanding device object

A device object on Sync request must contain information about a device like its name, device info, including traits, and attributes based on included trains:

# Device object on sync request
{
    "id": 1,
    "type": "action.devices.types.THERMOSTAT",
    "traits": [
        "action.devices.traits.TemperatureSetting"
    ],
    "name": {
        "name": "Thermostat"
    },
    "willReportState": true,
    "attributes": {
        "availableThermostatModes": [
            "off",
            "heat",
            "cool"
        ],
        "thermostatTemperatureRange": {
            "minThresholdCelsius": 18,
            "maxThresholdCelsius": 30
        },
        "thermostatTemperatureUnit": "C"
    },
    "deviceInfo": {
        "manufacturer": "smart-home-inc"
    }
}

And must contain a device state on Quest or Execute:

# Device object on Query or Execute request
{
    "status": "SUCCESS",
    "online": true,
    "thermostatMode": "cool",
    "thermostatTemperatureSetpoint": 24,
    "thermostatTemperatureAmbient": 10,
    "thermostatHumidityAmbient": 10
}

Return and save device state

Move to your Laravel project and create a Thermostat model:

php artisan make:model Thermostat -m

# database/migrations/2022_08_11_154357_create_thermostats_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::create('thermostats', function (Blueprint $table) {
            $table->id();
            $table->boolean('online')->default(false);
            $table->string('mode');
            $table->unsignedInteger('current_temperature')->default(0);
            $table->unsignedInteger('expected_temperature')->default(15);
            $table->unsignedInteger('humidity')->default(0);
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('thermostats');
    }
};

# app/Models/Thermostate.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Thermostat extends Model
{
    protected $fillable = [
        'online',
        'mode',
        'current_temperature',
        'expected_temperature',
        'humidity',
    ];

    protected $casts = [
        'online' => 'boolean',
    ];
}

php artisan migrate

Implement Fulfillment URL route

# routes/api.php

<?php

use App\Http\Controllers\FulfillmentController;
use Illuminate\Support\Facades\Route;

Route::post('/', FulfillmentController::class);

<?php

namespace App\Http\Controllers;

use App\Models\Thermostat;
use Illuminate\Http\Request;
use Illuminate\Support\Arr;

class FulfillmentController extends Controller
{
    public function __invoke(Request $request)
    {
        $response = null;

        // Extract request type
        switch ($request->input('inputs.0.intent')) {
            case 'action.devices.QUERY':
                $response = $this->queryResponse();
                break;
            case 'action.devices.SYNC':
                $response = $this->syncRequest();
                break;
            case 'action.devices.EXECUTE':
                $response = $this->syncExecute($this->syncExecute($request->input('inputs.0.payload.commands'))); // Extract list of commands
                break;
        }

        return $response;
    }

    private function queryResponse()
    {
        $devices = [];

        // Extract our devices states
        foreach (Thermostat::all() as $thermostat) {
            $devices[$thermostat->id] = [
                'status' => 'SUCCESS',
                'online' => $thermostat->online,
                'thermostatMode' => $thermostat->mode,
                'thermostatTemperatureSetpoint' => $thermostat->expected_temperature,
                'thermostatTemperatureAmbient' => $thermostat->current_temperature,
                'thermostatHumidityAmbient' => $thermostat->humidity,
            ];
        }

        return response([
            'requestId' => "6894439706274654514",
            'payload' => [
                "agentUserId" => "user123",
                'devices' => $devices,
            ],
        ]);
    }

    private function syncRequest()
    {
        $devices = [];

        // Define our devices
        foreach (Thermostat::all() as $thermostat) {
            $devices[] = [
                'id' => $thermostat->id,
                'type' => "action.devices.types.THERMOSTAT",
                'traits' => [
                    "action.devices.traits.TemperatureSetting"
                ],
                'name' => [
                    'name' => 'Thermostat'
                ],
                'willReportState' => true,
                'attributes' => [
                    'availableThermostatModes' => [
                        'off',
                        'heat',
                        'cool',
                    ],
                    'thermostatTemperatureRange' => [
                        'minThresholdCelsius' => 18,
                        'maxThresholdCelsius' => 30,
                    ],
                    'thermostatTemperatureUnit' => 'C'
                ],
                'deviceInfo' => [
                    'manufacturer' => 'smart-home-inc',
                ],
            ];
        }

        return response([
            'requestId' => "6894439706274654512",
            'payload' => [
                "agentUserId" => "user123",
                'devices' => $devices,
            ],
        ]);
    }

    private function syncExecute(array $commands)
    {
        foreach ($commands as $command) {
            // Get devices for execute command
            $thermostats = Thermostat::whereIn('id', Arr::pluck($command['devices'], 'id'))->get();

            foreach ($command['execution'] as $executionItem) {
                switch ($executionItem['command']) {
                    // Handle set point command and save it in our model
                    case 'action.devices.commands.ThermostatTemperatureSetpoint':
                        foreach ($thermostats as $thermostat) {
                            $thermostat->update([
                                'expected_temperature' => $executionItem['params']['thermostatTemperatureSetpoint'],
                            ]);
                        }
                        break;
                    // Handle set set mode command and save it in our model
                    case 'action.devices.commands.ThermostatSetMode':
                        foreach ($thermostats as $thermostat) {
                            $thermostat->update([
                                'mode' => $executionItem['params']['thermostatMode'],
                            ]);
                        }
                        break;
                }
            }
        }

        // It not necessary to return data for command request
        return response([]);
    }
}

Return to Console actions and set your Fulfillment URL in your project settings:

And create your device in your database:

Simplify the authentication process:

Since we are not interested in authentication details we can skip the implement login page and force the authenticated user:

# app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        //
    }

    public function boot()
    {
        Auth::setUser(User::first());
    }
}

Link backend with Google Home

After previous actions, you can test your backend with Google Home app which is authenticated as the same account used for creating Actions Console project.

After linking your device will appear in Google Home:

Now you can control your "device" and its state will be saved on the database. You can trigger sync(reconnect account), query(swipe update gesture), and execute(try to change mode).

You can find more about available device types and traits Here

Flutter JWT Auth

David — Thu, 11 Aug 2022 00:49:02 +0000

In this article, we will implement jwt auth with provider(app state)

Install prerequisites:

flutter pub add http
flutter pub add provider
flutter pub add flutter_secure_storage
flutter pub add shelf
flutter pub add shelf_router

flutter_secure_storage requires minSdk version >= 18

Implement a simple endpoint for getting a fake jwt token

We will use shelf_router to implement our authentication server. In an actual situation, you can use any way to implement it.

Implement fake jwt server:

lib/jwt_server.dart

import 'dart:convert';

import 'package:shelf_router/shelf_router.dart';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as io;

void main() async {
  var app = Router();

  app.post('/login', (Request request) {
    var json = jsonEncode({
      'access_token': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
    });

    return Response.ok(json, headers: {
      'Access-Control-Allow-Origin': '*'
    });
  });

  await io.serve(app, 'localhost', 8080);
}

Now we have the server for testing our jwt auth

Implement authorizaion

Create auth model:

lib/models/auth.dart

import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class AuthModel extends ChangeNotifier {
  final storage = const FlutterSecureStorage();
  String? _token;
  bool isAuthorized = false;

  init() async {
    _token = await storage.read(key: 'token');

    isAuthorized = _token != null;

    notifyListeners();
  }

  login(String token) async {
    storage.write(key: 'token', value: token);

    _token = token;
    isAuthorized = true;

    notifyListeners();
  }

  logout() {
    _token = null;
    isAuthorized = false;
    storage.delete(key: 'token');

    notifyListeners();
  }
}

Register auth model:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:jwt_example/models/auth.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    var authModel = AuthModel();
    authModel.init();

    return ChangeNotifierProvider(
        create: (context) => authModel,
        child: const MaterialApp(
          home: MyHomePage(),
        ));
  }
}

Implement view depends on auth:

lib/main.dart

...
import 'package:http/http.dart' as http;
import 'package:jwt_example/models/auth.dart';
...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Listen auth model changes
    var auth = context.watch<AuthModel>();

    return OutlinedButton(
      onPressed: () async {
        if (auth.isAuthorized) {
          auth.logout();
        } else {
          var url = Uri.parse('http://localhost:8080/login');
          var response = await http.post(url);
          var decodedResponse = jsonDecode(response.body) as Map;

          auth.login(decodedResponse['access_token']);
        }
      },
      child: auth.isAuthorized ? const Text("Logout") : const Text("Login"),
    );
  }
}
...

Run application:

dart run lib/jwt_server.dart
flutter run -d chrome

This simple example can be a point for extending to the specific realization of auth logic in your project.

Useful links:

Get and upgrade Dart
Creating app template
Simple app state management
JSON Web Token
Authentication with JWT in Dart(server)

Simple server on Gorilla WebSocket

David — Sat, 08 Jan 2022 23:22:12 +0000

In this small tutorial, we'll take a closer look at using Gorilla WebSocket to write our own websocket server, at a more functional level than the basic example and easier to understand than the chat example.

What will our server be able to do?

Send new messages from clients to callback
Keep active connections and close / delete inactive
Send messages to active connections

First, we use the standard http help server net/http so that we can catch connection requests:

package main

import (
    "fmt"
    "html"
    "net/http"
)

func main() {
    http.HandleFunc("/", echo)
    http.ListenAndServe(":8080", nil)
}

func echo(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hello, %q", html.EscapeString(r.URL.Path))
}

Now let's teach it to "upgrade" the connection:

import (
    "github.com/gorilla/websocket"
    "net/http"
)

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
        return true // Accepting all requests
    },
}

func echo(w http.ResponseWriter, r *http.Request) {
    connection, _ := upgrader.Upgrade(w, r, nil)
    connection.Close() // Close connection
}

We now have a client connection which we close immediately. We can loop through the messages that the client sends to us and send them back:

func echo(w http.ResponseWriter, r *http.Request) {
    connection, _ := upgrader.Upgrade(w, r, nil)

    for {
        _, message, _ := connection.ReadMessage()

        connection.WriteMessage(websocket.TextMessage, message)
        go messageHandler(message)
    }
}

func messageHandler(message []byte)  {
  fmt.Println(string(message))
}

Let's teach our server to close the connection:

func echo(w http.ResponseWriter, r *http.Request) {
    connection, _ := upgrader.Upgrade(w, r, nil)

    for {
        mt, message, err := connection.ReadMessage()

        if err != nil || mt == websocket.CloseMessage {
            break // Exit the loop if the client tries to close the connection or the connection with the interrupted client
        }

        connection.WriteMessage(websocket.TextMessage, message)

        go messageHandler(message)
    }

    connection.Close()
}

To be able to send messages over different connections, we need to store them somewhere, in our case the simplest map is suitable:

var clients map[*websocket.Conn]bool

func echo(w http.ResponseWriter, r *http.Request) {
    connection, _ := upgrader.Upgrade(w, r, nil)

    clients[connection] = true // Save the connection using it as a key

    for {
        mt, message, err := connection.ReadMessage()

        if err != nil || mt == websocket.CloseMessage {
            break // Exit the loop if the client tries to close the connection or the connection with the interrupted client
        }

        // Send messages to all clients
        go writeMessage(message)

        go messageHandler(message)
    }

    delete(clients, connection) // Removing the connection

    connection.Close()
}

func writeMessage(message []byte) {
    for conn := range clients {
        conn.WriteMessage(websocket.TextMessage, message)
    }
}

Now we can pack our server into a structure to be able to send and receive messages from outside:

package ws

import (
    "github.com/gorilla/websocket"
    "net/http"
)

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
        return true // Accepting all requests
    },
}

type Server struct {
    clients       map[*websocket.Conn]bool
    handleMessage func(message []byte) // New message handler
}

func StartServer(handleMessage func(message []byte)) *Server {
    server := Server{
        make(map[*websocket.Conn]bool),
        handleMessage,
    }

    http.HandleFunc("/", server.echo)
    go http.ListenAndServe(":8080", nil)

    return &server
}

func (server *Server) echo(w http.ResponseWriter, r *http.Request) {
    connection, _ := upgrader.Upgrade(w, r, nil)

    server.clients[connection] = true // Save the connection using it as a key

    for {
        mt, message, err := connection.ReadMessage()

        if err != nil || mt == websocket.CloseMessage {
            break // Exit the loop if the client tries to close the connection or the connection is interrupted
        }

        go server.handleMessage(message)
    }

    delete(server.clients, connection) // Removing the connection

    connection.Close()
}

func (server *Server) WriteMessage(message []byte) {
    for conn := range server.clients {
        conn.WriteMessage(websocket.TextMessage, message)
    }
}

package main

import (
    "fmt"
    "simple-webcoket/ws"
)

func main() {
    server := ws.StartServer(messageHandler)

    for {
        server.WriteMessage([]byte("Hello"))
    }
}

func messageHandler(message []byte) {
    fmt.Println(string(message))
}

Now we have an implementation of a simple webscoket server that is capable of receiving and sending messages over active connections.