Создайте приложение Full Stack Serverless с использованием функций облака FireBase.

В этой статье я собираюсь продемонстрировать, как создать полное приложение стека без сервера. Сначала мы собираемся создать неверную часть с помощью 3 конечной точки_ (4 на самом деле, 4-й конечной точке будет вашим домой) _, то мы создаем минимальное приложение для покупок с реагированием, которое будет использовать эти конечные точки и сохраняться в базе данных. Отказ

Вы можете найти REPOS проекта для обоих Berly-Firebase и React App Отказ

Что такое безверенно? По словам Википедия , Serverless – это модель выполнения облака, в которой облачный провайдер Динамически управляет распределением машиностроения Отказ Ценообразование основано на фактическом количестве ресурсов, потребляемых приложением, а не на предварительно приобретенных единицах потенциала. Решения по управлению сервером и планирование потенциала полностью скрыты от разработчика.

Смертный может быть объяснен на перспективе людей, использующих воду. Вода используется на необходимости понадобиться, когда люди жаждут, они включают кран и пить воду. Как только они сделают, они закрывают кран до тех пор, пока не будет необходимости снова использовать воду. Это абстрактное объяснение того, что достигают безсетецов, ресурсы доступны только тогда, когда их запрашиваются.

Что такое функция облака Firebase Serverless? Вместь настройки сервера, запросов на маршрутизацию, определение ресурсов для отдыха, а затем создание методов для получения, опубликованного, удаления и поставленного, можно использовать уже существующий сервер, предоставляемый Google.

Согласно документации по функциям облака FireBase:

Функции облачных для FireBase Давайте автоматически запустим Backend Code в ответ на события, вызванные функциями FireBase и запросами HTTPS. Ваш код хранится в облаке Google и работает в управляемой среде. Нет необходимости управлять и масштабировать свои собственные серверы.

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

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

Четырею причины, по которым вы должны пройти безверенно.

Большинство разработчиков Frontend пишите бизнес-логику в приложении. Посторонние глаза могут попытаться обратить вспять инженер и изменить код вашего приложения.
Вместо того, чтобы иметь логику, которая подвержена периодической смене, когда приложение необходимо разработать в другой платформе (Web/Mobile), бизнес-логика может быть легко абстрагирована на часть функции и вставлена на сервер, тем самым выставляя эту функцию универсально.
Вам всегда нужно было опубликовать новую версию вашего приложения всякий раз, когда вы измените кодовую базу вашего приложения (мобильное приложение) и поведение.
Масштабируемость больше не будет проблемой. Вам будет взиматься только за время выполнения, что означает, что количество не будет взиматься за неиспользованное пространство.

Постановка задачи

Традиционно вам придется развернуть свой личный код на задний сервер, который вы управляете. Тебе также придется построить полный сервер из пролеги, используя популярные технологии/рамки, такие как узел/экспресс, RUBY/RUBY на рельсах, Python/Django, затем подключитесь к базе данных, такую как Postgres, MongoDB, затем хост на Heroku или другие услуги веб-хостинга.

Затем приложение будет использовать API для связи с сервером и запросами на выпуске.

Решение

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

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

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

Требования к созданию этого приложения:

Основное понимание языка JavaScript.
Учетная запись Firebase
Node.js установлен
Использованные библиотеки: CORS, AXIOS
Почтальон (для тестирования конечных точек API)

По состоянию на время написания этого поста, облачные функции все еще технически в бета-версии и имеют некоторые области для улучшения. Во-вторых, он поддерживает только Node.js.

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

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

node --version && npm — version

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

Если вы не знакомы с Firebase, не волнуйтесь – Firebase API довольно просты в использовании. Infact, это должна быть хорошей возможностью для вас, чтобы научиться грязными руками с помощью Firebase. TutorialSpoint . Еще один отличный ресурс, который вы могли бы использовать, чтобы вы начали.

