Хочу понять каким способом пишутся элементы геймификации на сайте?

Question

[Rikitikiti]

Например, обучающий сайт с элементами геймификации процесса обучения, что-то подобного, как у Duolingo, то есть есть некая карта или древо, бейджи и лидерборд, прогресс, coins, покупка coins или просмотр рекламы. Или например, составь пазл и идет переход на другой уровень. Ну примерно такая суть. Интересует самый простой способ, может быть есть готовые решения, ну есть же сайты, где даже android-приложение можно написать почти без кода, визуальное программирование. Мне главное понять логику на примере. Можно ли осуществить это на html5+ jscript только. Может кто-то встречал хороший tutorial c пошаговым разбором. Спасибо.

Comments

[RaulDuke]

Извините, но меня иногда оторопь берет как представлю какое адище происходит у некоторых людей в головах.

[javedimka]

Придумываются инженерами и реализуются командами программистов.

[Rikitikiti]

RaulDuke: если не можете помочь с ответом, проходите мимо. Я не программист по профессии, сама до сути докапываюсь. Сама научилась делать несложные сайты, разобралась с фреймворками. Теперь хочу понять это. Может, тот кто изучал программирование в вузе это понятно, то мне нет.

Answer 1

[devalone]

Можно ли осуществить это на html5+ jscript только

Для сайта типо duolingo как минимум нужен ещё какой-нибудь серверный язык. А так, продумываете архитектуру классов и реализуете, конкретно как сказать нельзя, так как везде по разному.

Comments

[Rikitikiti]

какой лучше- php?

[devalone]

Rikitikiti: думаю да, он более распространён и с достаточно низким порогом входа. Только не зацикливайтесь на императивщине, как познакомитесь с основами, изучайте ООП, с помощью ООП

древо, бейджи и лидерборд, прогресс, coins

реализуется проще, быстрее и удобнее. Ну и чтоб реализовать проект типа duolingo, лучше использовать какой-нибудь фреймворк, погуглите, их много на php, но начинать всё равно нужно с языка.

[Rikitikiti]

devalone: у меня есть идея, которая не дает мне покоя, но я понимаю, что одна сама я не смогу заменить команду, хотелось бы также узнать сколько бы стоила реализация подобного проекта.

[devalone]

Rikitikiti: с этим вопросом уже на фриланс, только опишите проект нормально, чтоб людям было понятно, что реализовывать, потому как в вашем вопросе я этого не увидел.

[Rikitikiti]

devalone: вот в том и беда, что я не представляю масштаб действа, чтобы понять адекватные цены на такие услуги или нет, или получится, что меня совсем обманут

[devalone]

Rikitikiti: вам нужно представлять не масштаб проекта изнутри, а то, что он должен делать, функционал, а уже как реализовать грамотные разработчики знают.

[Rikitikiti]

devalone: последний вопрос, как обезопасить себя, в том, что в итоге проект не будет присвоен.

[Игорь]

Rikitikiti:

хотелось бы также узнать сколько бы стоила реализация подобного проекта.

Проект уровня дуолинго стоит десятки миллионов рублей.

последний вопрос, как обезопасить себя, в том, что в итоге проект не будет присвоен

Присвоен кем? Проекты такого уровня разрабатываются собственной командой. Нанимаете в штат людей и вперёд. Ну а так - NDA, договора и т.д.

[Rikitikiti]

Игорь: миллионы, может стоило, когда только появилось, тем более, мне оттуда нужен только принцип взаимодействия, курсы авторские - будут разрабатываться лично мной

[Игорь]

Rikitikiti: я говорю не о стоимости всего бизнеса, а о том, сколько они вложили в разработку программной части.

[Игорь]

Rikitikiti:
https://vc.ru/p/duolingo-20m
Вот статья 2014 года, где говорится про штат в 34 человека. В России дизайнер или инженер, способный работать над продуктом типа Дуолинго стоит несколько миллионов рублей в год. Вот и считайте.

[Rikitikiti]

Игорь: мне жаль, что Вы можете лишь поделиться этим со мной

[Игорь]

Rikitikiti: этим - это чем?

[Игорь]

Rikitikiti:

О стоимости бизнеса можно судить по инвестициям. В статье написано об инвестициях в 20 + 15 + 3.3 миллиона долларов, итого примерно $38 млн. Значит бизнес оценивался где то в 10+ раз дороже, т.е. считайте от полумиллиарда долларов.

[Rikitikiti]

и что теперь, сложить руки и сказать нет у меня столько денег и все. Я просто привела пример той схемы, которую хотела бы понять и частично реализовать в своем проекте.

