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

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

Начиная

Прежде чем мы погрузимся в создание этого проекта, вы должны иметь базовые знания о Javascript, React, Node и MongoDB. В этой статье мы будем делать почтовый запрос к нашему API, в котором отправленное изображение будет преобразовано с помощью Cloudinary и сохранено в нашей базе данных.

Мы собираемся сосредоточиться на интерфейсе Reactjs, API был создан с помощью Nodejs, вы можете ссылаться на мою статью здесь, чтобы создать свой собственный API. Вы также можете клонировать мое репо здесь, установить зависимости и запустить:

//Install dependencies
$ yarn 
or 
$ npm install 
//Start your server 
$ yarn run dev 
or 
$ npm run dev

Обратите внимание, что сервер и клиент работают одновременно.

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

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

Шаг первый:

Создание учетной записи Cloudinary и загрузка тега события

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

После того, как вы успешно вошли в свою учетную запись Cloudinary и загрузили свое изображение, оно должно выглядеть следующим образом:

Шаг второй:

Создать проект и установить зависимости

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

Создайте папку в командной строке / терминале, дайте ей любое имя по вашему выбору, но для статьи я назову свое смешное имя cloudi winkz…

$ mkdir cloudi

После создания рабочей папки вы можете создать проект внутри рабочего каталога с помощью командной строки, запустив create-response-app, затем имя проекта и убедитесь, что на вашем компьютере глобально установлено приложение create-response-app.

$ create-react-app card

Установка займет некоторое время, в зависимости от мощности вашей сети. После успешного создания проекта откройте предпочтительный редактор кода, я предпочитаю использовать код Visual Studio. Перейдите в каталог проекта, чтобы мы могли установить зависимости.

// Navigating into the project 
$ cd card

Вот списки всех зависимостей, которые нам понадобятся для проекта:

  • Облачный
  • Cloudinary-React
  • Axios

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

посетите сайт здесь, чтобы узнать больше.

Облачно - реагировать

Чтобы легко выполнять манипуляции с изображениями и видео и использовать коды, которые легко интегрируются с уже существующим приложением для реагирования, нам понадобится SDK Cloudinary-response, и поэтому мы устанавливаем Cloudinary-react. Посетите Cloudinary-react для получения дополнительной информации.

Axios - это основанная на обещаниях библиотека async / await для читаемого асинхронного кода. Мы можем легко интегрироваться с React.js, и его легко использовать в любом фреймворке.

В этом проекте мы будем использовать axios для доступа к общему API JSON PLACEHOLDER.

Пожалуйста, обратитесь к этой документации, чтобы узнать больше.

$ yarn add cloudinary cloudinary-react axios

N / B Установка этих зависимостей может занять некоторое время в зависимости от скорости вашей сети.

Шаг третий:

Настроить Cloudinary

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

Создайте новую папку внутри папки src, которую вы можете назвать config. js, затем внутри новой папки создайте файл с именем config. js, внутри этого нового файла (config.js) мы создадим объект и определим наши clould_name и upload_preset, которые мы получим от Cloudinary.

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

Затем установите cloud_name на ваше собственное имя облака, upload_preset на public_id.

Ваш код должен выглядеть так:

export default { 
         cloud_name: "code-freak", //use your own name         upload_preset: "public_id" 
};

Теперь нам нужно подключить конфигурацию Cloudinary к нашему файлу App.js, и это нужно сделать внутри нашей точки входа, которой является index.js. Поскольку мы собираемся использовать Cloudinary для управления изображением пользователя внутри App.js, а App.js отображается внутри index.js, мы передадим свойство (реквизиты) компоненту App.js.

import React from "react";
import ReactDOM from "react-dom"; 
import "./index.css"; 
import App from "./App"; 
import * as serviceWorker from "./serviceWorker"; 
import Config from "../src/config/config";
ReactDOM.render(<App cloudName={Config.cloud_name} 
uploadPreset={Config.upload_preset} />,
document.getElementById("root"));
// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA 
serviceWorker.unregister();

На этом этапе наш компонент App.js готов получать информацию от Cloudinary. Это было легко, давайте перейдем к следующему шагу.

Шаг четвертый:

Создайте компонент проекта и используйте контекст Cloudinary для наложения изображения в теге.

Мы будем использовать App.js по умолчанию, который был создан внутри папки src при запуске create-response-app, но нам придется удалить все содержимое внутри тега div, потому что мы будем создавать свои собственные элементы. Внутри этого компонента мы будем использовать три элемента из Cloudinary, а именно:

  • CloudinaryContext: CloudinaryContext позволяет определять общие параметры, которые применяются ко всем дочерним элементам.
  • Изображение: элемент Image определяет тег Cloudinary Image. Мы будем использовать этот тег изображения для отображения тега события, который мы загрузили, а тег изображения принимает дочерний элемент в преобразовании.
  • Преобразование: этот элемент позволяет вам определять дополнительные преобразования родительского элемента. Внутри этого элемента мы будем использовать такие вещи, как наложение, ширина и радиус.

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

import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
  state = {
    name: '',
    imageUpload: '',
    image: '',
  }
  handleFile=(event)=>{
    this.setState({
      imageUpload: event.target.files[0]
    })
  }
  handleChange=(event)=>{
    this.setState({
      [event.target.name]: event.target.value
    })
  }
handlePost = (e)  => {
  e.preventDefault();
  let {name, imageUpload} = this.state;
  let data = new FormData();
  data.append('name', name);
  data.append('imageUpload', imageUpload)
  console.log(imageUpload)
  axios({
    method: 'post',
    url: 'http://localhost:3030/uploadFile',
    data: data,
    headers: {
      'Content-Type': 'mulTipart/form-data'
    },
}).then(res =>{
  console.log(res.data.create_upload)
})
}
render() {
      return (
      <div className="App">
        <form onSubmit={this.handlePost}>
          <input
            type="file"
            name="imageUpload"
            onChange={this.handleFile}
          />
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
          />
          <button>Submit</button>
        </form>       </div>
    );
  }
}
export default App;

В приведенном выше коде мы создали элемент ввода, который принимает имя участника и изображение, затем прикрепил и обработчик onChange к элементу ввода, чтобы отслеживать изменения, а затем обновить созданное нами состояние, а затем обработчик onSubmit для отправьте детали на сервер с помощью Axios. Как только пользователь нажимает кнопку отправки, данные будут отправлены на сервер и сохранены в нашей БД и Cloudinary, а затем, когда мы проверим консоль, мы получим ответ, содержащий URL-адрес изображения и имя участника.

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

import React, { Component } from 'react';
import './App.css';
import {Image, CloudinaryContext, Transformation} from 'cloudinary-react';
import axios from 'axios';
class App extends Component {
state = {
name: '',
imageUpload: '',
image: '',
progress: 0
}
handleFile=(event)=>{
this.setState({
imageUpload: event.target.files[0]
})
}
handleChange=(event)=>{
this.setState({
[event.target.name]: event.target.value
})
}
handlePost = (e)  => {
e.preventDefault();
let {name, imageUpload} = this.state;
let data = new FormData();
data.append('name', name);
data.append('imageUpload', imageUpload)
console.log(imageUpload)
axios({
method: 'post',
url: 'http://localhost:3030/uploadFile',
data: data,
headers: {
'Content-Type': 'mulTipart/form-data'
},
}).then(res =>{
console.log(res.data.create_upload)
//set image to the image url from server
this.setState({
image: res.data.create_upload.imageUpload
})
})
}
render() {
let {image, name} = this.state
var text = name
var url = image
var fileName = url.substring(url.lastIndexOf('/')+1)
console.log(fileName)
return (
<div className="App">
<form onSubmit={this.handlePost}>
<input
type="file"
name="imageUpload"
onChange={this.handleFile}
/>
<input
type="text"
name="name"
value={this.state.name}
onChange={this.handleChange}
/>
<button>Submit</button>
</form>
<CloudinaryContext
cloudName={this.props.cloudName}
uploadPreset={this.props.uploadPreset}
>
//ADD THE IMAGE NAME USING THE PUBLICID
<Image publicId="conference_tag_yjtgac" >
<Transformation overlay={fileName} radius="100" width="120" x="6" y="18"/>
{text ? <Transformation overlay={{fontFamily: "Arial", fontSize: 18, text}} y="120" />: <Transformation overlay={{fontFamily: "Arial", fontSize: 18, text: "name"}} y="120" />}
</Image>
</CloudinaryContext>
</div>
);
}
}
export default App;

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

На этом этапе вы должны увидеть тег в своем браузере, если вы запустите npm или yarn start.

//run the development server
 $ yarn start

Вам может быть интересно, почему мы присвоили изображение из нового состояния переменной с именем URL вместо того, чтобы передавать его непосредственно в оверлей для позиционирования изображения. Причина в том, что оверлей внутри преобразования не принимает URL-адрес изображения, если вы передаете URL-адрес изображения, поступающий с сервера, все изображение разрывается. Поэтому, чтобы преодолеть это препятствие, нам пришлось найти способ извлечь имя изображения из URL-адреса изображения с помощью метода .substring () и присвоить его переменной filename. поэтому, когда вы используете console.log (имя файла), вы должны увидеть имя изображения.

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

У нас по-прежнему есть еще одна проблема, связанная с указанием имени участника.

{text ? <Transformation overlay={{fontFamily: "Arial", fontSize: 18, text}} y="120" />: <Transformation overlay={{fontFamily: "Arial", fontSize: 18, text: "name"}} y="120" />}

Если вы хорошо поняли, мы присвоили имя переменной text. имя было задано как пустая строка, и в нем говорится, что изменяется, когда участник вводит свои имена, но элемент Transformation не занимает пустое поле в текстовой области, иначе он также сломает изображение, а мы этого не хотим. Поэтому нам пришлось использовать тернарный оператор, чтобы сказать текст (то есть, если есть значение в текстовом состоянии) показать первый элемент преобразования с этим состоянием, иначе показать второе преобразование с определенным текстом: «имя». Следовательно, с помощью этого трюка мы смогли предотвратить разрыв изображения, потому что текстовая область никогда не будет пустой. Это похоже на установку заполнителя.

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

Когда участник загружает изображение и свое имя, вы можете проверить свою базу данных (я использую MongoDB), и вы увидите данные участника, как на изображении ниже. Cloudinary также хранит изображение в учетной записи Coudinary вашей компании / организации.

Cloudinary Transformation может делать и другие вещи. Чтобы узнать больше о преобразовании, вы должны проверить Обработка изображений.

Ура!!! Наконец, нам не нужно тратить много денег и времени на создание тегов участников…

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