このエントリーをはてなブックマークに追加

12月

1

【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築する

画面、DB、APIの設計からフロントまでを実際のプロジェクトに近い形で開発を体験します

Organizing : 株式会社X-HACK

Hashtag :#xhandson
Registration info

第一回or第二回に参加の方

2000(Pay at the door)

FCFS
8/10

Description

ご注意

  • 全4回で完結する、シリーズでのハンズオンの第3回目の補講です

ruby(sinatra)、vue.jsの基本構文を解説します データベース、ActiveRecord、ORMについて解説します 簡単なwebサーバーを立ち上げてローカルで動作させます

資料

https://paper.dropbox.com/doc/RubyVue.jsEC-3--AS0DvSMMqW~BapG5lIX1R49VAg-2SMINSAOiq7qEhO10I13x

環境設定

  1. rubyのバージョン2.4が動作すること
  2. ターミナルコマンドが使えること

準備 (途中から参加の方は必須)

  1. vue.jsの公式サイトにアクセスし、はじめにの部分を読んでおくこと (5分)
    https://jp.vuejs.org/v2/guide/index.html
  2. vueの素晴らしいチュートリアルがあります (30分)
    https://www.webprofessional.jp/fetching-data-third-party-api-vue-axios/
  3. sinatra(rubyの軽量フレームワーク) (60分)
    https://dotinstall.com/lessons/basic_sinatra_v2

イベントコンセプト

「ゼロから考えながら構築する」というのが重要なテーマとなります。
RubyやHTML/CSS/javaScriptの基礎講座ではないため、rubyやHTML/CSS/javaScriptの基礎知識の習得が目的の場合、
ご期待に添えない可能性が高いです。
とはいえ、他の言語でプログラミングの経験があれば、問題なく対応できるレベルかと思います。

進め方

講師側で「こう作るべき!」というようなサンプルを提示して、それをなぞっていくのではなく、 参加者の皆様がチームとなって、どういう風に作っていくか考えて、会話をして作り方を決定していく過程こそが重要と考えています。 ですので、設計、実装をシステム全体を通して考えてもらう体験を積んでいただくことに主体をおいたカリキュラムになっております。

とはいえ、最低限の知識としてRubyで簡単なAPIサーバーを立ち上げる方法や、 vue.jsのテンプレートの利用方法などは解説します。

成果物

最終的に完成させる目標はこちらのサイトです https://xhack-shop.herokuapp.com こちらはrubyとvue.jsをベースに作ってあります。

こちらのウェブサイトをvue.jsを使ってテンプレート化して書き換えたり、APIで取得したデータを使ってページに情報を埋め込んだりといった部分を、 1. どういうAPIが必要か 2. どこがvue.jsのテンプレート化して構築できるか といったことを皆様に考えていただきます

時間の関係上、ある程度コードベースは用意しますが 全て講師側で完成をさせずに、あえて各チームが書き換えるための余白を残しております

対象者

ある程度書籍などで学習を終えたエンジニアが、実際のサービス作成までの知識のギャップを埋めるために構成を考えています 参加者の皆さまにも内容のブラッシュアップなどにご協力いただきたいと思っております

趣旨にご賛同いただければ幸いです!!

slack

賛同いただければ下記からSlackへの参加お願いします! https://join.slack.com/t/ruby-vuejs-ec/shared_invite/enQtNDY3MTM3MzQwNjc5LTJmMDBlODZiNmQ1NGVkNTE3MDdiZTVhN2RhNjczMGE3MDVlYmI1YzcxYmY2YTlkMTk3OTVkMmU2YjJhODI5NmY

開催の予定

開催日 回数 内容
10/28 13:00 第一回 基本設計(データベース、API、画面)
11/18 13:00 第二回 管理画面、商品一覧
11/25 13:00 第三回 Vue.js の基本、Ruby軽量フレームワークの紹介
12/01 13:00 第三回(補講) Vue.js の基本、Ruby軽量フレームワークsinatraの紹介
12/09 13:00 第四回 決済システム、総評