Этот учебник будет разделен на 3 этапа.

Настройка Firebase.
Создание конечных точек.
Создание минимального приложения RACT, чтобы потреблять конечные точки.

Фаза 1

Создание проекта FireBase

Перейти к https://firebase.google.com/
Войдите в систему с учетной записью Google или создайте учетную запись, чтобы войти, если у вас нет.
Перейти к консоли.

Добавьте проект, дайте ему имя и нажмите на Создать проект

Как только вы создали проект, вы будете направлены на консоль Firebase

Настройка FireBase локально.

На вашем компьютере откройте терминал и создайте новую папку.

Давайте назовем эту папку Shop-list-Server. Перейдите к папке

mkdir shop-list-server
cd shop-list-server

После установки NODE.JS и NPM установите Firebase CLI через NPM:

NPM Установить -G FireBase-Tools

Это устанавливает в глобально доступную команду FireBase.

Если команда не удалась, вам может потребоваться изменить разрешения NPM.

Чтобы инициализировать ваш проект:

Запустите FireBase Войдите, чтобы войти в систему и аутентифицировать инструмент FireBase.

Логин Firebase

Разрешить Firebase собирать анонимное использование CLI и информацию об ошибках?

Yes

Это откроет ваш браузер для вас, чтобы выбрать учетную запись

Как только вы вошли в систему, запустите функции init init.

firebase init functions

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

На каком языке вы хотели бы использовать для записи облачных функций?

Javascript

Вы хотите использовать Eslint, чтобы поймать вероятные ошибки и стиль соблюдения?

Хотите установить зависимости с NPM сейчас?

Это будет настроить проект и установить все ваши зависимости после завершения установки, откройте папку «Ваша папка», она должна выглядеть так:

Создание первой конечной точки Мы создаем конечную точку, определив функцию, которая обнажает URL в облаке.

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

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

cd functions

Откройте файл index.js и вставьте следующий фрагмент кода

exports.helloWorld = functions.https.onRequest((req, res) => {

res.send("Hello from a Serverless Database!");

});

Функции .https используется для создания функции, которая обрабатывает события HTTP. Обработчик событий для функции HTTP слушает для Onrequest () мероприятие.

Onrequest () Принимает аргументы, объект запроса дает вам доступ к свойствам HTTP-запроса, отправленного клиентом, и объект ответа дает вам способ отправить ответ на клиента.

Запустите любой из следующей команды на вашем терминале. Firebase Развертываете или Firebase Развертывающие функции: helloworld

Как только приложение было успешно развернуто, URL будет сгенерирован

URL сгенерирован для меня https://us-central1-shop-list-b60aa.cloudfunctions.net/helloworld

Чтобы проверить, скопируйте свой URL в ваш браузер и введите сгенерированный URL для вас, он должен выглядеть так:

https://us-central1-xxxxxxxxxxxxxxxxxxxx.cloudfunctions.net/helloWorld

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

Фаза 2

Создание конечных точек.

Теперь, когда мы создали конечную точку HellowOrd, пришло время серьезно. Мы будем создавать 3 конечных точек, которые добавит список магазинов, получите весь список магазинов из базы данных и удалите элемент.

Post/your_url/additem
Получить/your_url/getitms
Удалить/your_url/inhiteTem
Обновление/your_url/updateiTem

Однако давайте сначала настроим базу данных.

Предварительная настройка

1. Включить CORS По умолчанию наш сервер не примет запрос от любого общедоступного контента и отрицает доступ к любому универсальному JavaScript/браузеру, кроме мы включаем CORS.

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

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

Мы не будем углубиться в CORS, так как оно за пределами объема этой статьи.

Чтобы включить CORS, мы устанавливаем и настраиваем его. Откройте свой терминал NPM I -S CORS

Тогда мы импортируем и настроим это const ('CORS') ({Origin: True});

