DEV Community: nrikiji

Tailwind CSS Customization Summary

nrikiji — Sun, 15 May 2022 23:24:39 +0000

Worked with tailwindcss 3.0.23

Add color theme

In tailwind, you can use bg-white for white background color, text-white for white text, etc., but you can use your own color in the white part.

tailwind.config.js

module.exports = {
  ・・・
  theme: {
    extend: {
      colors: {
        "foo": "#f97316",
        "bar": {
      "buz": "#65C18C",
      ・・・
        },
      },
    },
  },
  ・・・
}

Allows specifying background color foo and text color bar-buz.

<div class="bg-foo text-bar-buz">　・・・</div>

Use custom fonts

Read font file

html

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet" />

or loaded with css

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

Specify font name and font family

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        fancy: ["Dancing Script"],
      },
    },
  },
}

font-fancy can be used.

html

<span class="font-fancy">・・・</span>

Instructions for adding google fonts can be found in this article

Putting the class together

Can create a class that summarizes tailwind classes with @apply.

css

.custom-btn {
  @apply w-20 h-20 m-5 p5 text-center;
}

html

<button class="custom-btn">Button</button>

The @layer determines the priority of the added style. In this case base < components < utilities.

@layer base {
  h1 { @apply text-2xl; }
}

@layer components {
  h1 { @apply text-4xl; }
}

@layer utilities {
  h1 { @apply text-5xl; }
}

These uses are quoted from document translated by

base

The base layer is for things like reset rules or default styles applied to plain HTML elements.

components

The components layer is for class-based styles that you want to be able to override with utilities.

utilities

The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.

Toggle light/dark mode

dark: specifies class for dark mode

<div class="bg-white dark:bg-black">
  ・・・
</div>

How to determine if it is in dark mode

tailwind.config.js

module.exports = {
  // elements with dark class and below act as dark mode
  darkMode: "class",

  // dark mode is determined by os setting (default)
  // darkMode: "media",
  }
}

In this case, it operates as a dark mode

<html class="dark">
  ・・・
  <div class="bg-white dark:bg-black">
    ・・・
  </div>
</html>

Dynamically add and remove dark classes to switch between dark and light modes

Switch themes

Create the colors primary and primary-text in this example

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
     　　  "primary": "var(--color-primary)",
     　　  "primary-text": "var(--color-primary-text)",
      }
    },
  },
}

Set color with css

/* default theme */
:root {
  --color-primary: #ffffff;
  --color-primary-text: #000000;
}

/* alternate-theme */
.custom-theme {
  --color-primary: #000000;
  --color-primary-text: #ffffff;
}

Apply by specifying the class name of the theme

<div class="custom-theme">
  <button class="bg-primary text-primary-text">Button</button>
</div>

If you make the class name of the theme dynamic, you can switch the theme of the application for each user, for example.

Items that can be specified in tailwind.config.js and their default values

You can check it here.
https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js

Go Echo API Server Development

nrikiji — Sun, 15 May 2022 03:11:29 +0000

Create a simple api server based on a minimum configuration start project with the following functions

db migration by sql-migrate
db operation from apps by gorm
Input check by go-playground/validator
Switching of configuration files for each production and development environment
User authentication middleware

https://github.com/nrikiji/go-echo-sample

Also, assume Firebase Authentication for user authentication and MySQL for database

What we make

Two APIs, one to retrieve a list of blog posts and the other to update posted posts. The API to list articles can be accessed by anyone, and the API to update articles can only be accessed by the person who posted the article.

Prepare

Setup

Clone the base project

$ git clone https://github.com/nrikiji/go-echo-sample

Edit database connection information to match your environment
config.yml

development:
  dialect: mysql
  datasource: root:@tcp(localhost:3306)/go-echo-example?charset=utf8mb4&collation=utf8mb4_general_ci&parseTime=true
  dir: migrations
  table: migrations
...

posts table creation

$ sql-migrate -config config.yml create_posts

