DEV Community: Roid

Pokédex with React

Roid — Mon, 10 Aug 2020 01:38:05 +0000

This is a side project that I've been self studying for the past quarantine days - what day is it exactly? 🤔

There are indefinitely thousands of Pokédex based projects out there no doubt about that, but what I'm trying to convey here is what I've learned so far in React.

Lore

First off, I haven't touched React before and experienced it the first time back in April. It felt weird the first time you play around with it because it wasn't the typical JS,HTML,CSS that many began with and the 'Hello World' you get has already been generated for you through

npx create-react-app hello

With the ongoing quarantine life, it was difficult and I had some breakdowns/meltdowns during those times. Eventually, I had to continue and keep pushing I knew the consequences of not doing anything and continue to procrastinate -felt guilty too you know. So I set the nighttime for coding during the weekdays and chill around with the dudes in Discord on the weekends. It was like that for so long that the quarantine meltdown doesn't bother me anymore. Now that it has come to this, I'd like to show what I've learned in React for the past 5 months time.

Concept

Why did I pick the Pokédex as my first React project? It's simple I like Pokémon, they've provided an open public API which can be pulled from PokéAPI. I've done this before but with vanilla JavaScript,HTML and CSS so it shouldn't be that bad right? Well kind of, I had to study the concepts in React, its components and API hooks that may come useful for the project.

Tools

React
react-bootstrap
axios
pokeapi

I thought of going react-bootstrap just because I've experienced with bootstrap before and gets the job done. Axios because of its already parsed JSON body.

I'm not going to go through very thoroughly and deep but just explain the procedure and execution on what is going on in the program.

The root/parent of the program (App.js) here uses hooks to be used for Context and a constant for Memo. Context here is, as referred to React Docs, a way of passing down data through the component trees without the need to pass props manually at every level.

App.js

function App(){
    const [active, setActive] = useState(true);
    const [queryTerm, setQueryTerm] = useState('');
    const ProviderVal = useMemo() => ({
    active, setActive, queryTerm, setQueryTerm}),
    [active, setActive, queryTerm, setQueryTerm]);
    return(
        <ContextApp.Provider value={ProviderVal}>
         ...
        </ContextApp.Provider>
    );
}

There are two Hooks state used and these two should freely be able to pass down the data from child-parent and parent-child through the ContextApp. Every Context object will have a provider to allow any changes that are being made exclusively, this means it will re-render the value (in this case ProvideVal) whenever the value prop changes its value basically. Since ProviderVal is a JavaScript function of useMemo(), useMemo itself is a HOC (Higher Order Component) that return cached values whenever the dependencies inside of the arrays changes.

PokemonCard.js

function PokemonCard({name, url}){
    ...
    useEffect(()=> {
        axios.get(url).then((res)=> {
              ...
        }.catch((e)=>{
            console.log(e);
        })
    }, [url]);

return(
    ...
);
}

export default React.memo(PokemonCard);

The PokemonCard function takes in two props {name, url} that will re-render whenever it is changed. Changes of {name, url} takes place in PokemonList.js and Search.js, one is for listing a page filled with pokemons and the other is for searching specific pokemon. Which is why PokemonCard will need to be re-rendered several times through large collections of pokemons and its sprites and other miscellaneous items. The usual axios fetching of the api structure with the [url] as the dependency for changes that will be made in the useEffect() function. Basically if the url changes, useEffect will need to be run again because it's being included and called by the dependency array.

PokemonList.js

function PokemonList(){
    ...
    useEffect(()=> {
        axios.get(currentPage, {cancelToken: new axios.CancelToken((c)=> (cancel=c)), })
             .then((res)=> {
                  ...
             })
             .catch(){
             })
        return ()=> {cancel()};
    }, [currentPage, pageNum]);

...

export default React.memo(PokemonList);

}

I found this article about Axios Cancel method here. It's really well done!
The axios fetch here is almost the same but with the [currentPage, pageNum] as the dependency array. The very last bit for exporting the function is being wrapped around the React.memo() higher order function.

ContextApp.js

import {createContext} from 'react';

export const ContextApp = createContext(null);

Creates a context object and initialized.

Search.js

function Search(){
    const {queryTerm} = useContext(ContextApp);
    const name = queryTerm.toLowerCase();
    const url = `https://pokeapi.co/api/v2/pokemon/${name}`;
    return <PokemonCard name={name} url={url} />;
}

Here's a snippet of the Search function which has the useContext() function that refers to the {queryTerm} variable. It returns the PokemonCard component that has custome {name} and {url} from the {queryTerm}.

Closing

I guess I'm liking it? I'm not sure but I will continue with this project because there's still potential in using this API for more React APIs and concepts that I might've not known about. You can contribute to this project by creating PRs or Issues.

Docker on Raspberry Pi [Bahasa Indonesia]

Roid — Mon, 01 Jun 2020 21:34:00 +0000

Apa itu Docker?

Docker adalah alat yang membantu developers, sys-admins dan devops untuk menyebarkan aplikasi mereka di sebuah container dan dijalankan pada sistem operasi yaitu Linux.

Manfaat utama menggunakan Docker adalah nge-package aplikasi dengan dependencies ke dalam satu unit yang standar. Beda dengan virtual machine, container tidak memiliki overhead yang tinggi dan karena itu memungkinkan penggunaan sistem yang lebih efisien.

