Create Demo functionality

igorsimb commented 7 months ago

Demo user is created for demo session duration
TaskForm for the user (max 10-50 SKUs)
ScrapeIntervalForm for the user:
- Define limits for interval (e.g. every 30 seconds, max 5 times)
Demo user is deleted after demo session is done or every 24 hours

igorsimb commented 5 months ago

Would be nice to have an easy ability for user to give feedback.

igorsimb commented 4 months ago

1. Auto-Registration and Demo User Creation

[x] Add with an additional boolean field to CustomUser (is_demo_user) to track demo users.
- [x] Test it
[x] Implement auto-registration for demo users when they click the “Demo” button.
- [x] Test it
[x] Generate a unique identifier (e.g., UUID) for the demo user, e.g. demo_user_UUID.
[x] Log in the demo user automatically without additional steps.
- [x] Test it
[x] Set is_demo_user to True for the demo user.

2. Landing Page and Demo Button

[x] Add a prominent “Demo” button to encourage users to explore the app.
[x] Ensure that clicking the “Demo” button triggers the auto-registration process.

3. Demo Guidance and Limitations

3.1 Limitations

[x] 10 SKUs
[x] 5 manual updates
[x] 5 auto updates
[x] 12 hours duration of the demo session
Test Limitations
[x] SKU Limit Verification: Add 11 SKUs and verify that the 11th SKU cannot be added due to the limitation of 10 SKUs.
[x] Manual Updates Limit: Attempt 6 manual updates and verify that the 6th manual update is not processed.
[x] Auto Updates Limit: Ensure that after 5 auto updates, the 6th auto update is not executed.
[x] Session Duration: Verify that the demo session lasts for 12 hours and expires afterward.

3.2 Guidance

[ ] Display tooltips with arrows to guide users on where to click (e.g., input fields, buttons).
[ ] Suggest 10 SKUs for the demo user (randomly selected from a hidden pool of 100 SKUs).
[x] Show a message indicating that the user is in demo mode. Display a subtle message near the top of the page (e.g., in the header or navigation bar). Example: “You are currently in demo mode. All data will be erased after your session.”
[x] Implement rate limiting for parsing requests (e.g., 5 requests per demo user, then delete the interval and disable this functionality).
[x] Set a demo session duration (e.g., 12 hours).
[x] Automatically erase all data associated with demo users after session is over (see below)

4. Erasing data

Session Duration and Deactivation

When a demo user logs in (auto-registration), set is_demo_user to True.
- [x] Test it
Use a scheduled task (e.g., Celery periodic task) to run every 12 hours (or your chosen duration).
In the task, check the timestamp of the last user activity (e.g., last login or last action).
If the session duration exceeds 12 hours, deactivate demo_user.
- [x] Test it
  Data Cleanup Task
[x] Create another scheduled task (e.g., daily) that runs once a day.
[x] This task identifies all demo users with is_demo_user=False.
[x] Delete their parsed items, history, and any other related data.
[x] Finally, make the demo user inactive.
[x] Use the view for superusers to test this functionality

5. Encourage users to register fully and use the app beyond the demo (optional)

[ ] Message in the header or navigation bar: “Unlock more features by registering!”
[x] Contextual promts: Message after successful parsing: “All demo items are erased after session ends. Want to save your own items forever? Register now!”
[ ] Demo Completion Message: When the demo session ends, display a message: “You’ve experienced our demo! Register now start tracking your items.”
[ ] Have a "Register" button always visible and accessible everywhere.

6. Testing

[x] Test all of the above

igorsimb commented 4 months ago

Implement auto-registration with auto login

We can create a separate view that creates a user and logs in, something like in Ez2Task (except creating a user first)

def demo_user_login_view(request):
    demo_user = authenticate(email=str(os.getenv('LOGIN_DEMO_KEYS')), password=str(os.getenv('PASSWORD_DEMO_KEYS')))
    login(request, demo_user)
    return redirect('main')

igorsimb commented 4 months ago

Onboarding Tooltips

For arrows we can use these: https://devsnap.me/css-arrows https://freefrontend.com/css-arrows/

Use onboarding tooltips to explain the interface: https://userpilot.com/blog/onboarding-tooltips-saas/ Seems to be the one to go: https://useronboarding.academy/post/tooltip

