DEV Community: uuta

Building a Google Apps Script Workout Logger: Track and Visualize Your Fitness Progress with Spreadsheets and Looker Studio

uuta — Sat, 27 Jul 2024 11:33:55 +0000

I'd like to introduce my experimental repository, which can calculate workout scores on a Spreadsheet with Google Apps Script compiled by clasp. This can leave workout logs in a Spreadsheet and calculate scores automatically.

https://github.com/uuta/gas-workout-logs

Problem Statement

While numerous applications handle workout logs, especially for mobile devices, very few of them are integrated with BI tools like Looker Studio. As I aggregate various information in Looker Studio, I would like to be able also to view my workout logs within Looker Studio.

Development Motivation

Visualize my workouts in Google Looker Studio.
Avoid the hassle of database management as much as possible.
Develop this within a free range as I will be using it for personal purposes only.
Quantify the intensity of my workouts based on weight and reps.
Not create the UI for entering weight and reps from scratch as it would take a lot of time.

Tech Stack

Typescript
Clasp
Google Apps Script
esbuild
prettier

What I've Done

Implemented the aggregation of scored workout logs in a Google Spreadsheet using Google Apps Script.

To facilitate local development, I used Clasp and Typescript to push the code to Google Apps Script (the template used is from https://github.com/howdy39/gas-clasp-starter).
By executing the pushed script on Google Apps Script, it automatically creates a Google Form and integrates it with the spreadsheet.
I also implemented batch processing, where a trigger set in Google Apps Script automatically converts the weight x reps logs collected through the Google Form into daily scores.
New workouts can be added by adding properties to the workoutTitles object.
- https://github.com/uuta/gas-workout-logs/blob/71d76f7494b23f5dc5e85ff7c28e1588193fd2f9/src/template/workoutLogs.ts#L9-L73

const workoutTitles: Record<string, WorkoutEntities> = {
  'Incline dumbbell press': {
    category: 'chest',
    youtubeUrl: '8iPEnn-ltC8&ab_channel=ScottHermanFitness',
  },
  . . .
  // add properties if you want
}

How to use

Here's how to use this repository after git clone.

1. Open a blank Google Spreadsheet

2. Open the script editor

3. Copy the script ID from the URL

Copy the script ID from the URL of the script editor which is like the below.

https://script.google.com/home/projects/<scriptId>/edit

4. Build and push the project

Run the following command in the project directory.

$ yarn run push

5. Run updateWorkoutLogs function

6. Set the trigger

Set the trigger to run the main function every 5 minutes. The main function can calculate the scores with the workout logs based on each weight and count.

7. Check the scores

The calculated scores can be integrated with BI tools like Google Looker Studio. Check the maximum weights and daily scores

Challenges

The handling of timezone and locale is not robust. There are places where I've tried to convert the string date values in the spreadsheet cells to Date objects using new Date(). However, depending on the timezone and locale settings, the spreadsheet may change the date format, causing the new Date() function to fail and result in errors.

Repository

https://github.com/uuta/gas-workout-logs

How to override the colors of NeoSolarized in NeoVim

uuta — Sun, 21 Apr 2024 06:52:40 +0000

Recently, I’d like to alter a theme with a new one in NeoVim. The onedarkpro is a fantastic theme that I’ve used for a long time, but it’s difficult to defeat the temptation to try out another theme like NeoSolarized.

First, I installed NeoSolarized.nvim via lazy.nvim, so the code would be simple like the following one.

return {
    {
        "Tsuzat/NeoSolarized.nvim",
        config = function()
            local neosolarized = require('NeoSolarized')
            neosolarized.setup {
                transparent = true,
            }
        end
    }
}

But I wanted to customize it more.

There was no explicit description in README to modify styles, but referring theme.lua in NeoSolarized, colors can be overridden.

return {
    {
        "Tsuzat/NeoSolarized.nvim",
        config = function()
            -- https://github.com/Tsuzat/NeoSolarized.nvim/blob/208e65a3ede945b8a1d00104a4441217c5e23509/lua/NeoSolarized/theme.lua#L1-L11
            local neosolarized = require('NeoSolarized')
            local cls = require("NeoSolarized.colors")
            local config = require("NeoSolarized.config")
            local options = config.options
            local theme = {config = options, colors = cls.setup()}

            local c = theme.colors
            c.green = '#40f7d2'
            c.yellow = '#eaea8a'
            c.red = '#ea4481'
            c.blue = '#2bb3d8'
            c.fg0 = '#dde8d5'
            c.orange = '#dd9f4d'
            neosolarized.setup {
                transparent = true,
                -- https://github.com/Tsuzat/NeoSolarized.nvim/blob/208e65a3ede945b8a1d00104a4441217c5e23509/lua/NeoSolarized/theme.lua#L748
                styles = {
                    comments = {italic = false},
                    keywords = {italic = false, bold = true},
                    string = {italic = false}
                },
                on_highlights = function(highlights, colors)
                    -- highlights.Include.fg = colors.red -- Using `red` foreground for Includes
                end
            }
        end
    }
}

Awesome plugin: ChatGPT with NeoVim

uuta — Sun, 18 Dec 2022 05:14:17 +0000

Today, OpenAI GPT-3 chatbot has enormous potential. Lately, there’s been a new AI bot in town: ChatGPT.

https://chat.openai.com

Releasing ChatGPT, it seems that many ambitious software engineers work on advancing its API via Slack, Line bot, and so on. I was finding luckily a NeoVim plugin that interacts with OpenAI’s GPT-3 chatbot: ChatGPT.nvim.

I’m a heavy user who’s enthusiastic to try a new feature of NeoVim, so this time I also began introducing this fascinating plugin. I will share with you how we use it and ChatGPT.nvim works.

Input the touch command to make .openai_key.zsh file.

$ touch $HOME/.openai_key.zsh
$ vi $HOME/.openai_key.zsh

Modify $HOME/.openai_key.zsh to set OPEN_API_KEY that is obtainable on this page.

export OPENAI_API_KEY=<value>

Add the following code into ~/.zshrc file.

# ChatGPT
source "$HOME/.openai_key.zsh"

The reason why sets up an environment variable via .zsh is that the ChatGPT NeoVim plugin reads it with os.getenv() which is the method in python to extract an environment variable.

https://github.com/jackMort/ChatGPT.nvim/blob/6f602143d64b506fa8fcfa349df54ddb289360f2/lua/chatgpt/api.lua#L9-L13

Execute the following command to load configurations.

$ source ~/.zshrc

Let’s move on to the next subject which configures NeoVim. It depends on developers about how the NeoVim configuration is, so the next description might not be suitable for everybody. I would be glad to consider what your configuration is. My NeoVim environment is there.

P*lugin/package manager*: https://github.com/wbthomason/packer.nvim
Where writes code: init.lua

If you’ve already handled packer.nvim, installing ChatGPT.nvim is really effortless. Copy and paste the next code in the require(’packer’).

require('packer').startup(function(use)
    ...
    -- ChatGPT
    -- https://github.com/jackMort/ChatGPT.nvim
    use({
        "jackMort/ChatGPT.nvim",
        config = function() require("chatgpt").setup({}) end,
        requires = {
            "MunifTanjim/nui.nvim", "nvim-lua/plenary.nvim",
            "nvim-telescope/telescope.nvim"
        }
    })
    ...
)

Then, install it.

:PackerInstall

Currently, three commands are available in ChatGPT.nvim. So I registered those in init.lua as my key bindings.

-- ChatGPT
-- https://github.com/jackMort/ChatGPT.nvim
vim.keymap.set('n', '<Leader>tk', '<cmd>:ChatGPT<cr>')
vim.keymap.set('n', '<Leader>tj', '<cmd>:ChatGPTActAs<cr>')
vim.keymap.set('n', '<Leader>tt', '<cmd>:ChatGPTEditWithInstructions<cr>')

Let’s take a look at the screen after pushing the command <Leader>tt or :ChatGPTEditWithInstructions: opens an interactive window to edit selected text or the whole window.

Super cool! OpenAI GPT-3 chatbot returned a response that fixed a bug. Of course, the response from OpenAI GPT-3 chatbot might be not always correct and proper, but it will give you great insight and improve your velocity of development.

Beginner’s CI/CD Guide: Deploy Laravel8 to Google Cloud Run and Cloud SQL via GitHub Actions

uuta — Tue, 15 Feb 2022 08:26:35 +0000

Application deployment is one of the important dimensions, including all of the steps, processes of installing, configuring, and enabling a specific application or set of applications. However, I didn’t figure out well what is continuous integration.

For learning it, I started to deploy a Laravel8 application to Google Cloud Run, develop and deploy highly scalable containerized applications on a fully managed serverless platform. But pieces of information about it scattered out on WEB, and I was desperate to understand it, wasting time.

So I will share with you as easily as possible the way of deployment to Google Cloud Run and Google Cloud SQL via GitHub Actions. Let’s get started!

Directory architecture

The next figure shows us the directory architecture of the git repository.

.
├── .github/
│   └── workflows
│       └── deploy.yml # yml file to run scripts in Github Actions
├── env/
├── docker/
│   ├── 000-default.conf
│   ├── Dockerfile
│   └── php.ini
├── sh/ # useful shell files
├── src/ # the directory installed Laravel application
└── docker-compose.yml

1. Build and run the Laravel application on Docker compose

https://github.com/uuta/cloud-run-laravel8

1-1. Clone a repository from GitHub

In this time, we will proceed as the next repository. Under the directory you like, let’s clone it initially and move there.

$ git clone git@github.com:uuta/cloud-run-laravel8.git
$ cd cloud-run-laravel8

Build and run the Laravel application on Docker compose to make sure of working out well.

$ cp env/.env.example env/.env.local
$ docker-compose up -d --build
...
...
...
Creating cloud-run-laravel8_db_1  ... done
Creating cloud-run-laravel8_app_1 ... done
Time: 0h:00m:24s

The APP_KEY in src/.env would be empty, so create it in a docker container.

$ docker-compose exec app bash
$ php artisan route:clear && \
php artisan cache:clear && \
php artisan config:clear && \
php artisan view:clear && \
php artisan key:generate

A Laravel app key would be generated.

# before
APP_KEY=
# after
APP_KEY=base64:<key>

Alright, we'll see the default page of Laravel to access http://localhost:8080/ after the installation.

How about migration? If you execute the migration command after entering the app container, maybe you can see a message such as the next.

$ docker-compose exec app bash
$ php artisan migrate
Nothing to migrate.

The reason why migration has already finished is to be executed while building a docker image based on Dockerfile. Let’s take a look at Dockerfile.local for a while.

FROM composer:latest as build
WORKDIR /app
COPY . /app

FROM php:8.0-apache
COPY docker/php.ini /usr/local/etc/php/
RUN apt update
RUN apt install -y git
RUN apt install -y vim
RUN apt install -y zip unzip
RUN docker-php-ext-install bcmath pdo_mysql

# composer install
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
EXPOSE 8080
COPY --from=build /app /var/www
COPY docker/000-default.conf /etc/apache2/sites-available/000-default.conf
RUN chmod 777 -R /var/www

WORKDIR /
RUN echo "Listen 8080" >> /etc/apache2/ports.conf
RUN chown -R www-data:www-data /var/www
RUN a2enmod rewrite

# Make the file executable, or use "chmod 777" instead of "chmod +x"
RUN chmod +x /var/www/sh/laravel/laravel.local.sh

# This will run the shell file at the time when container is up-and-running successfully (and NOT at the BUILD time)
ENTRYPOINT ["/var/www/sh/laravel/laravel.local.sh"]

At the end of this file, there are codes to execute a shell command.

RUN chmod +x /var/www/sh/laravel/laravel.local.sh
...
ENTRYPOINT ["/var/www/sh/laravel/laravel.local.sh"]

So let’s take a look at sh/laravel/laravel.local.sh file. composer install and migrate commands are executed here.

#!/bin/bash

# initialize laravel
cd /var/www/src
composer install --optimize-autoloader
php artisan config:cache
php artisan route:cache
php artisan view:cache

# Run Laravel migration
php artisan migrate

# Run Apache in "foreground" mode (the default mode that runs in Docker)
apache2-foreground

The reason why I dare to make this file is to migrate to Google Cloud SQL in the production environment. According to the next page, the Google Cloud SQL connection is not available during the build phase. Thus, I had to put these commands out for execution after building successfully. In the local environment, this application attempts to connect with the local database instead of Google Cloud SQL.

https://github.com/GoogleCloudPlatform/community/issues/351#issuecomment-370056462

1-2. More detail of Dockerfile

Let’s see Dockerfile.local again. I can’t explain everything, but I’ll try to add descriptions briefly. To build an image on Google Cloud Run, shell scripts expose port of 8080.

EXPOSE 8080
...
RUN echo "Listen 8080" >> /etc/apache2/ports.conf

This command copies 000-default.conf to configure the Apache WEB server.

COPY docker/000-default.conf /etc/apache2/sites-available/000-default.conf

2. Deploy Laravel application to Google Cloud Run

Now let's deploy the Laravel application from the local side. First, let docker containers be down.

$ docker-compose down

2-1. Set up GCP with console

Execute the following commands with checking project name in GCP.

$ gcloud auth login
$ PROJECT_NAME=(<Project name in GCP>)
PROJECT_ID=$(gcloud projects list --format 'value(projectId)' --filter name=$PROJECT_NAME)
export PROJECT_ID
gcloud config set project $PROJECT_ID
gcloud services enable \
    containerregistry.googleapis.com \
    cloudresourcemanager.googleapis.com \
    iam.googleapis.com

2-2. Create an authorized service account

Create a service account and give it Owner privileges. Download the key, save it as laravel8_google_cloud_run_key.json, set it as an environment variable, and authorize it as a service account. The following command makes it possible.

$ gcloud iam service-accounts create deployer \
    --display-name "deployer"
gcloud projects add-iam-policy-binding ${PROJECT_ID} \
  --member serviceAccount:deployer@${PROJECT_ID}.iam.gserviceaccount.com \
  --role roles/owner
export GOOGLE_APPLICATION_CREDENTIALS=credentials/laravel8_google_cloud_run_key.json
gcloud iam service-accounts keys create $GOOGLE_APPLICATION_CREDENTIALS \
  --iam-account deployer@${PROJECT_ID}.iam.gserviceaccount.com
gcloud auth activate-service-account --key-file=$GOOGLE_APPLICATION_CREDENTIALS

In the above example command, laravel8_google_cloud_run_key.json is stored in the credentials directory.

export GOOGLE_APPLICATION_CREDENTIALS=~/credentials/laravel8_google_cloud_run_key.json

2-3. Build docker image

Build docker image instead of docker-compose command.

$ export SERVICE_NAME=docker-laravel8-run
docker build -f docker/Dockerfile.prod -t asia.gcr.io/${PROJECT_ID}/${SERVICE_NAME} .

Run a docker container to work out correctly on the local environment.

$ docker run --init -d -e PORT=8080 -p 8080:8080 asia.gcr.io/${PROJECT_ID}/${SERVICE_NAME}

Make sure the local page works correctly.

2-4. Push the docker image to Container Registry

$ gcloud auth configure-docker
docker push asia.gcr.io/${PROJECT_ID}/${SERVICE_NAME}

You’ll make sure to register a repository named docker-laravel8.

2-5. Enable Cloud SQL Admin API

To connect Google Cloud Run and Google Cloud SQL, try to enable Cloud SQL Admin API.

Connect from Cloud Run | Cloud SQL for MySQL | Google Cloud

3. Google Cloud SQL

Create a Google Cloud SQL instance temporarily for test. I’ll create an instance like the following example in this sample, but you can modify configuration for your environment. This process might take a long time.

$ DATABASE_NAME=(docker-laravel8-run)
gcloud sql instances create $DATABASE_NAME \
  --database-version=MYSQL_8_0 \
  --region=us-central1 \
  --storage-size=100 \
  --storage-type=HDD \
  --tier=db-f1-micro \
  --root-password=homestead

It would be better to create a database named laravel.

$ gcloud sql databases create laravel \
--instance=$DATABASE_NAME

Create and manage databases | Cloud SQL for MySQL | Google Cloud

3-1. Deploy to Google Cloud Run

Let’s try to deploy to Google Cloud Run. Replace <Connection name> to the Connection name in Google Cloud SQL and execute the following command.

$ SQL_CONNECTION_NAME=(<Connection name>)
gcloud run deploy ${SERVICE_NAME} \
--image asia.gcr.io/"${PROJECT_ID}"/"${SERVICE_NAME}" \
--region asia-east1 \
--platform=managed \
--add-cloudsql-instances ${SQL_CONNECTION_NAME} \
--allow-unauthenticated

A URL will be generated after deploying. Make sure to be shown the page for Laravel8 correctly.

4. Deploy from GitHub Actions

4-1. Brief description

Now we’ve deployed the Laravel application successfully from the Local environment. Then, let’s consider deploying from GitHub Actions. I’m assumed that GitHub Actions runs commands to deploy when commits are pushed to the master or main branch. In this example, the deploy command is defined in .github/workflows/deploy.yml file. And the trigger for deployment is set when pushing to master.

name: cloud-run-laravel8-deploy
on:
  push:
    branches:
      - master

Let’s see some more. This remote repository has no .env file to configure the Laravel application by the .gitignore file. So we should put .env file only when deploying. Then, by encoding an environment variable decoded as base64 of the .env file on the local, it’s available to deploy.

- name: Decode .env file
  run: |
    echo ${{ secrets.TEST_ENV_FILE }} | base64 --decode > src/.env

There are six environment variables in .github/workflows/deploy.yml file.

secrets.TEST_GCP_EMAIL: deploy email
secrets.TEST_GCP_CREDENTIALS: the content of credentials/laravel8_google_cloud_run_key.json in your local environment
secrets.TEST_ENV_FILE: env/.env.prod
secrets.TEST_GCP_PROJECT: project id
secrets.TEST_GCP_APPLICATION: service name
secrets.TEST_SQL_CONNECTION_NAME: SQL connection name

4-2. Change remote repository

Then, change the remote branch to test-cloud-run . The name can be anything you like.

$ git config remote.origin.url
git@github.com:uuta/cloud-run-laravel8.git
$ git remote set-url origin git@github.com:uuta/test-cloud-run.git
$ git config remote.origin.url

4-3. Enter the environment variables

Enter the environment variables on GitHub like this.

TEST_GCP_EMAIL can be obtained from the Google Cloud Run UI.

Modifying TEST_ENV_FILE is somewhat tricky. First of all, copy the .env.example file as .env.prod.

$ cp env/.env.local env/.env.prod

Modify the .env.prod file as follows, and don't forget to add DB_SOCKET.

APP_NAME=Laravel
APP_ENV=production
APP_KEY=<your app key>
APP_DEBUG=false
APP_URL=<your app url>

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=homestead
DB_SOCKET=/cloudsql/<connection name to Google Cloud SQL>

By the following command, values in the env file will transfer to string encoded Base64. So you can copy and paste it as the value of TEST_ENV_FILE.

$ cat env/.env.prod | base64 | pbcopy

4-4. Git push, and then deploy automatically

$ git push

After pushing the master repository, it will automatically start deploying in your remote repository. Please check if it succeeds.

You made it!

References

A quick guide: obtaining current location on Google Maps using Riverpod in Flutter

uuta — Mon, 13 Dec 2021 06:55:14 +0000

Goal: Get the current location and set a marker

Hi everyone! This article will look at how we get the current location of the user and set a marker as being a specific location on Flutter. This app has several features as shown below.

Show Google Map by google_maps_flutter
Obtain the current location
Set the marker and shift for it after pushing the bottom right button

Get API key

At first, let's obtain your API key for Google Maps.

Fix AndroidManifest.xml

android/app/src/main/AndroidManifest.xml



<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.googlemap.testgooglemap">
     // Add this
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
   <application
        android:label="testgooglemap"
        android:icon="@mipmap/ic_launcher">
                // Add this
                <meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="<YOUR API KEY>" />
        ...
    </application>
</manifest>

Modify AppDelegate.swift

ios/Runner/AppDelegate.swift



import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("<YOUR API KEY>")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Add a key in Info.plist

To show a dialog to allow the user gives the current location to app, put a pair of key and description into Info.plist .

ios/Runner/Info.plist



<dict>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>Your location is required for this app</string>
        ...
</dict>

Upgrade minSdkVersion in build.gradle

You have to make minSdkVersion going up to 20 from 16 for working out well this app on google_maps_flutter package. In my case, I also had to fix compileSdkVersion to 31.

google_maps_flutter | Flutter Package



android {
        compileSdkVersion 31 // up to 31 from 30
        ...
    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.googlemap.testgooglemap"
        minSdkVersion 20 // up to 20 from 16
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

pubspec.yaml



dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  google_maps_flutter: ^2.1.1
  geolocator: ^8.0.0
  riverpod: ^1.0.0
  flutter_hooks: ^0.18.0
  hooks_riverpod: ^1.0.0
  http: ^0.13.4
  freezed_annotation: ^1.0.0
  json_annotation: ^4.3.0
  flutter_secure_storage: ^5.0.1
  geocoding: ^2.0.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  freezed: ^1.0.0
  build_runner: ^2.1.5
  json_serializable: ^6.0.1

main.dart

Let's modify your code in main.dart. Some errors would be shown on your text editor when pasting it, but don't have to be careful about that for now. We'll fix it up by adding other code.

lib/main.dart



import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '/models/controllers/location/location_controller.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'dart:async';

void main() {
  runApp(ProviderScope(
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Homepage(),
    );
  }
}

class Homepage extends HookConsumerWidget {
  const Homepage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final locationState = ref.watch(locationNotifierProvider);
    final locationNotifier = ref.watch(locationNotifierProvider.notifier);

    useEffect(() {
      Future.microtask(() async {
        ref.watch(locationNotifierProvider.notifier).getCurrentLocation();
      });
      return;
    }, const []);

    return Scaffold(
        body: locationState.isBusy
            ? const Center(child: CircularProgressIndicator())
            : GoogleMap(
                mapType: MapType.normal,
                myLocationButtonEnabled: true,
                myLocationEnabled: true,
                zoomControlsEnabled: false,
                initialCameraPosition: CameraPosition(
                  target: locationState.currentLocation,
                  zoom: 14.4746,
                ),
                markers: locationState.markers,
                onMapCreated: locationNotifier.onMapCreated,
              ),
        floatingActionButton: FloatingActionButton(
            onPressed: () async {
              locationNotifier.getNewLocation();
            },
            child: const Icon(Icons.location_searching)));
  }
}

Let's take a look at that. We can handle the state on Flutter by Riverpod. In this sample app, locationState for reading state and locationNotifier for changing state are defined.



@override
Widget build(BuildContext context, WidgetRef ref) {
  final locationState = ref.watch(locationNotifierProvider);
  final locationNotifier = ref.watch(locationNotifierProvider.notifier);

useEffect is useful to initialize something on every build. In here's sample, we call the getCurrentLocatoin() function defined in location_controller.dart for state management.



useEffect(() {
  Future.microtask(() async {
    locationNotifier.getCurrentLocation();
  });
  return;
}, const []);

When user presses the bottom right button, FloatingActionButton() call getNewLocation() function that shifts the position of camera and sets a pin.



floatingActionButton: FloatingActionButton(
    onPressed: () async {
      locationNotifier.getNewLocation();
    },
    child: const Icon(Icons.location_searching)));

LocationController

As you can see, LocationController extends StateNotifier class.

lib/models/controllers/location/location_controller.dart



import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:riverpod/riverpod.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter/material.dart';
import '/models/repositories/location/location_repository.dart';
import '/models/controllers/location/location_state.dart';
import 'dart:async';

final locationNotifierProvider =
    StateNotifierProvider<LocationController, LocationState>(
  (ref) => LocationController(),
);

class LocationController extends StateNotifier<LocationState> {
  LocationController() : super(const LocationState());

  final repository = LocationRepository();
  final Completer<GoogleMapController> _mapController = Completer();

  void onMapCreated(GoogleMapController controller) {
    _mapController.complete(controller);
  }

  Future<void> getCurrentLocation() async {
    state = state.copyWith(isBusy: true);
    try {
      final data = await repository.getCurrentPosition();
      state = state.copyWith(
          isBusy: false,
          currentLocation: LatLng(data.latitude, data.longitude));
    } on Exception catch (e, s) {
      debugPrint('login error: $e - stack: $s');
      state = state.copyWith(isBusy: false, errorMessage: e.toString());
    }
  }

  Future<void> getNewLocation() async {
    await _setNewLocation();
    await _setMaker();
  }

  Future<void> _setNewLocation() async {
    state = state.copyWith(newLocation: const LatLng(35.658034, 139.701636));
  }

  Future<void> _setMaker() async {
    // Set markers
    final Set<Marker> _markers = {};
    _markers.add(Marker(
        markerId: MarkerId(state.newLocation.toString()),
        position: state.newLocation,
        infoWindow:
            const InfoWindow(title: 'Remember Here', snippet: 'good place'),
        icon: BitmapDescriptor.defaultMarker));
    state = state.copyWith(markers: _markers);

    // Shift camera position
    CameraPosition _kLake =
        CameraPosition(target: state.newLocation, zoom: 14.4746);
    final GoogleMapController controller = await _mapController.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}

LocationController defines three functions to call from main.dart.



void onMapCreated(GoogleMapController controller) {}
Future<void> getCurrentLocation() async {}
Future<void> getNewLocation() async {}

Freezed for controller

This sample app uses Freezed package, making the data immutable easily. This is used for LocationController.

lib/models/controllers/location/location_state.dart



import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:flutter/foundation.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

part 'location_state.freezed.dart';

@freezed
class LocationState with _$LocationState {
  const factory LocationState({
    @Default(false) bool isBusy,
    @Default(LatLng(35.658034, 139.701636)) LatLng currentLocation,
    @Default(LatLng(35.658034, 139.701636)) LatLng newLocation,
    @Default({}) Set<Marker> markers,
    String? errorMessage,
  }) = _LocationState;
}

Run the following command with build_runner.



$ flutter pub run build_runner build --delete-conflicting-outputs

Repository class for the error handling

We'll also set up getCurrentPosition() in LocationRepository class, the function to handle errors on the permission regarding the location.

lib/models/repositories/location/location_repository.dart



import 'package:geolocator/geolocator.dart';

class LocationRepository {

  Future<Position> getCurrentPosition() async {

    bool serviceEnabled;

    LocationPermission permission;

<span class="n">serviceEnabled</span> <span class="o">=</span> <span class="k">await</span> <span class="n">Geolocator</span><span class="o">.</span><span class="na">isLocationServiceEnabled</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="n">serviceEnabled</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="n">Future</span><span class="o">.</span><span class="na">error</span><span class="p">(</span><span class="s">'Location services are disabled.'</span><span class="p">);</span>
<span class="p">}</span>

<span class="n">permission</span> <span class="o">=</span> <span class="k">await</span> <span class="n">Geolocator</span><span class="o">.</span><span class="na">checkPermission</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="n">permission</span> <span class="o">==</span> <span class="n">LocationPermission</span><span class="o">.</span><span class="na">denied</span><span class="p">)</span> <span class="p">{</span>
  <span class="n">permission</span> <span class="o">=</span> <span class="k">await</span> <span class="n">Geolocator</span><span class="o">.</span><span class="na">requestPermission</span><span class="p">();</span>
  <span class="k">if</span> <span class="p">(</span><span class="n">permission</span> <span class="o">==</span> <span class="n">LocationPermission</span><span class="o">.</span><span class="na">denied</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="n">Future</span><span class="o">.</span><span class="na">error</span><span class="p">(</span><span class="s">'Location permissions are denied'</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="k">if</span> <span class="p">(</span><span class="n">permission</span> <span class="o">==</span> <span class="n">LocationPermission</span><span class="o">.</span><span class="na">deniedForever</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="n">Future</span><span class="o">.</span><span class="na">error</span><span class="p">(</span>
      <span class="s">'Location permissions are permanently denied, we cannot request permissions.'</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">return</span> <span class="k">await</span> <span class="n">Geolocator</span><span class="o">.</span><span class="na">getCurrentPosition</span><span class="p">(</span>
    <span class="nl">desiredAccuracy:</span> <span class="n">LocationAccuracy</span><span class="o">.</span><span class="na">high</span><span class="p">);</span>



}

}

References

Integrate with Auth0 using Riverpod to manage state

uuta — Mon, 06 Dec 2021 03:56:53 +0000

Introduction

Hi all, this is my second article in Dev.to. I'm gonna try to describe how your Flutter application with Riverpod integrates to Auth0, providing authentication and authorization as a service. As you might know, some amazing articles for the Auth0 integration are here. You would also begin to make an implementation along with these.

However, I needed to know more about how should manage the state practically. This article will show you the way that handles the state with Riverpod on Flutter.

Goal

To integrate Auth0 with the Flutter app.

Directory hierarchy

.
├── lib
│   ├── main.dart
│   ├── consts
│   │   ├── auth0.dart
│   ├── models
│   │   ├── controllers
│   │   │   ├── auth0
│   │   │   │   ├── auth0_controller.dart
│   │   │   │   ├── auth0_state.dart
│   │   ├── repositories
│   │   │   ├── auth0_repository.dart
│   ├── views
│   │   ├── login_view.dart
│   │   ├── profile_view.dart

Set up in Auth0

1. Create your application in Auth0

Create your application named testauth0, being type of Native.

2. Make sure of the Domain and Client ID

To integrate the Flutter application with Auth0, you need to know Domain and Client ID for API integration. Those information is in the Basic information upon Settings tab.

3. Set the call back URL

Input com.auth0.testauth0://login-callback into Allowed Callback URLs. This URL also will be reused as the constant variable in Flutter.

Callback URLs

Implement the code

In this case, let's create an application named testauth0.

$ flutter create --org com.auth0 testauth0

Package install

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  riverpod: ^1.0.0
  flutter_hooks: ^0.18.0
  hooks_riverpod: ^1.0.0
  http: ^0.13.4
  freezed_annotation: ^1.0.0
  json_annotation: ^4.3.0
  flutter_appauth: ^2.1.0+1
  flutter_secure_storage: ^5.0.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  freezed: ^1.0.0
  build_runner: ^2.1.5
  json_serializable: ^6.0.1

Run the next command to install packages in your shell.

$ flutter pub get

Build gradle (for Android)

defaultConfig {
    applicationId "com.auth0.testauth0"
    minSdkVersion 18 //　up from 16
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
    // add this
    manifestPlaceholders = [
        'appAuthRedirectScheme': 'com.auth0.testauth0'
    ]
}

info.plist (for iOS)

Add CFBundleURLTypes into <dict> in info.plist file.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.auth0.testauth0</string>
        </array>
    </dict>
</array>

1. Define the const file

class ConstsAuth0 {
  static const String AUTH0_DOMAIN = '<Domain>';
  static const String AUTH0_CLIENT_ID = '<Client ID>';
  static const String AUTH0_ISSUER = 'https://$AUTH0_DOMAIN';
  static const String AUTH0_REDIRECT_URI =
      'com.auth0.testauth0://login-callback';
}

2. main.dart

Modify your code in main.dart as below. Don't worry about some errors after pasting the code because we'll fix those in another section.

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '/models/controllers/auth0/auth0_controller.dart';
import '/views/login_view.dart';
import '/views/profile_view.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(ProviderScope(
    child: MyApp(),
  ));
}

class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final auth0State = ref.watch(auth0NotifierProvider);
    useEffect(() {
      Future.microtask(() async {
        ref.watch(auth0NotifierProvider.notifier).initAction();
      });
      return;
    }, const []);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Auth0 state management"),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: auth0State.isBusy
              ? const CircularProgressIndicator()
              : auth0State.isLoggedIn
                  ? const ProfileView()
                  : const LoginView(),
        ),
      ),
    );
  }
}

