Погрузимся в javascript для выполнения простой задачи: использование заглавных букв и автоматическое создание списка случайных…

Здравствуйте! Это мой самый первый средний пост, поэтому я надеюсь, что некоторые из вас сочтут его полезным! Кроме того, позвольте мне предисловие, что я отстой в javascript. Я не разработчик. Я дизайнер UI / UX и достаточно разбираюсь в Framer и HTML / CSS, поэтому я знаком с основными концепциями кодирования, такими как циклы, массивы, переменные и функции, но по какой-то причине javascript сбивает с толку дерьмо из меня. Это был первый раз, когда я действительно написал js-код более широко; однако было очень приятно создавать что-то, что действительно работает!

90% копируется / вставляется из ответов о переполнении стека и Google, так что простите меня, если я неправильно объяснил. Это больше похоже на путешествие, чем на учебник. Я до сих пор не совсем понимаю все, что происходит, поэтому, пожалуйста, поправьте меня или подскажите, что бы вы сделали лучше!

Проблема

Мне нужен был простой способ сгенерировать список пользователей в формате JSON с такой информацией, как имя и фамилия, изображение профиля, пол, адрес, имя пользователя и т. Д. И использовать его с плагином Craft для Sketch от Invision (всегда старайтесь дизайн с настоящими / поддельными данными!). Теперь я знаю, что существует множество плагинов и опций Sketch (включая встроенные опции в Craft) для генерации контента / данных, но я чувствую, что всем им не хватает гибкости, а количество доступных опций данных довольно ограничено. К тому же все они по-прежнему выполняются вручную. Я хотел автоматизировать это настолько, насколько мог.

Я решил использовать api randomuser.me, который дает мне массу вариантов данных на выбор и предоставляет URL-адрес JSON, который я могу просто подключить в Craft. Все, что вам нужно сделать, это ввести это в адресную строку браузера https://randomuser.me/api/?. Затем добавьте ключевые слова, которые соответствуют данным, которые вы хотите получить из API. Давайте не будем усложнять задачу и извлечем имя, пол и изображение для двадцати пользователей:

https://randomuser.me/api/?results=20&nat=us&inc=name,gender,picture&format=pretty

Давайте немного разберем это (части после "?"):

results=20: количество объектов (пользователей), которое вы хотите
nat=us: все мои пользователи должны иметь гражданство США
inc=name,gender,picture: укажите имя, пол и данные изображения
format=pretty: дайте мне это как отформатированный файл JSON

Для получения дополнительной информации и опций ознакомьтесь с документацией

Легко, правда? Введите это в свой браузер, и вам будет предоставлен URL-адрес JSON со всей информацией. Затем вы можете взять тот же URL-адрес и подключить его к Craft. Вот пример символа ячейки таблицы:

Затем я могу вставить этот символ на свой артборд, продублировать его и наблюдать за волшебством!

Круто, правда ?! За исключением одной проблемы ... все в нижнем регистре. Ух, я знаю, проблемы первого мира? Обычно это не было бы проблемой, если бы я использовал этот api в коде, потому что я мог бы просто применить любой стиль css, но, к сожалению, в Sketch нет опции преобразования текста с заглавной буквы / titlecase (давай, Sketch !). Прохождение всех из них и использование одного за другим просто побеждает цель всей автоматизации, которую я только что сделал, а плагины titlecase на самом деле не работают с этой техникой. Я был так разочарован, но не хотел отказываться от этого метода. Итак, я решил, что мне придется пробиться через это, и в итоге получил скрипт, который переписывает некоторые данные так, как я хочу. Я начал с описания задач, которые хотел выполнить:

Создайте функцию, которая использует текст с заглавной буквы
Используйте эту функцию и примените ее к данным API JSON.
Возьмите новые данные JSON и создайте новый файл .json.
Загрузите этот файл JSON на сервер, чтобы я мог использовать URL-адрес в Craft

Настраивать

Что будет полезно знать / освежить в памяти:

Node.js и NPM (у меня не было предварительных знаний, но я настроил его некоторое время назад)
Использование терминала / командной строки

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

Настройте Node.js и NPM

Node.js и npm (диспетчер пакетов узлов) - это то, что я использовал для этого проекта. Это фреймворк javascript, который в основном занимается внутренними процессами. Это кажется немного сложным, но следуйте этому руководству, и все будет в порядке: http://blog.teamtreehouse.com/install-node-js-npm-mac

Настроить Firebase

После того, как я установил node.js и npm, следующее, что я хотел сделать, - это создать место, где я мог бы разместить файл JSON с конечным результатом и получить доступ к этому URL-адресу. Это было только для внутреннего использования, поэтому в этом не должно было быть ничего особенного. Я подумал, что Firebase будет отличным решением. Firebase - это инструмент от Google, который предоставляет множество серверных ресурсов для создания приложений, таких как базы данных в реальном времени, хостинг, облачное хранилище и т.д. , но он прост в использовании и бесплатен. Очевидно, вы можете использовать любой хост-сервер, который вам подходит.

После создания учетной записи и создания папки проекта на моем локальном диске я создал свой первый проект и выполнил шаги по настройке хостинга на вкладке «Хостинг» на боковой панели. Запустите их в командной строке.

cd Test              // Navigates to my project folder
firebase login       // goes through the login process
firebase init        // sets up and initializes your fb project
firebase deploy      // sends files in the directory to the server

Затем вы сможете выбрать проект, который вы хотите разместить, и задать ряд вопросов, которые позволят создать необходимые файлы и разрешения (просто нажмите Enter для всех из них).

Затем запустите firebase deploy, чтобы развернуть свой проект на сервере! Там будет только файл index.html по умолчанию, но позже я добавлю и заменю такие файлы, как мой scripts.js.

Написание сценария

Я провел много исследований, погуглил и разместил сообщения о переполнении стека, чтобы понять, как обрабатывать каждую задачу. Я думал, что смогу использовать обычный js для всего, но быстро понял, что лучший способ записывать / сохранять файлы json требует node.js. Вздох, еще один язык, о котором я ничего не знаю, поверх другого языка, о котором я мало знаю. Но с чего-то нужно начинать! И это действительно было не так уж и плохо. Есть масса ресурсов, которые помогут вам начать работу. Просто погуглите то, что вы пытаетесь решить, и ответ будет ждать вас.

Сначала я создаю новый файл с именем «scripts.js» и сохраняю его в «общедоступной» папке, созданной firebase.

Больше настроек

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

Установить модуль firebase: подключается к моему проекту firebase
Установить модуль got: позволяет мне легко делать http-запросы
Установить модуль« foreach »: forEach не работает в узле, поэтому он заменяет его правильным синтаксисом
Установить модуль jsonfile: позволяет мне писать и сохранять файл json в папку моего проекта

// initialize firebase------------------------------------
var firebase = require('firebase'); //module for using firebase
var config = {
    apiKey: "AIzaSyBjS4dUaqPLhggmdF9hrIwQTH4i4QwjpR4",
    authDomain: "my-user-generator.firebaseapp.com",
    databaseURL: "https://my-user-generator.firebaseio.com",
    projectId: "my-user-generator",
    storageBucket: "my-user-generator.appspot.com",
    messagingSenderId: "317975340395"
  };
var app = firebase.initializeApp(config);
var database = firebase.database();
//-------------------------------------------------------
const got = require('got'); //module http requests
var each  = require('foreach'); //module for using forEach
var jsonfile = require('jsonfile') //module for reading/writing json files

Инициализировать Firebase: вы можете получить это, нажав кнопку «Добавить в свое веб-приложение» на панели инструментов проекта. Вам нужно будет изменить пару вещей, чтобы соответствовать синтаксису узла (добавьте var app = firebase.init ……. Вместо firebase.init …….).

Функция для написания строки с заглавной буквы

//function to capitalize text
function capitalize(text) {
    return (!text || !text.length) ?
    text :
    (text[0].toUpperCase() + text.slice(1));
};

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

Суть скрипта: доступ к api через https-запрос

Краткий обзор того, что делает каждый блок:

got('https://randomuser.me/api/?results=20&nat=us&inc=name,gender,picture&format=pretty', {json: true}).then(response => {
        //more code will go here
}).catch(error => {
    console.log(error.response.body);
});

Я делаю https-запрос, используя модуль «Получил», используя тот же URL-адрес randomuser.me, который я ввел в браузере в начале статьи.

        var data = response.body;        
        
        //capitalize names and gender
        each(data.results, function(user) {
            if (user.name) {
                for (var name in user.name) {
                    user.name[name] = capitalize(user.name[name]);
                }
            }
            if (user.gender) {
                user.gender = capitalize(user.gender);
            }
        });

Внутри этого https-запроса я сохраняю данные в отдельной переменной для облегчения доступа var data = response.body. Затем я просматриваю данные, чтобы найти все экземпляры свойства «name», и пропускаю их через функцию «capitalize». Итак, в основном, для каждого значения в объекте, «имя» (заголовок, первое, последнее) → использовать заглавные буквы. Я делаю то же самое для пола.

        //create json file
        var file = 'public/users.json';
        jsonfile.writeFile(file, data, {spaces: 4, EOL: '\r\n'}, function(err) {
            console.error(err)
        });
        console.log(data);

Этот блок берет эти недавно отредактированные данные и создает новый файл JSON с именем «users.json», который будет сохранен в общей папке с помощью модуля «jsonfile» (помните, что общая папка была автоматически создана firebase).

И, наконец, console.log(data) распечатывает эти новые данные JSON в консоли. Это просто позволяет мне видеть новые данные и убедиться, что скрипт работает или показывает какие-либо ошибки.

Отправить новые данные в базу данных Firebase

//write new data to firebase
database.ref().set(data);

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

А вот и весь сценарий во всей его великолепной неразберихе. Это некрасиво, но работает:

// initialize firebase------------------------------------
var firebase = require('firebase'); //module for using firebase
var config = {
    apiKey: "AIzaSyBjS4dUaqPLhggmdF9hrIwQTH4i4QwjpR4",
    authDomain: "my-user-generator.firebaseapp.com",
    databaseURL: "https://my-user-generator.firebaseio.com",
    projectId: "my-user-generator",
    storageBucket: "my-user-generator.appspot.com",
    messagingSenderId: "317975340395"
  };
var app = firebase.initializeApp(config);
var database = firebase.database();
//-------------------------------------------------------
const got = require('got'); //module for http requests
var each  = require('foreach'); //module for using forEach
var jsonfile = require('jsonfile') //module for reading/writing json files
//function to capitalize text
function capitalize(text) {
    return (!text || !text.length) ?
    text :
    (text[0].toUpperCase() + text.slice(1));
};
got('https://randomuser.me/api/?results=20&nat=us&inc=name,gender,picture&format=pretty', {json: true}).then(response => {
        var data = response.body;
        //capitalize names and gender
        each(data.results, function(user) {
            if (user.name) {
                for (var name in user.name) {
                    user.name[name] = capitalize(user.name[name]);
                }
            }
            if (user.gender) {
                user.gender = capitalize(user.gender);
            }
        });
        //create json file
        var file = 'public/users.json';
        jsonfile.writeFile(file, data, {spaces: 4, EOL: '\r\n'}, function(err) {
            console.error(err)
        });
        console.log(data);
        //write new data to firebase
        database.ref().set(data);
}).catch(error => {
    console.log(error.response.body);
});
//really bad hacky way to end this process
function exit() {
    process.exit();
}
setTimeout(exit, 3000);

Примечание / справка: Я думаю, что я сделал что-то не так, потому что, когда я запускаю свой скрипт, он не заканчивается и просто продолжает работать. Вот почему я поместил туда эту действительно плохую, хакерскую функцию process.exit (). Если кто-нибудь сможет пролить свет на то, как это исправить, буду бесконечно благодарен!

Запуск сценария

Чтобы запустить сценарий, откройте Терминал, перейдите в папку проекта и запустите node public/scripts.js (или другое имя вашего файла).

Как видите, данные заносятся в консоль, и скрипт вроде сработал! Теперь у вас должен быть файл JSON, который вы создали в своей «общедоступной» папке !:

Почти готово! Развертывание на firebase

Я знаю, этот пост становится громоздким и растянутым, но не волнуйтесь, я почти закончил! Пришло время развернуть проект / программу. В Терминале убедитесь, что вы находитесь в папке своего проекта, и запустите firebase deploy. Если все сделано правильно, он запустит процесс и выдаст вам сообщение об успешном завершении.

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

Чтобы получить доступ к новым данным JSON, щелкните URL-адрес домена (это ваш общедоступный URL-адрес) и добавьте /users.json в конец (или любое другое имя вашего файла). Теперь у вас есть мгновенный доступ к списку случайных пользователей и вы можете использовать этот URL в Craft!

Вы можете добавить больше пользователей и изменить информацию / данные, которые хотите получить, просто изменив URL-адрес randomuser.me api в скрипте. А затем запустите сценарий и снова разверните его на firebase. Бум!

Бонусный раунд: еще больше автоматизации с Gulp!

Рискуя еще больше растянуть эту статью, я хотел сделать свою автоматизацию еще более автоматизированной! Я узнал о gulp.js, который просто устанавливает кучу задач, которые можно связать вместе (Ужасное объяснение. Этот парень прекрасно объясняет все, что вам нужно знать о gulp).

По сути, мне все еще нужно выполнить три команды / задачи, чтобы эффективно использовать мой скрипт:

Запустите мой скрипт
Развернуть на firebase
Откройте мой браузер и перейдите по соответствующему URL-адресу

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

var gulp = require('gulp');
var run  = require('gulp-run-command').default;
var runSequence = require('run-sequence');
var scriptPath = 'public/scripts.js';
var jsonPath = 'https://my-user-generator.firebaseapp.com/users.json';
//run these commands in sequence
gulp.task('build', function(callback) {
  runSequence('runScript', 'deployFB', 'openSite', callback);
});
gulp.task('runScript', run('node ' + scriptPath));
gulp.task('deployFB', run('firebase deploy'));
gulp.task('openSite', run('open ' + jsonPath));

Теперь все, что мне нужно сделать, это перейти в папку моего проекта, запустить gulp build, и он автоматически запустит мой скрипт, развернет в firebase и откроет мой браузер по правильному URL-адресу. Так просто.

Выводы

Я знаю, о чем вы, вероятно, думаете: «Вау… Все это для такой тривиальной задачи? Ты что, мазохист какой? »

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

У меня вновь обретенное уважение к инженерам и разработчикам, и ничто не сравнится с моментом чистого удовлетворения, когда я запустил этот скрипт и заставил его наконец заработать в 3 часа ночи. Мне действительно кажется, что я что-то построил сам.

Вот еще больше возможностей, чтобы погрузиться в самую суть, чтобы увидеть, чего вы можете достичь. Ваше здоровье!