DEV Community: Shun Yamada

Why are you still using a contact form?

Shun Yamada — Mon, 12 Oct 2020 19:23:12 +0000

Contact forms are handy - you can use Typeform or a service like Google Form to set them up easily, without writing any code. There’s also Intercom and other services that can be used with similar specifications to this one. When embedded on your website, website visitors can easily interact with the operator over chat.

However, there’re many cases where some of the inquiries are immediate questions, or difficult to explain with only a form. That’s why businesses such as mobile shops and electronics stores are still in business despite the abundance of websites and e-commerce is because they provide an environment where you can easily ask these kinds of questions to specialists.

I think the contact form or Intercom is akin to walking up to a store, leaving a note, and waiting for a response, but if you know someone is in the store, don’t you think it’s much faster to talk to that person and ask them what you don’t know?

Today, I’d like to introduce the tool “Remotehour”, which allows you to do that kind of thing on the internet as well.

Try Remotehour

Remotehour is a web communication tool that is reminiscent of office hours, where the host user can have their own room and the visitor can talk to the host with a single click of a button at the end of the published URL.

The basic features are below:

Enable to receive calls during only the time you’re online
No registration or installation is required for the guest users
Easy to embed in your website

In this article, I’ll explain how to embed it into your website and what kind of sites actually use it, with a particular focus on the “easy to embed in your website” part here.

By the way, once you upgrade to the Premium, it also supports Stripe integration, so you can use it as a call billing, e.g. $50 for 10 minutes if you’re a lawyer or someone with specialized knowledge.

Embed this into the website