Это базовая конфигурация CORS, {Происхождение: правда} Команда автоматически позволяет сделать запросы по перекрестным источникам

2. Настройте базу данных Прежде чем создать URL-адрес, где будут сохраняться данные, путь базы данных должен быть настроен

const admin = require('firebase-admin');
admin.initializeApp();

const database = admin.database().ref('/items');

Теперь ваш index.js должен выглядеть так

1 сообщение/your_url/AddiTem Эта функция будет генерировать URL, который позволит нам создать товар магазина и сохраняться в базе данных.

exports.addItem = functions.https.onRequest((req, res) => {
 return cors(req, res, () => {
  if(req.method !== 'POST') {
   return res.status(401).json({
    message: 'Not allowed'
   })
  }
  
  console.log(req.body)
  
  const item = req.query.item
  database.push({ item });
  let items = [];
  return database.on('value', (snapshot) => {
   snapshot.forEach((item) => {
    items.push({
     id: item.key,
     items: item.val().item
    });
   });
   res.status(200).json(items)
  }, (error) => {
   res.status(error.code).json({
    message: `Something went wrong. ${error.message}`
   })
  })
 })
})

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

CORS является функцией, которая занимает 3 параметра; req , res и Анонимная функция где все или логика будет проживать.

return cors(req, res, () => {
 // …

});

Этот фрагмент ниже, определяет только метод Post, поскольку мы пишем в базу данных

if(req.method !== 'POST') {
  return res.status(401).json({
   message: 'Not allowed'
  })
 }

Для цели отладки вы можете увидеть журналы событий в разделе «Журналы» функций

console.log(req.body)

Метод FireBase для сохранения данных

const item = req.body.item

database.push({ item });

Это вернет список данных после того, как он успешно сохранен.

return database.on('value', (snapshot) => {
   snapshot.forEach((item) => {
    items.push({
     id: item.key,
     items: item.val().item
    });
   });

res.status(200).json(items)
  }, (error) => {
   res.status(error.code).json({
    message: `Something went wrong. ${error.message}`
   })
})

Последний код должен выглядеть так

const functions = require("firebase-functions");
const cors = require('cors')({ origin: true });
const admin = require('firebase-admin');

admin.initializeApp();

const database = admin.database().ref('/items');

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from a Severless Database!");
});

exports.addItem = functions.https.onRequest((req, res) => {
  return cors(req, res, () => {
    if(req.method !== 'POST') {
      return res.status(401).json({
        message: 'Not allowed'
      })
    }
    console.log(req.body)
  
    const item = req.body.item

    database.push({ item });

    let items = [];

    return database.on('value', (snapshot) => {
      snapshot.forEach((item) => {
        items.push({
          id: item.key,
          items: item.val().item
        });
      });
      
      res.status(200).json(items)
    }, (error) => {
      res.status(error.code).json({
        message: `Something went wrong. ${error.message}`
      })
    })
  })
})

Запустите следующую команду на вашем терминале Firebase Развертываете или Firebase Развертывающие функции: AddiTem

Firebase Развертываете Развертывает все функции в вашем коде. Firebase Развертывающие функции: AddiTem Развертывает одну определенную функцию.

Как только приложение было успешно развернуто, будет сгенерирован URL.

URL-адрес, сгенерированный для вас, будет выглядеть так:

https://us-central1-xxxxxxxxxxxxxxxxxxxx.cloudfunctions.net/addItem

Почтальон будет использоваться для тестирования на этот раз.

Метод, отличный от Пост бросит ошибку.

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

Чтобы увидеть опубликованный товар, войдите в консоль Firebase.

В разделе «Разработка» перейдите в базу данных

В разделе «Разработка» перейдите к функциям, чтобы увидеть все функции, которые мы создали в нашей среде узла.

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

Нажмите на Журналы Вкладка, это где мы видим все console.log Заявление мы создаем в коде. Во-вторых, эта вкладка отображает все ошибки, которые могут возникнуть в коде. Воспользуйтесь этим.

