angular search experience
1.0.0
แอปพลิเคชันอ้างอิงนี้ใช้ไลบรารีการค้นหา Algolia ระดับต่ำ หากคุณกำลังสร้างแอปพลิเคชันที่คล้ายกัน โปรดใช้ไลบรารี Angular InstaSearch อย่างเป็นทางการ
หากต้องการดาวน์โหลด (โคลน) โปรเจ็กต์นี้บนเครื่องของคุณ คุณต้องติดตั้ง git ก่อน อ่านเพิ่มเติมเกี่ยวกับวิธีการติดตั้ง Git บนระบบของคุณ
เมื่อติดตั้งแล้ว ให้เปิดเทอร์มินัลเชลล์และโคลนพื้นที่เก็บข้อมูลนี้โดยใช้คำสั่งต่อไปนี้:
> git clone https://github.com/manekinekko/angular-search-experience.git
คุณจะต้อง npm install เพื่อติดตั้งการขึ้นต่อกันของโปรเจ็กต์นี้ ถัดไป เมื่อใช้เทอร์มินัล คุณจะต้องเปลี่ยนไดเร็กทอรีเป็นโฟลเดอร์ที่คุณโคลนโปรเจ็กต์นี้ไว้ก่อนหน้านี้ โดยค่าเริ่มต้น (หากคุณคัดลอกบรรทัดคำสั่งจากด้านบน) นี่จะเป็น angular-search-experience :
> cd angular-search-experience
> npm install
เราได้ตัดสินใจที่จะรักษาความปลอดภัยให้กับ Cloud Function (นี่เป็นแนวปฏิบัติที่ดี) ดังนั้น ในการขอ API search คุณจะต้องเพิ่มส่วนหัว Authorization ท้ายคำขอของคุณ นี่คือ Authorization: SearchToken this-is-a-fake-token ดูตัวอย่างคำสั่ง cURL ด้านล่าง
ก่อนที่คุณจะเริ่มเซิร์ฟเวอร์ คุณจะต้องเพิ่มตัวแปรสภาพแวดล้อมสองสามตัวภายในไฟล์ .env ในโฟลเดอร์ /functions คุณสามารถใช้ไฟล์เทมเพลต env นี้เป็นตัวอย่าง (เปลี่ยนชื่อเป็น .env ซึ่งเป็น gitignored) และตั้งค่า:
YOUR_ALGOLIA_APPLICATION_IDYOUR_ALGOLIA_API_KEYคุณสามารถค้นหารหัสแอปพลิเคชันและคีย์ของคุณและ API ได้ที่ https://www.algolia.com/apps ในส่วนคีย์ API คุณต้องสร้างบัญชีเพื่อรับคีย์ API ของคุณ
หากต้องการลองใช้เซิร์ฟเวอร์บนเครื่องของคุณ ให้รันคำสั่งต่อไปนี้: npm run start:backend
ตัวเลือกนี้กำหนดให้คุณต้องเข้าสู่ระบบบัญชี firebase ของคุณและมีสิทธิ์เข้าถึงโปรเจ็กต์นี้ (บน firebase) มีเพียงผู้ดูแลเท่านั้นที่สามารถเข้าถึงโครงการ firebase ได้!
แบ็กเอนด์อีกเวอร์ชันหนึ่งอาศัยสถาปัตยกรรมแบบไร้เซิร์ฟเวอร์ที่ใช้งานโดยใช้ฟังก์ชันคลาวด์สำหรับ Firebase
โปรเจ็กต์นี้มาพร้อมกับ firebase-tools เป็นการพึ่งพาในเครื่อง เครื่องมือนี้เป็นชุดเครื่องมือ Firebase Command Line Interface (CLI) ที่สามารถสร้าง เรียกใช้ และปรับใช้โปรเจ็กต์ Firebase โปรดทราบว่าการขึ้นต่อกันนี้มักจะได้รับการติดตั้งทั่วโลก
นอกจากนี้ รันไทม์ของ Firebase ยังใช้ Node.js เวอร์ชันเก่า: v6.11.5 เราได้รวมโฟลเดอร์ .nvmrc ไว้ใต้ /functions ไฟล์พิเศษนี้เป็นไฟล์กำหนดค่าที่ NVM ใช้เพื่อสลับไปใช้ Node.js เวอร์ชันที่ต้องการภายในโฟลเดอร์เฉพาะได้อย่างง่ายดาย หากคุณยังไม่ได้ติดตั้ง NVM โปรดอ่านคู่มือการติดตั้ง
ใช้ NVM เพื่อติดตั้งเวอร์ชัน Node.js ที่จำเป็น จากนั้นใช้งาน (ภายในโฟลเดอร์ /functions เท่านั้น):
> nvm install 6.11.5
> nvm use
ตอนนี้คุณกำลังใช้ Node.js v6.11.5 คุณก็พร้อมที่จะรัน (เช่น จำลอง) ฟังก์ชันคลาวด์ search ในเครื่องแล้ว เพื่อสิ่งนั้นให้รัน npm run start:backend:firebase คำสั่งนี้จะทำสองสิ่ง:
/functions (อยู่ที่รูทของโปรเจ็กต์) โฟลเดอร์นี้มีโค้ดแบ็กเอนด์ทั้งหมดsearch Cloud Function ภายในเครื่องบน http://localhost:5000/angular-search-experience/us-central1/searchสิ่งสำคัญ: โปรดทราบว่าฟังก์ชัน
searchใช้เฉพาะเมธอดPOSTและDELETEHTTP เท่านั้น ซึ่งช่วยให้คุณสามารถเพิ่มและลบเอนทิตีได้ ดังนั้นคุณจะต้องใช้ไคลเอ็นต์ HTTP เช่นcURLหรือPostmanเพื่อให้สามารถขอฟังก์ชันคลาวด์ได้
ที่รากของโปรเจ็กต์ ให้รัน npm start เพื่อเริ่มเซิร์ฟเวอร์ dev ส่วนหน้า ไปที่ http://localhost:4200/ แอปจะโหลดซ้ำโดยอัตโนมัติหากคุณเปลี่ยนแปลงไฟล์ต้นฉบับใดๆ
แอปพลิเคชันส่วนหน้าถูกสร้างขึ้นด้วย Angular CLI เวอร์ชัน 6.1.2
รัน npm run build เพื่อสร้างโปรเจ็กต์ สิ่งประดิษฐ์ของบิลด์จะถูกเก็บไว้ภายใต้ไดเร็กทอรี dist/angular-search-experience/ ใช้สคริปต์ npm run build:prod สำหรับบิลด์ที่ใช้งานจริง
เราใช้โฮสติ้ง Firebase เพื่อเผยแพร่แอปพลิเคชันส่วนหน้า ก่อนที่จะปรับใช้เวอร์ชันใหม่ เราจำเป็นต้องสร้างแพ็คเกจที่ใช้งานจริงโดยใช้คำสั่งต่อไปนี้:
> npm run build
จากนั้น เราสามารถปรับใช้บิวด์ใหม่กับ firebase ได้:
> npm run deploy
สิ่งสำคัญ: การปรับใช้กับ firebase ต้องใช้สิทธิ์การเข้าถึง (ไปยังโครงการ firebase)
ตำแหน่งข้อมูลการผลิต (ฟังก์ชันคลาวด์) มีให้ใช้งานบน:
หากต้องการขอ Cloud Function ที่ใช้งานจริง คุณสามารถใช้คำสั่ง cURL นี้:
> 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"}
หมายเหตุ: เราไม่ตรวจสอบความถูกต้องของวัตถุ
applicationตามวัตถุประสงค์
> 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"}
<app-search></app-search><app-search-input></app-search-input><app-category></app-category><app-search-result></app-search-result><mat-nav-list></mat-nav-list>[appRating]freePriceLabelอ่านเพิ่มเติมเกี่ยวกับเอกสาร API ได้ที่นี่: https://manekinekko.github.io/angular-search-experience/index.html
เราได้รวมแชทบอทแอปพลิเคชันนี้ไว้ด้วย สามารถช่วยคุณค้นหาแอปพลิเคชันด้วยเสียงของคุณ เพียงขอให้ ช่วยคุณค้นหาแอปสภาพอากาศ หรือ ค้นหาเกม
หากต้องการเปิดใช้งานบอท คุณจะต้องเปิดไมโครโฟนและลำโพงของคุณ เพียงคลิก 6 ครั้งบนโลโก้แอปพลิเคชัน (ส่วนหัว)
หมายเหตุ: การใช้งานบอทนี้เป็นการทดลอง (และเพื่อความสนุกสนาน!) และไม่ได้รับการฝึกฝนจากคำพูดของผู้ใช้จำนวนมาก!
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.
วิธีแก้ปัญหา:
nvm use 8.0 ภายในโฟลเดอร์ /functionsnpm installcd .. จากนั้น npm run start:backend
