Удивительно, что две разные технологии могут работать вместе.
В этой статье мы узнаем, как можно использовать 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
приложение должно запуститься должным образом, а конечный результат будет выглядеть примерно так
Спасибо, что прочитали этот блог. Надеюсь, вы чему-то научились.
поставьте лайк и поделитесь с друзьями!