New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OSS Gate Workshop: monotaro: 2018-10-01: Silver-birder: algoliasearch-client-javascript: Work log #967

Closed
Silver-birder opened this Issue Oct 1, 2018 · 51 comments

Comments

Projects
None yet
3 participants
@Silver-birder
Contributor

Silver-birder commented Oct 1, 2018

This is a work log of a "OSS Gate workshop".
"OSS Gate workshop" is an activity to increase OSS developers.
Here's been discussed in Japanese. Thanks.

作業ログ作成時の説明

以下のテンプレートを埋めてタイトルに設定します。埋め方例はスクロールすると見えてきます。

OSS Gate Workshop: ${LOCATION}: ${YEAR}-${MONTH}-${DAY}: ${ACCOUNT_NAME}: ${OSS_NAME}: Work log

タイトル例↓:

OSS Gate Workshop: Tokyo: 2017-01-16: kou: Rabbit: Work log

OSS Gateワークショップ関連情報

  • スライド:ワークショップの進行に使っているスライドがあります。
  • チャット:OSS開発に関することならなんでも相談できます。ワークショップが終わった後もオンラインで相談しながら継続的にOSSの開発に参加しましょう!
  • シナリオ:ワークショップの目的・内容・進め方の詳細が書いています。
  • 過去のビギナーの作業ログ:他の人の作業ログから学べることがいろいろあるはずです。
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

ライセンスを確認する

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

既に調べていたgithubは以下。
https://github.com/algolia/algoliasearch-client-javascript

ライセンスは、以下。
https://github.com/algolia/algoliasearch-client-javascript/blob/develop/LICENSE.txt

The MIT License (MIT)だったため、OK。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

READMEを探す

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

まずpackageをインストールするには、npmかscriptタグで読み込むか。

You can either use a package manager like npm or include a <script> tag.
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

scriptタグを埋めることにする。(npmはバージョン関連で苦しみそう)

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

https://github.com/algolia/algoliasearch-client-javascript#search-onlylite-client

only read版がある。こちらでしてみるか。

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>

only read以外版は以下。

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

以下、IDとKeyが必要。

You first need to initialize the client. For that you need your Application ID and API Key.
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

ファイルを作ります。

⋊> ~ touch index.html                                                   14:23:44
⋊> ~ vim index.html                                                     14:23:58
⋊> ~ cat index.html                                                     14:25:41
<html>
<head>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
</head>
<body>
<script>
// var algoliasearch = require('algoliasearch');
// var algoliasearch = require('algoliasearch/reactnative');
// var algoliasearch = require('algoliasearch/lite');
// or just use algoliasearch if you are using a <script> tag
// if you are using AMD module loader, algoliasearch will not be defined in window,
// but in the AMD modules of the page

var client = algoliasearch('applicationID', 'apiKey');
</script>
</body>
</html>
⋊> ~
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

API Keyには、2つの種類がある。
https://www.algolia.com/apps/VGQTJO55PG/api-keys/all
(applicationIDは、VGQTJO55PG )

1.Search-Only API  Key
This is the public API key to use in your frontend code. This key is only usable for search queries.REGENERATE

2.Admin API Key
This is the ADMIN API key. Please keep it secret and use it ONLY from your backend: this key is used to create, update and DELETE your indices. You can also use it to manage your API keys.

3.Monitoring API Key
This key is used to access the Monitoring API.

Search-Only APIは、publicで公開OKなんだ。こちらを使う。
このKeyは、誰でも無制限に使えるのか?(このAPIを何度もcallしても行けるのか?)

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

ちなみに、Admin API Keyで出たindicesってなんだ?

https://www.algolia.com/apps/VGQTJO55PG/explorer/browse/getstarted_actors
検索ワードが溜まっているデータベースみたいなもの?

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

https://github.com/algolia/algoliasearch-client-javascript#push-data

データをpushする。jsonファイルが必要。
ちなみに、contactsって何?(上記github上で検索しても、よくわからなかった)

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

⋊> ~ mv Downloads/contacts.json .                 14:36:25
⋊> ~ ls                                                                 14:41:26
Applications     Library          Wine             google-cloud-sdk
Desktop          Movies           app              index.html
Documents        Music            bin
Downloads        Pictures         contacts.json
Dropbox          Public           go

ホームディレクトだった...

⋊> ~ mkdir work                                                         14:41:22
⋊> ~ mv index.html  work                                         14:42:07
⋊> ~ mv contacts.json work
⋊> ~ cd work
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

https://github.com/algolia/algoliasearch-client-javascript#push-data
こちらを読んで気になったのが、Without any prior configuration,
優先すべき設定ファイルがあれば、どうなるのか?

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