※カリキュラムは参加者の反応やレベル感を見ながらブラッシュアップをしているところです、予告なく変更される場合がありますので、ご了承ください

タイムテーブル

内容 時間(目安)
開場、受付開始 12:45-13:10
登壇者の自己紹介 13:10-13:15
ワークショップの趣旨説明 13:15-13:25
参加者の自己紹介 各テーブルごと 13:25-13:35
これからやることの説明 13:35-13:50
ハンズオン その1 - 40分 13:50-14:30
10分休憩 14:30-14:40
ハンズオン その2 - 50分 14:40-15:30
ハンズオン その3 - 50分 15:30-16:20
懇親会準備 16:20-16:30
懇親会 16:30-17:10
閉会、片付け 17:10-17:30

このイベントで「取り上げない」こと

重要なことは、やらないことを決めることです。

このイベントではとてもシンプルに設計をして、最低限の機能を備えたサービスを最速で完成させることを目指します。 WebPackやRailsなど便利なツールやフレームワークはたくさんありますが、初心者にとってはかえって重荷です。

どんどん機能を追加していくと、それらのフレームワークが強力なサポートをしてくれることは事実です。 ですが、初めての方にとってはそれらを利用することは、情報過多気味で消化するのに時間がかかり好ましくありません。

簡単とシンプルは違います。
シンプルに作ることを目標にし、「簡単だけど複雑な物」はこのイベントでは取り上げません。

RubyとVue.jsを用いたシンプルなwebサービスの構築手法を学びます

第一回は、開発環境の構築をした後、実際の商品を登録する画面と、商品一覧を表示する画面を実装します

最近のweb開発のトレンドを交えながら、ゼロからデータベースを設計し、機能を作り込んで行きます
まずは可能な限りシンプルなものを作り、少しずつ機能を追加していくことで、無理なくウェブの開発に必要な知識を蓄えて行きます

プログラミングの基礎知識はもちろんですが、データベースの設計のノウハウも身につくワークショップです

持ち物

ノートパソコン

必要な知識

プログラミングの基礎的な知識がある方が望ましいです

エンジニアがどうやってデータベースの設計などをしてWebサービスを作っているのか興味がある方や学生の方もご参加頂けますが、一部初学者には難しい箇所もございます

カリキュラムを深く理解したい場合、下記の動画で事前学習しておくと良いでしょう

ツール、フレームワーク

  • github
  • ruby(2.4)
  • ActiveRecord
  • SQLite3
  • Vue.js(2系)

開発方針

フロントエンドとバックエンドの開発を切り分けるため、 RubyではAPIの提供と、バックエンド側の管理画面を担当させ、 フロントエンドは、Vew.jsを使ってAPIで連携して開発します

SNS

イベント参加者限定で、プログラミング学習のサポートやカリキュラムに関する質問を受け付けています
登録して気軽に質問してください♪

X-HACKを追加

Media View all Media

If you add event media, up to 3 items will be shown here.

Feed

matsuda shinsuke

matsuda shinsuke published 【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築する.

11/19/2018 12:23

【第3回-補講1 】RubyとVue.jsでECサイトを考えながら構築する を公開しました!

Group

Ended

2018/12/01(Sat)

13:00
16:00

開催日時が重複しているイベントに申し込んでいる場合、このイベントには申し込むことができません

Registration Period
2018/11/19(Mon) 12:08 〜
2018/12/01(Sat) 16:00

Location

Impact HUB Tokyo

東京都目黒区目黒2丁目11−3

Attendees(8)

UT

UT

【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築する に参加を申し込みました!

wudono

wudono

【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築する に参加を申し込みました!

oyama919

oyama919

【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築する に参加を申し込みました!

yachiru

yachiru

【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築する に参加を申し込みました!

s5708100

s5708100

【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築するに参加を申し込みました!

diskkid

diskkid

【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築するに参加を申し込みました!

JoeNakamura

JoeNakamura

【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築するに参加を申し込みました!

shohein

shohein

【第3回-補講1】RubyとVue.jsでECサイトを考えながら構築する に参加を申し込みました!

Attendees (8)

Canceled (3)