1App = {
2  web3Provider: null,
3  contracts: {},
4
5  init: async function() {
6    // ペットの情報をロードします。
7    $.getJSON('../pets.json', function(data) {
8      var petsRow = $('#petsRow');
9      var petTemplate = $('#petTemplate');
10
11      for (i = 0; i < data.length; i ++) {
12        petTemplate.find('.panel-title').text(data[i].name);
13        petTemplate.find('img').attr('src', data[i].picture);
14        petTemplate.find('.pet-breed').text(data[i].breed);
15        petTemplate.find('.pet-age').text(data[i].age);
16        petTemplate.find('.pet-location').text(data[i].location);
17        petTemplate.find('.btn-adopt').attr('data-id', data[i].id);
18
19        petsRow.append(petTemplate.html());
20      }
21    });
22
23    return await App.initWeb3();
24  },
25
26  initWeb3: async function() {
27    // DAppを使用できるブラウザーか確認する
28if (window.ethereum) {
29  App.web3Provider = window.ethereum;
30  try {
31    // アカウントへのアクセス要求
32    await window.ethereum.enable();
33  } catch (error) {
34    // ユーザーがアカウントのアクセスを拒否しました
35    console.error("User denied account access")
36  }
37}
38// Web3プロバイダーのウィンドウを開く
39else if (window.web3) {
40  App.web3Provider = window.web3.currentProvider;
41}
42// もし挿入されたWeb3インスタンスが検出されない場合は、Ganacheに戻します
43else {
44  App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
45}
46web3 = new Web3(App.web3Provider);
47
48    return App.initContract();
49  },
50
51<span style="color: rgb(255, 0, 0);" data-mce-style="color: #ff0000;">  initContract: function() {
52    $.getJSON('Adoption.json', function(data) {
53  //必要なContract Artifactファイルを取得し、@truffle/contractでインスタンス化します
54  var AdoptionArtifact = data;
55  App.contracts.Adoption = TruffleContract(AdoptionArtifact);
56
57  // コントラクトの為にプロバーダーを設定します
58  App.contracts.Adoption.setProvider(App.web3Provider);
59
60  // データ取得と受け取ったペットをマーキングする為にコントラクトを使用します
61  return App.markAdopted();
62});
63</span>
64
65    return App.bindEvents();
66  },
67
68  bindEvents: function() {
69    $(document).on('click', '.btn-adopt', App.handleAdopt);
70  },
71
72  markAdopted: function(adopters, account) {
73  var adoptionInstance;
74
75App.contracts.Adoption.deployed().then(function(instance) {
76  adoptionInstance = instance;
77
78  return adoptionInstance.getAdopters.call();
79}).then(function(adopters) {
80  for (i = 0; i < adopters.length; i++) {
81    if (adopters[i] !== '0x0000000000000000000000000000000000000000') {
82      $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
83    }
84  }
85}).catch(function(err) {
86  console.log(err.message);
87});
88
89  },
90
91  handleAdopt: function(event) {
92    event.preventDefault();
93
94    var petId = parseInt($(event.target).data('id'));
95
96    var adoptionInstance;
97
98web3.eth.getAccounts(function(error, accounts) {
99  if (error) {
100    console.log(error);
101  }
102
103  var account = accounts[0];
104
105  App.contracts.Adoption.deployed().then(function(instance) {
106    adoptionInstance = instance;
107
108    // アカウントを送信してデータ取得としてのトランザクションを実行します
109    return adoptionInstance.adopt(petId, {from: account});
110  }).then(function(result) {
111    return App.markAdopted();
112  }).catch(function(err) {
113    console.log(err.message);
114  });
115});
116
117  }
118
119};
120
121$(function() {
122  $(window).load(function() {
123    App.init();
124  });
125});

1   //lite-serverの起動
2    $ npm install -g lite-server
3    //*****プロジェクトルート 
4    $ pet-shop-tutorial pet-shop > lite-server
5    //******プロジェクトルート

1{ "server": { "baseDir": ["./src", "./build/contracts"] } }

1"scripts": {
2  "dev": "lite-server",
3  "test": "echo \"Error: no test specified\" && exit 1"
4},

1npm run dev