В этой статье мы расскажем, как создать первый проект на Next.js и ChatGPT и собрать 10000 пользователей, не имея при этом навыков кодинга.
1К открытий4К показов
В этой статье мы расскажем, как создать первый проект на Next.js и ChatGPT и собрать 10 тысяч пользователей, и не иметь при этом никаких навыков кодинга.
Раньше я никогда не программировал, потому что кодинг казался мне очень сложным. Два месяца назад я решился попробовать: я подумал, почему бы не начать программировать сейчас.
Друзья посоветовали мне начать с написания проектов с открытым исходным кодом и помогли мне с первыми настройками проекта.
Практически на каждом шаге я использовал ChatGPT, чтобы разобраться, как настроить что-то, как установить и подключить API или как понять, что означает код.
Теперь я расскажу немного больше о первом проекте, который я создал.
Этапы разработки проекта
Настройка среды.
Поиск проектов с открытым исходным кодом и разработка на их основе.
Разбор кода.
Создание проекта.
Отправка проекта на GitHub.
Публикация поста о проекте в социальных сетях.
Мне потребовалась неделя, чтобы разобраться во всем и запустить проект в Linkedin.
На настройку ушли 1-2 часа, для управления кодом из открытых проектов потребовалось 3-4 дня, а для размещения на GitHub и Vercel потребовался один день.
Какой проект я создал
Я сделал генератор постов Linkedin, который использовал ИИ.
Вы можете использовать его, чтобы создать свой собственный генератор постов.
Почему генератор постов Linkedin
В первое время я проводил эксперименты на Linkedin.
Я тратил много времени на написание постов на Linkedin. По крайней мере, у меня уходил час на каждый пост, и искал способ упростить написание.
Итак, я провел анализ постов более 100 разных авторов на Linkedin и 300 различных промптов, чтобы найти способы генерации эффективных постов.
Теперь я расскажу об основных шагах разработки, которые я делал поэтапно.
Шаг 1. Настройка среды
Прежде чем начать, мне рекомендовали установить менеджер пакетов, такой как tea, чтобы управлять средой разработки.
В этот момент слова “менеджер пакетов” были мне неизвестны.
sh <(curl https://tea.xyz)
# --- OR ---
# using brew
brew install tea
Как я понимаю, tea помогает установить Node.js, npm, Vercel и любые другие пакеты, которые понадобятся для разработки.
Настройка Next.js с использованием TypeScript и Tailwind CSS
У меня было базовое представление о том, что понадобится мне для фронтенда.
Мне подсказали начать с создания нового проекта Next.js. Также я использовал TypeScript и Tailwind CSS, поэтому следовал этим шагам:
npx create-next-app
# ---
# you'll be asked the following prompts
What is your project named? my-app
Would you like to add TypeScript with this project? Y/N
# select `Y` for typescript
Would you like to use ESLint with this project? Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias
Шаг 2. Поиск проектов с открытым исходным кодом и разработка на их основе
Я использовал два проекта с открытым исходным кодом:
Алгоритм Twitter, чтобы оценивать посты пользователей на Linkedin.
Генератор био в аккаунтах Twitter. Он помог мне разобраться, как подключить OpenAI и генерировать посты для Linkedin с помощью GPT. В проекте по ссылке он генерировал информацию в био для аккаунтов.
Я загрузил эти проекты в виде zip-архивов на свой компьютер.
Шаг 3. Разбор кода
Я был немного шокирован тем, что увидел, и сперва не мог ничего понять.
Поэтому я обратился к ChatGPT и спросил о базовой структуре моего приложения.
Я скопировал код каждой страницы и спросил, что он делает. Также я спрашивал, как вносить изменения в код.
Таким образом, я начал понимать, где находится фронтенд приложения и CSS.
Некоторые из вопросов, которые я задавал ChatGPT, были очень простыми, зато сейчас они мне полностью понятны.
В те моменты я задавал все вопросы, даже откровенно глупые.
Шаг 4. Создание проекта
После того, как я разобрался в базовых вещах, я приступил к изменениям в скачанных проектах и начал создавать собственное приложение на их основе.
Приложение состоит из двух частей: Ранжирование + Генератор.
Алгоритм генерации постов для LinkedIn
Ранжирование – это оценка вашего сообщения на основе различных критериев, которая повышает его эффективность.
Я адаптировал алгоритм ранжирования постов из Twitter для LinkedIn, использовав следующие функции:
Функция для обнаружения нескольких хэштегов.
Функция для обнаружения изображений или видео.
Функция для обнаружения URL-адресов в сообщении.
Функция, которая предпочитает сообщения, содержащие эмодзи.
Функция для продвижения негативного контента.
Функция для приоритетного форматирования постов.
Функция для сокращения длины строки.
Функция для задавания вопросов.
В отличие от алгоритма Twitter, алгоритм LinkedIn не является общедоступным.
// function to detect multiple hashtags
function multipleHashtags({ post }: PostData): Rank {
const regex = /#[\w-]+/g;
const hashtags = post.match(regex);
const lowerCasePost = post.toLowerCase();
if (hashtags && hashtags.length > 3) {
return {
score: 0.5,
message: `Too many hashtags.`,
};
}
if (hashtags && hashtags.length <= 3) {
if (
lowerCasePost.includes("#follow") ||
lowerCasePost.includes("#comment") ||
lowerCasePost.includes("#like")
) {
return {
score: 0.5,
message: `Avoid using hashtags like "follow," "comment," or "like".`,
};
}
return {
score: 1,
message: `Combine general and specific hashtags.`,
};
}
return {
score: 1.0,
};
}
// function to detect image or video
function imageVideoBoost({ postMedia }: PostData): Rank {
const has_media = postMedia;
if (has_media) {
return {
score: 2.0,
// message: `Contains image or video.`,
};
}
return {
score: 1.0,
};
}
// function to detect urls in post
function postHasUrl({ post }: PostData): Rank {
const regex =
/https?:\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/g;
const urls = post.match(regex);
if (urls && urls.length > 0) {
return {
score: 0.5,
message: `Remove the link from post and add in comments.`,
};
}
return {
score: 1.0,
};
}
/**
* Function to favor posts that use emojis
*/
function emojis({ post, sentiment }: PostData): Rank {
const regex = new RegExp("[\uD800-\uDBFF][\uDC00-\uDFFF]", "g");
const emojis = post.match(regex) || [];
const totalMatches = emojis.length;
if (totalMatches > 0) {
return {
score: 1.5,
// message: `Included ${totalMatches} emojis in the post.`,
};
}
return {
score: 1,
message: "No emojis found in the post.",
type: "negative"
};
}
/**
* Promote negative content because it's more likely to go viral.
* Hide anything positive or uplifting.
*/
function sentiment({ post, sentiment }: PostData): Rank {
if (sentiment.comparative >= 0.5) {
if (sentiment.comparative > 1.5) {
return {
score: 1.5,
// message: `Exceptionally positive.`,
};
} else {
return {
score: 1.1,
// message: `Positive sentiment.`,
};
}
} else if (sentiment.comparative <= -0.5) {
if (sentiment.comparative < -1.5) {
return {
score: 0.5,
// message: `Exceptionally negative.`,
};
} else {
return {
score: 0.9,
// message: `Negative sentiment.`,
};
}
} else {
return {
score: 1,
};
}
}
/**
* Prioritize break like post formatting.
*/
function lineBreaks({ post, sentiment }: PostData): Rank {
const breaks = post.split(/\n\s*\n/);
const totalBreaks = breaks.length - 1;
if (totalBreaks >= 1) {
return {
score: 1.5,
// message: `Used ${totalBreaks} line breaks.`,
};
} else {
return {
score: 1,
message: `Add line breaks between the lines.`,
type: "negative"
};
}
}
/**
* Reduce line length
*/
function lineLength({ post }: PostData): Rank {
const lines = post.split('\n');
let score = 1.0;
for (let i = 0; i < lines.length; i++) {
if (lines[i].length > 200) {
return {
score: 0.9,
message: `Reduce line length to improve readability (200 characters).`,
};
}
}
return {
score: 1,
// message: `Good, keep line length 200 characters or less.`,
type: "positive"
};
}
/**
* Function to ask questions
*/
function questions({ post, sentiment }: PostData): Rank {
if (post.includes("?")) {
return {
score: 1.5,
// message: "Great! Questions can help to activate discussion"
};
} else {
return {
score: 1,
message: "Add questions to activate discussion",
type: "negative"
};
}
}
Интерфейс пользователя алгоритма
Он обнаруживает все функции в вышеуказанном коде и показывает, как улучшить пост. Я не настроил интерфейс для всех функций.
Я использую функцию обработчика handlePrompt для создания поста. Также применяется фильтр по типам, поэтому у меня есть 5 различных промптов в зависимости от типа.
prompt = `Generate post using this prompt, based on ${post}. You are a LinkedinGPT, a large language model that generates viral posts for Linkedin. You are given a prompt of a post and must generate a post that is more likely to be liked and reposted than the original post.
The Linkedin algorithm contains boosts and demotions based on what you are writing. Positive boosts are:
- in each post add emoji
- 200 characters in sentence maximum
- Start each sentecnce from new line and ad numbers in first 2 lines
- add 3 hashtags which 2 are generic and one very specific (at the end) Tags relate to post theme
- add a question at the end of the post to start a discussion. Before the hashtags
- first two lines should be catchy
- Dont add links - links are not good.
- If post copied in the field contain some numbers keep them the same.
Add idea about which image or visual can be added at the end of the post (this text is not counted as part of post)
${post}
---
Generated post length must be more than 800-1200 characters
---
Between each line must be a space
---
Keep all mentions of people in there
---
Start the firs line from smth like: I did smth, In year, I do, Tired of, Sometimes it is just, A path toward, Because this is not,I've been struggling, (change the begginign depends on the context )
---
Add emoji if it fits
---
It should be a story`;
Интерфейс генератора
Это мой индекс-файл. Он относится к генератору постов.
Это платформа для обмена документами и презентациями со встроенной аналитикой. У меня было много проблем с использованием Docsend раньше, и они меня очень раздражали. Поэтому я считаю, что будет круто иметь альтернативу с открытым исходным кодом.
Энтузиаст создал GitHub-репозиторий, собравший в себе лучшие open source шаблоны для быстрого старта новых проектов. Коллекция включает готовые решения для различных технологий и платформ, таких как веб-разработка, мобильные и серверные приложения, с настроенной архитектурой, конфигурацией и инструментами