⋊> ~/work vi index.html                                                 14:44:31
⋊> ~/work cat index.html                                                                                                                                                                                                              14:46:12
<html>
<head>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
</head>
<body>
<script>
// var algoliasearch = require('algoliasearch');
// var algoliasearch = require('algoliasearch/reactnative');
// var algoliasearch = require('algoliasearch/lite');
// or just use algoliasearch if you are using a <script> tag
// if you are using AMD module loader, algoliasearch will not be defined in window,
// but in the AMD modules of the page

var client = algoliasearch('VGQTJO55PG', '****');
var index = client.initIndex('contacts');
var contactsJSON = require('./contacts.json');

index.addObjects(contactsJSON, function(err, content) {
  if (err) {
    console.error(err);
  }
});
</script>
</body>
</html>
⋊> ~/work
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

上記ファイルを動かしてみる。(ファイルオープン)

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

Uncaught ReferenceError: require is not defined
    at index.html:16

CDN経由では、だめなのでは・・?(怒)

npm経由で進める!!

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

npmを進める前に、htmlのscript単体だけでrequireを使えるかggってみた。。
それらしい記事がみつからなった。

npmで進めてみる。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

https://github.com/algolia/algoliasearch-client-javascript#install

npmでalgoliasearchをインストールしようとする。

⋊> ~/work npm install algoliasearch --save                                                                                                                                                                                            14:54:06
npm WARN saveError ENOENT: no such file or directory, open '/Users/silver/work/package.json'
/Users/silver/work
└─┬ algoliasearch@3.30.0
  ├── agentkeepalive@2.2.0
  ├─┬ debug@2.6.9
  │ └── ms@2.0.0
  ├─┬ envify@4.1.0
  │ ├── esprima@4.0.1
  │ └── through@2.3.8
  ├── es6-promise@4.2.5
  ├── events@1.1.1
  ├── foreach@2.0.5
  ├─┬ global@4.3.2
  │ ├─┬ min-document@2.19.0
  │ │ └── dom-walk@0.1.1
  │ └── process@0.5.2
  ├── inherits@2.0.3
  ├── isarray@2.0.4
  ├── load-script@1.0.0
  ├── object-keys@1.0.12
  ├── querystring-es3@0.2.1
  ├─┬ reduce@1.0.1
  │ └── object-keys@1.0.12  deduped
  ├── semver@5.5.1
  └─┬ tunnel-agent@0.6.0
    └── safe-buffer@5.1.2

npm WARN enoent ENOENT: no such file or directory, open '/Users/silver/work/package.json'
npm WARN work No description
npm WARN work No repository field.
npm WARN work No README data
npm WARN work No license field.
⋊> ~/work ls                                                                                                                                                                                                                          14:54:11
contacts.json index.html    node_modules
⋊> ~/work

npm init をしていなかったため、エラーになった。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

npm initしてから、algoliasearchをインストールする。

⋊> ~/work npm init                                                                                                                                                                                                                    14:54:12
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (work)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/silver/work/package.json:

{
  "name": "work",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "algoliasearch": "^3.30.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)
⋊> ~/work                                                                                                                                                                                                                             14:55:15
⋊> ~/work npm install algoliasearch --save                                                                                                                                                                                            14:55:16
work@1.0.0 /Users/silver/work
└── algoliasearch@3.30.0

npm WARN work@1.0.0 No description
npm WARN work@1.0.0 No repository field.
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

index.htmlで作成していたので、node.jsで動かすために、jsファイルに変換する。

⋊> ~/work cp index.html index.js                                                                                                                                                                                                      14:56:12
⋊> ~/work vi index.js                                                                                                                                                                                                                 14:56:33
⋊> ~/work cat index.js                                                                                                                                                                                                                14:56:48
// var algoliasearch = require('algoliasearch/lite');
// or just use algoliasearch if you are using a <script> tag
// if you are using AMD module loader, algoliasearch will not be defined in window,
// but in the AMD modules of the page

var client = algoliasearch('VGQTJO55PG', '****');
var index = client.initIndex('contacts');
var contactsJSON = require('./contacts.json');

index.addObjects(contactsJSON, function(err, content) {
  if (err) {
    console.error(err);
  }
});
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

node.jsで実行してみる。

⋊> ~/work node index.js                                                                                                                                                                                                               14:56:51
/Users/silver/work/index.js:6
var client = algoliasearch('VGQTJO55PG', '****');
             ^

ReferenceError: algoliasearch is not defined
    at Object.<anonymous> (/Users/silver/work/index.js:6:14)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)
    at startup (bootstrap_node.js:190:16)
    at bootstrap_node.js:662:3