$ vi migrations/xxxxxxx-create_posts.sql
-- +migrate Up
CREATE TABLE `posts` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` bigint(20) unsigned NOT NULL,
  `title` varchar(64) COLLATE utf8mb4_unicode_ci NOT NULL,
  `body` text COLLATE utf8mb4_unicode_ci NOT NULL,
  PRIMARY KEY (`id`),
  FOREIGN KEY (`user_id`) REFERENCES `users` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

$ sql-migrate up -env development -config config.yml 
$ sql-migrate up -env test -config config.yml

Also, the migration file for the users table is included in the base project (simple table with only id, name and firebase_uid)

Register dummy data

Create a user with email address + password authentication from the firebase console and obtain an API key for the web (Web API key in Project Settings > General).

Also, add the private key for using Firebase Admin SDK (Firebase Admin SDK in Project Settings > Service Account) to the root of the project. (In this case, the file name is firebase_secret_key.json.

Obtain the localId (Firebase user ID) and idToken of the registered user from the API. localId is set in users.firebase_uid and idToken is set in the http header when requesting the API.

This time, request directly to firebase login API to get idToken and localId

$ curl 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=APIキー' \
-h 'Content-Type: application/json' \
-d '{"email": "foo@example.com", "password": "password", "returnSecureToken":true}' | jq

{
  "localId": "xxxxxxxxxxxxxxx",
  "idToken": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  }
}

insert into users (id, firebase_uid, name, created_at, updated_at) values
  (1, "xxxxxxxxxxxxxxx", "user1", now(), now());

insert into posts (user_id, title, body, created_at, updated_at) values
  (1, "title1", "body1", now(), now()), (2, "title2", "body2", now(), now());

Now we are ready for development

Implement the data manipulation part

Prepare a model that represents records retrieved from DB.

model/post.go

package model

type Post struct {
    ID uint `gorm: "primaryKey" json: "id"`
    UserID uint `json: "user_id"`
    User User `json: "user"`
    Title string `json: "title"`
    Body string `json: "body"`
}

Use gorm to add methods to the store to retrieve from and update the DB. Since we have a UserStore in the base project, we add the AllPosts and UpdatePost methods to it this time

store/post.go

package store

import (
    "errors".
    "go-echo-starter/model"

    "gorm.io/gorm"
)

func (us *UserStore) AllPosts() ([]model.Post, error) {
    var p []model.Post
    err := us.db.Preload("User").Find(&p).Error
    if err ! = nil {
        if errors.Is(err, gorm.ErrRecordNotFound) {
            return p, nil
        }
        return nil, err
    }
    return p, nil
}

func (us *UserStore) UpdatePost(post *model.Post) error {
    return us.db.Model(post).Updates(post).Error
}

Implementing the acquisition API

Implement the part that acquires the model from the store and returns the response in json when requested.

Implementation

handler/post.go

package handler

Import (
    "go-echo-starter/model" "net/http"
    "net/http"

    "github.com/labstack/echo/v4"
)

type postsResponse struct { (type postsResponse struct)
    posts []model.Post `json: "posts"`
}

func (h *Handler) getPosts(c echo.Context) error {.
    posts, err := h.userStore.AllPosts()
    if err ! = nil {
        return err

    return c.JSON(http.StatusOK, postsResponse{Posts: posts}))
}

Call the handler when a GET request is made with a path named /posts in a route

handler/routes.go

package handler

Import (
    "go-echo-starter/middleware"

    "github.com/labstack/echo/v4"
)

func (h *Handler) Register(api *echo.Group){.
    ...
    api.GET("/posts", h.getPosts)
}

Check operation

$ go run server.go
...

$ curl http://localhost:8000/api/posts | jq
{
  "posts": [
    {
      "id": 1,
      "user_id": 1,
      "user": {
        "id": 1,
        "name": "user1",
      },
      "title": "title1",
      "body": "body1",
    },
    }, "title": "title1", "body": "body1", }
}

write test

Prepare two test data with fixtures

fixtures/posts.yml

- id: 1
  user_id: 1
  title: "Title1"
  body: "Body1"

- id: 2
  user_id: 2
  title: "Title2"
  body: "Body2"

Write tests for the handler. Here we test that there is no error, and that the number of items matches.

handler/post_test.go

package handler

import (
    "encoding/json"
    "net/http"
    "net/http/httptest"
    "testing"

    "github.com/labstack/echo/v4"
    "github.com/stretchr/testify/assert"
)

func TestGetPosts(t *testing.T) {
    setup()
    req := httptest.NewRequest(echo.GET, "/api/posts", nil)
    rec := httptest.NewRecorder()

    c := e.NewContext(req, rec)
    assert.NoError(t, h.getPosts(c))

    if assert.Equal(t, http.StatusOK, rec.Code) {
        var res postsResponse
        err := json.Unmarshal(rec.Body.Bytes(), &res)
        assert.NoError(t, err)
        assert.Equal(t, 2, len(res.Posts))
    }
}

Run a test

$ cd handler
$ go test -run TestGetPosts
...
ok go-echo-starter/handler 1.380s

Implement update API

Apply auth middleware for authentication to prevent others from updating their posts. What this middleware does is to get the firebase user id from the firebase idToken set in the http header Authorization: Bearer xxxxx, search the users table using the UID as a key, and set the result in The result is set in context.

In the handler, if the user can be retrieved from the context, authentication succeeds; if not, authentication fails.

user := context.Get("user")
if user == nil {
    // authentication fails
} else {
    // authentication succeeded
}

Implementation

handler/post.go

type postResponse struct { { type postResponse struct
    post model.Post `json: "post"`.
}

type updatePostRequest struct { { { type updatePostRequest
    title string `json: "title" validate: "required"`
    body string `json: "body" validate: "required"`
}

func (h *Handler) updatePost(c echo.Context) error { // get user information
    // get user information
    u := c.Get("user")

    if u == nil {
        return c.JSON(http.StatusForbidden, nil)


    user := u.(*model.User)

    // get article
    id, _ := strconv.Atoi(c.Param("id"))
    post, err := h.userStore.FindPostByID(id)

    if err ! = nil { {.
        return c.JSON(http.StatusInternalServerError, nil)
    } else if post == nil {
        return c.JSON(http.StatusNotFound, nil)
    }

    // if it is someone else's post, consider it as unauthorized access
    if post.UserID ! = user.ID { { { if post.UserID ! = user.ID { { { if post.UserID !
        return c.JSON(http.StatusForbidden, nil)
    }

    params := &updatePostRequest{}
    if err := c.Bind(params); err ! = nil { {.
        return c.JSON(http.StatusInternalServerError, nil)
    }

    // Validation
    if err := c.Validate(params); err ! = nil { { if err := c.Validate(params); err !
        return c.JSON(
            http.StatusBadRequest,
            ae.NewValidationError(err, ae.ValidationMessages{
                "Title": {"required": "Please enter a title"},
                "Body": {"required": "Please enter a body"},
            }),
        )
    }

    // Update data
    post.Title = params.
    Post.Body = params.Body

    if err := h.userStore.UpdatePost(post); err ! = nil { .
        return c.JSON(http.StatusInternalServerError, nil)
    }

    return c.JSON(http.StatusOK, postResponse{Post: *post}))
}

Validation can be done using go-playground/validator's (https://github.com/go-playground/validator/blob/master/translations/ja/ja.go) functionality, which allows you to display default multilingual display of error messages. However, this app does not use it, but instead defines a map keyed by field name and validation rule name, and uses display fixed messages.

if err := c.Validate(params); err ! = nil {
    return c.JSON(
        http.StatusBadRequest,
        ae.NewValidationError(err, ae.ValidationMessages{
            "Title": {"required": "required Title."},
            "Body": {"required": "required Body"},
        }),
    )
}

Next, call the handler you created when a PATCH request is made in routes with the path /posts

handler/routes.go

func (h *Handler) Register(api *echo.Group) {
    Auth := middleware.AuthMiddleware(h.authStore, h.userStore)
    ...
    api.PATCH("/posts/:id", h.updatePost, auth)
}

Confirmation of operation

Put the firebase idToken obtained above in the http header and check the operation.

$ go run server.go
...

$ curl -X PATCH -H "Content-Type: application/json" \frz
-H "Authorization: Bearer xxxxxxxxxxxxxx" $ curl
-d '{"title": "NewTitle", "body": "NewBody1"}' \
http://localhost:8000/api/posts/1 | jq

{
  "post": {
    "id": 1,
    "title": "NewTitle",
    "body": "NewBody1",
    }
  }
}

Checking for errors when trying to update someone else's article

$ curl -X PATCH -H "Content-Type: application/json" \
-H "Authorization: Bearer xxxxxxxxxxxxxx" \}
-d '{"title": "NewTitle", "body": "NewBody1"}' \
http://localhost:8000/api/posts/2 -v

...
HTTP/1.1 403 Forbidden
...

Writing Tests

Handler tests that you can update your own articles, but not others'.

Update your own article

handler/post_test.go

func TestUpdatePostSuccess(t *testing.T) {
    setup()

    reqJSON := `{"title":"NewTitle", "body":"NewBody"}`
    authMiddleware := middleware.AuthMiddleware(h.authStore, h.userStore)

    req := httptest.NewRequest(echo.PATCH, "/api/posts/:id", strings.NewReader(reqJSON))
    req.Header.Set(echo.HeaderContentType, echo.MIMEApplicationJSON)
    req.Header.Set(echo.HeaderAuthorization, "Bearer: ValidToken1")

    rec := httptest.NewRecorder()
    c := e.NewContext(req, rec)
    c.SetPath("/api/posts/:id")
    c.SetParamNames("id")
    c.SetParamValues("1")

    err := authMiddleware(func(c echo.Context) error {
        return h.updatePost(c)
    })(c)
    assert.NoError(t, err)

    if assert.Equal(t, http.StatusOK, rec.Code) {
        var res postResponse
        err := json.Unmarshal(rec.Body.Bytes(), &res)
        assert.NoError(t, err)
        assert.Equal(t, "NewTitle", res.Post.Title)
        assert.Equal(t, "NewBody", res.Post.Body)
    }
}

test returns a fixed user id by idToken for the conversion of idToken to Firebase user id, which is done by the authentication middleware.　Use the mock method prepared in base project.

func (f *fakeAuthClient) VerifyIDToken(context context.Context, token string) (*auth.Token, error) {
    var uid string
    if token == "ValidToken" {
        uid = "ValidUID"
        return &auth.Token{UID: uid}, nil
    } else if token == "ValidToken1" {
        uid = "ValidUID1"
        return &auth.Token{UID: uid}, nil
    } else {
        return nil, errors.New("Invalid Token")
    }
}

Trying to update someone else's article.

handler/post_test.go

func TestUpdatePostForbidden(t *testing.T) {
    setup()

    reqJSON := `{"title":"NewTitle", "body":"NewBody"}`
    authMiddleware := middleware.AuthMiddleware(h.authStore, h.userStore)

    req := httptest.NewRequest(echo.PATCH, "/api/posts/:id", strings.NewReader(reqJSON))
    req.Header.Set(echo.HeaderContentType, echo.MIMEApplicationJSON)
    req.Header.Set(echo.HeaderAuthorization, "Bearer: ValidToken1")

    rec := httptest.NewRecorder()
    c := e.NewContext(req, rec)
    c.SetPath("/api/posts/:id")
    c.SetParamNames("id")
    c.SetParamValues("2")

    err := authMiddleware(func(c echo.Context) error {
        return h.updatePost(c)
    })(c)
    assert.NoError(t, err)
    assert.Equal(t, http.StatusForbidden, rec.Code)
}

test run

$ go test -run TestUpdatePostSuccess
・・・
ok      go-echo-starter/handler 1.380s

$ go test -run TestUpdatePostForbidden
・・・
ok      go-echo-starter/handler 1.380s

Conclusion

Sample we made this time
https://github.com/nrikiji/go-echo-sample/tree/blog-example

What I always do when I develop in flutter

nrikiji — Tue, 02 Nov 2021 16:03:50 +0000

1. Switch Bundle ID and app name between production and development versions

We want to have a production and a development version of the app living together on one device. Also, I want to use the development version for debug builds and the production version for release builds. iOS and Android.

iOS.
Launch IOS/Runner.xcworkspace in xcode

ios/Flutter/Debug.xcconfig

#include "Generated.xcconfig"
PRODUCT_BUNDLE_IDENTIFIER = nrikiji.flutter-start-app.dev
DISPLAY_NAME = Debug StartApp

ios/Flutter/Release.xcconfig

#include "Generated.xcconfig"
PRODUCT_BUNDLE_IDENTIFIER = nrikiji.flutter-start-app
DISPLAY_NAME = StartApp

Apply the app name in xcconfig

ios/Runner/Info.plist

<?xml version="1.0" encoding="UTF-8"? >
...
<dict> ...
...
  <key>CFBundleDisplayName</key
  <string>$(DISPLAY_NAME)</string>

Delete the Runner column of Product Bundle Identifier in TARGETS > Runner > Build Settings (delete button) to reflect the Bundle ID in xcconfig.

before

after

Android

Preparing signings for production

.gitignore

# Android Signing
android/app/signing/key.jks
android/app/signing/signing.gradle

Add the JKS file to the project
android/app/signing/key.jks

android/app/signing/signing.gradle

signingConfigs {
    release {
        storeFile file("key.jks")
        storePassword "xxxxx"
        keyAlias "xxxxx"
        keyPassword "xxxxx"
    }
}

Set Bundle ID, app name and signing for production build

android/app/build.gradle

android {
    ・・・
    defaultConfig {
        ・・・
        applicationId "nrikiji.flutter_start_app"
        ・・・
    }

    buildTypes {
        debug {
            debuggable true
            applicationIdSuffix ".dev"
            resValue "string", "app_name", "Debug StartApp"
        }
        release {
            debuggable false
            applicationIdSuffix ""
            resValue "string", "app_name", "StartApp"

            apply from: './signing/signing.gradle', to: android
            signingConfig signingConfigs.release
        }
    }

Make sure to use the app name you set above.

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="nrikiji.flutter_start_app">
   <application
        android:label="@string/app_name"
    ・・・

2. Switch firebase configuration file between production and development versions

I want to use firebase analytics and crashlytics as a minimum in any app. I also assume that you have already created a firebase project and app. iOS, Android and flutter.

iOS
Download GoogleService-Info.plist from firebase console and place it under IOS/Runner. Use different file names for development and production.

$ ls -l 
ios/Runner/GoogleService-Info-dev.plist
ios/Runner/GoogleService-Info-prod.plist

.gitignore

# Firebase Settings Files
ios/Runner/GoogleService-Info-dev.plist
ios/Runner/GoogleService-Info-prod.plist

Configure Run Script in TARGETS > Runner > Build Phases to develop GoogleService-Info.plist and switch it in production build.

script

if [ "${CONFIGURATION}" == "Debug" ]; then
cp -r "${PROJECT_DIR}/Runner/GoogleService-Info-dev.plist" "$BUILT_PRODUCTS_DIR/$PRODUCT_NAME.app/GoogleService-Info.plist"
elif [ "${CONFIGURATION}" == "Release" ]; then
cp -r "${PROJECT_DIR}/Runner/GoogleService-Info-prod.plist" "$BUILT_PRODUCTS_DIR/$PRODUCT_NAME.app/GoogleService-Info.plist"
fi

Android
Download google-services.json from firebase console and place it under debug and release (create directories) under android/app/src.

$ ls -l 
android/app/src/debug/google-services.json
android/app/src/release/google-services.json

.gitignore

# Firebase Settings Files
android/app/src/debug/google-services.json
android/app/src/release/google-services.json

Add the gradle plugin

android/build.gradle

buildscript {
    ・・・
    dependencies {
        classpath 'com.google.gms:google-services:4.3.4'
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.5.1'
    ・・・
    }
}

android/app/build.gradle

・・・
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.google.firebase.crashlytics'

Initializing firebase in flutter

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';

void main() {
  runZonedGuarded(
    () {
      WidgetsFlutterBinding.ensureInitialized();
      return runApp(ProviderScope(child: MyApp()));
    },
    (e, st) {
      FirebaseCrashlytics.instance.recordError(e, st);
    },
  );
}

class MyApp extends StatelessWidget {
  final _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: _initialization,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done || snapshot.hasError) {
            return MaterialApp(・・・);
          } else {
            return SizedBox.shrink();
      }
        });
  }
}

3. Switch the constants used in the program between the production and development versions.

I want to use different URLs for Web API connections in the production and development versions. Also, I want to use development constants for debug builds and production constants for release builds.

AndroidStudio Build Settings
Add debug and release from "Edit Configurations" in Android Studio.

debug: set "--dart-define env=dev" to "Addional arguments"

release: set "--release --dart-define env=prod" to "Addional arguments"

When building from the command line

# Debug
$ flutter build ios --dart-define=env=dev

# Release(iOS)
$ flutter build ios --release --dart-define=env=prod

# Release(Android)
$ flutter build appbundle --release --dart-define=env=prod --no-shrink

Constant definitions for each environment

class Environment {
  final EnvironmentKind kind;
  final String baseApiUrl;

  factory Environment() {
    const env = String.fromEnvironment('env');
    return env == 'prod' ? Environment.prod() : Environment.dev();
  }

  const Environment._({
    this.kind,
    this.baseApiUrl,
  });

  const Environment.prod()
      : this._(
          kind: EnvironmentKind.Prod,
          baseApiUrl: "https://example.com",
        );

  const Environment.dev()
      : this._(
          kind: EnvironmentKind.Dev,
          baseApiUrl: "https://dev.example.com",
        );
}

enum EnvironmentKind {
  Dev,
  Prod,
}

4. Localization

pubspec.yaml

dependencies:
  ・・・
  flutter_localizations:
    sdk: flutter

lib/localize.dart

import 'package:flutter/cupertino.dart';

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => ['en', 'ja'].contains(locale.languageCode);

  @override
  Future<AppLocalizations> load(Locale locale) async => AppLocalizations(locale);

  @override
  bool shouldReload(AppLocalizationsDelegate old) => false;
}

class AppLocalizations {
  final LocalizeMessages messages;

  AppLocalizations(Locale locale) : this.messages = LocalizeMessages.of(locale);

  static LocalizeMessages of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations)!.messages;
  }
}

class LocalizeMessages {
  final String greet;

  LocalizeMessages({
    required this.greet,
  });

  factory LocalizeMessages.of(Locale locale) {
    switch (locale.languageCode) {
      case 'ja':
        return LocalizeMessages.ja();
      case 'en':
        return LocalizeMessages.en();
      default:
        return LocalizeMessages.en();
    }
  }

  factory LocalizeMessages.ja() => LocalizeMessages(
        greet: 'こんにちは',
      );

  factory LocalizeMessages.en() => LocalizeMessages(
        greet: 'Hello',
      );
}

5. Binary upload to store with GitHub Actions

Once I learned to prevent build errors, I became lazy to upload manually. Also, the App Store Connect API and Google Play Developer Publishing API should be enabled.

Prepare the following file and set the necessary values in the GitHub Actions secrets so that the workflow will be executed when the git tag is pushed.

workflow
.github/workflows/release.yml

fastlane
Gemfile
ios/fastlane/Appfile
ios/fastlane/Fastfile

GitHub Actions secrets
this url

Summary

This is a startup project that you can start by git cloning what I wrote here. The usage procedure is summarized in the README.

https://github.com/nrikiji/flutter_starter/