angular search experience

Pengalaman Pencarian Sudut

Didukung oleh

Penafian

Aplikasi referensi ini menggunakan perpustakaan pencarian Algolia tingkat rendah. Jika Anda membuat aplikasi serupa, silakan gunakan perpustakaan resmi Angular InstaSearch.

Menyiapkan proyek

Mengkloning file sumber

Untuk mengunduh (mengkloning) proyek ini di mesin Anda, Anda harus menginstal git . Baca selengkapnya tentang cara menginstal Git di sistem Anda.

Setelah terinstal, buka shell terminal dan kloning repositori ini menggunakan perintah berikut:

 > git clone https://github.com/manekinekko/angular-search-experience.git

Menginstal dependensi

Anda memerlukan npm install untuk menginstal dependensi proyek ini. Selanjutnya, Dengan menggunakan terminal Anda, Anda perlu mengubah direktori ke folder tempat Anda mengkloning proyek ini sebelumnya; secara default (jika Anda menyalin baris perintah dari atas) ini akan menjadi angular-search-experience :

 > cd angular-search-experience
> npm install

Server pengembangan

Kami telah memutuskan untuk mengamankan Cloud Function (ini adalah praktik yang baik). Jadi, untuk meminta API search Anda harus menambahkan header Authorization ke permintaan Anda. Berikut adalah header Authorization: SearchToken this-is-a-fake-token . Lihat contoh perintah cURL di bawah ini.

Sebelum memulai server, Anda perlu menambahkan beberapa variabel lingkungan di dalam file .env, di folder /functions . Anda dapat menggunakan file templat env ini sebagai contoh (ganti namanya menjadi .env, yang merupakan gitignored), dan atur:

• algolia_applicationid= YOUR_ALGOLIA_APPLICATION_ID
• algolia_apikey= YOUR_ALGOLIA_API_KEY

Anda dapat menemukan id aplikasi dan kunci api Anda di https://www.algolia.com/apps di bagian Kunci API. Anda perlu membuat akun untuk mendapatkan kunci api Anda.

Opsi 1 (disarankan): Ekspres

Untuk mencoba server di mesin lokal Anda, jalankan perintah berikut: npm run start:backend

Opsi 2 (lanjutan): backend (fungsi cloud)

Opsi ini mengharuskan Anda masuk ke akun firebase Anda dan memiliki akses ke proyek ini (di firebase). Hanya pengurus yang memiliki akses ke proyek firebase!

Versi backend lainnya mengandalkan arsitektur Tanpa Server yang diimplementasikan menggunakan Cloud Functions for Firebase.

Proyek ini dilengkapi dengan firebase-tools sebagai ketergantungan lokal. Alat ini adalah seperangkat alat Firebase Command Line Interface (CLI) yang dapat menghasilkan, menjalankan, dan men-deploy proyek Firebase. Harap dicatat bahwa ketergantungan ini biasanya dipasang secara global.

Selain itu, runtime Firebase menggunakan Node.js versi lama: v6.11.5 . Kami telah menyertakan folder .nvmrc di bawah /functions . File khusus ini adalah file konfigurasi yang digunakan oleh NVM untuk dengan mudah beralih ke versi Node.js yang diperlukan di dalam folder tertentu. Jika Anda belum menginstal NVM , silakan baca panduan instalasi.

Gunakan NVM untuk menginstal versi Node.js yang diperlukan dan kemudian menggunakannya (hanya di dalam folder /functions ):

 > nvm install 6.11.5
> nvm use

Sekarang Anda menggunakan Node.js v6.11.5 , Anda siap menjalankan (yaitu meniru) search Cloud Function secara lokal. Untuk itu, jalankan npm run start:backend:firebase . Perintah ini akan melakukan dua hal:

1. Ubah direktori ke folder /functions (ditemukan di root proyek). Folder ini berisi semua kode backend.
2. Sajikan Cloud Function search secara lokal di http://localhost:5000/angular-search-experience/us-central1/search