Let’s start by flying over to the Remotehour(https://remotehour.com) to register for an account. You can register through your email address, Google, or Facebook account.

As you follow the onboarding process, you will get to the dashboard screen. On the dashboard, you can edit your room and switch your online/away status. Pop-up permission is recommended for use in the browser, so make sure you allow it.

Get the embed tags from the room's edit screen.

Once you’ve embedded the tags in the desired part of your website, it’s ready to be installed; you’ll need to be in an HTTPS environment to use it, so if you don’t have SSL support, use Cloud Flare or something similar if you don’t have it.

Now you will be able to receive calls while you’re online. If you’re not online, you can receive messages instead and subscribe to receive notifications when you’re online.

Multiple open doors

If you’re creative, you can even list the Remotehour page of multiple people. This time, I will explain how to make a site where the founders of startups can talk to VCs and angel investors only when they’re online.

<iframe src="https://remotehour.com/widget/[userId]/[roomId]" width="100%" height="700px" marginwidth="0" marginheight="0" frameborder="0" style="border:none;" allow="microphone; camera"></iframe>

We’ll get the userId and roomId of the user we want to list, userId and roomId can be read from the embed tag.
invesors.json

[
  {
    "userId": XXXXXXXXXX,
    "roomId": XXXXXXXXXX
  },
...

index.js

import investorData from "../components/data/investors.json"

{investorData.map((investor, idx) => {
  return (
    <InvestorItem
      key={idx}
      roomId={investor.roomId}
      title={`investor-${idx}`}
      userId={investor.userId}
    />
  )
})}

InvestorItem.js

const InvestorItem = ({ roomId, title, userId }) => {
  return (
    <li tw="md:w-1/4 px-6">
      <div className="item" tw="bg-white p-4 rounded-lg">
        <iframe
          title={title}
          src={`https://remotehour.com/widget/${userId}/${roomId}`}
          width="100%"
          height="240"
          marginWidth="0"
          marginHeight="0"
          frameBorder="0"
        ></iframe>
      </div>
    </li>
  )
}

If we have this information, we can embed it into our website, and if we display this as an array, we’ll have a page with a list of the always-on rooms of these users.

It could be a contact page that members can accept individually, or as an MVP to provide a call-based service like this one. It would be a low-cost implementation that is also in the No Code movement.

Website: Fundraising Hours(https://fundraising.remotehour.com)

You could even use it like this

Remotehour is also available as a stand-alone URL page without the need to have a website, This one will be especially useful for those who tend to receive calls on a regular basis. Especially, VCs and angel investors often set it up as a contact point for entrepreneurs to talk to immediately, and HR professionals use it as a room where they can communicate easily with applicants.

Jason Calacanis's LAUNCH ACCELERATOR holds regular office hours for applicants, and Jason Calacanis tested it out on Twitter.

Turkish influencer Firat has set up Remotehour on his own consults page to communicate with visitors in a new way.

I'm pleased to introduce Remotehour as a tool that allows you to engage with your visitors more quickly and closely than the contact form. I remember when I posted a link to Remotehour after I had previously blogged about it, and I was so happy to see that those who were interested in it gave me their feedback with such enthusiasm.

Use an original domain when authenticating with Google in Firebase

Shun Yamada — Sat, 07 Mar 2020 11:12:49 +0000

Not major problems but I have spent a little bit on solving this. So let me leave how to solve it.

The issue is to remain ****.firebaseapp.com when Google authentication built-in FIrebase.

My friend pointed out this. But I didn't care it because it was not too critical and it seems to be complicated to fix it out. But not difficult to solve. You can see this in the official document here.

Two points you have to change.

1) Authorized redirect URIs

Set up in Firebase, it's easy. But you have to check Google Cloud Platform when you solve this issue. See Credentials > Oauth 2.0 Client IDs. WebClient generated.

Update to an original domain in authorized redirect URIs.

2) Firebase settings

Change authDomain section on the app to an original domain.

Done!

How to deploy a React application to Firebase Hosting

Shun Yamada — Fri, 06 Mar 2020 06:24:52 +0000

Firebase is awesome. You can build a functional application in React + Firebase soon. Here is a tutorial for deploying your React App to Firebase Hosting.

Install the Firebase CLI globally to your node modules:

$ npm install -g firebase-tools

Next associate the Firebase CLI with a Firebase account:

$ firebase login

And then, you have to connect Firebase hosting with your React app:

$ firebase init

Choose the Hosting options.

Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.

$ Hosting

Select a default Firebase project for this directory

$ <your-firebase-app-name>

What do you want to use as your public directory?

$ public

Configure as a single-page app (rewrite all urls to /index.html)?

$ Yes

File public/index.html already exists. Overwrite?

$ No

Done!

You have to update firebase.json like below:

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

public should be build.

And you should delete .firebases folder every time you deploy.

How to extract high-frequency words in NLTK

Shun Yamada — Fri, 27 Dec 2019 06:03:50 +0000

While reading an official document for NLTK(Natural Language Toolkit), I tried extracting words which are frequently used in a sample text. This time, I tried to let the most frequency three words be in a display.

Development

Python
NLTK

Install NLTK

$ pip install nltk

Extract High-frequency words

Let me the coding begins. You should download punkt and averaged_perception_tagger initially for running word-tokenizing a part-of-speech acquisition. Next, read a sample text, and convert it to word-separation from text. And remove non-Noun things from this result. Finally, get the most frequent words.

Download

import nltk

nltk.download('punkt')
nltk.download('averaged_perceptron_tagger')

Import nltk, and then download punkt and averaged_perception_trigger. Once downloaded in the environment, you don't have to do it again.

Convert texts to word-tokenizing

raw = open('sample.txt').read()
tokens = nltk.word_tokenize(raw)
text = nltk.Text(tokens)

tokens_l = [w.lower() for w in tokens]

Prepare some essays or long texts. After reading this, it should be word-tokenized. Then, set up capital cases to lower cases, they should be recognized as the same.

Extract only Noun

only_nn = [x for (x,y) in pos if y in ('NN')]

freq = nltk.FreqDist(only_nn)

Remove non-noun words from this result. And calculate how frequency these words are included.

Get the most frequent three words

print(freq.most_common(3))

After counting frequent words, you can get the top three ones by most_common().

How to add cron job in Python

Shun Yamada — Sat, 21 Dec 2019 02:03:03 +0000

While I was searching for some good ideas to run cron job in Python and eventually I've found APScheduler.

APScheduler has three built-in scheduling systems you can use:

Cron-style scheduling (with optional start/end times)
Interval-based execution (runs jobs on even intervals, with optional start/end times)
One-off delayed execution (runs jobs once, on a set date/time)

This time, I tried to get via API every 10 minutes. So APScheduler definitely holds what I want to realize. In addition to this, it's quite useful because there're some methods which start the scheduler for each environment and each framework.

Install APScheduler

$ pip install apscheduler

app/schedule.py

def hello_world():
  print("Hello World!")

sched = BackgroundScheduler(standalone=True,coalesce=True)
sched.add_job(hello_world, 'interval', minutes=1)
sched.start()

Print "Hello World!" every 10 minutes.

app/init.py

import app.schedule

Deploy Flask app to Heroku

Shun Yamada — Mon, 16 Dec 2019 10:07:17 +0000

Flask is a customized-free framework.
I have the Flask application deployed to Heroku.

Development

Python 3.7.5
Flask 1.1.1
SQL Alchemy
Flask Migrate

When it comes to something tutorials, db.create_all() is useful. But this is not available to record when db migrated. So, you should use Flask Migrate if you run the application on production.

Initial commit

Set up requires folders/files. You may see a lot of patterns for Flask application on references.

app/
├── manage.py
├── main
│   ├── __init__.py
│   ├── views.py
│   ├── config.py
│   ├── models.py
│   ├── app.db
│   ├── static/
│   ├── templates/
│   └── instance
│       └──application.cfg
├── Procfile
├── requirements.txt
├── migrations/
└── venv/

Create a project

$ cd APP
$ mkdir -p main/{static,templates,instance}
$ cd main
$ touch manage.py requirements.txt Procfile
$ touch main/{__init__,views,models,config}.py

Add stylesheet or HTML if you wanted. This time, I want to focus on waking through it by focusing on backend stuff.

manage.py

from main import app
app.run()

main/init.py

from flask import Flask

app = Flask(__name__)

import main.views

main/views.py

from flask import render_template
from main import app, db

@app.route('/')
def home():
    return render_template('home/index.html')

Set up configuration

main/config.py

import os

class BaseConfig(object):
    SQLALCHEMY_TRACK_MODIFICATIONS = False  

class DevelopmentConfig(BaseConfig):
    DEBUG = True
    TESTING = True
    SQLALCHEMY_DATABASE_URI = 'sqlite:///app.db'

class ProductionConfig(BaseConfig):
    DEBUG = True
    TESTING = True
    SQLALCHEMY_DATABASE_URI=os.environ.get('DATABASE_URL')

config = {
    "default": "main.config.BaseConfig",
    "development": "main.config.DevelopmentConfig",
    "production": "main.config.ProductionConfig",
}

def configure_app(app):
    config_name= os.getenv('FLASK_ENV')
    app.config.from_object(config[config_name])
    app.config.from_pyfile('application.cfg', silent=True)

You can set up FLASK_ENV like export FLASK_ENV=development. I have just divided development and production. on.environ.get('DATABASE_URL') is just for connecting with a database in Heroku.

instance/application.cfg

SECRET_KEY='XXXXXXXXXXXXXXXXXXX'

Caution: instances folders should be added on .gitignore.

Initialized configuration

Add to __init__.py.

from main.config import configure_app

app = Flask(__name__, instance_relative_config=True)
configure_app(app)

Deploy to Heroku

Install gunicorn and psycpg2

$ pip install gunicorm
$ pip install psycopg2

Add Procfile

web: gunicorn main:app --log-file -

Add libraries info to requirements

$ pip freeze > requirements.txt

Deploy!

$ heroku create flask-app
$ git push heroku master
$ heroku config:set FLASK_APP=main
$ heroku config:set FLASK_ENV=production

Set up Database

Create User model

from main import db

class User(db.Model):
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String)
    email = db.Column(db.String, unique=True)

    def __repr__(self):
        return '<User %r>' % self.name