Wrap MyApp widget by ProviderScope.

void main() {
  runApp(ProviderScope(
    child: MyApp(),
  ));
}

useEffect function is effective in such cases like fetching data or calling API while building a widget. We call initAction() function, defined in auth0_controller.dart, processing login or logout.

useEffect(() {
  Future.microtask(() async {
    ref.watch(auth0NotifierProvider.notifier).initAction();
  });
  return;
}, const []);

Let's take a look at the child argument in Center, switches widgets by depending on isBusy and isLoggedIn state. If isLoggedIn state is true, ProfileView widget is appeared. We'll also figure two widgets out later.

body: Center(
  child: auth0State.isBusy
      ? const CircularProgressIndicator()
      : auth0State.isLoggedIn
          ? const ProfileView()
          : const LoginView(),
),

3-1. Controller on StateNotifier

To make a state management and call repository class, let's make auth0_controller.dart file.

import 'package:riverpod/riverpod.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '/models/controllers/auth0/auth0_state.dart';
import '/models/repositories/auth0/auth0_repository.dart';
import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

final auth0NotifierProvider =
    StateNotifierProvider<Auth0Controller, Auth0State>(
  (ref) => Auth0Controller(),
);

class Auth0Controller extends StateNotifier<Auth0State> {
  Auth0Controller() : super(const Auth0State());