Penting: Perlu diperhatikan bahwa fungsi search hanya mengimplementasikan metode HTTP POST dan DELETE , sehingga Anda dapat menambah dan menghapus entitas, sehingga Anda memerlukan klien HTTP, seperti cURL atau Postman , agar dapat meminta Cloud Function.

aplikasi ujung depan

Di root proyek, jalankan npm start untuk memulai server dev front-end. Arahkan ke http://localhost:4200/ . Aplikasi akan dimuat ulang secara otomatis jika Anda mengubah salah satu file sumber.

Aplikasi front-end dibuat dengan Angular CLI versi 6.1.2.

Membangun

Jalankan npm run build untuk membangun proyek. Artefak build akan disimpan di bawah direktori dist/angular-search-experience/ . Gunakan skrip npm run build:prod untuk build produksi.

Menyebarkan

Kami menggunakan Firebase hosting untuk mempublikasikan aplikasi front-end. Sebelum menerapkan versi baru, kita perlu membuat paket produksi menggunakan perintah berikut:

 > npm run build

Kemudian, kita dapat men-deploy build baru ke firebase:

 > npm run deploy

PENTING: penerapan ke firebase memerlukan hak akses (ke proyek firebase).

Lingkungan produksi

Bagian belakang

Titik akhir produksi (fungsi cloud) tersedia di:

1. POSTING: /api/1/apps
2. HAPUS: /api/1/apps/:id

Untuk meminta Cloud Function produksi, Anda dapat menggunakan perintah cURL ini:

Menambahkan entri baru ke indeks Algolia

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -H "Content-Type: application/json" -X POST -d '{}' https://example.com/api/1/apps

{"createdAt":"2018-04-19T13:17:10.343Z","taskID":29343382,"objectID":"10788302"}

CATATAN: kami tidak memvalidasi objek application dengan sengaja.

Menghapus entri dari indeks Algolia

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -X DELETE https://example.com/api/1/apps/10788302

{"deletedAt":"2018-04-19T13:30:42.190Z","taskID":29353102,"objectID":"10788302"}

ujung depan

Arsitektur dan fitur yang tersedia (UI)

Arsitektur Komponen

1. Komponen: <app-search></app-search>
2. Komponen: <app-search-input></app-search-input>
3. Komponen: <app-category></app-category>
4. Komponen: <app-search-result></app-search-result>
5. Komponen: <mat-nav-list></mat-nav-list>
6. Petunjuk: [appRating]
7. Pipa: freePriceLabel

Baca selengkapnya tentang dokumentasi API di sini: https://manekinekko.github.io/angular-search-experience/index.html

Fitur

Kotak pencarian

Hasil pencarian dengan highlight

Opsi pengurutan

Opsi aspek

Pemuatan lambat

Tautan dalam

ZONA BERBAHAYA: TELUR PASKAH DI DEPAN!

Telur Paskah di dalam!!

Kami telah menyertakan chatbot aplikasi ini. Ini dapat membantu Anda mencari aplikasi menggunakan suara Anda. Minta saja untuk membantu Anda mencari aplikasi cuaca atau menemukan permainan .

Untuk mengaktifkan bot, Anda perlu menyalakan mikrofon dan speaker Anda. Caranya, cukup klik 6 kali pada logo aplikasi (header).

CATATAN: Penerapan bot ini bersifat eksperimental (dan untuk bersenang-senang!) dan tidak dilatih terhadap ucapan pengguna dalam jumlah besar!

Masalah yang diketahui

Ditemukan modul yang tidak kompatibel

error [email protected]: Mesin "node" tidak kompatibel dengan modul ini. Versi yang diharapkan "~8.0".

 yarn install v1.5.1
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "~8.0".
error An unexpected error occurred: "Found incompatible module".
info If you think this is a bug, please open a bug report with the information provided in "/Users/vvo/Dev/Algolia/angular-search-experience/functions/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Solusi:

• Jalankan nvm use 8.0 di dalam folder /functions .
• Jalankan npm install .
• Jalankan cd .. lalu npm run start:backend .