Cara Mudah Membuat Aplikasi React Native dan Building APK

Posted on by feri

Mumpung lagi rame nih bahasan tentang aplikasi react native, saya akan membocorkan sedikit tips dan trik bagaimana cara melakukan compile aplikasi Reactnative tanpa harus menunggu upload dan queque build apk nya.

Sebagai prolog mungkin ada yang belum tahu isi dari react native. Aplikasi react native merupakan aplikasi yang dibuat menggunakan bahasa javascript (atau typescript , versi terbaru js) yang pada awal sejarahnya merupakan aplikasi yang berjalan di embeded browser (cordova, ionic dan sejenisnya). Dengan disupport oleh facebook yang kemudian mengembangkan framework react ini menjadi disebut react native, karena dibuild dan dicompile dengan component native yang dapat dipanggil langsung via interface javascript dan struktur sintak penulisan componen baru dengan tag react.

Framework react native ini sangat bergantung pada nodejs untuk melakukan compiling (atau menurut saya lebih tepat disebut compresing) dan embeding source javascript menjadi code yang dapat berjalan di multi platform Android, Ios dan Web dengan satu code base. Hal inilah yang membuat react native sangat menarik untuk dipelajari, terlepas dari sisi performancenya yang tentu saja masih berada di bawah aplikasi native yang ditulis dengan java atau swift.

Ukuran APK ataupun IPK build dari reactnative ini tentu saja lebih besar dari APK pada umumnya yang dibuat dengan bahasa java karena react native memuat component embeded browser dan parsing (translating) UI code react menjadi UI embeded browser serta component yang menjadi bridge untuk mengakses native componen misalnya location, alert, filesystem dan lainnya, sebagai perbandingan APK react sederhana yang membuat hellowold bisa mencapai 40MB, sedangnkan apk helloworld dari java bisa berukuran dibawah 2MB.

A. Tools yang diperlukan