  final repository = Auth0Repository();

  Future<void> initAction() async {
    state = state.copyWith(isBusy: true);
    try {
      final storedRefreshToken =
          await const FlutterSecureStorage().read(key: 'refresh_token');

      // Check stored refresh token
      if (storedRefreshToken == null) {
        state = state.copyWith(isBusy: false);
        return;
      }

      // Call init action repository
      final data = await repository.initAction(storedRefreshToken);
      state = state.copyWith(isBusy: false, isLoggedIn: true, data: data);
    } on Exception catch (e, s) {
      debugPrint('login error: $e - stack: $s');
      logout();
    }
  }

  Future<void> login() async {
    state = state.copyWith(isBusy: true);
    try {
      final data = await repository.login();
      state = state.copyWith(isBusy: false, isLoggedIn: true, data: data);
    } on Exception catch (e, s) {
      debugPrint('login error: $e - stack: $s');
      state = state.copyWith(
          isBusy: false, isLoggedIn: false, errorMessage: e.toString());
    }
  }

  Future<void> logout() async {
    state = state.copyWith(isBusy: true);
    await const FlutterSecureStorage().delete(key: 'refresh_token');
    state = state.copyWith(isBusy: false, isLoggedIn: false);
  }
}

Three Future function are defined to manage state and call functions in the repository class.

