Giter VIP home page Giter VIP logo

earthworm's Introduction

Earthworm

Earthworm

English | 中文

⚡ Introduction

By constructing sentences with conjunctions, it helps you learn English better~ 😊

🚀 How To Start?

The mentioned operations below are based on the root directory of the current project, please be attentive to ensure there are no errors!

Requirements

  • pnpm version >= 8

    corepack enable
  • Node.js version >= v20

    Use the version from .node-version. Supported tools

  • Postgres version >= 14.0.0

  • Redis version >= 5.0.0

  • Docker. please make sure it is installed and running successfully on your local machine.

docker --version # Docker version 24.0.7, build afdd53b

node --version # v20+

pnpm -v # 8+

Editor

VSCode

1. Install Dependencies

pnpm install

2. Configure the .env File

You can choose to copy the contents of ./apps/api/.env.example to./apps/api/.env. note that the' example' file contains sample configuration. the main storage system's environment variable information, such as database connection address, user name, password, port, key, etc. the back-end service will read the configuration from this file, of course you can also change it to your own configuration information.

Windows users recommend shortcut keys to copy and paste, Linux users can operate through the following command.

Server

cp ./apps/api/.env.example ./apps/api/.env

Client

cp ./apps/client/.env.example ./apps/client/.env

3. Restore Data Of Logto

Uncompress logto_db_init_data.zip to .volumes/

unzip logto_db_init_data.zip -d .volumes/

if you want to Manual Configuration Logto

4. Start Docker Compose Service

The backend relies on Postgres and Redis services. Start and stop these services using the commands configured in package.json below.

# start
pnpm docker:start

# When needed, execute the following command
# stop
pnpm docker:stop
# delete
pnpm docker:delete
# Complete deletion (including Volume data)
pnpm docker:down

If you prefer manual, you can use the commands below.

docker compose up -d
docker compose stop
docker compose down

# commands compatible with older versions of Docker
docker-compose up -d

5. Initialize Database Schema

When executing this command, try to keep a little time from the previous command, because the -d parameter just used will suspend its service execution in the background. At this time, the docker service may still be running. If an error is found, execute it again.

pnpm db:init

6. Create and Upload Course Data

Only Execute This During the Initial Database Initialization.

pnpm db:upload

7. Start the Backend Service

pnpm dev:serve

8. Start the Frontend Service

pnpm dev:client

🛠️ About testing

Run the test before submitting the commit, and submit the code after the test passes, so as to avoid multiple commits to solve the test problem.

Front-end Testing

The main is the single test of Vitest and the automated test of cypress, execute the following command:

# Enter the front-end project directory
cd apps/client

# vitest
pnpm test:unit:run
# cypress
pnpm test:e2e:run

# monitor vitest, convenient hot update to see test results
pnpm test:unit:watch

Backend Testing

Mainly Jest single test and end-to-end test, but need to access the test database, so you need to ensure that:

  1. testdb and testRedis services in Docker Compose started normally.
  2. The configuration information in the .env.test file is correct. If there is no such file, you can copy the contents of the apps/api/.env.test.example file to the apps/api/.env.test file. The following command is provided to directly use.

Execute the following command:

# Enter Backend Project Directory
cd apps/api

# If you have an.env.test file, you don't need to run this step
cp .env.test.example .env.test

# Single test
pnpm test:unit
# End-to-end testing
pnpm test:e2e
# Single test and end-to-end test run together
pnpm test

Docs Project

Project based on Vitepress documentation,execute the following command:

# Local Development
pnpm docs:dev

❓ FAQ

Database connection failed

My Docker and the database inside are running normally, but when I run the db:init command, I still report an error, indicating that the database connection failed.

You can check whether the database configuration in the .env file is correct, or even whether this file has it! 😠

How To Correctly Update Course Data?

when you identify incorrect course data and make modifications, you should use the following command to update the course data in the database.

pnpm db:update

pnpm Install Error?

Some dependencies require compilation during installation, necessitating the presence of relevant build environments. If these environments are not available, the compilation process may fail. Additionally, different modules may require different build environments, so specific issues need to be analyzed individually. Below are specific problems encountered along with their solutions.

First try the following command to update pnpm.

pnpm i -g
# or
pnpm i -g pnpm
# or
npx pnpm i -g pnpm@latest

Error Installing the argon2 Module On Windows

  • Install Visual Studio 2015 or later, specifically the "Desktop development with C++" component. (In practice, any component containing C++ development tools and libraries will suffice.)
  • If you encounter Chinese characters display issues during compilation, execute chcp 437 in the command prompt, then rerun the install command.

Docker Permission Denied in Docker?

When using WSL2 as a development environment in Windows, the following error occurs when starting Docker with docker compose up -d :

permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Frun%2Fdocker.sock/v1.24/containers/json": dial unix /var/run/docker.sock: connect: permission denied

Solution

Add the current user to the docker group

# Add docker user group
sudo groupadd docker
# Add the logged-in user to the docker user group
sudo gpasswd -a $USER docker
# Update user group
newgrp docker
# Test if docker command is working properly
docker images

🤝 Frontend Development Guideline

  1. Do not Destructure Pinia store.

    • The readability will be better when using store
    • Destructuring can lead to reactivity loss and using storeToRefs is also quite cumbersome
  2. Avoid including UI logic in composables.

    • Such as useMessage
    • We categorize the router as UI logic, and for ease of testing, avoid including routerrelated logic in there