Baiklah sekarang kita akan memulai belajar cara mudah membuat aplikasi react native dengan cepat. Tool yang diperlukan:

  1. Laptop atau PC (bisa windows, linux atau mac), disini saya menggunakan Apple MacBook, pastikan RAM diatas 4 dan CPU minimal core i5 (agar buildnya tidak ngos-ngosan gaes).
  2. Koneksi internet yang cepat tanpa ganguan injek iklan (hal ini sedikit menyebalkan pada koneksi provider tertentu yang melakukan inject pada content web sehingga merusak development environtment, bisa ga sih provider ini dituntut? ), saya akalin menggunakan vpn ke singapore.
  3. Android studio dan Android SDK yang sudah terinstall JDK  (sebenarnya bisa tanpa android studio tetapi kita pilih opsi yang paling mudah karena didalamnya sudah ada JDK dan Android SDK tanpa harus install sendiri-sendiri)
  4. Editor text (sublime, visualstudio ataupun notepad++ )
  5. Node js (pastikan nodejs versi terbaru sudah terinstall, bisa donload disini https://nodejs.org/en/download/ ) atau jika di mac bisa install menggunakan brew.
  6. Install Expo pada hp android di playstore download disini 

 

B. Cek dan Instalasi Dependency modul: adb, yarn, react-native, npx, expo-cli dan turtle-cli

1. Cek Path sudah bisa panggil adb atau belum (cek system path bila belum)

adb version

2. Cek koneksi hp via kabel USB dan aktifkan mode debug pada HP

adb devices

3.Cek versi java nya dan environment path seperti JAVA_HOME, ANDROID_HOME (bisa disesuaikan masing-masing) seharusnya sudah bisa dipanggil (cek system path bila belum)

which java
which javac
java -version
echo $ANDROID_HOME

4. Cek versi nodejs
Buka cmd.exe (windows) atau terminal (macos), cek versi nodejs nya (npm)

npm -v

5. Install yarn

brew install yarn

6. Install reactnative

npm install -g react-native-cli

7. Install expo cli

npm install -g expo-cli

7. Install npx (bila belum atau versi react lama)

npm install -g npx

8. Install turtle-cli

npm install -g turtle-cli
turtle --version

9. Install python , curl dan wget (opsional, bila sudah punya xampp bisa pakai ini tinggal set document rootnya)

brew install python3
which python3

brew install curl
brew install wget

 

C. Membuat Project react native 

Sintaknya :  npx expo init <namaaplikasi>          

nanti akan muncul pilihan, pilih yang templatenya typescript dan tekan enter

npx expo init MyApp1

Tunggu sampai download template selesai mungkin akan butuh waktu beberapa menit.

Download Selesai, sekarang masuk ke folder aplikasi.

cd MyApp1
ls

 

D. Test dan Debug Aplikasi

1. Start metro builder

Untuk menjalankan aplikasi kita dapat menggunakan yarn untuk start aplikasi pada mode debug seperti berikut

cd MyApp1
yarn start

Kemudian akan terbuka browser default chrome atau firefox dan muncul menu metro builder.

Akan muncul menu  disebelah kiri dan qrcode, jika akan melakukan testing pada android, buka aplikasi Expo pada android dan scan QRCODE.

 

2. Start debug di HP

Sebagai catatan : HP dan Laptop harus berada di jaringan yang sama untuk menggunakan expo launcher ini.

2a. Tampilan Expo Launcher, Klik Scan QR Code dan scan qrcode diatas yang muncul pada browser

 

2b. Hasil tampilan aplikasi di HP

E. Melakukan compiling online dengan expo

Untuk membuat APK menggunakan modul expo kita harus melakukan tahap uploading dan compiling di servernya expo. Caranya adalah sebagai berikut

1. Register dan create Account di https://expo.io dengan email anda.

 

2. Jalankan expo builder pada console dan masukan :
nama package nya, serta pilih builder type nya : apk , nanti ada pilihan generate new keystore

(jika belum pernah pakai expo biasanya akan ditanyakan username dan password login akun expo.io ):

expo build:android

 

Minusnya kita perlu menunggu queque sampai proses yang lain selesai (pada versi gratis) dan harus subscibe ke versi berbayar  agar tidak menunggu queque terlalu lama.

3. Dashboard expo

https://expo.io/dashboard

 

4. Download Hasil APK
Klik Pada aplikasi akan muncul details dan link download aplikasi

 

 

F. Melakukan compiling offline

Seringkali compiling online menunggu terlalu lama karena banyaknya queque yang sedang dijalankan oleh expo services. Untungnya ada developer yang membuat tools yang keren dengan nama turtle-cli. Step untuk menginstall turtle sudah dibahas di Atas. Sebelum menggunakan turtle pastikan anda berada pada koneksi internet yang cepat karena biasanya turtle akan mendownload Android SDK terbaru dan tools lainnya.

1.Membuat Keystore untuk sign aplikasi (tanda tangan aplikasi apk, bisa juga dilakukan via android studio)

cd MyApp1
expo fetch:android:keystore

Copy paste result bagian text keystore credential, contohnya seperti berikut dan simpan (akan kita gunakan selanjutnya)

Keystore credentials
  Keystore password: xxxxxxxxxxx1
  Key alias:         kkkkkkkkkkk1
  Key password:      ppppppppppp1
Path to Keystore:  /Users/feri/Documents/nodejs/MyApp1/MyApp1.jks

2.Set expo url dan build dist exoport folder

cd MyApp1
rm -rf dist
expo export --dev --public-url http://127.0.0.1:8000

3.Jalankan python di folder dist agar serving foldernya dist (mengemulasikan expo server)

cd dist
python3 -m http.server

 

4.Building apk offline dengan turtle-cli

export EXPO_ANDROID_KEYSTORE_PASSWORD="kkkkkkk1"
export EXPO_ANDROID_KEY_PASSWORD="pppppp1"
turtle build:android \
  --type apk \
  --keystore-path /Users/feri/Documents/nodejs/MyApp1/MyApp1.jks \
  --keystore-alias "kkkkkkkkk1" \
  --allow-non-https-public-url \
  --public-url http://127.0.0.1:8000/android-index.json

Building APK Android

Hasil Apk build :

Install File Apk ke HP via USB Cable

adb install /Users/feri/expo-apps/@anonymous__MyApp1-7bbb4675716b452bbdd55f0595fb6b62-signed.apk

 

Demikian Cara Mudah Membuat Aplikasi React native, untuk cara layouting serta coding react native akan di bahas dalam tulisan lainnya.

Tulisan ini walaupun sudah disingkat di beberapa part, mungkin masih agak sedikit panjang karena saya jabarkan step by step satu persatu, Happy Coding.

 

Sumber Bacaan:

https://www.robincussol.com/build-standalone-expo-apk-ipa-with-turtle-cli

 

 

 

 

 

125 thoughts on “Cara Mudah Membuat Aplikasi React Native dan Building APK”

  1. Подготовлю семантическое ядро для сайта
    Поиск оптимальной страницы для продвижения
    Улучшение позиций в поисковых системах
    Региональное продвижение сайтов
    Ежемесячные отчеты о проделанной работе и консультации по вопросам продвижения
    Допинг для сайта – это одна из наиболее актуальных услуг. Вам будет предоставлен чистый трафик из поисковых систем переходящий по вашим ключевым запросам.
    раскрутка сайта цены SAYT-RF.RU — сильная команда профессионалов и дружная семья.
    Мы ценим доброту и порядочность.

    Доведем вас в Топ с точностью до миллиметра..

    Reply

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

    Reply

  3. Мы рады приветствовать Вас на нашем сайте , надеемся на то что вы станете нашим партнером, заказчиком, покупателем или просто заинтересовавшимся садоводом-любителем, которому нужна квалифицированная помощь и своевременная подсказка по приобретению запчастей к своей технике.
    двигатель для газонокосилки Начав работу на уровне Москвы и области мы со временем развились до масштабов нашей огромной страны и теперь осуществляем продажи и поставки в любой регион Российской Федерации.

    Reply

  4. Если потребует замена какого-либо элемента, мы предложим его вам по выгодной цене. После замены комплектующих, при необходимости, выполняется настройка – например, настройка торсионного механизма.
    http://www.vorota-garand.ru/services/remont-vorot/remont-garazhnyh-vorot/ Почему застревают откатные ворота? Почему им потребовался ремонт? Вызывайте наших специалистов, и мы выявим корень проблемы.

    Reply

  5. Прорекламирую ваш сайт, интернет-магазин – делаю видимость вашего сайта из-за результата обратных ссылок, которые увеличивают количество посетителей; размещаю информацию о сайте соц.сетях, краудах (блогах, форумах, досках) продвижение – вы получаете первые результаты в течении месяца, источники ссылок – профиль, топики, комментарии.
    Неизбежный рост Яндекс ИКС. Ускоренная индексация сайта поисковыми системами.
    В 1-ый месяц увеличивается количество посетителей на ваш сайт, некоторые ключевые запросы попадут в ТОП.
    http://sayt-rf.ru/blog.html SAYT-RF.RU — единственная компания в Москве и России, которая покажет рост вашего проекта в самые кратчайшие сроки.

    Reply

  6. Мы осуществляем поставку и продажу запасных частей и расходных материалов к бензиновой и дизельной садовой и строительной технике уже 12 лет.
    https://zapchasti-remont.ru/shop/zapchasti_snegouborschikov1/ Наша концепция работы, как Сервисного центра, подразумевает своевременное и , как можно более полное, наполнение и снабжение запасными частями складских запасов ко всем видам бензиновой и дизельной техники, применяемой в быту: газонокосилок, мотоблоков, культиваторов, бензопил, триммеров, мотопомп, снегоуборщиков и многих других.

    Reply

  7. А1214 ЭКСПЕРТ ультразвуковой дефектоскоп общего назначения. Обеспечивает реализацию типовых и специализированных методик ультразвукового контроля, высокую производительность и точность измерений. Классическое исполнение корпуса прибора позволяет с удобством работать как в цеховых и лабораторных условиях, так и в тяжелых полевых условиях.
    дефект А1550 IntroVisor ультразвуковой дефектоскоп-томограф для контроля металлов и пластмасс. В приборе реализована цифровая фокусировка антенной решетки и томографическая обработка полученных данных для получения четкой визуальной картины внутренней структуры объекта контроля. Легкий и удобный в использовании прибор для решения большинства задач ультразвуковой дефектоскопии. Обеспечивает быстрый, комфортный и достоверный поиск дефектов в виде изображения B-сечения в режиме реального времени, что существенно упрощает и делает более доступной интерпретацию полученной информации по сравнению с обычным дефектоскопом (А-скан).

    Reply

  8. Белт-лайт представляет собой 2-х или 5-ти жильный провод с равномерно расположенными на нем патронами для ламп с цоколем Е27. В народе его также называют гирляндой с лампочками, ретро гирляндой
    что такое белт лайт Также белт лайт различается по цвету и мы представляем черный и белый варианты

    Reply

  9. Все устройства рано или поздно выходят из строя. Проблема может быть как в расходных материалах, так и из-за более существенной поломки.
    https://kypidetali.ru/product/199910-akkumulyatornaya-batareya-clevo-wsd-cd400-87-d408s-495-d400s-bat-8 Если у нас чего-то нет, то всегда можно обратиться к специалистам магазина. Мы найдем в короткие сроки необходимые запчасти и комплектующие по доступным ценам.

    Reply

  10. Белт-лайт представляет собой 2-х или 5-ти жильный провод с равномерно расположенными на нем патронами для ламп с цоколем Е27. В народе его также называют гирляндой с лампочками, ретро гирляндой
    https://белт-лайт.рф/tproduct/1-768347258483-belt-lait-dvuhzhilnii-belii-i-chernii-s Двухжильный белт-лайт используется, если вам не нужно, чтобы лампочки мигали

    Reply

  11. Я лечу псориаз травами более 40 лет. У меня сохранились карточки тысячи моих пациентов. Мне в этом году 70 лет, и я никогда не пожалела, что пошла другим путем в лечении такого коварного заболевания, как ПСОРИАЗ!
    псориаз его лечение Да, с тех времен, когда создавались рецепты, многое изменилось. Резко уменьшилась среда обитания, ускорился темп жизни, ухудшилась экология и питание человека.

    Reply

  12. Мы можем организовать отдельно поставку сэндвич панелей или выполнить монтаж нашими бригадами на вашем объекте.
    сэндвич панели монтаж сборно-разборные металлические гаражи и гаражи из сэндвич панелей

    Reply

  13. Мы можем организовать отдельно поставку сэндвич панелей или выполнить монтаж нашими бригадами на вашем объекте.
    https://panelistroy.ru сборно-разборные металлические гаражи и гаражи из сэндвич панелей

    Reply

  14. Если вы хотите построить бассейн, но не знаете где можно купить качественное оборудование для него, то наш интернет-магазин «Акваникс» предлагает своим клиентам лучшие товары для строительства бассейнов
    https://dlya-basseynov.ru/product/603-ultrafioletovaya-ustanovka-van-erp-int-bvuv-c-tech-15000/ Для наибольшего комфорта использования, также производится установка дополнительного комплектующего, в виде лестниц, поручней, светильников и прочего.

    Reply

  15. Белт-лайт представляет собой 2-х или 5-ти жильный провод с равномерно расположенными на нем патронами для ламп с цоколем Е27. В народе его также называют гирляндой с лампочками, ретро гирляндой
    https://белт-лайт.рф/tproduct/1-244767563591-belt-lait-dvuhzhilnii-chernii-i-belii-s Также белт лайт различается по цвету и мы представляем черный и белый варианты

    Reply

  16. Безболезненная процедура разрушает волосяные фолликулы навсегда без повреждения кожных покровов.
    лазерная эпиляция mediostar За счет сильного охлаждения контактного пятна (до -16 градусов), процедура проходит комфортно и безболезненно.

    Reply

  18. I recently had my websites rebuilt and i am trying to unearth new ways to make it better.Your design is quite nice and your posts are well-structured. I though that it would be nice to say that i will use some of your “know-how”.

    Reply

  20. Hi, I found your site by mistake when i was searching yahoo for this issue, I have to say your content is in actuality helpful I also love the theme, its amazing!. I dont have that much time to read all your post at the moment but I have bookmarked it and also add your RSS feeds. I will be back in a day or two. thanks for a great website.

    Reply

  21. This is very interesting, You’re a very skilled blogger.
    I’ve joined your feed and look forward to seeking more of your magnificent post.
    Also, I have shared your site in my social networks!

    Reply

  22. great publish, very informative. I’m wondering why the other specialists of this sector do not realize this. You should continue your writing. I am confident, you’ve a huge readers’ base already!

    Reply

  24. Completely perceive what your stance on this matter. Although I might disagree on some of the finer particulars, I believe you probably did an awesome job explaining it. Positive beats having to research it on my own. Thanks. Anyway, in my language, there are usually not much good source like this.

    Reply

  25. Right here is the perfect web site for anyone who hopes to find out about this topic. You understand a whole lot its almost hard to argue with you (not that I actually would want toÖHaHa). You definitely put a new spin on a topic that has been discussed for decades. Excellent stuff, just great!

    Reply

  27. excellent post, very informative. I ponder why the other experts of this sector do not notice this. You should continue your writing. I am confident, you have a great readers’ base already!

    Reply

  28. A person necessarily assist to make seriously posts I might state.

    This is the very first time I frequented your web page and to this point?
    I surprised with the analysis you made to make
    this actual post amazing. Magnificent process!

    Reply

  32. NeSordun sayesinde yeni apk oyunlar keşfedebilir, ücretli apk oyunları ücretsiz indirebilirsiniz. Mobil oyunların hileleri ve premium hesaplarını da kullanabilirsiniz. apk oyun indir

    Reply

  38. I was recommended this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my difficulty. You are incredible! Thanks!

    Reply

  40. Aw, this was an incredibly good post. Finding the time and actual effort to create a great article… but what can I say… I procrastinate a whole lot and don’t manage to get anything done.

    Reply

  55. I will immediately seize your rss as I can’t find your e-mail subscription hyperlink or e-newsletter service.Do you’ve any? Kindly permit me recognise so that I may subscribe.Thanks.

    Reply

  64. Heya i am for the first time here. I came across this board and I tofind It really useful & it helped me out much. I hope to offer something again and aid others like you aided me.

    Reply

  68. Hey, you used to write excellent, but the lastseveral posts have been kinda boring… I miss yourtremendous writings. Past several posts are just a bit out of track!come on!Also visit my blog post cannabis doctors

    Reply

  74. I have fun with, lead to I found just what I used tobe having a look for. You have ended my 4 day lengthy hunt!God Bless you man. Have a nice day. Bye

    Reply

  88. Hello, you used to write magnificent, but the last few posts have been kinda boring… I miss your super writings. Past few posts are just a little out of track! come on!

    Reply

  93. I do not even understand how I ended up here, however I believed this publishwas great. I don’t recognise who you are but definitely you are going to a famous blogger if you aren’t already.Cheers!

    Reply

  95. Good day! I could have sworn Iíve been to your blog before but after browsing through some of the articles I realized itís new to me. Anyhow, Iím certainly delighted I found it and Iíll be bookmarking it and checking back regularly!

    Reply

  103. Thanks for another great article. Where else may anyone get that type of information in such an ideal methodof writing? I have a presentation next week, and I am on the search for such information.

    Reply

  115. Aw, this was an extremely nice post. Finding the time and actual effort to generate a really good article… but what can I say… I hesitate a lot and never manage to get nearly anything done. cults3d.com

    Reply

  116. Hi there! This post could not be written much better! Looking at this post reminds me of my previous roommate! He always kept preaching about this. I’ll send this information to him. Pretty sure he’ll have a very good read. Thank you for sharing!

    Reply

  121. Howdy! This post couldnít be written any better! Going through this article reminds me of my previous roommate! He continually kept talking about this. I will send this post to him. Pretty sure he will have a very good read. Many thanks for sharing!

    Reply

Leave a Reply

Your email address will not be published.