https://shepherdjs.dev/ is my favorite out of them.

Download the js and css files of shepherdjs from cdn: https://github.com/wilmerm/django-tours/blob/main/src/tours/settings.py#L10
put them into the static folder
link to the files in base.html, e.g. <script src="{% static 'js/shepherd.min.js' %}"></script>

Example of use of highlightClass: https://github.com/search?q=repo%3Ashepherd-pro%2Fshepherd+highlightClass&type=code (change highlightClass to anything to see use examples)

igorsimb commented 4 months ago

Add periodic task

https://docs.celeryq.dev/en/stable/userguide/periodic-tasks.html#entries For example, celery.py:

from datetime import timedelta

...

def setup_periodic_tasks(sender, **kwargs):
    # Calls say_hi every 10 seconds
    sender.add_periodic_task(timedelta(seconds=10), say_hi, name='say hi every 10')

@app.task
def say_hi():
    print("Hello from Celery to Igor!")

And the actual task could be something like this:

@app.task
def check_expired_demo_users():
    users_to_check = user.objects.filter(is_demo_user=True)
        for user_to_check in users_to_check:
            if not user_to_check.is_active_demo_user:
                user_to_check.is_demo_active = False
                # setting user to inactive will log them out - useful for prod
                # user_to_check.is_active = False
                user_to_check.save()
                print(f"{user_to_check.is_demo_active=} ({user_to_check=})")
            else:
                print(f"Demo not yet expired for {user_to_check}")

igorsimb commented 3 months ago

Demo Tour Plan

How to display tour only once: https://yonkov.github.io/post/display-shepherd-only-once/

1. Initial Splash screen

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

2. Просим нажать на кнопку `+`

Тут мы можем добавить новые товары для парсинга. Нужен артикул товара. Например, добавить эти <...> или можете добавить любые свои. Максимум 10. После этого нажмите на "Добавить" (proceed after clicking)

3. Показываем таблицу товаров

Здесь видны все ваши товары, а также их текущая цена на Wildberries, разница с предыдущим парсингом (на данный разницы нет, т.к. это наш первый парсинг) и время последнего обновления.

4. Показываем оба Tab'a.

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

5. Обновляем товар вручную

(просим выделить несколько товаров и кликнуть "Обновить вручную") - proceed after clicking.

6. Показываем результат обновления (attachTo колонка "Обновлено")

Отлично! Мы видим, что дата последнего обновления изменилась.

7. Создаем Автоматическое расписание

(выделить несколько товаров и запустить расписание (proceed after clicking).

8. Показываем инфу о расписании

Отлично! Здесь видно текущее расписание, а также дата следующего парсинга.

9. Финальный spash screen

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

igorsimb commented 3 months ago

Next stap after page is reloaded

You can achieve this by using session storage or cookies to track the state of the tour across page reloads. Here's a simple example of how you might do it with session storage:

// Initialize the tour
var tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    }
  }
});

// Add your steps
tour.addSteps([
  {
    id: 'step1',
    text: 'This is step 1',
    // other options...
  },
  {
    id: 'step2',
    text: 'This is step 2',
    // other options...
  },
  {
    id: 'step3',
    text: 'This is step 3',
    // other options...
  }
]);

// Check session storage to see where to start the tour
var currentStep = sessionStorage.getItem('currentStep');
if (currentStep) {
  tour.show(currentStep);
} else {
  tour.start();
}

// Listen for the 'complete' event and clear the session storage
tour.on('complete', function() {
  sessionStorage.removeItem('currentStep');
});

// Listen for the 'show' event and update the session storage
tour.on('show', function() {
  sessionStorage.setItem('currentStep', tour.getCurrentStep().id);
});

In this example, the currentStep is stored in the session storage every time a new step is shown. If the page is reloaded, the tour will start from the step stored in the session storage. If the tour is completed, the currentStep is removed from the session storage.

Please note that this is a simple example and might not cover all edge cases. You might need to adjust it to fit your specific needs. Also, be aware that session storage is cleared when the page session ends. If you need to persist the tour state across multiple sessions, consider using cookies or localStorage instead.

I hope this helps! Let me know if you have any other questions. 😊

igorsimb / mp-monitor