最近发生的事情挺多，一条链突然间编程了两条。**STEEM**编程练习系列也跟着需要拓展到两边吵着说不同，但是本质一样的blockchain上。

我没有能够架设全节点的服务器，所以没有参加到建服务器的大队中。再加上最近着实比较忙碌（要帮助学校所有的导师，教师和学生从校园中的课程转移到网络上）。不想扯太远，就想说一件事：我发现美国防疫的标准允许和维持生命有关的商店继续营业；而一种能够维持生命的商店居然是卖酒的店铺……少喝一天不行吗？

Anyway，下面是我练习时制作出来的功能。所有代码存放在
https://github.com/xiangstan/steem

-----

## 设计思路

1. 第一个要解决的问题是查看自己发的贴子到底是发到了**STEEM**上还是跑到了**HIVE**。经过@ericet村长的检测，现在的***Busy***和***Partiko***因为是搭配的[https://anyx.io](https://anyx.io)的结点，所以自动转到了**HIVE**上面。而剩下的少的可怜的**STEEM**的结点，我也就选择了[STEEM官网API站点](https://api.steemit.com/)。<br />***steem.js***选择结点可以通过设置(```setOptions({ url: 结点网址})```)来完成，也就是说，设置一个变量，更改节点网址就可以了。
1. 到底哪个结点还能用？挂了还是转到**HIVE**去了？如果查看一个结点是在哪一条链上面？这个可以通过链属性中```account_creation_fee```来确认。如果要交**STEEM**那就是在老链上，相反就是**HIVE**。
1. **HIVE**的钱包不工作，那么，怎么知道自己在**HIVE**上有多少币？可以通过***key_chain***来查看自己到底有多穷。@robertyan发现***key_chain***更新并不需要用户确认；看它的代码上，我也发现***key_chain***确实拥有了贼多的权限，而且是所有网站，全天候监听。感觉似乎并不是很安全。所以还是用自己的方法写一个能够查看钱包的方式比较妥善。

-----

## 编写程序

1. 先修改原来的GUI，增加STEEM和HIVE两个标签，以供用户在两条链上穿梭。而程序中利用用户点击标签的同时，修改***steem.js***本来的结点的属性。
    ![](https://cdn.steemitimages.com/DQmRFMhLAa6z9G6xVevnmdKGNHAZyEn5YwtvzLMPPGA2Sfb/image.png)
    *红色标记出标记两条链的标签。*

    ```
    /* set current viewed page */
    SetPage: function(page = false) {
      if(!page) page = "chain";
      localStorage.setItem("page", page);
      this.$store.commit("updVar", { cat: "Page", value: page});
      if(page !== "chain") {
        this.SetSteemApiOption(page);
        this.SetSteemClient(page);
        if (this.SteemId !== "") {
          this.searchAccount(this.SteemId);
          this.InitSteem();
        }
      }
    },
    /* set steem api option */
    SetSteemApiOption: function(chain) {
      const opt = {
        chain: "https://api.steemit.com",
        hive: "https://anyx.io",
        splinterlands: "https://api.steemit.com",
        steem: "https://api.steemit.com"
      };
      if (chain !== "") {
        this.steem.api.setOptions({ url: opt[chain] });
      }
    },
    ```

    <br />上面两个方程中，```SetPage（page = false）```在更换标签的时候触发，设置当前所在为哪一条链上。而```SetSteemApiOption(chain)```则利用```this.steem.api.setOptions({ url: opt[chain] });```来更新***steem.js***的结点。

    ```
    fetchBlog() {
      const that = this;
      that.$root.$refs.app.SteemApiQry("getDiscussionsByBlog", {tag: this.SteemId, limit: 10}, function(error, result) {
        if (error === null) {
          that.$store.commit("updVar", {cat: "Blogs", value: result});
          that.$store.commit("setLoading", false);
        }
      });
    },
    /* create a brief description of blog content */
    GetBrief(data) {
      let temp = "";
      let div = document.createElement("div");
      div.innerHTML = data;
      temp = div.textContent || div.innerText || "";
      temp = temp.substring(0, 50);
      return temp;
    },
    GetUrl() {
      const opt = {
        steem: "https://steem.buzz",
        hive: "http://hive.log"
      };
      return opt[this.page];
    },
    ```

    <br />搜索文章的***API***是```getDiscussionsByBlog```，由于在更换标签页的时候，已经更改了***steem.js***的结点，所以，文章列表将展示出不同的结果。
    
    ![](https://cdn.steemitimages.com/DQmSCB2iPRYS7QnHmQbM82mUsfuoEDGZtoRVQunwmmuQPWH/image.png)
    *[https://steem.buzz](https://www.steem.buzz/@lnakuma)上我的blog列表*

    ![](https://cdn.steemitimages.com/DQmYnvE7AzMrLv218Nr7tN9KgXjUT8bVNJdVHkNbpzYwpWk/image.png)
    *[https://hive.blog](https://hive.blog/@lnakuma/posts)上我的post。

    我是小用户，每贴钱很少。大家将就着看。在上面两张截图中可以看到我没有同步我的文章。下面则是利用转换```setOptions({ url: 结点网址})```得到的效果。

    ![](https://cdn.steemitimages.com/DQmPPA92kSphg3FoTUQj6it3jME1XdFRqXeRK1Ddkc9zSR2/image.png)
    *STEEM标签*

   ![](https://cdn.steemitimages.com/DQmRn9kTiTNdNvHJ1TyHHpE1CPWmHT25HntQonU59QQfMfx/image.png)
    *HIVE标签*

    要注意HIVE和STEEMIT一样，blog和post是分开的，可以比较Testing和Testing Post  from eSteem这两篇不同步的文章。

1. 设计思路2中介绍了用过改变***steem.js***的结点设置可以节点到通向不同的链的数据。要想检验到底在哪条链上，最简单粗暴的方式，就是利用***steem.js***的结点设置这一个功能，有用户输入结点网址，通过```account_creation_fee```来确认结点网址在哪一条链上。

    ![](https://cdn.steemitimages.com/DQmcdTwrr8ooDkqKEQ4ipcutxA9rMR1JRLFNQz2xsZGxTKj/image.png)
    *测试https://s2.61bts.com/ 的结果是STEEM链上的。

1. 在上面我在两条链的文章的截图中可以看到我在**STEEM**和**HIVE**上面的钱包。Again，小用户，没啥钱。大家要是看着我可怜，想给我点，我也可以勉为其难，收一下……不过，还是把钱代理给**HIVE**黑名单，或者给村里使用比较有意义。

    如何搜索自己的币在[STEEM编程练习记录 一](https://www.steem.buzz/hive-180932/@lnakuma/steem)曾经介绍过，就不再重复。基本上也是利用和编写程序1和2相同的方法解决不同链的问题。

1. 曾记得在几个月前，刚刚发现**STEEM**上不太平，大家都想方设法在**steem-engine**上买币的时候，@ericet 村长贴出了我的网页[https://xiangstan.github.io/steem/](https://xiangstan.github.io/steem/)，但是由于全是英文的，村长还得帮忙翻译上面的内容。
    在那之后，我便想加上双语环境。

    ![](https://cdn.steemitimages.com/DQmafr6428UYv9vs8n5Fjwbb5XrETgFxAKQobMsmJQGUBB3/image.png)
    *双语选项*

    加入多种语言其实很简单。设置语言包的json文件。当选择语言的时候，导入语言包并存到***VueJS***的***Vuex*** data store中。所有的语言词组便即时导入网页中。

    ```
     /* get Initial language pack */
    GetLang: function(lang = false) {
      if(!lang) {
        lang = localStorage.getItem("lang");
        if(lang===null){
          lang = "en";
        }
      }
      localStorage.setItem("lang",lang);
      axios.get("./lang/"+lang+".json")
        .then((result) => {
          this.$store.commit("setLang", result.data);
        })
        .catch((error) => {
          console.error(error);
        });
     },
    ```
    <br />当第一次浏览网页的时候，程序默认英文为基本语言，并存入浏览器的```localStorage```中。每次更改语言，也可以调用这个方程，重新导入新的语言包，并在浏览器中存储更新的语言。

1. 这段时间，好像玩SteemMonsters比写文章赚钱。作为编程练习，也无可厚非的将SteemMonsters加入到代码中。目前拥有的功能为自己的总战绩，赛季战绩，有多少DEC币，和拥有什么牌。

    ![](https://cdn.steemitimages.com/DQmP6nQgLdgP3Q7L2hLm4Q2XULVfrWPtEnAKpvnNoVNFoSJ/image.png)

    在开始制作这个页面的时候，出现了一个小小的问题。有些卡牌不能正常显示图像。在反复查找原因无果的烦恼中，我再次找到@ericet村长，他发现，我的图像网址也包括了***beta***的卡牌，没有***Untamed***的。一下子好解决了。只要检查卡牌的```editions```就可以区别不同套牌的网址了。

    ```
    // load balances
    LoadBalance(steemId) {
      console.log("LoadBalance: "+steemId);
      axios.get(this.Url.json + this.api.balance + steemId).then((result) => {
        if (result.data) {
          let balance = {};
          let temp = result.data;
          for (let i = 0; i < temp.length; i++) {
            balance[temp[i].token.toLowerCase()] = temp[i].balance;
          }
          this.Balance = balance;
          this.hasPlayer = 1;
        }
        else {
          this.hasPlayer = -1;
        }
      });
    },
    // load all cards
    LoadCards() {
      axios.get(this.Url.json + this.api.cards).then((result) => {
        if (result.data) {
          //this.Collection = result.data;
          this.LoadCollection(result.data);
        }
      });
    },
    // load card collection
    LoadCollection(cards) {
      axios.get(this.Url.api + this.api.collection + this.SteemId).then((result) => {
        if (result.data) {
          let collect = result.data.cards;
          let temp = {};
          for (let i = 0; i < collect.length; i++) {
            for (let j = 0; j < cards.length; j++) {
              if (collect[i].card_detail_id === cards[j].id) {
                if (typeof this.Collection[cards[j].id] !== "undefined") {
                  temp[cards[j].id].count++;
                }
                else {
                  temp[cards[j].id] = {
                    id: cards[j].id,
                    editions: cards[j].editions,
                    name: cards[j].name,
                    level: collect[i].level,
                    gold: collect[i].gold,
                    xp: collect[i].xp,
                    count: 1
                  };
                }
                break;
              }
            }
          }
          this.Collection = temp;
        }
      });
    },
    // load player detail
    LoadPlayer(steemId) {
      axios.get(this.Url.api + this.api.detail + steemId).then((result, error) => {
        if (typeof result.data.error==="undefined") {
          this.SmsDetail = result.data;
          this.SmsDetail.season_details.league = this.GetLeague(this.SmsDetail.season_details.rating);
          this.LoadBalance(steemId);
        }
        else {
          console.log(error)
          this.hasPlayer = -1;
        }
      });
    },
    ```

  所有的数据都是以JSON形式在[https://steemmonsters.com/](https://steemmonsters.com/)直接读取。比查找***steem.js***的API要简单明了的多。

1. 写文章最重要的事情之一就是啪啪啪。那么怎么在***HIVE***上啪啪啪呢？只要在我写的extension里面的manifest.json文中中加入***HIVE***的网址便可。

    ![](https://cdn.steemitimages.com/DQmPeh39KJLJfbMDXEE6jQNxRUxZh71qv5vNxj55Nrss7nZ/image.png)
    *That's it. Easy Breathe.*

-----

## 以后还可以做什么

1. 同步发文。Actifit已经是同步发文。[https://steem.buzz](https://steem.buzz)上通过标签也能同步发文。我不是抢生意，只是要练习一下。
1. 用户设定结点的网址。现在两条链的结点是固定的。记得https://api.steemit.com 是被墙了的，让用户自己选择结点网址可以减少翻墙的苦恼。
1. 回复，点赞，啪啪啪等等功能。既然我导入文章了，那么就应该可以继续深一步，增加其他于文章相关的功能了。谁知道，也许我能写出一整套自己的前端来呢？
1. 更多的SteemMonsters的信息，目前我只展示出拥有的卡牌，并没有标记每张卡的数据。以后可以慢慢加上来。如果能让这个页面开站就好了。也许我做不出来，到时再说。

----

又熬到1点多了，就写道这去睡觉了。克州现在500多确诊病例，要多睡觉增加抵抗力了。