Saya sendiri sudah pernah experience menggunakan dan maintain aplikasi di virtual machine, itu standar industri saat ini masih banyak yang menggunakan virtual machine. Penggunaannya sendiri itu memang hebat dalam menyediakan proses isolasi penuh untuk menjalankan aplikasi. Tapi kekurangan nya VM itu di penggunaan resource dan overhead komputasi yang tinggi. Dengan adanya Docker ini, dia mempunyai prinsip yang sama yakni memanfaatkan low-level proses isolasi dari host OS dan juga menggunakan komputasi yang sangat rendah.

Post ini saya cuma membahas gimana kalian bisa ngoprek2 dan bermain dengan Docker di Raspberry Pi. Jika ada yang kurang tahu apa itu Raspberry Pi, dasarnya itu komputer kecil yang kalian bisa beli di Tokopedia; Bukalapak; Shopee; dan e-commerce lainnya relatively seharga Rp.500k ribuan. Yang model baru Raspberry Pi 4 itu Rp.1jutaan ini juga include accessories yang diperlukan rata2 harga segituan. Kalau saya sih masih menggunakan model 3b atau 3b+ deh lupa yang mana hehe.

Trus gimana caranya bang?

Saya harap kalian bisa menginstal dan menjalankan Raspbian OS dan juga dapet access ke SSH atau VNC. Mulai sekarang saya akan menunjukkan kepada kalian bagaimana menginstal docker dari fresh Raspbian installation.

Banyak cara online yang menggunakan cara ini:

curl -sSL https://get.docker.com | sh

dan ini juga kadang nggak bisa diandalkan. Sebaiknya kita mengikuti dari document yang di sediakan dari Docker [Docker Docs]. Saya mengikuti dari docs nya docker, dan juga menemukan masalah waktu menginstal. Kalau kalian mengikuti docs nya dan sudah mencapai di section:

$ sudo add-apt-repository ...

disini saya encounter Traceback error

Error: could not find a distribution template for Raspbian/buster

Sampai sekarang (02 June 2020), error ini masih Open issue disini. Ada work around nya bukan solusi nya, solusi dan work around berbeda ya. Saya dapat memperbaiki error dengan menggunakan work around yang di provide dari user Chepurko. Work aroundnya begini
deb [arch=armhf] https://download.docker.com/linux/debian raspbian-buster main
Ini yang ditulis di document Docker, ditambahkan ke directory etc/apt/sources.list.d/docker.list. Kalau nggak ada docker.list bisa buat file yang baru dengan nama yang sama.

Docker Time

Sekarang kita sudah menyiapkan semuanya, saatnya untuk membuat tangan kita kotor. Di bagian ini, kita akan menjalankan container Ubuntu di sistem kita dan merasakan command2 docker.

Untuk memulai, mari kita jalankan yang berikut di terminal:

$ sudo docker pull ubuntu

Perintah pull ini mengambil image ubuntu dari registri Docker dan menyimpannya ke sistem kita. Kalian dapat menggunakan $ sudo docker images command untuk melihat daftar semua image di sistem kalian.

Bagus! Sekarang mari kita jalankan Docker berdasarkan image ini. Untuk melakukan itu kita akan menggunakan docker command.

$ sudo docker run ubuntu

Tunggu, keliatannya ngga ada yang terjadi?! Bisa jadi programnya kena bug? Ya tidak. Di belakang layar ada banyak hal yang terjadi dengan Docker, ketika kalian memanggil run command, client Docker menemukan imagenya ubuntu, di load ke container dan eksekusi command dalam container itu. Ketika kita menjalankannya, itu kekurangan perintah yang diperlukan supaya kita bisa menggunakannya. Dasarnya dia nge boot, menjalankan perintah kosong dan kemudian keluar. Proses ini sangat cepat, bayangkan virtual machine saja udah beda jauh di speed performance nya untuk mem-boot, menjalankan perintah dan membunuhnya. Okay, sekarang saatnya untuk melihat perintah $ sudo docker ps yang menunjukkan semua container yang sedang jalan.

Kita melihat garis kosong karena tidak ada container yang berjalan. Mari coba varian yang lebih berguna dengan menggunakan

$ sudo docker ps -a

Jadi apa yang kita lihat di atas adalah daftar semua container yang sedang jalan di machine saya. Perhatikan dengan STATUS column, ini menunjukkan bahwa container ini keluar beberapa menit yang lalu.

Mari kita coba menggunakan flag interactive di terminal.
$ sudo docker run -it ubuntu

Menjalankan command run dengan flag -it melampirkan kita ke tty interactive dalam container. Saya juga menggunakan --rm flag, dasarnya container yang baru saya jalankan bakal di hapus pas saya sudah menggunakannya. Menghapus container juga bisa digunakan dengan command $ sudo docker rm <NAMES/CONTAINER ID>. Ada banyak command yang kalian bisa main dan oprek sendiri.

Wrapping Up

Setelah post yang panjang, melelahkan namun menyenangkan, kalian sekarang bisa menghadapi di dunia container! (still far from perfect, but like what others say "practice makes perfect" ). Saya pun sedang bermainan dengan Docker walaupun masih berkuliah, beberapa hari lagi bakal ada ujian akhir semester juga :(

Saya berharap bahwa menyelesaikan post ini bisa membuat kalian lebih percaya diri kepada kemampuan kalian sebagai developer,sys-admin atau devops. Put your mind and ideas into action, Terima Kasih.