Делаем первое мобильное приложение для iOS и Android [React Native, JavaScript]
HTML-код
- Опубликовано: 21 сен 2024
- В данном стриме я хочу показать как можно легко и без особых знаний создать мобильное приложение для iOS и Android. Данное видео будет полезно для людей которые только начинают свое знакомство с миром мобильных разработок, а также для тех, кто просто хочет быть в теме и понимать как все тут устроено.
Использовать я буду известный и несложный язык программирования JavaScript, а также его библиотеку React Native, которая служит для разработки мобильных приложений как для iOS, так и для Android.
Основная идея - объяснить сложные вещи простым языком без углублений в детали. Можно месяцами или годами учить основы программирования и в итого ничего не создавать. Мой подход: Сразу в бой без прелюдий! Начинаем разрабатывать приложение и в процессе учимся.
Мой дискорд сервер / discord
Полезные ссылки:
reactnative.dev/
learn.javascri...
developer.mozi...
Если у кого-то есть вопросы или хотите получить советы, то просьба добавляться в мой дискорд сервер discord.gg/z6eSR5YEdU
Напишите пожалуйста имя и тег, по ссылке не могу к вам добавиться.
Я не знаю кто Вы, и что Вы. Но подход который используете - это самый правильный. "Можно месяцами или годами учить основы программирования и в итоге ничего не создавать. Мой подход: Сразу в бой без прелюдий! Начинаем разрабатывать приложение и в процессе учимся." Так и должно быть. В процессе разработки вникать и учить. Как сказал один знакомый программер, "Во всех WEB школах вас будут заставлять учить синтаксис HTML коих >100, но ни в одной школе вам не скажут о том, что по факту вы будете использовать только 20 из них". Лайк, подписка, все дела) Успехов!
Ждем продолжения:)) У меня все получилось. Зная html, css и немного JS , приятно было создать свое первое приложение.😊
Огромное Вам спасибо!
Вы правы, большинство людей забрасывают дальнейшее изучение языка, когда обучение начинается со сложения переменных (безусловно - это полезно знать), но не видят практического применения базовых знаний.
Вы же показали интересную штуку, в которой сразу же можно практиковаться!
Еще раз спасибо! Буду ждать новых видео!
Вы очень правильно и точно поняли посыл данного видео. Я встречал много начинающих программистов, которые ничего так и не создав забросили все, потому что процесс показался им скучным. Может видео слегка затянулось и было скучноватым, но старался рассказать как можно больше и понятным языком :)
В свою очередь постараюсь выпускать новые и интересные видео как можно чаще. Моя главная цель: Научить людей создавать приложения практическим способом, плюс к этому параллельно изучая необходимые основы.
Супер! Спасибо огромное) Очень понятно и доходчиво!!
Большое спасибо, так действительно легче изучать и интереснее, будем пробовать
Ты очень правильные вещи говориш (психология.. ),сам по себе заметил за ~15 лет работы в IT.
Отличный материал. Громаднле Спасибо!
здорово получается! без воды , доходчиво, супер!
Стас, спасибо. Все очень понятно и занимательно. Хочу ещееее!!!)))
Пожалуйста:) Следующие стримы будут чаще и интересней👌
Спасибо! Я на андройд студио задолбался делать, а здесь на много всё проще и кросплатформенно )
Рад что понравилось :) Согласен полностью! Для небольших приложений react native - это прям незаменимая вещь. Тем более изучить нужно только один язык программирования.
@@StanRud да это пипец. Я даже хотел swift изучать, чтобы перевести ))) под IOS.
@@NoNaMeEaSy Хехе, а мне пришлось изучить и Swift и Java, чтоби создавать нативные приложения на две платформы :) Но, спустя какое-то время понял, что не хватает сил писать под две среды одновременно, да еще к этому, каждая из них имеет кучу своих нюансов и трудностей :( Поэтому, первые шаги с react native показались мне как спасательный круг в океане бездонных трудностей :) Хотя, буду честен, он также преподносит ооочень много неприятностей благодаря своей кроссплатформенности, но это из разряда "из двух зол выбирают меньшее".
Очень полезно! Круто было бы посмотреть следующее видео по данному направлению. Супер
как мне повезло, что попал на этот видос. Именно то, что нужно!!!!
супер
изучаю фронт 8 месяцев и так все в джс углубленно не суюсь потому что скучно, хочется делать а не смотреть как выводят в консоль hello world и ведь все гововрят без этого прям вот ни куда прям вот обязательно надо а мне скучно и я делаю проекты и просто гуглю и как то делаю это намного лучше
вот твое видео тоже топовое
смотришь и понимаешь что с сайтов можно делать приложение и это не скучно видео с ноября 2020 а топовый видос )
не дай бог кому-то такого руководителя с этими вот "зонами некомфорта" =)) а в целом новичкам самое то, особенно практический подход
Отличное видео, спасибо!
3 недели прошло, очень жду нового видео с версткой экранов, картинок, компонентов, разметки, флексов, скроллов и прочего
Самые базовые вещи для построения эппсов
Спасибо огромное! Уже заканчиваю делать видео "Экспресс курс по JavaScript", который на днях выгружу. В данном видео буду рассказывать и показывать все необходимые основы для построения кодовой базы в аппках :) После этого видео, будет еще одно по основам React Native, а именно изучение компонентов, верстка и использование внешних сервисов. Спасибо за ожидание! :)
Я так понял не будет?(
Отлично, спасибо!👍 подписка
Пожалуйста ☺️
Объясняете очень доходчиво, мне понравилось)
Не планируете продолжать записывать обучающие видео ?
Спасибо большое! Планирую, очень планирую:) Это был тестовый стрим, но в планах продолжить снимать обучалки на постоянной основе. Начало года и изменения в фирме выбили меня с этих планов. Постараюсь на этой неделе выпустить новое видео. Подписывайтесь и кликайте в 🔔 чтобы не пропустить его😊
@@StanRud подписался, буду ждать видео)
Я чайник-блондинка, но очень упорная. Помогите пожалуйста в создании аппликации. Очень жаль, что вы перестали записывать видео, объясняете лучше чем в Skill Factory, за которую я заплатила большие деньги…но к сожалению по обстоятельствам не смогла пройти обучение до конца.
Если есть какие нибудь вопросы, то просьба писать в комментариях.
Как с вами связаться узнать об интеграции Моб приложение и Турникетов чтобы при подносени карточки на турникет мобильном приложение получилось уведомление
87071239420
@@mirastv9241 можете написать мне в Инстанрам instagram.com/stan.rud
Постараюсь помочь ответить;)
❤здравствуйте!
А Вы создаете приложению на заказ?
Написала вам в инстаграм🙏🙏🙏🙏🙏
Да последнее видео было очень полезное, а где следующее! Давай уже скорее его ))) Понимаю много работы, но всё таки ! Спасибо
Я обещал уже многим выпускать больше видео и даже уже начал снимать. Но, сами понимаете, что такое конец года для программиста: все проекты должны быть закрыты в срок, даже те, которые и не должны были априори :)
Планирую на днях наконец-то таки выпустить новое видео.
Подписался на тебя и добавил в избранные каналы на своём канале! Так, что давай ))) нужно больше информации ))) по React
Проще : найди исполнителей, заплати им на макароны, и продай себе на креветки, чем самому колупать😊
Дружище, я смогу на телефоне написать свое приложение? К примеру, на replit?
Привет, давай ещё видео. Так доходчиво объясняешь спасибо тебе большое. Подписался и жду видео
Спасибо 😉 Уже в процессе💪🏻 Благодаря таким комментариям хочется этим занимается еще больше😊
Привет. Побольше таких видео 🙏
Чтобы программировать нужно изучить сперва HTML/CSS , потом JS?
Смотря каким программистом Вы хотите стать? В основном, так все и поступают, начинают с HTML/CSS и потом на JS. Но, я бы рекомендовал учить все в паралели, так как на HTML и CSS не нужно тратить уж слишком много времени.
@@StanRud спасибо за ответ 🙏
Чет других видео , так и не нашел. Может на другом канале? Или программисты ограничили, чтоб вы не плодили конкурентов....
Добрый день. А когда будут уроки? (Очень жду 👍)
При команде npm start ошибка Unexpected token “?”
Ещё 5 мин! И я поменяю ориентацию! Очень много вопросов к React Native.! От пакетов до создания ключей и apk.!
Хехе) Что конкретней?
Можете добавляться на мой дискорд discord.gg/7hxp43r6 где сможете быстро получить ответы на все вопросы. Там смогу намного быстрее отвечать, ну и у Вас есть возможность импортировать картинки и примеры для удобства.
@@StanRud Сам не понимаю! Приложение сделал, решил компилировать apk. Ключ получить. А папки Андроид нет в проекте. Нашёл метод установкой пакета Андроид. Дальше по методичке получаю ключ, а оно все красным еррор. Потом решил проверить открыть на эмуляторе проект. И тут на expo start error. Всё удалил все пакеты даже Node js.
Начал с чистого листа! Нашёл метод установки пакетов > npx create-react-native-app
Этот пакет устанавливает и андроид и йос. Красиво! А нет эмулятор уже не открывается npm expo и т.д не работают. И так гоняю по кругу. Удалил всё
С чистого установил снова npm g cli. Снова папки андроид нет. Пытаюсь тот же метод пакет андроид. А он уже и не устанавливаются error. И ни чего не устанавливаются, а как без папки Андроид. Не понимаю Тупик.
Если хотите, то напишите это на дискорде, там смогу все детально описать, даже с небольшой инструкцией;)
@@StanRud сейчас загуглю что это такое. Я сам по себе люблю искать проблему как и с этим случаем, но уже капать не куда, тупик. Я хотел создать андроид приложение, которое сможет открывать сайт своего предприятия, хотел опубликовать в маркете. Для меня это на первом месте, а потом после удачного дела, можно двигаться дальше и что-то другое.
А что делать если Экспо после сканирования кода не открыл приложение, а висит с надписью "New update available. Downloading"?
expo diagnostics
Expo CLI 3.28.5 environment info:
System:
OS: Windows 7 6.1.7601
Binaries:
Node: 12.19.0 - D:\Progz\dev
odejs
ode.EXE
npm: 6.14.8 - D:\Progz\dev
odejs
pm.CMD
npmPackages:
expo: ~39.0.2 => 39.0.4
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: github.com/expo/react-native/archive/sdk-39.0.4.tar.
gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
Expo Workflow: managed
Извиняюсь, все заработало. сделал рестарт экспо, он пересобрал какой-то JavaScript Transform Cashe и приложение запустилось.
Хорошо что заработало. Поздравляю с запуском :) Чаще всего, приложение не запускаеться из-за разницы версий. Поэтому, лучше всегда стараться держать версии актуальными. Проще всего сделать актулизацию версий, а для этого достаточно повторить все шаги с закачкой и установков Node и Expo. Но, так как Вы только установили все инструменты и они актуальные, то обычный перезапуск приложения всегда будет хорошим решеним. Очень круто что вы сами пришли к этому решению.
Можно ли, с windows OS разработать на ios?)
Хотел установить игру, которая не поддерживалась на мобиле, а в итоге её нативный код не совпадает с процессором моего телефона( вот и нашёл видео, не знаю, зачем создавать приложуху, но думаю можно здесь что-нибудь придумать)
Может это вселенная дает намек, что пора начинать учиться разрабатывать моб приложения;) Кстати, попробую сделать видео о разработки игры на React Native, должно быть интересно.
Кстати, все таки получилось запустить игру?
Как где вы сохранили этот файл я запуталась , вроде проект есть а как Дальше редактировать
Что-то с 30 мин не понимаю! Expo приложение как я могу его скачать с АндроидМаркета на ПК? Он же APK.
Expo вы качаете на свой телефон с АндроидМаркета. А на компьютере вы должны запустить проект используя команду *npm start* (29:41). После запуска проекта на компьютере Вы увидите QR код, который нужно отсканировать в Expo приложение на телефоне.
Вы супер! Спасибо!
@@Денис-у4я8г Всегда пожалуйста 😉
Создала проект и что-то пошло не так на стадии команды init, то ли имя проекта неправильно ввожу, то ли что-то не работает. Помогите мне пожалуйста 🙏
Какую именно ошибку показывает? Можете скопировать и вставить текст ошибки сюда. Ну или сделайте скриншот.
Или опишите проблему на дискорд канале discord.gg/z6eSR5YEdU
@@StanRud Спасибо 🙏 за быстрый ответ. На данный момент на работе. Компьютер дома. Занимаюсь по вечерам. Вечером сделаю принтскрин и вышлю вам.
@@StanRudотправила сообщение на дискорд, оно не может быть доставлено 😢
@@StanRudперезагрузила компьютер начала с нуля устанавливать программу node, затем expo..expo не может быть загружен, выходит ошибка: This Google account is not yet associated with Google device. please accept your Google play store on your device before installing app. У меня iPhone что делать? Спасибо 🙏
Подскажите пожалуйста
На ReactNative попробовал через терминал установить NPM I webview! Что-то пошло ни так! Хотел сделать приложение через webview . Понял не хватает чего то. В итоге такая штука. Спасибо!
А можете подробнее описать что именно пошло не так? Может быть описание ошибки можете выслать или что-то еще. Я так понял вы устанавливали react-native-webview? Если да, то Вы все необходимые шаги выполнили описанные тут?:
github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md
Также вопрос: на какой платформе вы запускаете приложение, iOS или Android?
@@StanRud Рассказываю ситуацию. Я всё делал как вы в своём ролике! Установил всё пакеты необходимые. Синхронизировал с Андройдом эмулятором через штрих. Всё проделал в данном уроке. Создал всё красиво как у Вас. Аватары, кнопку.
А потом решил сделать проще для себя и через webview создать обычное приложение которое через адрес будет открывать какой нибудь сайт. И давай искать как правильно делать в инете информацию. Нашёл. Коды прописал. Всё с чистого листа. Но мне ошибки на эмуляторе весь красный телефон. В итоге смотрю а в информации сказано прописать установить через ком.строку npm- react native-webview. Делаю команду. Что-то установилось пакеты. Затем там же pop install. Хоп и Ошибка. Версию не показывает. И на этом закончил. Много раз пробовал.
Вернул Ваш проект дабы удостовериться что не слетело ни чего. Всё работает!
А сейчас гадаю что ни так!
Завтра гляну пошаговое что Вы указали! Может упустил что!
Спасибо!
Пишет:
Проверено 879 пакетов за 9сек
28 пакетов ищут финансирование ( запустите сайт для уточнения)
15 уязвимостей ( 4 слабых, 10 умеренных, 1 высокая)
Чтобы устранить проблемы ( исправьте аудит npm-принудительное)
Через - yarn add вообще не видет терминал
Через - npm install ( прописывается с такими данными как описал)
вопрос , можно ли выложить данную программу в магазины
Можете ☺️ никак лицензионных ограничений в этом нет 😁
Здравствуйте! Как можно с вами связаться?
Здравствуйте! Вот мой инстаграм instagram.com/stan.rud
Что делать если уже всё установил но на последнем команде npm FirstApp выводиться в строку нет такой команды и не открывается вкладка с qr кодом?
Комманда которую стоит ввести:
npm start
После ввода,выводиться команда не являеться внешней или внутренней и т.д
Подскажите пожалуйста! Предыдущий вопрос опустив! Вопрос: Как удалить все пакеты npm?
Пробовал Uninstaller npm. Но по моему она проверяет пытается, но выглядет это не красиво. Снова количество пакетов 800 из них ошибки по 2 , 10 , 15 и всё
Хотел заново всё установить
удалите папку node_modules, зайдите в файл package.json и удалите в нем строчки содержащие ненужные пакеты, и после чего снова запустите npm install
Все работает так:
1. Когда вы устанавливаете любой модуль, то в файл package.json записывается информация о версии какая была установлена
2. Сам модуль физически находиться в папке node_modules, как и все остальные.
То есть, удаление с файла package.json будет достаточным, но модуль все также будет в системе в папке node_modules. Поэтому, сначала удаляем папку а потом уже чистим package.json.
Хорошо! Спасибо Вам!
Как экспо на мак установить .
После того, как установили Node, запустите эту команду:
npm install -g expo-cli
@@StanRud у меня мак. Не запускается почему- то из терминала
А что показывает? Можете ошибку выслать?
по уровню сложности на первмо месте и он простой, ничего не понятно
a kajdai ati 3 instrumenta nujna pastaiana ustanaviti kagda na4inaish novai proiekt?
Нет, только один раз, если речь идет о глобальных инструментах;)
@@StanRud bilabi o4eni kruta esli sleduiushii urok bil:):)
u menia v terminal na macbook pakazivait err!,,,i ne magu dalishe delati.
Кака именнно ошибка на каком шаге? Можете сделать скриншот или скопировать текст ошибки?
@@StanRud npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm WARN @pmmmwh/react-refresh-webpack-plugin@0.3.3 requires a peer of react-refresh@^0.8.2 but none is installed. You must install peer dependencies yourself.
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ioncalancea/.npm/_logs/2021-05-16T12_33_48_944Z-debug.log
ioncalancea@MacBook-Pro-ion ~ %
vot takaia problema i ne magu naiti rishenie.
no video o4eni interesna sdelali.
@@ivancalancea5588 Вы устанавливаете что-то в системный каталог системы, а для этого необходимы права администратора. Чтобы сделать это, вам нужно перед командой написать sudo (по типу sudo npm install ***) и потом ввести пароль администратора. Интересно, после какой команды у вас это появляется?
А что, автор забросил канал?
Не так чтобы забросил, просто у автора был нелегкий год😔 Наверное как и у многих из-за нелегких времен. Надеюсь новый год принесет больше позитивных перемен🙏🏻 Сейчас на листке держу несколько набросок следующих видео, которые надеюсь записать в ближайшем времени💪🏻
@@StanRud спасибо вам за ваши видео, очень доступно излагете👍 Желаю вам удачи не только в развитии канала, но и по жизни 😉
Много лишних слов
Вы очень даже правы. Есть к чему стремиться и я об этом знаю:) Это был пробный открытый стрим. Профессионалами не рождаются💪🏻
а есть еще видео от Стаса???