Добавить больше предметов магазина в список.

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

2 get/your_url/getitems

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

Добавьте следующий фрагмент кода ниже;

exports.getItems = functions.https.onRequest((req, res) => {
  return cors(req, res, () => {
    if(req.method !== 'GET') {
      return res.status(404).json({
        message: 'Not allowed'
      })
    }

    let items = [];

    return database.on('value', (snapshot) => {
      snapshot.forEach((item) => {
        items.push({
          id: item.key,
          items: item.val().item
        });
      });
      
      res.status(200).json(items)
    }, (error) => {
      res.status(error.code).json({
        message: `Something went wrong. ${error.message}`
      })
    })
  })
})

Этот фрагмент ниже, определяется только метод получения

if(req.method !== 'GET') {

return res.status(401).json({

message: 'Not allowed'
 })
}

Запустите следующую команду на вашем терминале. Firebase Развертываете или Firebase Развертывающие функции: GetItems

Как только приложение было успешно развернуто, URL будет сгенерирован URL, сгенерированный для вас, будет выглядеть так; https://us-central1-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.Cludfunctions.net/getitems.

Давайте тестируемся с почтальоном.

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

Сухие средства не повторяют себя

Как разработчики, это хорошая практика, чтобы следовать принципу дизайна, где каждый строительный блок (это может быть класс, модуль, объект или даже функция) системы, должны иметь только одну ответственность. Это известно как Принцип одной ответственности (SRP)

Рефакторинг нашего кода

В настоящее время наш код выглядит как

const functions = require("firebase-functions");
const cors = require('cors')({ origin: true });
const admin = require('firebase-admin');

admin.initializeApp();

const database = admin.database().ref('/items');

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from a Severless Database!");
});


exports.addItem = functions.https.onRequest((req, res) => {
  return cors(req, res, () => {
    if(req.method !== 'POST') {
      return res.status(401).json({
        message: 'Not allowed'
      })
    }
    console.log(req.query)
  
    const item = req.query.item

    database.push({ item });

    let items = [];

    return database.on('value', (snapshot) => {
      snapshot.forEach((item) => {
        items.push({
          id: item.key,
          items: item.val().item
        });
      });
      
      res.status(200).json(items)
    }, (error) => {
      res.status(error.code).json({
        message: `Something went wrong. ${error.message}`
      })
    })
  })
})


exports.getItems = functions.https.onRequest((req, res) => {
  return cors(req, res, () => {
    if(req.method !== 'GET') {
      return res.status(401).json({
        message: 'Not allowed'
      })
    }

    let items = [];

    return database.on('value', (snapshot) => {
      snapshot.forEach((item) => {
        items.push({
          id: item.key,
          items: item.val().item
        });
      });
      
      res.status(200).json(items)
    }, (error) => {
      res.status(error.code).json({
        message: `Something went wrong. ${error.message}`
      })
    })
  })
})

Если вы внимательно посмотрите на код выше, мы возвращаем результат из базы данных в обоих AddiTem и GetITem функция. Это может быть легко сделано путем извлечения кода в функцию.

Рефакторинг

const functions = require("firebase-functions");
const cors = require('cors')({ origin: true });
const admin = require('firebase-admin');

admin.initializeApp();

const database = admin.database().ref('/items');

exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from a Severless Database!");
});

const getItemsFromDatabase = (res) => {
  let items = [];

  return database.on('value', (snapshot) => {
    snapshot.forEach((item) => {
      items.push({
        id: item.key,
        item: item.val().item
      });
    });   
    res.status(200).json(items);
  }, (error) => {
    res.status(error.code).json({
      message: `Something went wrong. ${error.message}`
    })
  })
};

exports.addItem = functions.https.onRequest((req, res) => {
  return cors(req, res, () => {
    if(req.method !== 'POST') {
      return res.status(401).json({
        message: 'Not allowed'
      })
    };
    const item = req.body.item;
    database.push({ item });
    getItemsFromDatabase(res)
  });
});