[Игорь]

Rikitikiti:
Вы спрашивали:

хотелось бы также узнать сколько бы стоила реализация подобного проекта.

Я ответил.
Сложить руки или нет - решать только вам.

Проект дуолинго очень большой, технологий там используется вагон и телега, ваш вопрос "как сделано" очень обширный. Чтобы получить на него ответ - нужно конкретизировать.

[Rikitikiti]

ясно, дело - труба. Конкретно, выполнение действия, например ...собирание пазла из слов - выход приз за выполнение и продвижение по древу курса... пошла разбираться с PHP

[Игорь]

Rikitikiti: это комплексная штука. Фронтэнд программирование на джаваскрипте, вёрстка, плюс бэкэнд например на пхп (но не советую, лучше уж python) и базы данных (скажем mysql). Ещё есть ключевое слово AJAX.

[Игорь]

Rikitikiti:
Делайте по частям.
1. задайте отдельный вопрос, как сделать на джаваскрипте собирание паззла из слов.
2. когда сделаете, спросите как сделать продвижение по дереву курса.
К тому времени уже будет понятнее и всё остальное.

[devalone]

плюс бэкэнд например на пхп (но не советую, лучше уж python)

Игорь: питон хорош, но специалисты его знающие стоят дороже и их меньше.

[Игорь]

devalone: Лучше меньше да лучше. Говнокод проекту идёт в минус, а не плюс. В том числе и по деньгам.

[devalone]

пошла разбираться с PHP

Rikitikiti: если цель сделать проект, то это не лучший путь. До уровня, при котором можно создать duolingo будете долго изучать)
Проект с подобным функционалом будет стоить немало, но не миллионы, как вам тут рассказали, чтоб узнать, сколько, зарегистрируйтесь тут upwork.com и выложите краткое описание проекта, индусов, работающих за еду сразу отметайте, а с нормальными разработчиками можете обсудить детали, узнать, какой стек технологий они планируют использовать и т.д. Если сомневаетесь, можете спросить на тостере, какие технологии использовать, но должен быть конкретный вопрос с описанием того, что хочется получить в итоге. Ещё можно поискать веб студии с хорошими отзывами.

[devalone]

Игорь: говнокод зависит от программиста и если нанимать не индуса, работающего за еду, а специалиста, то код будет нормальным, ну и для проекта такого уровня в любом случае будут использоваться фреймворки и другие готовые решения, а это сразу сужает возможности нагадить в код.

[Rikitikiti]

devalone: назрел такой вопрос, одни пишут рhp живее всех живых и лучше, но труднее, другие, что python легче, но возможностей меньше. Истина где?

[Rikitikiti]

Проект с подобным функционалом будет стоить немало, но не миллионы

имея немалые деньги я бы не стала и думать, заказала и все. Просто хотела сменить род деятельности, начала изучать, то что давно меня привлекало, ну естественно хотела в итоге получить отдачу.

[Игорь]

devalone:

если цель сделать проект, то это не лучший путь. До уровня, при котором можно создать duolingo будете долго изучать)

Совершенно верно.

Проект с подобным функционалом будет стоить немало, но не миллионы, как вам тут рассказали, чтоб узнать, сколько, зарегистрируйтесь тут upwork.com и выложите краткое описание проекта, индусов, работающих за еду сразу отметайте, а с нормальными разработчиками можете обсудить детали, узнать, какой стек технологий они планируют использовать и т.д.

И вы так сами делали, как советуете?
Вы с фрилансерами работали? В курсе на что они способны, а на что нет?
Если всё было так, как вы говорите, к нам бы заказчики после таких фрилансеров не обращались. А мы как раз регулярно переделываем за фрилансерами. И нет, не за индусами.
Это первое.
Второе - я даже написал, каким образом я оценил стоимость аналогичного проекта. Или Дуолинго зря 34 человека в штате имеет (имел)? Надо было на апворке просто фрилансера нанять?

Ещё можно поискать веб студии с хорошими отзывами.

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

говнокод зависит от программиста и если нанимать не индуса, работающего за еду, а специалиста, то код будет нормальным,

Ну так пхпшников потому и много, что там нубов дофига. Найти толкового пхпшника не проще, чем толкового питониста. А даже сложнее, потому что придётся продираться через дебри этих нубов.

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

Это когда это фрейморки говнокодерам мешали говнокодить? "Программу фортрановского типа можно написать на любом языке". Фреймворков это точно также касается.

[devalone]

Rikitikiti: и те, и те лгут.
PHP и Python - это языки программирования и возможности у них примерно одинаковые, да, они различаются и синтаксисом и идеологией, в python, например, немного своеобразное ОПП, да и вообще различий много, но реализовать можно одни и те же вещи на обоих языках.
Насчёт сложности, я бы не сказал, что какой-то язык легче или сложнее, у них у обоих порог входа достаточно низкий, а сложности появляются, если углубляться в дебри. А сравнивать возможности именно языков как-то глупо, удобные фичи, как например декораторы в python не сыграют большой роли на реализации того или иного функционала проекта. Различия есть в стандартной библиотеке и в уже написанном кем-то коде(фреймворки, библиотеки и т.д.), не писать же всё с нуля, не берусь судить, в каком языке этого больше.
Лично мне больше нравится python, но советовать его только поэтому я не буду.
Вы главное про node js не читайте, а то список для выбора расширится :)

[Rikitikiti]

Игорь: понятно одно, я во власти иллюзии, что думала, как покойный создатель яблока, что программировать нужно и можно заниматься в любом возрасте. И я не хотела пополнять ряды говнокодеров, не собиралась работать как фриланс, а хотела сделать просто что-то свое, ну наговнокодила значит как-бы несудьба. Полную копию дуолинго не собиралась делать.

[devalone]

Ну так пхпшников потому и много, что там нубов дофига. Найти толкового пхпшника не проще, чем толкового питониста. А даже сложнее, потому что придётся продираться через дебри этих нубов.

Игорь: это уже перерастает в холивар, а я такое не люблю)

Это когда это фрейморки говнокодерам мешали говнокодить? "Программу фортрановского типа можно написать на любом языке". Фреймворков это точно также касается.

Это да, но если говнокодер будет писать SQL запросы вручную, шансов сделать херню у него намного больше, чем если он будет использовать ORM. Тоже самое, если он будет использовать MVC фреймворк вместо пихания всего подряд в один файл. Это не исключает того, что человек может наговнокодить, но используя MVC вероятность, что он напишет что-то, что можно будет поддерживать, выше.

[Игорь]

devalone:

и те, и те лгут.

Вы, уважаемый, как бы поаккуратнее с выражениями. Если вы не разбираетесь, это ещё не значит, что кто-то лжёт.

но реализовать можно одни и те же вещи на обоих языках.

На жабе, си посоветуйте. На них же тоже можно, а они более популярные, чем пхп.

[Игорь]

Rikitikiti:

думала, как покойный создатель яблока, что программировать нужно и можно заниматься в любом возрасте.

Конечно можно. Программировать - это довольно просто.

И я не хотела пополнять ряды говнокодеров, не собиралась работать как фриланс, а хотела сделать просто что-то свое, ну наговнокодила значит как-бы несудьба.

Да пополняйте. Ничего в этом страшного нет. Не вы первая, не вы последняя. Счастье не в этом же.

Полную копию дуолинго не собиралась делать.

Ну и замечательно.

[Rikitikiti]

devalone: вот читаешь, выполняешь какие-то задания онлайн-курсов, все понятно, есть пример...понятно, нет примера...понимаешь, что нет базы, ну той , что учат программистов в универе, хотя интернет пестрит, что любой может сделать сайт, приложение андроид. Наверное, я средних умов(((

[Rikitikiti]

Игорь: а Вы по какой части специалист? Ну front или back-end?

[Игорь]

devalone:

это уже перерастает в холивар, а я такое не люблю)

Прекрасно. Предлагаю на этом и остановиться. У меня тоже не настроение для холивара сегодня.

Это да, но если говнокодер будет писать SQL запросы вручную, шансов сделать херню у него намного больше, чем если он будет использовать ORM. Тоже самое, если он будет использовать MVC фреймворк вместо пихания всего подряд в один файл. Это не исключает того, что человек может наговнокодить, но используя MVC вероятность, что он напишет что-то, что можно будет поддерживать, выше.

Это иллюзия. Просто говно будет другого типа. Это прекрасно иллюстрируется нашим текущим проектом, который мы переделываем. Там и ORM есть, и фреймворк, но такого говнокода я, наверное, никогда в жизни не видел.
Будет говно в виде кривых транзакций с ORM, отвратительной структуры данных, условий гонки, кривой обработки исключений (которая критичная для некоторых сценариев выполнения), копипасты копипасты и т.д.
Говнокодер поэтому и говнокодер, что не умеет использовать инструменты, которые у него есть. А SQL это или ORM - вопрос десятый.

[Игорь]

Rikitikiti:

Наверное, я средних умов(((

Да скорее всего нет, просто нужно больше пробовать и больше вникать. В какой-то момент дойдёт и всё станет понятно. Может каждый, но не всегда это дело быстрое.

а Вы по какой части специалист? Ну front или back-end?

У меня опыта в этом всём 20 лет, я, можно сказать, по всему специалист)

[Rikitikiti]

Игорь: нашла Вас на Upwork:)

[devalone]

Игорь:

Вы, уважаемый, как бы поаккуратнее с выражениями. Если вы не разбираетесь, это ещё не значит, что кто-то лжёт.

Я написал как есть.

На жабе, си, посоветуйте. На них же тоже можно, а они более популярные, чем пхп.

Почему не C++? Ограничения языков есть, но они не сделают невозможным реализацию того или иного функционала для проекта.

[Игорь]

devalone:

Я написал как есть.

Серьёзно? Ну тогда конечно))

[Игорь]

Rikitikiti:

нашла Вас на Upwork:)