Future<void> initAction() async {}
Future<void> login() async {}
Future<void> logout() async {}

Auth0Controller class extends StateNotifier, possesses one state, works on Riverpod. Auth0Controller provides Auth0State() to the constructor as a variable of state. To make more concrete, let's take a look at Auth0State() .

class Auth0Controller extends StateNotifier<Auth0State> {
  Auth0Controller() : super(const Auth0State());

3-2. Freezed for the controller

The Freezed package has an effect that changes class being immutable.

import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:flutter/foundation.dart';

part 'auth0_state.freezed.dart';

@freezed
abstract class Auth0State with _$Auth0State {
  const factory Auth0State({
    @Default(false) bool isBusy,
    @Default(false) bool isLoggedIn,
    Map? data,
    String? errorMessage,
  }) = _Auth0State;
}

As I mentioned before, Auth0State defines the state in Auth0Controller class. In our Flutter app, Auth0State is consisted by isBusy, isLoggedIn, data and errorMessage. These variables hinges on the definition of your app.

@freezed
abstract class Auth0State with _$Auth0State {
  const factory Auth0State({
    @Default(false) bool isBusy,
    @Default(false) bool isLoggedIn,
    Map? data,
    String? errorMessage,
  }) = _Auth0State;
}

We also set down the below. It means that Flutter will generate auth0_state.freezed.dart file and regard it as a library.

part 'auth0_state.freezed.dart';

To generate auth0_state.freezed.dart, run the next code.

$ flutter pub run build_runner build --delete-conflicting-outputs

4. Repository

Here is Auth0Repository class to call Auth0 API and then return the result from it. In the course of processing, the refresh token is stored to FlutterSecureStorage() .

import 'package:flutter_appauth/flutter_appauth.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import '/consts/auth0.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class Auth0Repository {
  Future<Map<String, Object>> initAction(String storedRefreshToken) async {
    final response = await _tokenRequest(storedRefreshToken);

    final idToken = _parseIdToken(response?.idToken);
    final profile = await _getUserDetails(response?.accessToken);

    const FlutterSecureStorage()
        .write(key: 'refresh_token', value: response!.refreshToken);

    return {...idToken, ...profile};
  }

  Future<TokenResponse?> _tokenRequest(String? storedRefreshToken) async {
    return await FlutterAppAuth().token(TokenRequest(
      ConstsAuth0.AUTH0_CLIENT_ID,
      ConstsAuth0.AUTH0_REDIRECT_URI,
      issuer: ConstsAuth0.AUTH0_ISSUER,
      refreshToken: storedRefreshToken,
    ));
  }

  Future<Map<String, Object>> login() async {
    final AuthorizationTokenResponse? result = await _authorizeExchange();

    final Map<String, Object> idToken = _parseIdToken(result?.idToken);
    final Map<String, Object> profile =
        await _getUserDetails(result?.accessToken);

    await const FlutterSecureStorage()
        .write(key: 'refresh_token', value: result!.refreshToken);
    return {...idToken, ...profile};
  }

  Future<AuthorizationTokenResponse?> _authorizeExchange() async {
    return await FlutterAppAuth().authorizeAndExchangeCode(
      AuthorizationTokenRequest(
          ConstsAuth0.AUTH0_CLIENT_ID, ConstsAuth0.AUTH0_REDIRECT_URI,
          issuer: ConstsAuth0.AUTH0_ISSUER,
          scopes: <String>['openid', 'profile', 'offline_access', 'email'],
          promptValues: ['login']),
    );
  }

  Map<String, Object> _parseIdToken(String? idToken) {
    final List<String> parts = idToken!.split('.');
    assert(parts.length == 3);

    return Map<String, Object>.from(jsonDecode(
        utf8.decode(base64Url.decode(base64Url.normalize(parts[1])))));
  }

  Future<Map<String, Object>> _getUserDetails(String? accessToken) async {
    final http.Response response = await http.get(
      Uri.parse(ConstsAuth0.AUTH0_ISSUER + '/userinfo'),
      headers: <String, String>{'Authorization': 'Bearer $accessToken'},
    );

    if (response.statusCode == 200) {
      return Map<String, Object>.from(jsonDecode(response.body));
    } else {
      throw Exception('Failed to get user details');
    }
  }
}

5-1. Login view

This is LoginView widget called from main.dart.

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '/models/controllers/auth0/auth0_controller.dart';

class LoginView extends HookConsumerWidget {
  const LoginView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final auth0State = ref.watch(auth0NotifierProvider);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () async {
            ref.read(auth0NotifierProvider.notifier).login();
          },
          child: const Text('Login'),
        ),
        Text(auth0State.errorMessage ?? ''),
      ],
    );
  }
}