Install flask_migrate and SQL Alchemy

$ pip install flask_migrate
$ pip install flask_sqlalchemy

Initialize model

Add to __init__.py.

from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate

db = SQLAlchemy(app)
migrate = Migrate(app, db)
db.init_app(app)

import main.models

Migrate

$ flask db init
$ flask db migrate
$ flask db upgrade

Migrate in Heroku

Add libraries to requirements

$ pip freeze > requirements.txt

Migration!

$ heroku run flask db upgrade

You don't need to db init or db migrate. But you have to deploy files including migrations.

How to integrate with Slack OAuth in Flask

Shun Yamada — Tue, 03 Dec 2019 10:32:21 +0000

I tried to integrate with Slack OAuth in Flask. Actually, you can make it easy to understand once you read an official document I assume. But some errors occurred to me then, for example, to get user details. So here it is a tutorial to authenticate successfully.

Reference

If you knew more about Slack App, please check this out. I wrote about it before.
https://dev.to/shyamady/how-to-publish-slack-app-using-rails-5hlm

An official doc
https://slack.dev/python-slackclient/auth.html

Code

import functools
import pdb
import slack

from flask import (
    Blueprint, flash, g, redirect, render_template, request, session, url_for
)

from app.db import (
    search_user, register_user, search_team, register_team, search_team_user, register_team_user
)

