Django Rest API x Flutter

Удивительно, что две разные технологии могут работать вместе.
В этой статье мы узнаем, как можно использовать django rest API в приложении на Flutter. Звучит заманчиво? Давайте узнаем, как…

• Сначала мы создадим rest api с помощью django rest framework.
• С помощью этих двух строк мы создали проект django и приложение django.

Django-admin startproject flutterApi .
Django-admin startapp api

• Теперь нам нужно установить django rest framework

pip install djangorestframework

после этого добавьте

‘rest_framework’ в

flutterApi/settings.py
в вашей базе данных

• Теперь нам нужно создать модель для нашей базы данных django. Это простая модель данных.

api/models.py

Теперь мы перенесем модель с помощью этих двух строк

py manage.py makemigrations
py manage.py migrate

теперь модель мигрирована.

Мы зададим настройки url для нашего api.

flutterapi/urls.py мы создаем обозначение api

После этого мы создадим файл urls.py в папке ‘api’ в структуре вашего проекта.

• В этом файле мы создадим урлы api get, post, update, delete.

После этого мы должны создать сериализаторы для api.

• Создайте файл serializers.py в виде api/serializers.py

затем напишите код следующим образом.

Теперь давайте напишем фактический код для разработки api
сначала перейдите к api/views.py

Здесь мы будем писать код.
Сначала импортируем модели и сериализаторы.

Код…

• Теперь зарегистрируйте свою модель в файле api/admin.py

Итак, мы закончили создание API! Теперь давайте протестируем его.
сначала запустите сервер django, написав в консоли следующий код

py manage.py runserver

вы должны увидеть что-то вроде этого

сервер находится на http://127.0.0.1:8000/.hit в вашем браузере.

Сначала вы увидите эту ошибку, но не паникуйте.

просто нажмите http://127.0.0.1:8000/api, чтобы увидеть все возможные URL.
Вы должны увидеть что-то вроде этого.

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

py manage.py createsuperuser

Используйте это для создания пользователя admin. Введите имя пользователя, пароль и нажмите enter. После этого запустите сервер снова.

http://127.0.0.1:8000/admin

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

После входа вы увидите

нажмите продукты и затем нажмите добавить.

заполните это некоторыми значениями. нажмите сохранить.
пример:

Product name: OnePlus Nord 2 5G 12GB/256GB

Price: 40000

Prdoduct link = https://www.pickaboo.com/oneplus-nord-2-5g-12gb-256gb.html

Image: https://azse77seaprodsa.blob.core.windows.net/b2b-dr-
pickaboocdn/media/catalog/product/cache/ad6eca43ef1a34982ffeb01940d91d5b/n/o/nord-2-5g-12gb-256gb-7-16-2022.jpg

После сохранения данных перейдите по ссылкам api.

Если мы перейдем по ссылке http://127.0.0.1:8000/api/product-list/, как по урлам, то увидим данные в формате json, как здесь.

Итак, создание rest api завершено! Теперь нам нужно подготовить flutter-часть!

Приложение Flutter

Для создания приложения flutter мы используем

flutter create app_name
ex: flutter create django_rest_api_x_flutter 

В файл pubspec.ymal вашего проекта flutter добавьте эти зависимости

• Я буду использовать управление состояниями GetX для более эффективного управления данными.

• Я также использовал flutter_staggered_grid_view для использования в своем проекте. Это очень эффективно для создания сеток во flutter.

Я не собираюсь рассказывать о проектировании в flutter. В этом блоге я буду рассказывать о моделировании и http.
Вы можете скачать или форкнуть проект отсюда.

https://github.com/Miskat-UL/GetX-rest-api-flutter

не забудьте поставить ему звезду!

Теперь в вашем проекте flutter структурируйте файлы следующим образом

В файле remote_service.dart мы будем импортировать пакеты http.

Мы должны использовать модуль http следующим образом.
Для cors мы использовали django cors, но сейчас это не важно.
просто используйте origin в качестве заголовков, чтобы браузер мог получить доступ к xml-запросам.
код находится здесь.

• В product_controller.dart мы создаем контроллер getx.

• Мы почти закончили. чтобы узнать больше о коде, воспользуйтесь форком проекта на github.

• После этого запустите проект flutter из ide или cmd.

• не забудьте запустить ваш сервер django

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

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