5-2. Profile view

We also define ProfileView.

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '/models/controllers/auth0/auth0_controller.dart';

class ProfileView extends HookConsumerWidget {
  const ProfileView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final auth0State = ref.watch(auth0NotifierProvider);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 150,
          height: 150,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.blue, width: 4),
            shape: BoxShape.circle,
            image: DecorationImage(
              fit: BoxFit.fill,
              image: NetworkImage(auth0State.data!['picture'] ?? ''),
            ),
          ),
        ),
        const SizedBox(height: 24),
        Text('Name: ' + auth0State.data!['name']),
        const SizedBox(height: 48),
        ElevatedButton(
          onPressed: () async {
            ref.read(auth0NotifierProvider.notifier).logout();
          },
          child: const Text('Logout'),
        ),
      ],
    );
  }
}

References

Create a simple Flutter app with Riverpod v1.0.0

uuta — Sun, 14 Nov 2021 07:54:08 +0000

Riverpod

Riverpod is a Reactive State-Management and Dependency Injection Framework library on Flutter. Nov 5, 2021, the release date of version 1.0.0 has come, and modified some features. In this article, I'll try to describe how you would manage the state by Riverpod with simple application.

What is Riverpod?

No more ProviderNotFoundException
Provider inspires Riverpod but solves some of its key issues
No dependency on Flutter

