19 Jun 2022
Built android ios app and website with astronot react native
Built all in one website android apk and ios app using astronot mobile react native free download source code gratis
Hello.. and welcome on this porject we have develope a android ios and web app source code project yo can call it with astronot mobile, yes.. with using astronot make your website very unique and modern . astronot is a css framework open source code project develope by axcora technology team dev, you can built all teknologi website using astronot css, if you need learn about astronot css or download starter project you can visit on https://astronot.axcora.comSo on this project you can built modern website , android app apk and bundle, ios app just using astornot mobile, this project built using react native and expo. so you can built fast modern web and app all in one with astronot mobile.
Apa kabar Man teman... semoga sehat sehat selalu dan terus produktif plus selalu belajar koding mengkoding ya... dan pada project kali ini kita akan memberikan dan membagikan gratis ini bagi kamu yang ingin belajar react native dan expo untuk kebutuhan membangun modern website, aplikasi android, dan aplikasi ios dalam satu app saja. yap seperti kita tau sebenarnya banyak banget kok cara membikin app android dan ios sendiri, bahkan super luar biasa dengan kemajuan teknologi saat ini, dimana kita bisa menggunakan modern html css dan js saja loh untuk develop android app, ada juga penggunaan kotlin dan java yang relatif menghasilkan sebuah app yang super mini ukuran nya untuk di unduh, plus yang paling keren tentunya apa lagi kalau bukan flutter dart sampai modern web seperti angular, svelte, react ,vue pun bisa kita gunakan dalam membuat sebuah website sekaligus aplikasi android dengan memanfaatkan cordova dan capacitor. ya kembali lagi sesuai ama kebutuhan dan kenyamanan teknologi mana yang seusai dan nyaman aja sih sama kamu. Dan tentunya di project ini kita akan mempelajari bagaimana sih cara bekerja dan membuat website aplikasi android ios dalam satu teknologi ini.
Play video and watch how to easy built your website and modern android app or ios app just one technology , with react native and expo of course, you just need to download source code project, install expo, then run this project, and you can run on web on localhost or open in android ios emulator, just press w if you need to visit web browser and built modern website , and press a for run your android emulator, or press i for run on ios emulator, and this is so cool, with expo qrcode you can run source code project on your mobile device, just open expo app on android or ios device scan qrcode and wait your android and ios app is run on your devices.
Jadi mengapa sih kita memilih menggunakan react native dan expo untuk build website dan aplikasi android ios ini ?? sama hal nya seperti flutter di react native pun kita bisa mengembangkan dan membangun website modern plus aplikasi dalam satu teknologi aja, dan kemudahan tentunya yang kita ingin kan untuk proses pembuatan website maupun aplikasi mobile, nah untuk itu lah kita memilih react native sekaligus belajar juga sih.. dan enaknya nih kamu tinggal download expo di playstore atau di web resmi nya, install di perangkat kamu, terus nantinya ketika kamu jalaninin npm start kamu bisa memilih tuh.. mau kamu jalankan dimana mau di web atau di perangkat android dan ios. nah lebih simple kan... yuk deh dari pada penasaran cek aja sih gimana tampilan dan cara installasi nya....
For first of course we need to download node js , then installing expo and download source code project file, and we need code editor too.. so we recomended to download visual code studio. so before download and run this project we can download third party app .
Jadi tentunya sebelum mengunduh dan melakukan installasi proyek ini, kita perlu beberapa aplikasi pendukung untuk menjalankan web dan app agar bekerja dengan sempurna , apa saja kebutuhan nya kamu bisa unduh saja langsung dibawah ini.
Node download →
Visual Studio Code download →
Oke after download you can install on your devices, for node you can open shell terminal, on windows you can press windows logo on keyboard then typing cmd , now you can see command prompt or shell terminal, now we can check node version you have install it on your device, so you can run
node -v
then you can check npm version to with run npm -v
then shell terminal will be displaying about node and npm you have install on your devices, oke now we need to install expo using terminal so you can run npm install --global expo-cli
, this command for installing expo globally on your devices.because we need to develope android and ios app so you can download emulator first, you can download android studio if you needed.
Download android studio →
For simple and fast you can run android or ios app with your devices, just scan qrcode and your app will be run on your mobilephone, so you need to download and installing expo to your mobile, just download expo and install on your devices.
Download Expo for android →
Download Expo for IOS →
With using expo you not need to download android studio , you just need to scan qrcode on terminal then android and ios app will be run on your mobile phone. that's it... very simple right....
Oke now after we have install node, expo desktop and mobile, now we ready to download and run this source code project. so you can download on our github repo now.
Github Download
Or use terminal then run
git clone https://github.com/mesinkasir/astronot-react-native.git
Dan jangan lupa jika bermanfaat dan membantu kamu bisa berkontribusi dengan melakukan donasi agar team dev kami dapat memberikan source code gratis untuk kamu. lakukan donasi sukarela pada rekening kami berikut :
Donasi Sekarang
Oke now you can create new folder on desktop name it with astronotmobile or with your project then we ready to installation procedure..
Installation
Now we need to visit project folder using terminal, on this case we have new folder project with astonotmobile so you can extract all file download to astronotmobile on desktop, then you can open terminal and runcd C:\Users\Pcname\Desktop\astronotmobile
change pc name with your pc username, now we need to run instalallation so you can install with run npm install
wait for installation progress... after installation success now we need to run this web app , so you can run on your android or ios devices , or you can run on web browser , so let's get started run this command
npm start
then waiting for metro progress... now you can press a for run on android emulator, or run i for run to ios emulator, or you can use simple step with using expo app on your phone, just open expo app on your android or ios phone then scan qrcode on terminal, and wait for built progress.. and your app is live on your devices.Now how to run on web browser ?? for run on web browser you just need to press w, then wait for expo building progress on web, and you can visit on localhost:19006 from web browser , and your modern website is live now.
Jadi man teman setelah kamu ikuti petunjuk diatas termasuk installasi aplikasi pendukung ya kini kita sudah bisa dan siap menjalankan proyek ini untuk membantu mu membuat website , aplikasi android dan ios secara gratis. nah setelah ikutin semua nya kita tinggal jalankan installasi nya dengan buka terminal mu dan jalanini
npm install && npm start
nah saat proses start ini nantinya mungkin agak lama an dikit ya, terus kita ada disuruh memilih mau dijalanin dimana nih , jadi kamu bisa pilih untuk menjalankan nya sesuai kebutuhan mu, misal untuk menjalankan di android ya tinggal tekan aja tombol a pada keyboard , atau kalau ios ya tekan tombol i, untuk web tekan tombol w,simple aja kan, dan oh iya kalau kamu menjalankan via android dan ios pastikan kamu sudah install android studio, karna kita butuh tuh emulator nya, jadi pastiin kamu sudah melakukan installasi emulator nya juga, kalau mau cara cepatnya sih kamu tinggal buka aja deh expo yang ada di hp kamu ,pastikan kamu sudah unduh expo app di ponsel mu, terus scan qrcode nya dan simslabim... proyek ini sudah dijalan gaes... mudah dan gampang banget kan......
How to Work
Oke after installation and run web app , now we can work with change any code with you needed, for first you can open terminal and visit on your project folder, with runcd C:\Users\Pcname\Desktop\astronotmobile
, then make sure you have download visual code studio, and now we can open this project on visual code studio just run code .
and now you can open this project on your visual studio code, now you can work and change any code with you needed in here, then save it for create update display for your web app and mobile app . For change article you just need to visit on screen folder, then you can change anything in here, and of course you can visit on components folder too.. and change article with you needed in here. don't forget to save it after you have update data.
Nah selanjutnya setelah semua nya selesai seperti menjalankan app nya maka kita bisa oprek oprek tuh kode nya, jadi kamu pastiin deh sudah membuka dengan visual studio kode sebagai app kode editor kamu untuk melakukan editing dan mengganti tampilan sampai artikel kalimat sesuaikan ama kebutuhan kamu disini. dan kalau uda ya jangan lupa disimpan ya supaya bisa update otomatis setiap perubahan yang kamu lakuin.
Build for production
Now how can we built this project on production mode, for example you need to cloud your modern website, or create app bundle for android and ios, so for production mode you can create build mode with this step.BUILD ANDROID APP
for android app , you need to change app.json file just copy paste this code on your app.json files.
{
"expo": {
"name": "Astronot Mobile App",
"icon": "./path/to/your/app-icon.png",
"version": "1.0.0",
"slug": "your-app-slug",
"ios": {
"bundleIdentifier": "com.axcora.yourappname",
"buildNumber": "1.0.0"
},
"android": {
"package": "com.axcora.yourappname",
"versionCode": 1
}
}
}
Now you can build android apk only with run
expo build:android -t apk
For build bundle app
expo build:android -t app-bundle
create your credential android app
expo fetch:android:keystore
BUILD IOS APP
For built ios app you can run this command
expo build:ios
For built ios archive app you can run this command
expo build:ios -t archive
For built ios simulator app you can run this command
expo build:ios -t simulator
BUILD MODERN WEBSITE
For built modern website you need to register on static hosting then you can push your source code project on your static web hosting, you can use surge, firebase, vercel or netlify. for first we need to built to production mode so you can run
expo build:web
After this step you can see new folder with web-build folder, now you can push web-build folder on your static hosting. for example you can visit our project deploy on firebase https://astronotmobile.web.app
UPDATE FAST BUILT DEPLOY
And now you can using new built production , so for first you need to register on expo, just create expo account , then you can login using terminal for built android and ios app, and of course for first we need to install eas so you can open terminal and runnpm install -g eas-cli
. this step for help you built andorid and ios app fast and easy with expo, now you need to login with run eas login
Now you can fast and easy for built modern website or android ios app with run command
eas build --platform android
if you need to built android application , then you can run eas build --platform ios
for built ios application only, and of course you can built all in one like modern website , android application , ios application just run command eas build --platform all
Jadi ada informasi baru juga dari expo bahwa cara menjalankan build production diatas akan berakhir pada 2023 jadi mau gak mau ya kita move on ye kan... masak mantan aja yang bisa move on , kita juga bisa dong.... oke deh untuk move on ini kita perlu melakukan installasi eas, ya kamu baca diatas ya cara melakukan installasi nya, lalu kamu jalanin aja deh seperti kehidupan ini... biarkan mengalir.. wkwkwkw... ya intinya dokumentasi diatas adalah bagaimana cara kita melakukan installasi eas dan membangun aplikasi android maupun ios dan web dalam satu aja.
After you have run your prodcution mode , now you can visit on your expo , just login on expo then visit your dashboard, after login you can click on builds menu, then you can see all progress building in here... and you can easy to publih your app on googleplaystore or appstore, and you can download your apk build with click on downloads, then you can share your app to your friend, customer, and other with you needed.
Oke we hope this source code project can help you for build android and ios and modern website too... of course you can learn how to work with react native expo with astronot mobile project. see ya on next source code project !!
Nah setelah melakukan proses build ke mode produksi kini kamu bisa akses dan login ke expo kamu, login ke expo via account mu, dan kamu bisa lihat deh di dashboard nanti kamu bisa klik pada halaman builds, dan disini kamu bisa cek semua proses installasi yang sudah kamu lakuin, dan dengan mudah dong kamu bisa publih ke appstore, maupun playstore dengan account dev kamu yang terintegrasi dengan expo, tentunya kamu juga bisa mengunduh dengan klik download dan unduh deh file apk app kamu terus bagiin dong ama temen, keluarga, pelanggan dan sanak sodara kamu, tunjuin dong kamu sudah sukses buat aplikasi android dan ios sama modern website dengan menggunakan react native feat expo dengan kreasi kamu sendiri.. wow keren kaka.... dan sampai jumpa di proyek kode gratis selanjutnya ya....
BONUS CONTENT :
New Point of sale mesin kasir →
All sourcecode project →