🌟 Contributing

Thanks to everyone who has already contributed to Earthworm! 🎉

earthworm's People

Contributors

baboon-king avatar bsuooo avatar charleewa avatar cuixiaorui avatar fengstats avatar hazel-lin avatar hildxd avatar himkiong avatar juntingl avatar lck6de1p avatar lhn3464893441 avatar lttztt3 avatar masterjiyuhang avatar myltx avatar nauxscript avatar nullcache avatar orangelckc avatar pkc918 avatar reinerlau avatar sadanspace avatar shellingfordly avatar singlepoi avatar sivonli avatar torstentjh avatar vampirewy avatar whoelse666 avatar yaolifeng0629 avatar zclsx avatar zhuzhux avatar zuowendong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

earthworm's Issues

添加 CI 执行 test&eslint&build

保证 pr 代码的稳定性

#74 区别在于

  1. ci 可以保证环境是一致的
  2. 一个是针对 pr 另外一个是针对拥有代码提交权限的成员

补齐 client 中的 e2e 测试

使用 cypress e2e 测试覆盖关键路径

todos

  • 安装 cypress

关键路径

  • 游客进入练习页面
  • 游客注册
  • 游客登录
  • ......

更改保存进度逻辑

  • 用户打开页面 找到 activeCourseId
  • 然后服务端把 这个courseId 的数据的 statement 数据都给前端
  • 查看 localstorage 有没有这个 courseId 的 statementIndex

刷技术文章模块

后面应该可以导入技术文章 来刷文章中的句子

这个功能需要依赖自行解析句子 生成对应的数据功能

优先级不高 但是对于后续的功能发展很重要

补齐 client 中的单元测试

除了 UI 组件其他的代码都应该有单元测试

  • composables
  • store
  • utils

这几个文件夹内的代码都需要写单元测试

components 文件夹里面的都属于 UI 逻辑

这里有一个要点是大家需要知道哪些逻辑属于 UI 逻辑,哪些逻辑属于数据处理逻辑/业务逻辑

提交句子 错误的话 不直接删除所有的内容

why

一大长句子打错了某个字母顺序导致全部清空了 这个体验还是非常差的

而且也不知道自己哪个单词错了

功能设计

  1. 如何提示出错误的单词呢?
  2. 如何让用户快速的修正错误的单词呢? 怎么操作更方便呢?

给予代码贡献的同学特殊的标识

what

贡献过代码的同学 显示特殊的标识

why

鼓励同学们积极 pr

功能设计

  • 标识需要分级别, 不同级别显示不同的标识
    • 可以加一个贡献值的概念,不同贡献值对应不同的标识/图标
    • 第一个版本可以先通过接口添加贡献者以及贡献值(后续在迭代加上 UI 页面)
  • 标识应该现在显示哪里?

解决 pinia store 的类型错误问题

现在项目中针对于 pinia 的类型提示全部是错误的

直接使用 store.xxx 的话 是不需要包含 .value 的

image

诊断

之前创建了一个新的 nuxtjs 项目,把所有代码全部 copy 过去后 发现 pinia 的类型提示正常了

所以说业务代码层面应该是不会破坏 怀疑是 nuxtjs 本身环境导致的

这里首先怀疑 auto import 导致的问题,因为他会修改 type

并且 auto import 因为导入来源不清晰 也会导致后续的维护成本增加的问题

后面可以尝试关掉 auto import 功能后在尝试创建新的 nuxtjs 项目看看是否可以解决这个问题

错句子添加到当前课程的末尾

在刷课程的时候 有的句子错误了或者是错了好几次

对于这种句子应该继续放到课程最后 直到刷过了为止

可以参考 lingvist 的设计

错误的题目添加到后面的句子中

what

输入错误后 认为当前句子不熟悉 添加到后续的 question 中

why

有时候想针对做错的题目在重新练习练习

how

类似于 lingvist 功能

实现排行榜功能

可以提高大家的动力

以下几个数据都可以作为排行:

  • 课程的进度
  • 每一个课程的通关时间
  • 每一个课程的错误率

大家想到的话 随时补充

unexpected focus when tab

when focusing in the "show question" button, press tab key, then press enter key, will go back the the first question.
maybe because that it will focus in the "do again button" in this situation.

[重构] - 前端现有逻辑

针对于现有代码做以下重构
保证代码的可读性以及后续的可扩展性&可维护性

todos

  • 新增用户和游客两个概念
  • 封装 router 相关的逻辑
    - 目前关于路由的跳转都是基于写死的 path string
    - 不好维护以及不便于复用
  • questionInput 的单元测试需要使用 component test 来重构
  • 目录结构的调整
    • 需要迁移
      • drizzle
      • libs
      • scripts/course
    • 目标
      • apps
      • packages
  • 关闭 auto import

后续想到哪些重构点 都可以加在这里

光标位置错误

输入单词过程中,使用方向键会移动光标
由于使用 opacity-0 隐藏了 input 输入框,不容易发现光标位置改变的问题,但是会导致后续删除字母错误
是否需要考虑输入单词的过程中禁用方向键或显示光标位置

Windows环境下快捷键冲突

Windows环境下快捷键实际效果:
ctrl + p 打印
ctrl + n 新开窗口

期望:能有兼容Windows的快捷键,或者能够支持自定义快捷键

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.