Riverpod

Goal

Let's make a simple app that counts number per pushing a button.

Environment

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0
  flutter_hooks: ^0.18.0
  hooks_riverpod: ^1.0.0

1. Update state with StateNotifierProvider

Use StateNotifierProvider , StateNotifier , HookConsumerWidget to update and read state.

2. Import packages

import 'package:flutter/material.dart';
import 'package:riverpod/riverpod.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

3. Define countStateProvider variable with StateNotifierProvider

StateNotifierProvider is combined with StateNotifier .

StateNotifierProvider class - riverpod library - Dart API

final countStateProvider =
    StateNotifierProvider<CountState, int>((ref) => CountState(0));

4. Set up CountState class with StateNotifier

StateNotifier is an observable class that stores a single immutable state. At first, create CountState class extended StateNotifier class.

class CountState extends StateNotifier<int> {
  CountState(int count) : super(count);

  void increment() => state = state + 1;
}

StateNotifier is designed to be subclassed. You first need to give an initial value to the super constructor. In the above, CountState class receives the count argument, and then passes it to the super constructor.

CountState(int count) : super(count);

The next shows the published method to allow other objects modify to modify the counter.

void increment() => state = state + 1;

It is possible to define multiple methods in StateNotifier class.

void increment() => state++;
void decrement() => state--;

