GitHub 專案 README 展示使用本開源庫的 App

EyreFree發表於2019-04-06

零、前言

本文展示有引用關係的 App，所以僅針對 iOS / Android 庫；
本文依賴 AppSight 的資料實現所述功能，若您的 SDK 無法在 AppSight 檢索到，則本文方式無法使用。

一、找到源資料

展示使用某庫的 App，首先需要找到一個能夠提供相應資料的資料來源，這裡我們依賴的 AppSight，這裡以 EFCountingLabel 為例，我們在上找到它對應的頁面 www.appsight.io/sdk/ef-coun…，開啟後可看到相關引用資料，如下所示：

二、載入所有資料

資料有了，接下來我們可以用指令碼爬取的方式獲取想要的資料，這裡為了便於除錯，筆者使用了 JavaScript，在 Chrome 的 Console 裡執行就可以直接獲取我們想要的結果。

由於此處的引用資料是有分頁的，那麼爬取之前，我們先要寫一段指令碼來迴圈點選分頁載入按鈕，幫助我們自動載入所有的分頁資料（如果資料量少的話意義不是很大，但是資料量多的話，這一步就很有必要了）。

在 SDK 頁面，開啟 Chrome 開發者工具中的 JavaScript 控制檯，執行如下指令碼即可：

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function main() {
	var using = document.getElementsByClassName('as-sec-apps-using')[0];
	do {
		if (document.getElementsByClassName('as-sec-loading')[0].style.cssText == "display: block;") {
			await sleep(1000);
		} else {
			if (using.getElementsByClassName('as-but as-but-more btn disabled')[0] == null) {
				using.getElementsByClassName('as-but as-but-more btn')[0].click();
				await sleep(1000);
			} else {
				break;
			}
		}
	} while (true);
}
main();
複製程式碼

三、生成 HTML 程式碼

所有分頁資料載入完成（或者達到你需要的數量）後，繼續在 JavaScript 控制檯，執行如下指令碼：

var using = document.getElementsByClassName('as-sec-apps-using')[0]
var items = using.getElementsByClassName('as-list-item-inner')
var result = "<table><tr>"
for(let i = 0, len = items.length; i < len; i++) {
	if(i % 10 == 0 && i > 0) {
		result = result + "</tr><tr>"
	}
    let item = items[i]
    var icon = item.getElementsByClassName('as-icon')[0].src;
    var title = item.getElementsByClassName('as-label as-name')[0].innerHTML;
    var href = item.href
    result = result + "<td><a href=\'" + href + "\' title=\'" + title + "\'><img src=\'" + icon + "\'></a></td>"
}
result = result + "</tr></table>"
console.log(result)
複製程式碼

可以獲得對應的 App 資訊的 HTML 程式碼，如下所示：

獲得的程式碼整理後為如下形式：

<table>
  <tr>
    <td>
      <a href='https://www.appsight.io/app/toss-%ED%86%A0%EC%8A%A4' title='토스'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/001/263/485/media/small.png?1530945069'>
      </a>
    </td>
    <td>
      <a href='https://www.appsight.io/app/%EC%87%BC%ED%95%91%EC%9D%84-%EB%9A%9D%EB%94%B1-%ED%8B%B0%EB%AA%AC' title='티몬 - 오늘은 또 어떤 딜?'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/001/286/380/media/small.png?1534301992'>
      </a>
    </td>
    <td>
      <a href='https://www.appsight.io/app/%EB%B1%85%ED%81%AC%EC%83%90%EB%9F%AC%EB%93%9C' title='뱅크샐러드'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/001/282/332/media/small.png?1533591669'>
      </a>
    </td>
    <td>
      <a href='https://www.appsight.io/app/climendo-basic' title='Climendo Basic'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/000/304/533/media/small.png?1481531280'>
      </a>
    </td>
  </tr>
</table>
複製程式碼