bp = Blueprint('auth', __name__, url_prefix='/auth')
client_id = 'XXXXXXXXXXXXXXX'
client_secret = 'XXXXXXXXXXXXXXX'
oauth_scope = 'channels:read,chat:write:bot,users:read,users:read.email'

Define client_id and client_secret initially. In addition, you need to put scope here. scope should be included what you request for users. Not only for the app, but you also need to register ones on Slack App. You suppose to write why you need these scopes when submitting.

In this case, I added channels:read and chat:write:bot to this. Also, it's necessary to set users:read and users:read.email for fetching users detail.

@bp.route('/redirect', methods=['GET'])
def authorize():
    authorize_url = f"https://slack.com/oauth/authorize?scope={ oauth_scope }&client_id={ client_id }"

    return redirect(authorize_url)

See /auth/redirect

@bp.route('/callback', methods=["GET", "POST"])
def callback():
    auth_code = request.args['code']
    client = slack.WebClient(token="")
    oauth_info = client.oauth_access(
        client_id=client_id,
        client_secret=client_secret,
        code=auth_code
    )

After the callback, then move right along. You can get basic information with oauth_access.

However, this response is not supposed to include personal information like username, email, and etc.

   access_token = oauth_info['access_token']
   client = slack.WebClient(token=access_token)
   user_id = oauth_info['user_id']
   response = client.users_info(user=user_id)

users_info with access_token leads you to get almost all user's information like username, email, icon, and timezone.

I hope you can use this code in Django or other Python frameworks. As I am a Rails engineer, there're not too many references concerns for Flask.

But I believe it will be increasing its number with Machine Learning potentiality.

How to publish Slack app using Rails

Shun Yamada — Wed, 13 Nov 2019 08:42:42 +0000

My friend nudged me to build a Slack app that shares what's currently playing on Spotify to Slack channel. For a couple of days, I have put the finishing touches on it from nothing.

This is my first time the Slack app built it done having in public although I had some for private workspace before. Only developing it is not enough you ought to submit it to Slack App Directory. Once passed it you would have completed done it.

I'm writing about how to start off building a Slack app on Ruby on Rails and end up it has been in Slack App Directory.

This slack app requires Slack and Spotify authentication and then notify the song information when users start playing on Spotify to the channel they set up on the app. It's simple. I don't write about how to use Spotify API here but they don't have webhook so I get this information once per 10 minutes.

Let the building begin

Register Slack app
Develop Rails app
Submit the app
Let it list on Slack App Directory

Register Slack app

Before building, you have to set up your own Slack workspace. I don't know so much about it but the app might be deleted at the same time the workspace has been deleted.

Go to Slack API for registering the application. Only you have to set up is below.

Take a note Client ID and Client Secret on App Credentials
Add redirect URL to Permissions
Add channels:read and chat:write:bot to scope on Permissions

Develop Rails app

Add an authentication

Build authentication with a famous gem omniauth. Installed it and then set up on omniauth.rb.

