ROAD TO ClapBox Vol.2

Web開発

ClapBoxの開発記録

ClapBoxとは匿名で応援をすることができるサービス。
ユーザーのページでClap(拍手)とメッセージを送ることができ、ユーザーは自身のページでClap数やメッセージを確認できる。

フロント
・Nuxt(Lambda)
・Vuetify
バック
・Flask(Lambda)
・DyanmoDB

先にフロントから作っている。
バックはサーバレスでやりたくて上の構成を考えているけど、今回の開発で新しく触ることが多いのでどうしようか考え中。
Vue(Nuxt)、FlaskもDynamoも初めて。
新しく触る技術が多いと開発に時間がかかりすぎてモチベ下がって良くない説ある。

サービス作るときに新しく触る技術はなるべく少なく!できればひとつ!

ってことでバックはDjangoをEC2とRDSで動かそうかなと。
Dynamoはやったことないから設計考えるのがRDSよりしんどそう。

以下、今日進めたとこ

ページャーのdisabledを設定した。

<div class="text-xs-center pt-2">
      <v-btn icon @click="handleClickPrev" :disabled="isLastPage"><v-icon>arrow_back_ios</v-icon></v-btn>
      <v-btn icon @click="handleClickNext" :disabled="isFirstPage"><v-icon>arrow_forward_ios</v-icon></v-btn>
  </div>
export default {

computed: {
isFirstPage() {
return 2 > this.page
},
isLastPage() {
return this.page + 1 > this.pages
}
},

ログインしているときのトップページに匿名でもらったメッセージを表示させる。
Vuetifyのcardを並べていく。

親から子へのデータの渡し方

messageは{“body”: “aaaa”, }みたいなのとして

親(pages/index.vue)
<message v-for="message in messageList" :message="message"/>

子(compornents/Message.vue)
<template>
  <v-card>
    <v-card-text>
      {{ message.body }}
    </v-card-text>

    <v-card-actions>
      <v-btn flat color="orange">Share</v-btn>
      <v-btn flat color="orange">Explore</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
  export default {
    props: {
      message: {
        type: Object
      }
    }
  }
</script>
Web開発
スポンサーリンク
hid3をフォローする
踊りながらWebサービスを個人開発している人のブログ