Да, мы через апворк в т.ч. работаем.

[devalone]

Rikitikiti:

нет базы, ну той , что учат программистов в универе

Я скажу вам по секрету, но в большинстве ВУЗов РФ учат так себе, а необходимую базу можно и самому выучить даже лучше, чем в универе.

[Rikitikiti]

Игорь: не сочтите за наглость, но можно иногда будет спросить у Вас совета, просто бывает роешься в теме и ну никак не доходит суть...?

[Игорь]

Rikitikiti:
В Москве кстати есть всякие подобные тусовки https://djangogirls.org/moscow/
Как раз для девчёнок) Там наверняка смогут вам подсказать и научить.

[devalone]

Игорь:

Да, мы через апворк в т.ч. работаем.

а как же

И вы так сами делали, как советуете?
Вы с фрилансерами работали? В курсе на что они способны, а на что нет?

[Игорь]

Rikitikiti:

не сочтите за наглость, но можно иногда будет спросить у Вас совета, просто бывает роешься в теме и ну никак не доходит суть...?

Можно, но не на все вопросы удобно отвечать письменно, лучше по скайпу, а некоторые и по скайпу требуеют большого времени.

[Rikitikiti]

devalone: Это меня вдохновляет, а еще меня успокаивает, что может, если даже я не сделаю тот проект, что я хочу, то по крайней мере в старости у меня будет меньше шансов на болезнь Альцгеймера или старческий маразм))

[Игорь]

devalone:

а как же

Не понял, что смущает?

[devalone]

Игорь: то, что вы тоже фрилансер на апворке.

[Rikitikiti]

Игорь: я живу на данный момент в Ес и скажем так мой диплом, мой опыт тут не нужен, поэтому хотела себя найти вот таким способом, так как я давно, еще со времен первого интернета задавалась вопросами интернет-технологий

[Игорь]

devalone:

то, что вы тоже фрилансер на апворке.

Это не мешает нам работать с другими фрилансерами.

[Игорь]

Rikitikiti:

я живу на данный момент в Ес и скажем так мой диплом, мой опыт тут не нужен, поэтому хотела себя найти вот таким способом, так как я давно, еще со времен первого интернета задавалась вопросами интернет-технологий

Если для заработка, то придётся попотеть поначалу. Если в качестве хобби или так, из любопытства, то всё проще.
Программирование хоть и простая сама по себе вещь, но чтобы работать программистом, всё же нужны определённые знания и опыт.

[Rikitikiti]

Игорь: ну как я говорила ранее, не работать как программист, а сделать парочку своих проектов, идеи есть, знаний и практики нет, если еще какое-то время назад, когда я начала изучать фронт-енд, я совсем не понимала откуда ноги растут, то сейчас дело немного продвинулось, надоело делать просто под копирку, то что предлагается в курсах, а за пределами неизвестность..вот от этого и вопрос мой был сегодня очень общий, но даже из тех ответов, что я получила сегодня я уже поняла кое-что и большое спасибо вам.

[Rikitikiti]

devalone: и Вам спасибо за ваши ответы. По вашему резюме поняла, что вы имеете профильное образование

[Игорь]

Rikitikiti:

сделать парочку своих проектов, идеи есть, знаний и практики нет

Если вы хотите делать проекты не "в стол", а для публики, то тогда в первую очередь нужно освоиться с маркетингом. Иначе на ваш сайт просто никто никогда не зайдёт.

вот от этого и вопрос мой был сегодня очень общий, но даже из тех ответов, что я получила сегодня я уже поняла кое-что

