【未発表】backbone.jsとjavaee7でwebアプリを作ろう!(第1回) 〜getで一覧編〜
DESCRIPTION
LT予定だった資料 急にキャンセルしてすみません.... 第5回福岡市西区プログラム勉強会 2013/9/1(日) Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜TRANSCRIPT
![Page 1: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/1.jpg)
第5回福岡市西区プログラム勉強会 2013/9/1(日)
Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回)〜GETで一覧編〜
ぱくたそ無料写真素材を使用しております。ありがとうございます! http://www.pakutaso.com/about.html
未発表
13年9月1日日曜日
![Page 2: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/2.jpg)
自己紹介
twitterID: itoKami1123
下請け・派遣で福岡をふらふらしてます。
最近はJavascriptメインになってきました。
今年はTDDできる人になりたいです。
福岡の皆で技術の底上げが出来ればと思い
たまに初心者向けの勉強会をしてます。
13年9月1日日曜日
![Page 3: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/3.jpg)
ところで今日の発表..
13年9月1日日曜日
![Page 4: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/4.jpg)
なんでJavaEEなの??
PHP(Cake)とかRuby(on rails)とかあるやん..
13年9月1日日曜日
![Page 5: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/5.jpg)
JavaEE勉強会するよ〜9/21(土) 19:00-21:00
13年9月1日日曜日
![Page 6: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/6.jpg)
今日の内容
ねこび〜ん by カネウチカズコ http://ja.netbeans.org/nekobean
13年9月1日日曜日
![Page 7: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/7.jpg)
今日の内容
ねこび〜ん by カネウチカズコ http://ja.netbeans.org/nekobean
OS: Mac OSX 10.7.5
IDE:NetBeans 7.3.1
Java: 1.7.0_25
データベース:MySQL
ブラウザ:chrome
以下環境です。
13年9月1日日曜日
![Page 8: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/8.jpg)
NetBeansでプロジェクト作成
13年9月1日日曜日
![Page 9: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/9.jpg)
新規プロジェクトを作成
13年9月1日日曜日
![Page 10: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/10.jpg)
プロジェクト名を設定して次へ
13年9月1日日曜日
![Page 11: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/11.jpg)
そのまんま次へ
13年9月1日日曜日
![Page 12: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/12.jpg)
何も選ばずに終了
13年9月1日日曜日
![Page 13: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/13.jpg)
データの準備(RDBMS)
13年9月1日日曜日
![Page 14: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/14.jpg)
データは2件ほど登録してます
13年9月1日日曜日
![Page 15: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/15.jpg)
仕事情報を格納する場所(JPAエンティティ)
13年9月1日日曜日
![Page 16: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/16.jpg)
jobsテーブルからデータ格納クラスを生成
13年9月1日日曜日
![Page 17: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/17.jpg)
対象テーブル(jobs)を指定
13年9月1日日曜日
![Page 18: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/18.jpg)
jobsテーブルに対応したJobクラス
13年9月1日日曜日
![Page 19: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/19.jpg)
オプションは特に変更無く「終了」
13年9月1日日曜日
![Page 20: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/20.jpg)
package findjob.domain.model;・・・ import 省略・・・@Entity@Table(name = "jobs")@XmlRootElement@NamedQueries({@NamedQuery(name = "Job.findAll", query = "SELECT j FROM Job j"),@NamedQuery(name = "Job.findById", query = "SELECT j FROM Job j WHERE j.id = :id"),@NamedQuery(name = "Job.findByName", query = "SELECT j FROM Job j WHERE j.name = :name")})public class Job implements Serializable { private static final long serialVersionUID = 1L; @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Basic(optional = false) @Column(name = "id") private Integer id; @Basic(optional = false) @NotNull @Size(min = 1, max = 128) @Column(name = "name") private String name; public Job() {} public Job(Integer id) { this.id = id; } public Job(Integer id, String name) { this.id = id; this.name = name; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id;} public String getName() { return name; } public void setName(String name) { this.name = name; }・・・ import 省略・・・ }
自動でJob.java生成
JPQL (Java Persistence Query Langauage)
13年9月1日日曜日
![Page 21: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/21.jpg)
仕事情報業務処理(EJB)
13年9月1日日曜日
![Page 22: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/22.jpg)
仕事情報を提供するサービスクラスを作ります。
13年9月1日日曜日
![Page 23: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/23.jpg)
クラス名をHelloWorkServiceにして終了!
HelloWorkService
13年9月1日日曜日
![Page 24: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/24.jpg)
仕事一覧をListで返す処理を追加package findjob.domain.service; import javax.ejb.Stateless; import javax.persistence.EntityManager;import javax.persistence.PersistenceContext; import java.util.List;import javax.persistence.TypedQuery;import findjob.domain.model.Job; @Statelesspublic class HelloWorkService { @PersistenceContext protected EntityManager entityManager; public List<Job> findAll(){ TypedQuery<Job> q= entityManager.createNamedQuery( "Job.findAll", Job.class); return q.getResultList(); }}
Job.java(JPAエンティティ)を操作するEntityManager
全件取得!
13年9月1日日曜日
![Page 25: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/25.jpg)
仕事情報提供WebサービスREST(JAX-RS)
13年9月1日日曜日
![Page 26: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/26.jpg)
普通のJavaクラスを作成
13年9月1日日曜日
![Page 27: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/27.jpg)
HelloWorkResouce.javaを作成
13年9月1日日曜日
![Page 28: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/28.jpg)
package findjob.app; import findjob.domain.model.Job;import findjob.domain.service.HelloWorkService;import java.util.List;import javax.ejb.EJB;import javax.ws.rs.GET;import javax.ws.rs.Path;import javax.ws.rs.Produces;import javax.ws.rs.core.MediaType; @Path("hellowork/jobs")public class HelloWorkResouce { @EJB protected HelloWorkService hellowWorkService; @GET @Produces(MediaType.APPLICATION_JSON) public List<Job> getJobs(){ return hellowWorkService.findAll(); }}
URLのパス
使用するEJBを追加
GETでJSON形式で取得
13年9月1日日曜日
![Page 29: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/29.jpg)
package findjob.app; import findjob.domain.model.Job;import findjob.domain.service.HelloWorkService;import java.util.List;import javax.ejb.EJB;import javax.ws.rs.GET;import javax.ws.rs.Path;import javax.ws.rs.Produces;import javax.ws.rs.core.MediaType; @Path("hellowork/jobs")public class HelloWorkResouce { @EJB protected HelloWorkService hellowWorkService; @GET @Produces(MediaType.APPLICATION_JSON) public List<Job> getJobs(){ return hellowWorkService.findAll(); }}
左の黄色のランプを選択し「JavaEE6仕様を使用してRESTを構成します」を選択
13年9月1日日曜日
![Page 30: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/30.jpg)
リファクタリング -> 名前変更
自動でorg.netbeans.rest.application.configと言うパッケージ名になるので自分のプロジェクト名に変更しました。
13年9月1日日曜日
![Page 31: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/31.jpg)
ブラウザでGETにてJSONが返却される事を確認
13年9月1日日曜日
![Page 32: 【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e132b1a28ab6e128b476b/html5/thumbnails/32.jpg)
おしまい
Backbone.jsとJavaEE7でWebアプリを作ろう!(第2回)〜Backbone.jsで表示〜に続く..
13年9月1日日曜日