exports.getItems = functions.https.onRequest((req, res) => {
  return cors(req, res, () => {
    if(req.method !== 'GET') {
      return res.status(401).json({
        message: 'Not allowed'
      });
    };
    getItemsFromDatabase(res)
  });
});

GetItmsFromDatabase () Функция помощника, которая была создана для абстрактных повторных кодов от AddiTem и GetItems Отказ

3 Удалить/your_url/deleteitem

Эта функция будет генерировать URL, который удалит элемент.

Добавьте следующий фрагмент кода

exports.delete = functions.https.onRequest((req, res) => {
  return cors(req, res, () => {
    if(req.method !== 'DELETE') {
      return res.status(401).json({
        message: 'Not allowed'
      })
    }
    const id = req.query.id
    admin.database().ref(`/items/${id}`).remove()
    getItemsFromDatabase(res)
  })
})

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

const id = req.query.id

Конечная точка Firebase для удаления ресурса из базы данных.

admin.database().ref(`/items/${id}`).remove()

GetItmsFromDatabase () Метод HELPER, который мы создали ранее, были повторно использованы внутри функции DeleteiteM, таким образом, после сухого принципа.

Запустите следующую команду на вашем терминале. Firebase Развертываете или Firebase Развертывающие функции: DELETEITEM

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

Мы используем идентификатор каждого элемента и передаем его в качестве параметра на заголовок.

Используйте метод удаления

Используйте параметры не тело

Исходный код доступен на Github: Здесь , не стесняйтесь вилкости и внести свой вклад в это.

Фаза 3

Создайте приложение React, чтобы потреблять конечную точку.

Примечание: Если вы не установили приложение Create-ract-App, вы можете сначала запустить эту команду NPM Установить -G Create-raction-App

На вашем терминале запустите

create-react-app shop-list-client

После установки,

cd shop-list-client

потом

npm start

NB: Реакция реагирования, используемая в этом руководстве, моделируется после Оригинальный создатель Основная часть ее использовалась для иллюстрации. Вы можете проверить это здесь Если вы хотите узнать больше о проекте.

Откройте файл public/index.html, добавьте следующий фрагмент кода, чтобы включить загрузку

Bootstrap CSS Ссылка в голова тег

Jquery и bootstrap js Ссылка в Тело тег

Исходный код для index.html Файл

Установка Axios.

npm i -S axios

Наконец мы используем 3 конечных точка, которые мы создали в этапе 2.

Откройте свою папку, в файле SRC/App.js, удалите все и замените следующий фрагмент кода ниже.

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      buyItems: [],
      message: '',
    }
  }

  componentDidMount() {
    return axios.get('https://us-central1-shop-list-b60aa.cloudfunctions.net/getItems').then((response) => {
      this.setState({
        buyItems: response.data
      })
    })
  }

  addItem(event) {
    event.preventDefault()
    const { buyItems } = this.state;
    const newItem = this.newItem.value;

    const isOnTheList = buyItems.includes(newItem)

    if (isOnTheList) {
      this.setState({
        message: 'This item is already on the list'
      })

    } else {
      return newItem !== '' && axios.post('https://us-central1-shop-list-b60aa.cloudfunctions.net/addItem', { item: newItem }).then((response) => {
        this.setState({
          buyItems: response.data,
          message: ''
        })
        this.addForm.reset()
      })
    }

  }

  removeItem(item){
    const newBuyItems = this.state.buyItems.filter(buyItems => {
      return item !== buyItems
    })

    return axios.delete(`https://us-central1-shop-list-b60aa.cloudfunctions.net/deleteItem?id=${item.id}`).then((response) => {
      this.setState({
        buyItems: response.data
      })
    })

    if(newBuyItems.length === 0){
      this.setState({
        message: 'No Item on the list, add some'
      })
    }
  }

  clearAll(){
    this.setState({
      buyItems: [],
      message: 'No Item on the list, add some'
    })
  }

  renderItems() {
    let id = 1;
    const { buyItems, message } = this.state;

    return (
      buyItems.length > 0 &&
      
          {
            buyItems.map(item => {
              return (
                
              )
            })
          }
        
        Shopping List
        
          
            #
            Item
            Action
          
        
        
                  {id++}
                  {item.item}
                  
                    
                  
                
        
          
             
            
              
            
          
        
      
    )
  }



  render() {
    const { buyItems, message } = this.state;
    return (
      
        Shopping List
        

           {this.addForm = input}} className="form-inline" onSubmit={this.addItem.bind(this)}>
            
              Add New Item
               {this.newItem = input}}
                type="text" className="form-control" id="newItemInput" />
            
            
          
          {
            (message !== '' || buyItems.length === 0) && {message}
          }

         {this.renderItems()}

        
      
    );
  }
}

export default App;

Shopping List
#	Item	Action
{id++}	{item.item}

В конструкторе мы устанавливаем состояние Publitems в пустой массив.

  constructor(props) {
    super(props);

    this.state = {
      buyItems: [],
      message: '',
    }

В методе ComponentDidMount мы производим HTTP-запрос с Axios, чтобы извлечь список предметов с моим URL https://us-central1-shop-list-b60aa.cloudfunctions.net/getitems Как только компонент установлен, он заполнил бы состояние BuyItem с данными реагирования.

  componentDidMount() {
    return axios.get('https://us-central1-shop-list-b60aa.cloudfunctions.net/getItems').then((response) => {
      this.setState({
        buyItems: response.data
      })
    })
  }

Замените URL-адрес

Метод AddiTem добавляет новый элемент в список. Во-первых, он получает состояние BuyItem и значение NewITEM от ввода пользователя, то он проверяет, уже существует ли NewITEM в списке. Если товар не существует, он опубликует Newitem с https://us-central1-shop-list-b60aa.cloudfunctions.net/additem Конечная точка и установите состояние BuyItem в новый ответ из базы данных.

  addItem(event) {
    event.preventDefault()
    const { buyItems } = this.state;
    const newItem = this.newItem.value;

    const isOnTheList = buyItems.includes(newItem)

    if (isOnTheList) {
      this.setState({
        message: 'This item is already on the list'
      })

    } else {
      return newItem !== ' ' && axios.post('https://us-central1-shop-list-b60aa.cloudfunctions.net/addItem', { item: newItem }).then((response) => {
        this.setState({
          buyItems: response.data,
          message: ''
        })
        this.addForm.reset()
      })
    }

  }

Замените URL-адрес

RemostITem Способ удаляет элемент из базы данных.

  removeItem(item){
    const newBuyItems = this.state.buyItems.filter(buyItems => {
      return item !== buyItems
    })

    return axios.delete(`https://us-central1-shop-list-b60aa.cloudfunctions.net/deleteItem?id=${item.id}`).then((response) => {
      this.setState({
        buyItems: response.data
      })
    })

    if(newBuyItems.length === 0){
      this.setState({
        message: 'No Item on the list, add some'
      })
    }
  }

ПОЛУЧАТЬ

ПОЧТА

Там вы идете!

Исходный код для приложения Frontend доступен на Github: Здесь , не стесняйтесь вилкости и внести свой вклад в это.

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

Я не могу дождаться, чтобы увидеть, что вы строите. 🔥.

Взять домашнее задание для вас 1 Написать функцию, которая генерирует URL для обновления элемента в списке покупок. 2 на переднем конце; Создайте кнопку обновления на интерфейсе пользователя. Напишите метод, называемый UpdateItem, который потребляет URL-адрес обновления, который вы только что создали.

Shopping List

Читайте ещё по теме: