Yearly Archives

5 Articles

サーバーサイドDart Aqueductを推す!(IntelliJ IDEA編)

環境構築編でサーバがローカルで動いたので
実際にコードを書いていきます!

公式でもIntelliJ Ideaがおすすめされています。
まずはお試しで無料のCommunity Editionでやっていきます。
特にこちらで今の所困ることはないです。
ダウンロードはこちら

プロジェクトはすでに作成済みなのでOpenを選択します。
先程作ったプロジェクトを読み込みましょう

早速コードを!と行きたいところですがAqueductはIntelliJで触れる時
のテンプレートを用意してくれています。

こちらを参考にしてダウンロードしインポートしてください。
https://aqueduct.io/docs/intellij/
読み込まれたtemplateの各内容は別途説明します

File > Import Settings からダウンロードしたsetting.jarを読み込みます。
ダイアログが出るのでOKを。
一旦これで完了です。

はじめての起動だとDartプラグインが必要になります

install pluginsをクリックしてインストールしましょう。
完了するとIntelliJの再起動を求められるので素直に。OK

今度はDart SDKをダウンロードしろ!と言われるのですがこちらは
すでに入っているので別途設定します。

ターミナルで

brew info dart

とうつと

最後の行がSDKのパスになりますので
IntelliJ > Prefference Dartで検索してその他も設定していきます!

Apply > OKを押す。ここまで来るとbin/main.dartを右クリックするとRun ‘main.dart’ができるようになるので実行!

こうするとターミナルに

こんなふうに出るのでブラウザで再び

http://localhost:8888/example を叩きましょう。
無事表示されたら完了です!

右上の部分もアイコンが増えてデバッグで起動などできるようになりました。

サーバーサイドDart Aqueductを推す!(環境構築 とりあえず編)

Google I/O 2019でFlutter for Webなどが発表されて盛り上がっている中
一人でDartをもっと使いたい!と奮闘していました。

特に最近サーバーサイドのフレームワークがどの言語の何を触っても
・デフォルトで持ってる機能が中途半端
・追加で必要なパッケージ管理が面倒
・VS Codeでフォーマットすらできない
とかとかあっちを立てるとこっちが立たないみたいなものが多いなぁと不満が。

そんな時に見つけたのがサーバーサイドフレームワーク
「Aqueduct」です。
用意されたコマンドを数回叩くだけで
・ORM入ってる
・OpenAPI3対応している
・OAuth 2.0認証持ってる
・Test環境も整ってる
ビジネスロジックを書くまでの手間がとても少ないフレームワークです!
もちろん多種多様なDart用パッケージの恩恵も受けられます。

読み方は「アークァダクト」ぐらいの感じで意味は「水路」

さっそく環境構築をしていきます。
まずはDartとAqueductのコマンドを使えるように。

ブラウザで http://localhost:8888/example にアクセスして
以下のように表示されたらプロジェクト作成完了です!
次はIDEを設定していきましょう。

博多〜天神間のドロップインのあるコワーキングスペースだけまとめてみた

利用頻度は低いけどちょっと集中して作業したい時が結構あって
コワーキングスペースを都度探していたけど面倒になったので表にした。
時間と料金と場所だけでまとめたので快適さなどは考慮していない。
もちろんドロップインがないところもただのカフェなども載せていない。

名前1H1Day平日時間土日Google Map
The Company 福岡PARCO50015009:00-21:009:00-21:00①Map
The Company キャナルシティ博多前店50015009:00-21:00Map
The Company 中洲川端50015009:00-21:00Map
BASES50015009:00-17:009:00-17:00Map
ノマドクロス天神50016808:00-22:309:00-20:00Map
ヨカラボ50015009:00-23:0010:00-22:00Map
HOOD天神200010:00-18:00Map
SALT200010:00-19:00Map
天神仕事基地500(3h)100015:00-22:0010:00-22:00Map
勉強カフェ博多プレース600200012:00-22:309:30-20:00Map
DIAGONAL RUN50015009:00~22:00②Map
ハカドルバ98009:00〜18:00Map

①The Company 福岡PARCOの土日祝は別途¥4,500/月

②現金払い不可

jsでオブジェクトのプロパティを必要なものだけに絞る

CircleCiでGithub->Firebase Hostingにデプロイする

誰もがなんども書いたネタだけど最低限の内容で残す。

①プロジェクトの配下に

.circleci/config.yml

を作成する

②内容を書く

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
build:
docker:
- image: circleci/node:8

working_directory: ~/repo

steps:
- checkout

- run: npm install

- run:
name: 'Install Dependecies'
command: npm install --save-dev firebase-tools

- attach_workspace:
at: .

- run:
name: 'Deploy to Hosting'
command: node_modules/.bin/firebase deploy --only hosting --project "$FIREBASE_PROJECT_ID" --token "$FIREBASE_TOKEN"

ここまで一旦GithubにPushしておく。

ここで重要なのは
・$FIREBASE_PROJECT_ID
・$FIREBASE_TOKEN

これらを環境変数としてCircleCIに設定する必要がある

③トークンを調べる

自分のローカルで

firebase login:ci

と打つと何やらURLが表示されブラウザが開く。
そしたらFirebaseでつかってるGoogleアカウントでログインする
無事にログインするとコンソールに何やら出てくる。

✔  Success! Use this token to login on a CI server:
1-3rjJIBzbz-sdg45-kZOMSRV-rtyjturtgterte-hic_UA3HxUjny1Wfjx

このトークンとプロジェクトIDを設定していく。
プロジェクトIDはFirebaseコンソールトップでも確認できる
プロジェクト名の下の薄いグレーの文字がID

④Circle CIの環境変数を設定する

Settings -> Projects -> 対象プロジェクト↗️の歯車を押す。


Environment Variables -> Add Variable で
・Name:FIREBASE_PROJECT_ID Value:プロジェクトID
・Name:FIREBASE_TOKEN Value:トークン
を設定してあげる

ここまでやってGithubにpushすれば
とりあえず自動でFirebase Hostingにデプロイされる!