Замечательно, это главное)

[Игорь]

Rikitikiti:

назрел такой вопрос, одни пишут рhp живее всех живых и лучше, но труднее, другие, что python легче, но возможностей меньше. Истина где?

1. пхп конечно ещё долго будет жить. На нём столько всего написано, что он долго ещё не умрёт. Да и поддерживается всё ещё. В общем рано хоронить.
2. Пхп не труднее, чем питон. Плюс минус одинаково.
3. Возможностей у питона не меньше. А, скорее, даже больше. Смотря как измерять. Например на питоне можно написать не только сайт, но и обычную программу для компьютера (и их немало, тот же дропбокс вроде как). На пхп - нельзя.
2. Выбор пхп или питон нужно делать в каждом конкретном случае отдельно. Но когда у вас нет никаких аргументов за тот или иной язык, разумнее выбирать питон. Особенно для начинающего программиста. Просто потому что пхп кривой/косой, а питон хоть и не идеал, но однозначно прямее и красивее. А в начале программисту всё же лучше не приобретать плохих привычек и не привыкать к кривизне. Вкус нужно развивать с самого начала.

[Игорь]

devalone:

Проект с подобным функционалом будет стоить немало, но не миллионы, как вам тут рассказали,

Кстати, к вопросу о стоимости. Если вы мне готовы сделать аналог Дуолинго за миллион рублей и разумный срок (скажем год) - я готов заказать.

[devalone]

Rikitikiti:

devalone: и Вам спасибо за ваши ответы. По вашему резюме поняла, что вы имеете профильное образование

И всё таки программированию(и теории и практике) я научился самостоятельно.

[devalone]

Например на питоне можно написать не только сайт, но и обычную программу для компьютера (и их немало, тот же дропбокс вроде как). На пхп - нельзя.

Вообще говоря можно, даже есть какой-то фреймворк для этого, но никто в здравом уме так не делает.
Но и на питоне десктоп приложения тоже пишут не слишком часто, обычно используют C++(Qt) или C#

[Игорь]

devalone:

Вообще говоря можно, даже есть какой-то фреймворк для этого, но никто в здравом уме так не делает.

Ну т.е. на практике не осуществимо.

Но и на питоне десктоп приложения тоже пишут не слишком часто

Гораздо чаще, чем на пхп. И, вполне может выйти, что довольно часто. Навскидку - я вот каждый день пользуюсь дропбоксом и популярной youtube-dl.
А ещё питон используется для внутреннего скриптинга в приложениях и играх. В общем на практике возможности и использование питона гораздо шире, чем пхп.
Питон всё же язык общего назначения, а пхп - специализированный под вёб. При этом забавно то, что не смотря на свою специализированность под вёб, пхп на практике в вёбе ничем не лучше (а в общем-то даже хуже), чем питон. Вот такой парадокс. А всё потому, что пхп изначально не задумыавлся как язык. Изначально это были просто костыли для вёба - такого, каким этот вёб был в конце прошлого века. И вот этот отпечаток первородных костылей пхп несёт на себе сквозь года и версии.

, обычно используют C++(Qt) или C#

Гуй на питоне пишут используя ту же Qt.
Думаю под мак или линух на C# не много есть софта, а значит это уже совсем другая история.

Answer 2

[xmoonlight]

Не слушайте никого.
Просто берите и изучайте простую библиотеку Crafty.js
PS: Внизу страницы - красный квадратик уже прыгает и управляется курсором клавиатуры

Comments

[devalone]

ТС не это хочет, а

что-то подобного, как у Duolingo, то есть есть некая карта или древо, бейджи и лидерборд, прогресс, coins, покупка coins или просмотр рекламы

Причём тут тег "разработка игр" ума не приложу.

[Rikitikiti]

спасибо!

[Павел Корнилов]

Да зачем изучать какие-то библиотеки, когда, изучив натив, можно не сложно реализовать тот же прыжок. И не только его.
Мой пример - https://js-master.ru/?Javascripts___Бесплатные_скр...

Его код:

<div class="result pointer" onclick="jump(this);" style="background:#eee; display: inline-block; padding: 5px;">
  Прыгучий объект
 </div>

 <script type="text/javascript">
 function jump (el) {
  el.style.position='relative';
  var i=0, an= setInterval(function() {
   if (i>=Math.PI) {
    clearInterval(an);
    el.style.top= 0;
   } else el.style.top= -100*Math.sin(i) + 'px';
   i+=.1;
  },25)
 }
 </script>