5. ProviderScope on Riverpod

All applications dealing with Riverpod must contain a ProviderScope at the root of your widget tree. Thus, let's wrap MyApp class defined next chapter by ProviderScope.

void main() {
  runApp(ProviderScope(
    child: MyApp(),
  ));
}

6. MyAPP with HookConsumerWidget

Let's make a MaterialApp in MyApp class extending HookConsumerWidget, the alternative of HookWidget, released after version 1.0.0.

class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final int count = ref.watch(countStateProvider);

    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('$count')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            ref.read(countStateProvider.notifier).increment();
          },
        ),
      ),
    );
  }
}

To watch the state in countStateProvider, define the count variable with ref.watch(), replaced from useProvider on the previous version.

Widget build(BuildContext context, WidgetRef ref) {
  final int count = ref.watch(countStateProvider);

Add ref.read() to call increment() function in CountState for when pressing floatingActionButton.

onPressed: () {
  ref.read(countStateProvider.notifier).increment();
},

7. Whole code

import 'package:flutter/material.dart';
import 'package:riverpod/riverpod.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

final countStateProvider =
    StateNotifierProvider<CountState, int>((ref) => CountState(0));

class CountState extends StateNotifier<int> {
  CountState(int count) : super(count);

  void increment() => state = state + 1;
}

void main() {
  runApp(ProviderScope(
    child: MyApp(),
  ));
}

class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final int count = ref.watch(countStateProvider);

    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('$count')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            ref.read(countStateProvider.notifier).increment();
          },
        ),
      ),
    );
  }
}