synonym search
1.0.0
Tesaurus yang bermakna
Ingat semua kata yang Anda temukan saat menggunakan Tesaurus.
SynonymSearch membantu Anda meninjau apa yang baru saja Anda pelajari (dan mungkin Anda lupakan) dengan mengurutkan daftar semua permintaan pencarian Anda berdasarkan definisi bersama saat Anda menemukannya.
SynonymSearch memungkinkan Anda menguji kesamaan kata-kata sinonim dengan memasukkannya ke dalam kalimat yang maknanya bergantung pada definisi yang dimilikinya. Aplikasi ini membantu Anda secara aktif memahami suatu definisi dan kemudian meninjaunya berdasarkan gudang sinonim.
Proyek ini dikembangkan sebagai bagian dari modul MS2 Interactive Front End di Code Institute. Ini ditulis untuk bekerja dengan format respons JSON Collegiate® Thesaurus dari Merriam-Webster, dan dikembangkan dengan React melalui Next.js, di-bootstrap dengan create-next-app dan diterapkan dengan Vercel.
Silakan kunjungi proyeknya di sini: sinonim.vercel.app
Catatan untuk referensi: Skema sebelumnya diberi nama 'pengejar sinonim'
Maket skema dimulai pada awal Januari 2021 untuk menjalin hubungan antar komponen yang berbeda, dan menetapkan tanggung jawab yang sesuai.
Pendekatan ini membantu merinci ruang lingkup proyek, dan, yang paling penting, memberikan tolok ukur referensi untuk pengembangan dan pemecahan masalah.
lihat Berpikir dalam React (Dokumen)
{Results} => {Root} => {Sense} => {Option} (Lihat Direktori hasil)
{Saves} => {Selection} (Lihat Direktori penyimpanan)
{Results} =>{Root} => {Sense} melalui {ReplaceSubStringNode} (lihat string.helper.js). Sekarang dipecah menjadi {Saves} => {Selection} (Lihat Tampilan) 
{Sense} => {Option} di pohon Hasil (Lihat Direktori hasil) Batas atas dan bawah yang konsisten diterapkan ke semua node dengan konten dinamis. Batasan terpisah ini dirancang untuk menyampaikan skala material buku catatan sebagai titik kontak yang familier bagi pengguna. wordBoxes ini hanya bervariasi dalam spasi dan bertanggung jawab untuk menyampaikan hierarki secara visual dalam daftar daftar .
ThemeProvider Material-UI membungkus aplikasi untuk meneruskan gaya ke pohon komponen. Lihat Tema Material-UI. Keluarga font diatur ke serangkaian font sistem untuk beradaptasi dengan konfigurasi perangkat/platform/pengguna dan menghindari ketergantungan pada jenis huruf eksplisit. Objek commonSettings di theme.context.js berisi daftar penggantian ini, yang digabungkan dengan penyedia tema Material-UI. Lihat Material-UI Global-css
export const commonSettings = {
typography : {
fontFamily : [
'-apple-system' ,
'BlinkMacSystemFont' ,
'"Segoe UI"' ,
'Roboto' ,
'"Helvetica Neue"' ,
'Arial' ,
'sans-serif' ,
'"Apple Color Emoji"' ,
'"Segoe UI Emoji"' ,
'"Segoe UI Symbol"' ,
] . join ( ',' ) ,
} ,
} Aplikasi ini menampilkan dua set warna primer dan sekunder untuk tema terang dan tema gelap yang dikonfigurasi melalui konfigurasi palet Material UI. Perilaku dan status warna bergantung pada properti yang ditentukan dalam objek Tema Default Material-UI. Warna sekunder disetel ke nada netral, sedangkan warna primer ditampilkan sebagai "warna fitur" tunggal. Pendekatan minimal terhadap rangkaian warna adalah dengan menyempurnakan notepad
const lightTheme = createMuiTheme ( {
palette : {
type : 'light' ,
primary : {
main : '#ff3200' ,
} ,
secondary : {
main : grey [ 900 ] ,
} ,
} ,
... commonSettings ,
} ) ; const darkTheme = createMuiTheme ( {
palette : {
type : 'dark' ,
primary : {
main : lightblue [ 500 ] ,
} ,
secondary : {
main : '#fafafa' ,
} ,
background : {
default : '#151515' ,
} ,
} ,
... commonSettings ,
} ) ; Situs web dimodelkan sebagai aplikasi web progresif untuk merender fungsionalitas aplikasi satu halaman tanpa memuat ulang satu halaman penuh dan dioptimalkan untuk bekerja seperti aplikasi asli. Kerangka kerjanya memastikan fleksibilitas di seluruh browser.
Situs web ini memanfaatkan tombol tindakan mengambang (FAB) yang besar untuk bernavigasi dengan cepat di antara tiga tampilan jarak jauh: "Cari", "Info", dan "Simpan". Metafora visual digunakan untuk mewakili mode tampilan ini secara terpisah dan efisien.
Tombol "panggil cepat" yang mengambang tetap ada di seluruh tampilan untuk mengakses tindakan inti aplikasi dengan cepat: menanyakan istilah, menghapus riwayat yang disimpan, dan mengubah mode terang atau gelap.
Aplikasi ini menampilkan layar peluncuran khusus pada pemuatan halaman awal untuk menjelaskan tujuannya secara ringkas: "Aplikasi tesaurus interaktif".
jsx , jss js . (Bootstrap dengan Nestjs)next dikembangkan, next build untuk persiapan produksi, dan next start ditayangkan.commit pada Git dan push ke GitHub.push bersamaan melalui Git. Gaya ditulis dalam sintaks jss dan mengikuti spesifikasi Material-UI agar berfungsi dengan baik dengan rendering sisi Server Nextjs, yang mencakup logika penyesuaian pages/_document untuk memasukkan gaya yang dirender sisi server ke dalam markup tepat sebelum digunakan. Perhatikan bahwa ini adalah rekomendasi tidak resmi, dan harus difaktorkan ulang jika/ketika MUI merilis plugin resmi untuk Nextjs serupa dengan yang untuk MUI/Gatsby.
Semua objek gaya dibuat dengan pengait makeStyles MUI dan ikuti panduan dalam Dokumen gaya MUI untuk pemberian tema. Ini termasuk penggantian CSS dan kueri media. Objek gaya untuk komponen utama dipisahkan berdasarkan cakupan di Direktori gaya dan diimpor dalam modul sesuai kebutuhan. Namun, beberapa komponen, yaitu Launcher , memiliki semua properti gaya yang dideklarasikan dalam file komponen itu sendiri. Perhatikan bahwa semua gaya pada akhirnya harus diekspor dari satu direktori untuk konsistensi.
Pohon results merender komponen jsx pada setiap panggilan API tanpa menginisialisasi konstanta. Alat peraga dan ekspresi kondisional mengontrol iterasi skema respons dari MW-Thesaurus API. Perhatikan bahwa nilai dan verifikasi Tipe Prop ditulis secara khusus untuk mendapatkan data yang benar dari skema ini:
Setiap contoh kata yang disimpan mempertahankan properti dari keluarga Hasil yang "diambil" darinya -- seperti definisi khusus kata, label, akar kata -- untuk meningkatkan nilai duplikat dan mengelompokkan kata berdasarkan definisi pengertian sambil memastikan setiap contoh, tidak peduli identik pada nilai nama, berbeda jika definisi dan pengertiannya berbeda
React hooks useReducer , useContext , createContext dirangkai bersama dalam context/words.context (lihat HistoryProvider) untuk menyediakan pembungkus konteks bagi komponen untuk berbagi dan menggunakan data yang sama. Perhatikan bahwa logika ini dimodelkan secara langsung dari contoh yang ditetapkan di next.js/examples/with-context-api.
Mengikuti apa yang dicapai oleh kait pembungkus konteks HistoryProvider yang diekspor useHistory dan useDispatchHstory -- yang digunakan di seluruh komponen tingkat tinggi, komponen bersama, dan fungsi pembantu di helpers/* untuk memanipulasi DOM secara radikal -- logika yang sama digunakan ulang untuk menggunakan banyak mengaitkan sepanjang pembungkus khusus dengan ThemeProvider MUI (lihat ThemeProvider). Dalam hal ini, mengatur nilai tampilan, memungkinkan komponen apa pun mengubah halaman dari mana saja, dan masih banyak lagi. Perhatikan bahwa sifat umum dari penyedia tata letak Konteks ini.
export const ThemeContextProvider = ( { children } ) => {
// Sets the theme for MUI ThemeProvider to use
const [ darkMode , setDarkMode ] = useState ( false ) ;
// Sets the current view
const [ value , setValue ] = useState ( 'launch' ) ;
// Hooks to set warning colors for searchText input
const [ meta , setMeta ] = useState ( true ) ;
const [ root , setRoot ] = useState ( '' ) ;
// Rides an MUI hook to set a memoized theme
const prefersDarkMode = useMediaQuery ( '(prefers-color-scheme: dark)' ) ;
useMemo (
( ) => ( prefersDarkMode
? setDarkMode ( true )
: setDarkMode ( false ) ) ,
[ prefersDarkMode ] ,
) ;
// Provides all values and the hooks that control them
return (
< ThemeDispatchContext . Provider
value = { {
darkMode ,
setDarkMode ,
value ,
setValue ,
meta ,
setMeta ,
root ,
setRoot ,
} }
>
< ThemeProvider
theme = {
darkMode
? darkTheme
: lightTheme
}
>
{ children }
< / ThemeProvider >
< / ThemeDispatchContext . Provider >
) ;
} ;
// All state/hooks are accessible by importing
// a catch-all export below
// Example:
// // anyFile.js
// import { useDispatchTheme } from './../theme.context'
//
// const dispatch = useDispatchTheme()
//
// Change any/all states from any component
// dispatch.setDarkMode(false)
// dispatch.setValue('search')
//
export const useDispatchTheme = ( ) => useContext ( ThemeDispatchContext ) ;
Penggunaan MW-Thesaurus gratis untuk tujuan non-komersial dan/atau pendidikan. Logo merek yang ditampilkan di tab info mengikuti pedoman merek yang diminta oleh namun tidak terbatas pada pusat Pengembangan Merriam-Webster.
Kunci API Tesaurus terdaftar yang ditautkan ke proyek ini saat ini bersifat publik. Setelah diskusi ini, upaya untuk melindungi panggilan API di sisi klien tidak ada gunanya karena kunci pribadi akan selalu terekspos. Konfigurasi lebih lanjut untuk memiliki titik akhir internal di /pages/api harus dipertimbangkan dengan mengikuti rute API Nextjs. Perhatikan bahwa kuncinya telah diekspos dari .env.local karena alasan di atas dan untuk tujuan pendidikan proyek.
const axiosConfig = { baseURL : 'https://dictionaryapi.com/api/v3/references/' , } ;
function searchThesaurus ( searchText , selection ) {
const query = selection || searchText ;
// Key is processed from ignored env.local
// use this method if API endpoint is set up in /pages/api/*
const key = process . env . MW_THESAURUS_KEY ;
// @note Key is explicitly declared otherwise
// for Production/submission
return axiosGetCancellable (
`/thesaurus/json/ ${ query } ?key= ${ key } ` ,
axiosConfig ,
) ;
}Catatan: Semua deskripsi metode atipikal dapat ditemukan dalam blok komentar yang mengikuti standar jsDoc.
Pengguna mengharapkan untuk melihat deskripsi dalam beberapa detik setelah tiba di situs
Launcher :useEffect tanpa ketergantungan memungkinkan Launcher dijalankan sekali pada pemuatan halaman awaluseContext memungkinkan Launcher menyetel value tampilan halaman saat ini ke ' search ' setelah batas waktu habis.Synonym Search An Interactive Thesaurus App " selama dua setengah detik setelah tiba di situs. import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Launcher = ( ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ open , setOpen ] = useState ( true ) ;
const [ showOpen , setShowOpen ] = useState ( true ) ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
setShowOpen ( false ) ;
setTimeout ( ( ) => {
setOpen ( false ) ;
viewDispatch . setValue ( 'search' ) ;
} , 350 ) ;
} , 2500 ) ;
} , [ ] ) ;
return (
< >
< Backdrop
className = { classes . backdrop }
open = { open }
/ >
< Grow
in = { showOpen }
unmountOnExit
>
< Box className = { classes . launch } >
{ ... excerpt . . . }
Synonym
/Search
An Interactive Thesaurus App
{ ... excerpt . . . }
< / Box >
< / Grow >
< / >
) ;
} ;
Seorang pengguna ingin bernavigasi antar tampilan dengan cepat
Speed (Dial) :onClick .FixedBottom (bercabang dari FixedBottom) memungkinkan Speed Dial bawah bergerak secara responsif di atas bilah bawah pada perangkat seluler saat menggulir.useScrollTrigger memungkinkan Speed Dial untuk menukar visibilitas dengan ScrollTop , tombol tindakan mengambang yang, ketika diklik, akan menggulir jendela kembali ke bagian atas halaman melalui jangkar dengan id="back-to-top" .Search diteruskan ke Speed Dial untuk mengaktifkan onSearchTextChange , sebuah fungsi yang mengirimkan kueri ke Thesaurus API.useState memungkinkan useEffect untuk selalu menutup SpeedDial setiap kali value halaman melalui useDispatch berubah, kecuali saat Search active .ToggleTheme , Search , ClearSavesSpeedDialSpeedDial terbukaToggleThemenot <mode> iniSpeedDial ditutupSavesSpeedDialSpeedDial terbukaSearchSpeedDial masih terbukaSearchSpeedDial menghilangScrollTop munculScrollTopSpeedDial munculx dan y (atas/bawah dalam tampilan, kiri/kanan di antara tampilan) dengan cepat dengan mengklik tindakan SpeedDial untuk tampilan yang diwakilinya. Selain itu, navigasi tombol per tampilan dapat diakses di header halaman. Dua tampilan lainnya adalah Saves dan Info , yang merupakan kelompok tombol aksi mengambang yang sama dengan tindakan dalam SpeedDial . Konsistensi dan singularitas tema, warna, dan UI memengaruhi impuls dan keakraban pengguna dengan titik kontak persisten yang disampaikan. import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Speed = ( {
children ,
value ,
index ,
searchText ,
loading ,
onSearchTextChange ,
... other
} ) => {
const trigger = useScrollTrigger ( ) ;
const classes = useStyles ( ) ;
const [ open , setOpen ] = useState ( false ) ;
const [ direction , setDirection ] = useState ( 'up' ) ;
const matches = useMediaQuery ( '(min-width:600px)' ) ;
const viewDispatch = useDispatchTheme ( ) ;
const view = viewDispatch . value ? viewDispatch . value : null ;
const handleClick = ( event ) => setOpen ( ! open ) ;
open && trigger ? setOpen ( false ) : null ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
if ( viewDispatch . value !== 'search' ) {
setOpen ( false ) ;
}
} , 10 ) ;
} , [ view ] ) ;
return (
< Slide appear direction = "up" in = { ! trigger } >
< FixedBottom offset = { matches ? 16 : 48 } >
< SpeedDial
ariaLabel = "actions"
className = { classes . speedDialGroup }
FabProps = { {
className : clsx ( classes . speedDial , classes . bottom ) ,
size : matches ? 'medium' : 'small' ,
style : { padding : matches ? '12px' : '8px' } ,
} }
onClick = { handleClick }
open = { open }
direction = { direction }
>
{ ... Search action }
{ ... Toggle theme action }
{ ... Clear cache action }
/ >
< / SpeedDial >
< / FixedBottom >
< / Slide >
) ;
} ;
export default Speed ;
Seorang pengguna ingin melihat sumber terpercaya
Brands (Material-UI AvatarGroup ):useEffect memungkinkan useState membalik margin ketika nilai halaman diatur ke view saat ini => Info , yang menganimasikan avatar untuk diperluas seolah-olah menyambut pengguna ke meja info, sementara paragraf pendek ditampilkan untuk menggambarkan " SynonymStory " di belakang " SynonymSearch "Logo , masing-masing satu: React , NextJS , MaterialUI , CodeInstitute dan Merriam-Webster .SearchInfoInfoBrands munculMerriam-WebsterMerriam-Webster Developer Center websiteInfo import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Brands = ( { children } ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ active , setActive ] = useState ( false ) ;
const { value } = viewDispatch ;
useEffect ( ( ) => {
if ( value === 'info' ) {
setTimeout ( ( ) => {
setActive ( true ) ;
} , 750 ) ;
}
} , [ ] ) ;
return (
< AvatarGroup
className = {
clsx (
classes . avatarGroup , active
? classes . active
: classes . inactive ,
)
}
>
< Logo
name = "React"
url = "https://react.org/"
path = "/images/reactLogo.png"
/ >
< Logo
name = "Next JS"
url = "https://nextjs.org/"
path = "/images/nextJSLogo.svg"
/ >
< Logo
name = "Material UI"
url = "https://material-ui.com/"
path = "/images/materialUILogoLight.png"
darkImage = "/images/materialUILogoDark.png"
/ >
< Logo
name = "Code Institute"
url = "https://codeinstitute.net/"
path = "/images/codeInstituteLogo.png"
/ >
< Logo
name = "Merriam-Webster"
url = "https://dictionaryapi.com/"
path = "/images/merriamWebsterLogoLight.png"
/ >
< / AvatarGroup >
) ;
} ;
Seorang pengguna ingin mencari sinonim
Search :loading : apakah hasilnya dimuat,meta : apakah input pengguna menghasilkan hasil yang valid,root : apakah item pertama dalam array hasil cocok dengan apa yang diketik pengguna.useState memungkinkan kondisi ini berubah secara dinamis.useRef dilampirkan ke komponen input, dan memungkinkan peristiwa tombol dan mouse untuk focus permintaan input secara kondisional berdasarkan kondisi di atas.Field , Input .SearchSearch di headerimmediately successful word >immediately successful wordSearch di headerincomplete word >real word >real wordSearch di headera word with no matches >good word >new word const Field = ( {
label ,
onChange ,
placeHolder ,
helperText ,
loading ,
} ) => {
const theme = useTheme ( ) ;
const trigger = useScrollTrigger ( ) ;
const [ active , setActive ] = useState ( false ) ;
const textInput = useRef ( null ) ;
const metaDispatch = useDispatchTheme ( ) ;
const { meta , root } = metaDispatch ;
const handleSearchButton = ( ) => {
setActive ( true ) ;
setTimeout ( ( ) => {
textInput . current && textInput . current . focus ( ) ;
} , 100 ) ;
} ;
const handleClickAway = ( ) => setActive ( false ) ;
const handleBackDrop = ( ) => setActive ( false ) ;
const onKeyPress = ( ) => setActive ( false ) ;
const match
= textInput . current
? textInput . current . value === root
: false ;
active && trigger ? setActive ( false ) : null ;
useEffect ( ( ) => {
if ( active && match ) {
setTimeout ( ( ) => {
setActive ( false ) ;
} , 2000 ) ;
}
} , [ ] ) ;
return (
< ClickAwayListener
onClickAway = { handleClickAway }
>
< >
< Backdrop
open = { active }
onClick = { handleBackDrop }
/ >
< Fab
size = "small"
color = "primary"
aria-label = "search"
onClick = { handleSearchButton }
variant = { active ? 'extended' : 'round' }
style = { active ? {
backgroundColor :
loading
? theme . palette . warning . main
: ! meta
? theme . palette . error . main
: meta && match
? theme . palette . success . main
: theme . palette . primary . main ,
} : null }
>
< Input
label = { label }
placeHolder = { placeHolder }
helperText = { helperText }
active = { active }
match = { match }
meta = { meta }
loading = { loading }
textInput = { textInput }
onKeyPress = { onKeyPress }
onChange = { onChange }
/ >
< / Fab >
< / >
< / ClickAwayListener >
) ;
} ;
Seorang pengguna ingin melihat riwayat pencarian
useHistory adalah kait Konteks untuk mengakses nilai yang disimpan di HistoryProvider .useReducer memungkinkan HistoryProver mengelompokkan kata-kata yang ditanyakan berdasarkan definisi yang dibagikan.SelectionSeorang pengguna ingin melihat kata yang digunakan dalam sebuah kalimat
Display :Sense untuk meneruskan prop sampleString dan optionWord , yang mengaktifkan peristiwa Intersection Observer dan mouse untuk mengubah prop optionWord secara dinamis.{it} {/it} dan {lquo} {rquo} . Karena merupakan tag buka dan tutup, fungsi penggantian regex terbukti andal dalam membersihkan string contoh secara konsisten ketika suatu definisi kebetulan memilikinya. (Lihat contoh respons dari Theaurus API)Seorang pengguna ingin melihat tag di sebelah hasil yang berulang (alias kata-kata sudah disimpan)
useReducer di HistoryProvider :HistoryProvider disimpan dengan properti yang memungkinkan verifikasi dengan membandingkan properti ini dengan kata-kata baru:Counters :HistorySaves sehingga pengguna dapat melihat 'pengulangan' alias kata-kata yang disimpan pengguna berdasarkan definisi properti yang mereka bagikan. const [ savedWords , dispatch ] = useReducer ( ( state , action ) => {
switch ( action . type ) {
case 'add' :
const wordIndex = state . findIndex ( ( word ) => word . uuid === action . uuid
|| word . name === action . name
&& word . sense === action . sense ) ;
if ( wordIndex !== - 1 ) {
return state . map ( ( word , i ) => ( {
... word ,
value : word . value + ( wordIndex === i ? 1 : 0 ) ,
} ) ) ;
}
return [
... state ,
{
id : state . length ,
name : action . name ,
value : 1 ,
root : action . root ,
label : action . label ,
uuid : action . uuid ,
sense : action . sense ,
} ,
] ;
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;
case 'clear' :
return [ ] ;
default :
return state ;
}
} , [ ] ) ;
Seorang pengguna ingin menghapus riwayat pencarian yang disimpan
Clear :DeleteForever yang merupakan fungsi dispatch useReducer dari HistoryProvider yang menghapus semuanya dari Konteks.Delete yang diwakili oleh komponen Chip Material-UI. // clear.button.js
// excerpt
const wordsDispatch = useDispatchHistory ( ) ;
const handleClick = ( event ) => {
wordsDispatch ( {
type : 'clear' ,
} ) ;
} ;
// words.context.js
// excerpt from reducer
// the above handler calls case 'remove'
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;Lihat Hasil Terbaru
Lighthouse via Vercel digunakan untuk menguji kinerja, yang menghasilkan hasil unik pada setiap git push . lighthouse-badges digunakan untuk menghasilkan lencana baru untuk setiap penerapan dengan menginstal npm i -g lighthouse-badges dan memasukkan url hash baru ke array url:
lighthouse-badges
-o docs/badges -r
-u https://synonyms.vercel.app/ [... all other urls]
# Output to docs/badges
# Badges will contain the respective
average score(s) of all the urls
supplied, combined
Metrik Lighthouse, yaitu Aksesibilitas dan Kinerja, menghasilkan tanda spesifik pada setiap audit. Penyesuaian dilakukan pada setiap dorongan yang secara khusus mengatasi masalah apa pun.
role . Kembali ke atas
create-next-app dan diterapkan dengan Vercel, yang saya capai dengan langkah-langkah berikut:commit dan push kode dari IDE lokal saya ke Github melalui Git dan terminal iTerm MacBook Pro saya.select , yang terletak di kiri atas prompt langsung."Proyek Anda telah berhasil diterapkan."
Kembali ke atas
git clone https://github.com/israelias/synonym-chasercd ke nama repo ini: cd synonym-chasernpm install npm run dev
# or
yarn dev buka browser Anda ke localhost:3000
info adalah melalui Tesaurus Perguruan Tinggi Merriam-Webster.Kembali ke atas
