Tento - 集まろう! 学生の新しいコミュニティー

https://i.gyazo.com/88d533ef5c7e567d9709a9374b5684c3.png

アプリへのリンク https://tento.app

制作動機

学内の友人3人でWEBアプリを春休みを利用して作成いたしました。

背景・目的としては、学部(INIAD)が「連携」というものを掲げており、学部は4つのコースに分かれて学業に励み、3年次に各コースで集まって何かを作る授業があります。

それを1年次から、仲間を見つけてチーム開発が出来るプラットフォームがあれば、学部の良さを活かせると考えたからです。

実際に制作してみて

GitHubを利用したチーム開発 実際のリポジトリ

機能ごとにIssueを立て、ブランチを切りプルリクをしていくやり方を採用した。

良かったこと

各自が何をしているかが分かりやすくて良かった。コンフリクト等もある程度はGitHub上で発見出来るので最小限に抑えることが出来た。

改善すべきだと感じたこと

今回、一緒にやったもう一人のエンジニアはVue.jsが未経験だったこともあり、どのようなタスクをどのくらいの期間で投げれば良いのか理解して不十分だと感じた。それは、コミュニケーション不足だったことも感じている。

GraphQLを初めて使用した

日本語のドキュメントが全く無く、vue・django両方のgraphqlライブラリの英語ドキュメント・GitHubのIssueを大量に読み込んだ

class JoinProject(graphene.Mutation):
    class Arguments:
        # project_idはgraphql api上のid
        project_id  = graphene.String(required=True)
        token  = graphene.String(required=True)
    
    success = graphene.Boolean()

    @staticmethod
    @login_required
    def mutate(root, info, token=None, project_id=None):
        db_id = from_global_id(project_id)
        project = Project.objects.get(pk=db_id[1])
        user = info.context.user
        try:
            user.projects.add(project)
            success=True
        except:
            success=False
        return UpdateProject(success=success)

JWT認証の採用

Nuxtにおける各フェーズの発火タイミング・生存期間やvuex・data・Cookieについて調べたことで、フロントエンドとバックエンドを分割した場合の認証方法について理解することが出来た。

export default function (context) {
  // ユーザが認証されていない場合
  if (context.app.$cookies.get('cookie-token', { path: '/'}) == "null") {
    return context.redirect('/user/login')
  }
  if (!context.app.$cookies.get('cookie-token', { path: '/'})) {
      return context.redirect('/user/login')
  }
}

技術構成

フロントエンド

  • Vue.js
  • Nuxt.js
  • GraphQL
  • Sass

バックエンド

  • Python
  • Django
  • GraphQL
  • JWT認証
Last Updated: 6/24/2019, 7:49:07 AM