CoderDojo Web

CoderDojo - 小中学生のためのプログラミング道場

はじめに

CoderDojo JapanのWebサイトは、CoderDojo Tokyoのリポジトリを参考にして作られました。他のDojoでもフォークして使えるようになっています。改良点などあれば、どしどしプルリクエストください。不明な点・質問は、Issuesへどうぞ。

サイトの運用

Facebookページが運用されていて、開催情報をFacebookイベントとして公開していることが、前提条件です。また、メンターの出席管理も、Facebookイベントで行います。

日常的な更新

• 開催情報をFacebookイベントとして登録 (2,3ヶ月分を事前に登録しておくとGood)
• 各メンターは、参加可能な日程で上記イベントに参加表明します
• メンターが増えた場合は、Parse.comのデータベースに追加 (今のところ手動で)

デプロイが必要な更新

• 文言の変更 0. src/index.html を書き換えます。 0. $ gulp html && parse deploy
• デザイン変更 0. src/css/ 以下を書き換えます。 0. $ gulp css && parse deploy

ファイル構成

ビルドファイルはリポジトリに含まれません。cloud,publicなどは、フォークした後、手元で$ npm installすると自動生成されます。(詳しくは後述)

• cloud/: Cloud Code ※自動生成
• public/: Parse.comでホスティングする静的ファイル ※自動生成
• bower_components/: ※自動生成
• node_modules/: ※自動生成
• config/: Parse.comへの接続する設定データを格納 ※秘密情報のためgitに含めず
• doc/: ドキュメント関連
• task/: gulp.jsのサブタスク
• src/: ソース
  • coffee/
    • ng: AngularJSのコントローラなど
    • parse Parse.comのクラス、ジョブほか
  • css
• bower.json
• package.json
• gulpfile.coffee
• README.md: このドキュメント

サイトをビルドするには

上記の「日常的な更新」以外の作業をするには、環境構築が必要です。また、最初にサイトを作る場合にも必要になります。

使っている技術、サービス

• AngularJS
• Facebook
  • Graph API 2.0
• Parse.com
  • Cloud Code
  • ホスティング機能
• 開発時
  • CoffeeScript
  • Browserify
  • BrowserSync
  • gulp.js
  • シンボルフォント

ローカルの準備

0. 環境を確認
   • Node.js
   • gulp.js: $ npm install -g gulp
1. このリポジトリをフォーク
2. ターミナルでローカルディレクトリを開く: $ cd path/to/dir
3. 依存ライブラリのインストールとビルド: $ npm install
4. Watch: $ gulp watch
5. 作業開始!

Facebookの準備

• CoderDojoのFacebookページを開設
• 開催情報をFacebookイベントとして登録
• Facebook Appの作成

Parse.comの準備

0. Parse.comのアカウントを取得
1. 空のアプリケーションを作成
2. Facebook Appの設定をSettingクラスに登録。keyに次のふたつが設定されたものが必要。
   • facebook_app_id
   • facebook_app_secret
3. メンター情報をMentorクラスに登録 (今のところ手動で)

デプロイ

Parse.comのCloud Codeと、ホスティング機能を使います。まず、コマンドラインツールをインストールしておきます。

$ curl -s https://www.parse.com/downloads/cloud_code/installer.sh | sudo /bin/bash

config/global.jsonとして、下記の内容のファイルを置きます。環境に合わせて、適宜書き換えてください。(同じDojoの人がすでに作っていたら、それをコピーする方が早いかも)

{
  "applications": {
    "<アプリケーション名>": {
      "applicationId": "<アプリケーションID>", 
      "masterKey": "<マスターキー>"
    }, 
    "_default": {
      "link": "<アプリケーション名>"
    }
  }, 
  "global": {
    "parseVersion": "1.2.19"
  }
}

次のコマンドを実行すると、cloud, publicフォルダ内がParse.comと同期・デプロイされます。

$ parse deploy

ジョブの自動実行

Parse.comのサイトにアクセスして、"Cloud Code > Scheduled Jobs"を開きます。"Schedule a Job"ボタンをクリックして、syncMeetupsをジョブに登録します。実行頻度は、毎時の00分とします。(もっと少ない頻度でもOK)