День 2: Настройка Supabase в проекте Vue

Привет всем, недавно я начал #100daysofcode вызов для себя, чтобы изучить новые навыки и стать лучше в кодинге в целом. И этот пост посвящен второму дню.

Итоги дня

По сравнению со вчерашним днем я провел больше времени за кодингом и, возможно, был более продуктивен. Но, как я уже упоминал в статье о первом дне, я сказал, что буду учиться перед кодингом. Я занимался, но не мог сосредоточиться, и из-за этого, несмотря на то, что я потратил больше времени на учебу, я занимался меньше. Я думаю, что мне не стоит делать перерывы на перекусы, они просто разрушали мою сосредоточенность. Поэтому я решила составить расписание своего дня. Не очень строго, но, по крайней мере, я должен быть уверен, что не делаю случайных перерывов. В части кодирования я закончил разработку формы входа и главной страницы. Дизайнерская часть была не очень сложной, я просто стилизовал эту кнопку, остальная часть формы была стилизована вчера.

А на главной странице я просто сделал простой дизайн, потому что я хочу изучить Vue и Supabase.

Закончив с этим, я начал изучать документацию по Supabase. Мое первое впечатление о нем таково, что я думаю, что они сделали довольно хорошую работу над именами функций по сравнению с Firebase, lol! Например, функция регистрации:

// Firebase
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password);

// Supabase
const { user, session, error } = await supabase.auth.signUp({
  email,
  password,
});
Войти в полноэкранный режим Выход из полноэкранного режима

Как вы можете легко заметить, имена функций в Firebase слишком длинные, да, они понятны, но если я хочу зарегистрировать пользователя с помощью провайдера (например, Github), мне нужно импортировать другую функцию и провайдера.

// Firebase
const auth = getAuth();
const provider = new GithubAuthProvider();

signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    const credential = GithubAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
  });

// Supabase
const { user, session, error } = await supabase.auth.signIn({
  provider: 'github',
});
Вход в полноэкранный режим Выйти из полноэкранного режима

По этой причине я думаю, что использовать Supabase проще, чем Firebase, по крайней мере, в части кодирования. И я думаю, что документация Supabase немного лучше, чем Firebase, потому что, как вы можете видеть выше, они используют ключевое слово await, в то время как Firebase использует обратные вызовы. Для читабельности кода использование async и await лучше, чем обратные вызовы. Поэтому, когда я хочу использовать блок кода из документации Firebase. мне нужно переписать его, используя async и await с блоком try-catch. Также мне интересны ваши мысли, пожалуйста, поделитесь своим мнением о том, что для вас лучше, Supabase или Firebase?

В любом случае, в основном я могу сказать, что пока что работать с Supabase было приятно. Единственное, что, на мой взгляд, могло бы быть лучше — это валидация. Supabase не проверяет электронную почту или надежные пароли. Я имею в виду, что они не проверяют, действительно ли электронная почта является электронной почтой. Я думаю, они могут это улучшить.

Помимо работы с Supabase, сегодня я начал использовать магазин Vuex. Я думаю, это что-то среднее между React Context API и Redux. Мне просто понравилось. Context API очень хорош, я использую его почти каждый раз, но после знакомства с Vuex я думаю, что Context API дает вам столько свободы. Конечно, у обоих есть свои плюсы и минусы, но я думаю, что способ взаимодействия с состоянием лучше в Vuex. Но это мнение одного человека, как я уже сказал, у обоих есть плюсы и минусы. И даже если я считаю, что Vuex лучше, чем Context API, я не могу использовать его в проекте React.

Кстати, вы также можете взглянуть на github repo для этого проекта.

ibrahimhozhun / vuex-supabase

Vue веб-приложение с vuex и supabase

vuex-supabase

Настройка проекта

yarn install

Компиляция и горячая загрузка для разработки

yarn serve

Компилирует и минифицирует для производства

yarn build

Линковка и исправление файлов

yarn lint

Настройка конфигурации

См. Справочник по конфигурации.

Посмотреть на GitHub

На сегодня это все, хорошего дня!

Оцените статью
devanswers.ru
Добавить комментарий