このチュートリアルをフォローしたい場合は、次のことが必要です。
新しいSDKを使用すると、PebbleのAndroid/iOSアプリ自体内でアクセスできる構成ページを定義できるようになりました。設定は、ユーザーが時計アプリをインストールしてアレンジする場所と同じ場所にアクセスされます。ユーザーの観点からよりクリーナーで論理的です。
新しいSDKのJavaScriptは、WebストレージにW3Cの推奨事項も使用しているため、将来の使用のためにアプリ内に設定を保存できます。ユーザーがそのcelsius/fahreinheitの設定を持っているように求めた場合、Webストレージを使用してユーザーの好みを覚えておくことができます。私たちの場合、ユーザーが興味を持っている場所の種類を保存したいと思います。
それがどのように機能するか紛らわしい音？これは、他の人がアクセスできるようにWeb上のどこかで自分の設定ページをホストする必要があることを意味するため、場合によっては理想的なセットアップではありません。 Pebbleは、将来この設定ページをアプリにバンドルする機能を獲得することを計画しているようです。これは、一部のアプリに最適です。現在のセットアップにはメリットが伴います。設定ページだけで何かを再スキンまたは調整したい場合は、設定ページが独立しているため、アプリ自体を更新する必要はありません。
appinfo.jsonまた、アプリに「SearchingFor」と呼ばれる1つの追加キーを追加します。これは、「スターバックス」またはユーザーが要求するカスタムタイプの場所になる文字列になります。
<span>"capabilities": ["location", "configurable"]</span>
設定ページの作成
上記のように、
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>あなたが必要とする基本的なhtmlはそうです（私は私のスタイリングとフレームワークに関連するマークアップを削除しました。
設定のキャンセルまたは送信
<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span> </span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>
変更をキャンセルするために、document.locationをPebblejs：// closeに設定します。これにより、Pebble JavaScriptコードに空の応答が送信されます。
クリック関数は、オブジェクトを文字列に変換して文字をエンコードしてデータを送信して、document.locationでターゲットにするURLに配置できるようにします（単一のスペースがエンコードされます。変更）：
それは、必要な設定をPebble JavaScriptに正常に送信します。
ユーザーがすでに設定に変更を行っている場合、代わりにゲラートを見つけるためにアプリにすでにアプリを求めているとしたら、以前の「ジェラート」の設定がテキストフィールドに表示されます。設定。これを行うには、config HTMLページにSearchforと呼ばれるURLの変数を送信します。この例は、url http://www.yourpebbleappsettingpage.com?searchingfor = gelato。
です私はずっと前に見つけた関数を持っています。
<span>"capabilities": ["location", "configurable"]</span>
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>JavaScriptを調整して設定を受け入れます
最初に、JavaScriptに新しい変数が必要になります。 appinfo.jsonファイルのキーを一致させるために検索と呼びましょう（同じと名前を付ける必要はありませんが、一貫性と明確さのために、私はそうしました）。この変数が行う必要があることは、ユーザーが日々のペブルの強化された生活を送っている間、私たちが探している場所の種類よりもユーザーの好みを保存することです。 Pebble AppsのWebストレージ
アプリでユーザーの設定を保存するために、Pebbleが提供するLocalStorage APIにアクセスできます。 Pebbleは、WebストレージのW3C推奨に従うのに十分なほど親切であるため、構文は過去にWebストレージを扱った人にとっては外国人ではないことを願っています。何かをローカルストレージに保存するには、次のように呼びます
<span>"capabilities": ["location", "configurable"]</span>
私たちの場合、Pebbleアプリのローカルストレージにデータを検索することをお勧めします。 JavaScript変数を使用してアプリ全体でアクセスしますが、アプリを最初にロードしたり、構成画面から戻ったりするときは、ローカルストレージからこの検索変数を設定します。
JavaScriptが実行された瞬間にローカルストレージを検討します。ローカルストレージ内のデータの検索が見つからない場合は、デフォルトを「スターバックス」に設定します。これは、Pebble-JS-App.jsファイルの開始時にLocalyOptions定義の後にきちんと配置されます。次に、スターバックスの代わりにAJAXリクエストにこの変数を追加します。
<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>これまでのところ、私たちのアプリは以前と同じことをします。スターバックスを見つけてください。ユーザーがアプリの「設定」ボタンを押したときに何をすべきかを知らせる必要があります。これは、showconfigurationイベントリスナーでこれを行います：
<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span> </span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span> </span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>
それは、それらの設定を入力するためにフォームを使用してユーザーをページに連れて行きます。彼らが新しい設定を送信するとき（上記のように「ジェラート」など）、私たちはPebble-JS-App.jsのJavaScriptを準備し、そのデータを待っていることを望みます。
そうするために、WebViewclosedイベントリスナーを使用します。ここでは、URI文字列（スペースなどのエンコードバージョン）からデコードして、もう一度JSONオブジェクトに解析します。そのJSONオブジェクトから検索値を取得し、もう一度エンコードします。これはJSON文字列から外れています。エンコードの最後のビットは、前述のFoursquare APIコールのURL文字列に配置する準備ができていることです（https://api.foursquare.com/v2/venues/search?client_id= 'clientid'＆client_secret = 'clientRetret '＆v =' version '＆ll =' Latitude '、'経度 '＆query ='リクエストの検索）：<span>$('#b-cancel').click(function() {
</span> <span>document.location = 'pebblejs://close';
</span><span>});</span>私たちの価値が定義されていないようになった場合（これが起こるかもしれないが、それらはエッジケースであった多くの理由があるようです）、私はそれを「スターバックス」に切り替える最後の手段を持っています。将来これを処理するより良い方法があり、潜在的にエラーがある可能性がありますが、このデモのためにシンプルに保つために、最悪の場合にスターバックスにデフォルトになりました。
検索用のリクエストを理解し、保存する準備ができたら、window.localStorage.setItem（）関数を使用してローカルストレージに保存します。このように、次回はアプリを開くときはまだそこにあります。
<span>function saveOptions() {
</span> <span>var options = {
</span> <span>searchingFor: $('#searchingFor').val()
</span> <span>}
</span> <span>return options;
</span><span>}</span>新しい設定要求を受信しました。Window.navigator.geolocation.watchposition（）を新しい値で再度実行します。これにより、Foursquare APIに対するジオロケーション検索が実行され、新しいリクエストされた設定が設定ウィンドウを閉じる瞬間に設定します。
<span>$('#b-submit').click(function() {
</span> <span>var location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(saveOptions()));
</span> <span>document.location = location;
</span><span>});</span>JavaScriptがこの新しい設定を理解していますが、もう少しやるべきことがあります。
find_me_anything.cファイルはあまり変更する必要はありません。次の追加と変更を行いました。
メッセージバッファのサイズの増加sync_bufferが定義されたときにファイルの開始時に変更が行われました。
また、メッセージの同期を開くと、init（）関数でさらに下に変更されました。アプリに新しいキーを追加
<span>"capabilities": ["location", "configurable"]</span>
JavaScriptコードへの追加の追加 私が上で行ったことは、未定義として始まる会場と呼ばれる変数を設定することです。 respons.response.venus foursquareから返されるデータを繰り返します。アドレスと都市を含むものを見つけた場合、そのオブジェクトを会場に保存し、応答の残りの部分を検索しなくなりました。 🎜> Pebblekit JavaScriptフレームワークのパワーのおかげで、Pebble Watchの所有者にアプリの使用方法を決定させました。カスタマイズされ、より個人的なものです。また、ローカルストレージも使用しているため、アプリは物事を覚えています。これは以前よりもはるかに価値のあるアプリであり、Pebble WatchでJavaScriptができることの全範囲を使用しています。
週末に狂ったようなコードをするか、電車に乗って何かをコードアップしてください！そのjavaScriptの知識を、あなたが決して考えられなかったものに使用し、その過程でたくさんの楽しみを持っています！ さらなるリソース ペブルウォッチのバッテリー寿命を延長する方法はいくつかあります。これらには、受け取った通知の数を減らすこと、シンプルな時計の顔を使用したもの、頻繁に使用しない機能を無効にすることが含まれます。さらに、更新にはバッテリー寿命を改善するための最適化が含まれることが多いため、時計ソフトウェアが最新であることを確認してください。ペブルウォッチは耐水性ですか？ 。彼らは、深さ30メートルまでの水に沈むことに耐えることができます。これにより、水泳やシャワーなどのアクティビティに適しています。しかし、それらは深海ダイビングやインパクトのあるウォータースポーツ用に設計されていません。 Pebble Watchでアプリを使用できますか？フィットネストラッカー、ゲーム、生産性ツールなど、Pebble App Storeからダウンロードできる多くのアプリがあります。スマートフォンのPebbleアプリを介して時計にアプリをインストールできます。<span>"appKeys": {
</span> <span>"location": 0,
</span> <span>"searchingFor": 1
</span><span>}</span>
それをすべて整備しているため、構成ウィンドウを使用してアプリの設定を変更できるようになりました。設定を送信すると、Pebbleアプリが更新されると、次のようなカスタマイズされたアプリがあります。
<span><span><span><label</span> for<span>="searchingFor"</span>></span>Whatcha wanna find?<span><span></label</span>></span>
</span><span><span><span><textarea</span> cols<span>="40"</span> rows<span>="8"</span> name<span>="searchingFor"</span> id<span>="searchingFor"</span>></span><span><span></textarea</span>></span>
</span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-cancel"</span>></span>Cancel<span><span></button</span>></span>
</span><span><span><span><button</span> type<span>="submit"</span> id<span>="b-submit"</span>></span>Submit<span><span></button</span>></span></span>
<span>$('#b-cancel').click(function() {
</span> <span>document.location = 'pebblejs://close';
</span><span>});</span>私たちは今や少しエキサイティングなアプリになりました！
JavaScriptを使用したPebble Watch Development - 「Find Me Starbucks」が生まれた私の以前の記事。私はこのリソースにたくさんのリソースを持っています。
Pebblekit JavaScriptフレームワークの操作 - PebbleチームのJavaScriptフレームワークの使用に関する詳細
ペブルウォッチをiPhoneで使用できますか？ iOSデバイス。 Bluetoothを介してPebble WatchをiPhoneに接続し、Pebbleアプリを使用して設定を管理したり、Watch Facesをインストールしたりします。 Pebble Watchを工場出荷時の設定にリセットするには、時計の設定メニューに移動し、「システム」を選択し、「Factory Reset」を選択します。これにより、時計のすべてのデータと設定が消去されます。このアクションを元に戻すことはできません。
Pebble Watchが私のスマートフォンと同期していない場合はどうすればよいですか？スマートフォン、次の手順を試してください。時計とスマートフォンが互いに範囲内にあることを確認してください。 Bluetoothが両方のデバイスで有効になっていることを確認してください。時計とスマートフォンの両方を再起動してみてください。問題が続いている場合は、ペアにしてから、時計とスマートフォンを再ペアリングしてみてください。柔らかい布とマイルド石鹸。極端な温度や過酷な化学物質にさらされないでください。使用していないときは、涼しく乾燥した場所に保管してください。時計ソフトウェアを定期的に更新して、最適に機能し続けることを確認します。
以上が高度なペブルウォッチ構成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