gem 'omniauth'
gem 'omniauth-slack'

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :slack,
    Rails.application.credentials[:slack][:consumer_id],
    Rails.application.credentials[:slack][:consumer_secret],
    scope: 'channels:read,chat:write:bot'
end

Add Session controller

Develop sessions that users can sign in with Slack and sign out it. You should prepare sessions controller and user model.

$ rails g controller sessions new destroy
$ rails g model Users name email provider uid token channel

Don't forget to add the column of uid, token, and channel for Slack authentication data here.

class SessionsController < ApplicationController
  def create
    user = User.from_omniauth(request.env["omniauth.auth"])
    if user.save
      session[:user_id] = user.id
      redirect_to root_path
    else
      redirect_to root_path
    end
  end

  def destroy
    session[:user_id] = nil
    redirect_to root_path
  end
end

class User < ApplicationRecord
  def self.from_omniauth(auth)
    where(provider: auth.provider, uid: auth.uid).first_or_initialize.tap do |user|
      user.name = auth.info.name
      user.email = auth.info.email
      user.token = auth.credentials.token
      return user
    end
  end
end

Rails.application.routes.draw do
  get 'auth/:provider/callback', to: 'sessions#create'
  get 'auth/failure', to: redirect('/')
  get 'signout', to: 'sessions#destroy', as: 'signout'

  resources :sessions, only: [:create, :destroy]
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

You can see the below screen on /auth/slack. And I wish you can create User data with Slack authentication.

Install Slack Ruby Client

Recommend you to continue to develop with slack-ruby-client. It's a ruby and command-line client for the Slack Web, Real-Time Messaging and Event APIs.

gem 'slack-ruby-client'

Create Slack Ruby Client

Create the model that gets some through Slack API.

class Manager::SlackApiClient
    attr_reader :client, :slack_user

    def initialize(slack_user)
      @slack_user = slack_user
      @client = Slack::Web::Client.new(token: slack_user.token)
      @client.auth_test
    rescue => e
      Rails.logger.warn(<<~LOG)
        Error @Manager::SlackApiClient#initialize
        Msg: #{e.class} #{e.message}
      LOG

      @client = nil
    end

    def valid?
      client
    end
  end
end

Get channels info

The app should allow users to choose a channel that they get notified.

 def channels
   client.channels_list.channels
 end

class SettingsController < ApplicationController
  def index
    @user = current_user
    client_manager = Manager::SlackApiClient.new(@user)
    if client_manager.valid?
      @slack_channels = client_manager.channels
    else
      flash[:danger] = 'Slack token expired. Please link Slack app again.'
    end
  end
end

Send notifications when playing

The app should send notifications when users start playing on Spotify. This requires information like song name, URL, artist name and album name.

slack_client_manager = Manager::SlackApiClient.new(user)
slack_client_manager.post_song_message(@current_playing) if slack_client_manager.valid?

  def post_song_message(song)
    attachments = {
      text: "🎧 #{song.user.name} is currently playing #{song.name}",
      "fields": [
        {
          "title": "Artist",
          "value": song.artist,
          "short": true
        },
        {
          "title": "Album",
          "value": song.album,
          "short": true
        },
        {
          "title": "Spotify url",
          "value": song.url,
          "short": false
        }             
      ],      
      color: "#f9da00"
    }
    client.chat_postMessage(channel: "##{slack_user.channel}", attachments: [attachments])
  end

You can arrange what kind of notification content you send. Only text is easy to build it and you can add some features when you build with attachments. Please check it here.

Okay, That's all. All you have to do left to submit the app to Slack App Directory.

Submit the app

You don't have to submit the app as long as your app is used on your workspace. But Slack requires some tests and reviews before you have it for the public.

Go to Manage distribution. You have to agree with some terms and check if the app works under the configuration Sack defines. If your app requires the other party, you supposed to write about its authentication information.

It takes you a few days to pass the review. In my experience, this review is not easy. They're careful that the app would work well.

Let it list on Slack App Directory

Done. You would be glad if the app you built listed on Slack App Directory.