つらい。。。algoliasearchが認識されていなかった。

よくみたら、https://github.com/algolia/algoliasearch-client-javascript#initialize-the-client
ここのコードブロックに書いてあった。

// or just use algoliasearch if you are using a <script> tag
// if you are using AMD module loader, algoliasearch will not be defined in window,
// but in the AMD modules of the page

scriptタグを使う場合は、定義しなくて良いよと。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

同じようなissueが出ていないか?
https://github.com/algolia/algoliasearch-client-javascript/issues

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

var algoliasearch = require('algoliasearch');
を追加して、再実行。

⋊> ~/work node index.js
AlgoliaSearchError: Not enough rights to add an object near line:1 column:332
@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

Search Only Keyを使っていたのでエラーだったのか?
Admin Keyを使ってみる。(それだったら、どのKeyを使うか手順に書いておいてほしい)

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

いけた!!

⋊> ~/work node index.js
⋊> ~/work

何も反応しないが。。。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

せっかくなので、searchしてみる。
https://github.com/algolia/algoliasearch-client-javascript#search

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

// firstname
index.search('jimmie', function(err, content) {
  console.log(content.hits);
});

// firstname with typo
index.search('jimie', function(err, content) {
  console.log(content.hits);
});

// a company
index.search('california paint', function(err, content) {
  console.log(content.hits);
});

// a firstname & company
index.search('jimmie paint', function(err, content) {
  console.log(content.hits);
});

を追加。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

⋊> ~/work node index.js                                                                                                                                                                                                               15:12:57
[ { firstname: 'Jimmie',
    lastname: 'Barninger',
    company: 'California Paint & Wlpaper Str',
    address: 'Box #-4038',
    city: 'Modesto',
    county: 'Stanislaus',
    state: 'CA', 
...

とりあえず動いた。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

フィードバックポイントは下記

【概要】
どのKEYを使えばよいのか分からない。
【詳細】
pushDataをする際、利用するAPIのキーに
Search-Only API Keyを選択してしまった。
答えは、Admin API Key

【お願い】
pushDataの章では、Admin API Keyを使うようなコメント追加してほしいです。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

issue用のフォーマットがないか探してみる

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

下記フォーマット

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide all the steps to reproduce and a minimal
JSFiddle example or a repository on GitHub that we can npm install
and npm start.

What is the expected behavior?

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

Do you want to request a feature or report a bug?

feature

What is the current behavior?

問題箇所を指摘する

If the current behavior is a bug, please provide all the steps to reproduce and a minimal
JSFiddle example or a repository on GitHub that we can npm install
and npm start.

no bug.

What is the expected behavior?

直してほしい内容を伝える

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

開発者にわかりやすいよう編集する

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

environment

⋊> ~/work npm -v
4.6.1
⋊> ~/work yarn -v
fish: Unknown command 'yarn'

install npm package

⋊> ~/work npm init 
⋊> ~/work npm install algoliasearch --save 
work@1.0.0 /Users/silver/work
└── algoliasearch@3.30.0

npm WARN work@1.0.0 No description
npm WARN work@1.0.0 No repository field.

do

⋊> ~/work cat index.js
var client = algoliasearch('****', '****'); # I use Search-Only API Key ...
var index = client.initIndex('contacts');

var contactsJSON = require('./contacts.json');
# https://github.com/algolia/datasets/blob/master/contacts/contacts.json

index.addObjects(contactsJSON, function(err, content) {
  if (err) {
    console.error(err);
  }
});

⋊> ~/work node index.js
AlgoliaSearchError: Not enough rights to add an object near line:1 column:332

Search-Only API Keyを使うのではなく、Admin API Keyを使うと、上記は解決できた。

https://github.com/algolia/algoliasearch-client-javascript#push-data
ここに Admin API Key を使うようなコメントがほしいです。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

Do you want to request a feature or report a bug?

feature

What is the current behavior?

environment

⋊> ~/work npm -v
4.6.1
⋊> ~/work yarn -v
fish: Unknown command 'yarn'

install npm package

⋊> ~/work npm init 
⋊> ~/work npm install algoliasearch --save 
work@1.0.0 /Users/silver/work
└── algoliasearch@3.30.0

npm WARN work@1.0.0 No description
npm WARN work@1.0.0 No repository field.

do

⋊> ~/work cat index.js
var client = algoliasearch('****', '****'); # I use Search-Only API Key ...
var index = client.initIndex('contacts');

var contactsJSON = require('./contacts.json');
# https://github.com/algolia/datasets/blob/master/contacts/contacts.json

index.addObjects(contactsJSON, function(err, content) {
  if (err) {
    console.error(err);
  }
});

⋊> ~/work node index.js
AlgoliaSearchError: Not enough rights to add an object near line:1 column:332

Search-Only API Keyを使うのではなく、Admin API Keyを使うと、上記は解決できた。

If the current behavior is a bug, please provide all the steps to reproduce and a minimal
JSFiddle example or a repository on GitHub that we can npm install
and npm start.

no bug.

What is the expected behavior?

https://github.com/algolia/algoliasearch-client-javascript#push-data
ここに Admin API Key を使うようなコメントがほしいです。

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

Search-Only API Keyを使うのではなく、Admin API Keyを使うと、上記は解決できた。

I resolved if I use Admin API Key but not Search-Only API Key.

ここに Admin API Key を使うようなコメントがほしいです。

Please comment that use Admin API Key here

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

Do you want to request a feature or report a bug?

feature

What is the current behavior?

environment

⋊> ~/work npm -v
4.6.1
⋊> ~/work yarn -v
fish: Unknown command 'yarn'

install npm package

⋊> ~/work npm init 
⋊> ~/work npm install algoliasearch --save 
work@1.0.0 /Users/silver/work
└── algoliasearch@3.30.0

npm WARN work@1.0.0 No description
npm WARN work@1.0.0 No repository field.

do

⋊> ~/work cat index.js
var client = algoliasearch('****', '****'); # I use Search-Only API Key ...
var index = client.initIndex('contacts');

var contactsJSON = require('./contacts.json');
# https://github.com/algolia/datasets/blob/master/contacts/contacts.json

index.addObjects(contactsJSON, function(err, content) {
  if (err) {
    console.error(err);
  }
});

⋊> ~/work node index.js
AlgoliaSearchError: Not enough rights to add an object near line:1 column:332

I resolved if I use Admin API Key but not Search-Only API Key.

If the current behavior is a bug, please provide all the steps to reproduce and a minimal
JSFiddle example or a repository on GitHub that we can npm install
and npm start.

no bug.

What is the expected behavior?

Please comment that use Admin API Key on pushData sections (here)

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

タイトル
ドキュメントの改善
Improve documents (readme)
改善点
PushDataのセクションで、Admin API Keyを使うようコメントしてほしいです。
Please comment that use Admin API Key on pushData sections (here)

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

algolia/algoliasearch-client-javascript#722

algolia/algoliasearch-client-javascript#723
にプルリク出し直してもらいました。

Fixes #722

Summary

was unclear before which api key to use for what.

Result

added a note to the readme before each usage to clarify admin or search api key

simple...

@Haroenv

This comment has been minimized.

Haroenv commented Oct 1, 2018

Hey Hey, I don't understand Japanese, but got the gist of it via google translate. Please let us know if you have any more issues :)

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

@Haroenv
hello, haroenv.
thank you for creating #723 pull request .

I have another question.
I don't understand used CDN.

⋊> ~/work vi index.html 
⋊> ~/work cat index.html                                                                                                                                                                                                              <html>
<head>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
</head>
<body>
<script>
// var algoliasearch = require('algoliasearch');
// var algoliasearch = require('algoliasearch/reactnative');
// var algoliasearch = require('algoliasearch/lite');
// or just use algoliasearch if you are using a <script> tag
// if you are using AMD module loader, algoliasearch will not be defined in window,
// but in the AMD modules of the page

var client = algoliasearch('****', '****');
var index = client.initIndex('contacts');
var contactsJSON = require('./contacts.json');

index.addObjects(contactsJSON, function(err, content) {
  if (err) {
    console.error(err);
  }
});
</script>
</body>
</html>
⋊> ~/work

open index.html on chrome.

Uncaught ReferenceError: require is not defined
    at index.html:16

I don't know how to solve it ...

I can't convey myself to you in English well ... sorry.

#967 (comment)
#967 (comment)

@Haroenv

This comment has been minimized.

Haroenv commented Oct 1, 2018

CDN is for searching frontend. Then you get “algoliasearch” as a global variable.

To do indexing, like you’re doing, you can use nodeJS, where require is available

@Silver-birder

This comment has been minimized.

Contributor

Silver-birder commented Oct 1, 2018

CDN is for searching frontend.

I see . for searching . ok !

I have no more questions. thanx !

@yoichi

This comment has been minimized.

Member

yoichi commented Oct 18, 2018

参加ありがとうございました。このissueはcloseしましたが、引き続きここにメモを残しながら作業しても大丈夫です!

@yoichi yoichi closed this Oct 18, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment