2023-11-23 12-10-51

In this transcription, the speaker discusses the creation of web applications and their scaling for smartphones. They explain how websites can be ported to mobile devices using React Native and Visual Studio Code. They also mention the use of Node.js and Expo for development. The speaker highlights the advantages of using React Native and mentions popular apps that have been created with it. They provide instructions on downloading Node.js and setting up Expo. Finally, they explain the process of creating a project using React Native. Всем привет! Сегодня мы с вами будем изучать создание веб-приложений путем масштабирования их под наше разрешение смартфона. Что это вообще значит, мы сегодня будем разбирать, а также как это связано с веб-сайтами и вообще как это можно сделать. Сегодня мы будем также все это разбирать. Давайте в таком случае уже приступим с этого. Итак, вообще, что такое у нас веб? Наверное, как ни странно догадаться, веб это у нас сами сайты, которые мы создаем. Далее, любой сайт, который мы самостоятельно сделаем, который мы сможем скопировать, мы сможем его и портировать на наш девайс. Допустим, чтобы это сделать, мы можем двумя способами это все портировать. Какими? Давайте рассмотрим это. Я подготовил презентацию для объяснения вообще, как это все работает. Давайте приступим. Вообще, что нам понадобится для этого? Это у нас небольшое знание языков, разметок, а также JavaScript. JavaScript, которое будет переходить в React, Node.js и так далее. Что мы ранее изучали? На которое чуть позже выпущу отдельное занятие о том, что вообще можно было в нем делать. Так вот, смотрите. Как мы будем создавать приложение? Это у нас будет React Native, на котором мы будем писать собственное приложение путем создания веб-сайта. Как и где мы это будем делать? Это у нас кодовый редактор Visual Studio Code, на котором нам будет довольно удобно и практично писать код, так как он будет открывать браузер и веб-страницы. Также мы на него скачаем определенные дополнения, которые помогут нам при работе с приложениями. Вообще, есть в React Native две стороны. Это CLI. При установке React Native, как правило, CLI является основным управлением. А также есть Expo. Expo у нас удаляет ненужные нам определенные объекты, которые просто будут занимать место для усложнения, когда вы используете CLI. Если вы хотите как-то себе усложнить жизнь путем углубленного кода изучения на чем-либо. Мы же с вами выберем такое прекрасное дополнение, то бишь расширение, как Expo. У него есть основной сайт expo.dev. Кому интересно, можете зайти. Что на нем мы сможем сделать? Это у нас как портирование самих приложений будет происходить, так и мы сможем в браузере писать код для нашего приложения. Тех, у кого нет, допустим, даже самих компьютеров и ноутбуков, сможете писать код с телефонов и планшетов. Довольно интересная такая новость, да. Чтобы это сделать, вам придется в нем зарегистрироваться. Также, что нам понадобится, если вы делаете это все с компьютеров для удобства? Это у нас Node.js. Как мы видим, у нас есть две версии. Это LTC и текущая. Мы скачиваем LTC всегда версии. Здесь у нас 18.17, это уже устарелая. Поэтому, какая у вас будет версия, LTC самое главное скачивать. Также, почему мы выбираем именно React Native, а не создание под определенные операционки? Смотрите, мы можем создать его как на Android Studio, так и на Xcode, но с большим но. Если мы делаем приложение на Android Studio, у нас приложение будет только под определенную OS, это Android. Скажете, ну и что? Почему мы не можем точно так же написать на Xcode? Ну, это довольно простой ответ, потому что на iOS у нас другая операционная система, и она просто не будет определять данное приложение как само приложение, так как расширение для открытия как минимум будет не совпадать. И таким образом у нас даже не откроется чисто само по себе данный архив. Также языки программирования, на которых можно написать. Это у нас Android Studio, это Java и Kotlin в основном. Также можно на плюсах и JavaScript, но как правило два основных направления это Java и Kotlin. На Xcode же мы по большей части пишем на языке C. Также можно написать на плюсах. Ну, по большей части на C, поэтому в основном мы делим на C. Так, что еще можно сказать? React Native же поддерживает у нас веб-расширение, так скажем. Так, React Native у нас портирует нашу веб-страницу в приложение. Огромное количество приложений уже сделано на React Native, такие знаменитые как Discord, Play Store, Microsoft Outlook, от Теслы даже приложения и так далее. Огромное количество приложений, если честно, сделано на веб и перенесено. Даже вторую жизнь подарили такому приложению как Skype, который был написан под определенной системой, сейчас же его портировали с помощью React Native на обе операционные системы. Также у меня будет в презентации ссылки полезные, но я на это не обращаю внимания. Как это вообще происходит? Давайте перейдем к установке. Для начала нам нужно будет скачать Node.js. Как это сделать? Смотрите, мы переходим на сайте Node.js, ссылка будет под описанием. Выбираем левую часть. Это у нас версия на данный момент съемки видео ролика, это 20.10.0. Стыкаем по нему один раз. Скачивается оно. Открываем. Нажимаем ОК. Нажимаем Next. Тут у нас будет, конечно, install, это у меня просто идет. Поставим галочку автоматика или install в NSRead. Получаются независимые необходимые инструменты при установке. Ставим обязательно здесь галочку. Также пишем. Дальше тыкаем install. После установки у нас выходит окно. Если у нас не открылось, мы, получается, самостоятельно запускаем его. Node.js, вот у нас. У нас будет install. Запускаем его. Как правило, он автоматически запускается. Далее нажимаем Enter. Еще раз Enter. У нас открывается PowerShell в Windows. Идет у нас установка. Установка у нас занимает от 5 до 7 минут. В зависимости от мощности компьютера, а также от интернета. По большей части от мощности компьютера, так как у нас затачиваются некоторые библиотеки, которые довольно, ну не скажу что, не соль потребовательная. Но процента 3 могут есть. Далее нажимаем Enter после установки. Что мы делаем вторым делом? Это у нас, мы можем зарегистрироваться на таком сайте как Expo. Давайте это и сделаем с вами. Переходим на ExpoDev. Ссылка будет также под описанием. Нажимаем Create. Logout. Sign up. Здесь мы должны будем писать нашу почту, никнейм, пароль. Далее мы входим в свой аккаунт. Его также нужно будет подтвердить. Далее мы входим в свой аккаунт. И смотрите. Можем создать проект. Здесь у нас будет гореть кнопочка Create new project. А также Create собственный билд. Можем сделать путем установки CLI на наш VS Code. Те, кто у нас получается работают в VS Code с помощью компьютера. С этим мы разобрались. Что хочется еще раз отметить на сайте. Мы можем писать код, как мы видим. Как у меня здесь написан код. Это с помощью нашего браузера. Можете его писать как на телефонах, на гаджетах. Как на планшете, телефоне, так и на компьютере, ноутбуке. Как у нас идет портирование приложения. Это у нас путем сканирования QR кода и установки приложения, такого как Expo Go на смартфоны. Он есть и в AppStore, и в Google Play Market. Далее, что бы хотелось отметить. Как у нас происходит установка Expo на наш VS Code. Давайте еще раз отмечу, какие нам библиотеки нужно будет скачать. Это у нас, мы нажимаем на 4 квадратика и далее Install. Первым делом мы скачиваем ES7 Plus React Reduce. Ссылка также будет под описанием. Install. Открыть ссылку. И она скачивается. И так проделываем с каждым из дополнений. Далее, после установки дополнений, что мы делаем. Это у нас, мы нажимаем на шестеренку, далее Settings. Далее пишем Format Unsafe. И вставим галочку. Это очень важный элемент в данных параметрах. Что у нас делает это. После форматирования сразу же сохраняет наш код. Это нам пригодится. После того, как мы поставили галочку, мы в принципе большую часть всех дел сделали. Итак, давайте приступим к созданию первого нашего проекта. Как это сделать. Мы нажимаем слева сверху терминал. New Terminal. Итак, npx create expo-app. Кликаем Enter. Далее, What is your app name? Это нас спрашивает, как вы хотите называть свое приложение. Мы не даем, можем вставить My Project. Или же My App по стандарту можем вставить. Нажимаем Enter. Далее у нас проект начинает сохраняться. И скачивание NPM-а независимостей. Скачивание независимостей далее происходит у нас от Expo. Это может занять у нас буквально минуты три. Давайте дождемся полной восстановки. Что хочется подробнее рассказать об React Native. Это у нас довольно хороший движок, на котором написано огромное количество современных приложений. И почему мы, кстати, начали писать на React Native, довольно простой ответ будет. Так как это куда быстрее. Притом во сколько раз? Два раза. Так как если мы хотим сделать приложение и под Android и под iOS, нам как бы нужно сидеть, нанимать себе работников, кто пишет на Xcode и кто пишет на Android Studio. Тут же мы сами можем от веб-интерфейса написать и портировать его моментально на наш смартфон. Огромное количество плюсов, конечно же, в этом есть. Так как нам не придется писать каждый раз... Так как нам не придется писать каждый раз... Так как нам не придется писать каждый раз... Так, после установки мы видим список команд, которые у нас будут работать в нашем терминале. Давайте по порядку объясню, что у нас, за что отвечает команда. Смотрите, первая команда cd myapp. cd это у нас перебралось в Windows из Linux, перейти в какую-либо папку. Если мы нажимаем Tab, каждый раз она будет меняться. Так, cd myapp, пишем. Если мы один раз нажмем Tab, когда мы напишем my или m букву, у нас выскочит сказка и мы можем еще раз нажать на Enter, после этого у нас появится сразу в терминале она. Далее, npm, давайте пробуем, run web, напишем. Смотрите, мы столкнемся с первой нашей проблемой. У нас не скачались зависимости, которые у нас с самого начала должны, кстати, скачиваться. Это баг такой небольшой, который уже года два, но его никто не фиксирует. Смотрите, я объясняю, как это все довольно просто сделать. У нас написано pre-install react-native. Мы это можем сделать npm install. Давайте, допустим, скачаем, ой, скопируем и скачаем его. Ой, кстати, не так, ctrl-c я не правильно написал. npm install, нажимаем Enter. Можем поочередно скачивать, устанавливать, а также как мы это можем сделать, если мы не хотим полностью перепечатывать. Берем и копируем данную строчку npx-x100, копируем, вставляем, нажимаем Enter. И ждем. Так, теперь после установки необходимостей мы пишем npm run web. Ой, npm run web. Далее нас сейчас перебросит автоматически в браузер. Опа, перекидывает браузер в localhost. Немного подгружается в первый раз, конечно, да, OpenMGS. Так, прекрасно, первое наше приложение, в принципе, наш первый проект был создан. И даже мы впервые смогли устранить первый наш баг, который до сих пор не могут устранить по какой-то причине expo и react-native, хотя они даже листали между собой контракт, так что у них не должно быть каких-то конфликтных сбоев. Ну ладно. Еще раз показываю, как устранить данную ошибку. Пишем cd, сначала заходим в наш проект, или же если у нас уже в проекте показывается данная ошибка, мы просто берем, копируем и вставляем. Не более. Далее у нас идет установка и все, готово. Первый баг решен. Так. Как вообще нам поменять данные слова? Переходим в наш проект, открываем myapp, выбор папки, выбираем его, у нас открывается наше приложение, открываем app.js и смотрите, если мы знаем языки разметки, а также если мы только-только начинаем изучать и создавать наше android.ios приложение через веб-интерфейс, мы смотрим и видим, open your app.js. Смотрим, тут также есть open app.js. Так, смотрим и меняем, допустим. Надеюсь, все поставили форматом save. Далее нажимаем ctrl s и здесь мы обновляем страницу нашу. А, кстати, вероятнее всего нам нужно снова открыть терминал, не терминал, данном окошке. Так. Смотрим. Нам нужно снова открыть терминал, не терминал, данном окошке. npm, пишем npm run web. Это у нас какой-то баг, конечно, случился, потому что, как правило, а, скорее всего, мы запустили, потому что два одновременно. Да, мы два одновременно запустили, поэтому у нас конфликт случился. После npm run web и после того, как мы смогли скорректировать здесь наш код, как мы все видим. Всем привет, это мой первый проект, я написал у нас в коде. Сейчас мы посмотрим, как у нас это отобразится на нашем сайте. То есть в будущем приложении, которое мы будем с помощью expo-go сканера на нашем девайсе мобильном сканировать его и устанавливать далее приложение. Также можно будет с легкостью далее данный apk файл перенести в Apple Store или же Play Market для дальнейшего развития и продвижения нашего приложения, а также чтобы любой пользователь смог скачать и проверить наше приложение. Здесь у нас открываются порты для того, чтобы нас перекинул браузер. Немного еще подождем. Открывается сервер. Всем привет, это мой первый проект. В принципе, на этом хотелось бы отметить, что мы за сегодняшнее занятие смогли сделать. Первое, это создать свой первый проект. Второе, отредактировать свой первый скрипт, так скажем. Но если быть точнее, то первый язык разметки это view.txt и скачать xpgo на свой смартфон, а также настроить расширение, которое нам необходимо для приятной работы в React Native в создании приложений. Ну и параметры немного по себе настроили в Xcode. В принципе, на этом все. Что хочется отметить, те, кто до этого не изучали языки разметки, давайте потихоньку начинать их изучать, чтобы в дальнейшем у нас не возникало проблем с написанием кода. Также хотелось бы отметить, что в дальнейшем нам нужно и вообще необходимо изучить языки разметки, такие как html, css и javascript. Потому что он... Ну тут либо вы пишете на javascript.css на элементы, или на react.javascript. Если быть точнее. Все, на этом все. Всем спасибо за просмотр, всем хорошего дня.