Прошло чуть больше 3 месяцев с момента моего последнего поста о создании платежного решения с использованием Javascript.
Да, иногда это может быть ошеломляюще с 9 до 5, я рад, что наконец смог сделать часть будущей серии о том, как создать платежный шлюз или решение с использованием Javascript.
В последнем посте я говорил о том, почему я выбрал JavaScript, и не буду повторяться здесь, однако я пришел к выводу, что использование других фреймворков (не для Javascript) или языков также может дать вам довольно хорошее и надежное решение. Поэтому в будущем я расскажу об использовании других языков (PHP и Python) и фреймворков (Laravel и Django), чтобы найти похожие или даже лучшие решения. Все сводится к тому, в чем вы хорошо разбираетесь.
Достаточно об этом, давайте углубимся в шлюз (JavaScript — NodeJS).
Начало
При этом мы будем использовать TypeScript, что, я считаю, является преимуществом по сравнению с использованием только JavaScript, чтобы избежать ошибок, которые могли проникнуть в среду выполнения. Видите ли, базовый JavaScript является динамическим и слабо типизированным, что может вызвать проблемы при управлении растущей кодовой базой, в то время как TypeScript, являющийся надмножеством JavaScript, обладает сильными характеристиками статической типизации, компиляции и объектно-ориентированного программирования, которые пригодятся при поиске. в больших проектах кода или когда-либо растущей базе кода, такой как платежный шлюз (из предыдущего блога вы увидите, что мы смотрим на интеграцию мобильных денег, VISA и MasterCard, SMS, электронную почту и другие функции выставления счетов и безопасности, которые имеют тенденцию постоянно меняться через некоторое время)
Поскольку у нас это не так, давайте начнем с настройки нашего шлюза с помощью TypeScript, Express и MongoDB.
Шаг 1
Мы создадим нашу папку и переместимся в нее:
$ mkdir gateway $ cd gateway
Затем мы можем продолжить и инициализировать наш проект npm:
$ npm init
Вы можете использовать флаг -y
, чтобы использовать значения по умолчанию npm init
, автоматически говоря "да". Однако я люблю делать это личным 😎 поэтому я придумал что-то вроде этого:
Шаг 2 — Добавьте и настройте TypeScript
После инициализации нашего проекта следует добавить и настроить TypeScript. Помните, что это делается внутри папки нашего шлюза.
Сначала мы устанавливаем TypeSript, как показано ниже:
$ npm install --save-dev typescript
Затем мы добавляем файл tsconfig.json
в корневой каталог gateway
, который используется для настройки параметров компиляции TypeScript.
$ nano tsconfig.json
Затем вставьте код ниже:
Глядя на фрагмент выше, вот простое объяснение переменных, которые мы использовали:
module
: указывает метод генерации кода модуля. Узел используетcommonjs
.esModuleInterop
: обеспечивает взаимодействие между модулями CommonJS и ES во время импорта.target
: указывает уровень языка вывода (мы используем ES6).moduleResolution
: Это помогает компилятору понять, на что ссылается импорт. Значениеnode
имитирует механизм разрешения модуля Node.sourceMap
: создает соответствующий файл .map, позволяющий отладчикам и другим инструментам отображать исходный код TypeScript при работе с созданными файлами JavaScript.outDir
: это место для вывода.js
файлов после компиляции. В нашем проекте мы будем использовать папкуdist
.
Подробнее об этом читайте здесь Опции компилятора TypeScript
Шаг 3. Добавьте и настройте сервер Express.
Начнем с установки экспресса:
$ npm install --save express $ npm install -save-dev @types/express //We use the @types/express package for TypeScript to know about the types of Express classes.
Затем мы создаем папку src
в нашей папке gateway
для хранения файлов TypeScript с расширением .ts
:
$ mkdir src
Затем мы добавляем файл с именем app.ts
, который будет выступать в качестве нашего основного приложения проекта, и позже мы добавим соответствующий транспилированный файл app.js
в package.json
для запуска в качестве основного файла вместо index.js
:
$ nano src/app.ts
Добавьте приведенный ниже код, чтобы создать минималистичный экспресс-сервер:
Приведенный выше код создает экспресс-сервер, работающий на порту 3000
. Давайте продолжим и скомпилируем, а затем запустим наш сервер, чтобы проверить, все ли работает нормально. Для компиляции мы запускаем команду ниже в терминале:
$ npx tsc
Вышеприведенное использует параметры конфигурации в tsconfig.json
для создания .js
файлов в папке dist
, которые мы будем использовать при запуске приложения, как показано ниже:
$ node dist/app.js
Для успешного запуска мы получим вывод ниже:
Express is listening at http://localhost:3000
Вы можете открыть ссылку в браузере, и вы должны увидеть Hello World!
в браузере. Ура!! Вы установили и настроили свой экспресс-сервер. Вы можете открыть dist/app.js
и посмотреть, как это выглядит. Ниже приведен фрагмент.
Наконец, давайте установим и настроим MongoDB.
Шаг 4 — Добавьте и настройте MongoDB
Во-первых, вам нужно убедиться, что MongoDB установлена и работает на вашем компьютере, вы можете использовать приведенные ниже ссылки для получения инструкций по установке, запуску и созданию базы данных (в нашем случае это должно быть gateway
) в соответствии с вашей операционной системой. .
- В MacOS
https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/ - В Linux https://www.mongodb.com/docs/manual/administration/install-on-linux/
- В Windows
https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows/
Мы можем продолжить и добавить mongodb
и mongoose
в наш проект, используя команду ниже:
$ npm install mongodb mongoose $ npm install -save-dev @types/mongodb @types/mongoose
Далее мы собираемся подключиться к нашей базе данных, которую мы создали, обновив наш код app.ts
, как показано ниже:
Мы импортировали модуль mongoose и использовали его для подключения к нашей базе данных, которая использует URL-адрес mongodb://localhost:27017/gateway
. При успешном соединении db
экспресс-сервер будет запущен, и вы получите следующий вывод:
Express is listening at http://localhost:3000
Ух ты! Это была длинная нить, но я благодарен, что вы нашли время, чтобы пройти через все это. Будет здорово, если вы похлопаете или даже подпишитесь на меня для будущих сообщений в этой серии и других темах. Далее мы рассмотрим действия с базой данных.
Если вам нужен код, используемый в этом посте, вы можете использовать ссылку ниже: