Hai all,

It's me again, Zahra. For this time, I will share with you about unit testing for front-end.

After I learned about react, My second task is I have to construct a unit test for sidebar which is part of front-end-things. Can you imagine? How could I make unit testing for front-end meanwhile I've just learned about react couples days ago? Wow. Very challenging, right? (yeah, at least for me)

Okay, first, trust me, I don't know what to do. Seriously. I couldn't imagine, how could you test your user interface? like seriously how? that was very abstract for me. Then... the first thing that I did is I asked my friends, Bthari and Glory. Glory's first task is to learn about react front-end testing (Aha! I know I asked the right person) They told me that allocateam's front-end system will be developed using React JS in React Boilerplate architecture. I decided to learn by doing. I open folder components, and there's a folder named "Button". That Button component is already provided from react boilerplate. I open unit test folder for the button that looks like this:

That what exactly I'm doing, I learned from that file, I searched one by one thing that I don't understand, see the pattern, trying to understand every detail that could help me to construct my unit-test for the sidebar. I really recommend to you all, if it looks really abstract for you in the first time, don't give up. Ask your friend (who already knew about it before). Googling is a good idea. Because, after I saw these button unit-test (who already provided by react boilerplate), I could understand it slowly. Nevermind, slowly but sure!

If you could see the detail, there's something called enzyme. Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Component's output. You can open https://www.npmjs.com/package/enzyme if you want to know and explore more about enzyme.

The conclusion is, I really really thank PPL for letting myself exploring many new things that I never know before. Don't ever give up. Just keep going, keep searching, then you will find the way!

Want some motivation? Look!

On the left side, that's the sidebar that I made! It just has to start with the unit test first and... do the styling, yeah!

and yeah, this too..

For the whole assests, you can check it on this page: https://www.figma.com/proto/N9cfmMyWn293f0SUl7KXhmlM/Mockup-PPL-Mapan?scaling=contain&node-id=3%3A1 :)

For the styling, I did it like this:

Just trust your self first. If I can, so do you! :)

That's all for this post. I hope you all always happy with whatever you all do. Do not ever give up, okay? See ya!

Hai allocaters! :)

Here I am again, Zahra, one of your lovely hipsters from allocateam :)

Like I said before, I will share with you guys every week about what I have done, what I have learned and anything that I can share with you guys from PPL.

If you guys interested to learn about react, this post (maybe) will help you a little (I hope so). This post can help you guys to know the intro about react. No, I won't say that it would be easy, but I will let you guys know how I learned about react. 

For the intro, I never ever know about react before.  The first time I knew about react is recent, in the PPL class. That's why for my first task is to learn about react. I really learned about it from the start. The good thing is, I found interesting web which is https://www.codecademy.com. Codeacademy will give you some explanation about React. After that, it will give you instructions and you have to code it by your self. 

On codeacademy, ReactJS: Part 1 will be divided into 3 parts. First, You will learn about JSX, and it includes the intro and advanced JSX. Second, you will learn about React Components and the last is Components Interacting. 

On the intro, they present you about JSX, a syntax extension for JavaScript that was written to be used with React. JSX code looks a lot like HTML. Then, I learned about JSX Elements. JSX Element is a basic unit of JSX. Here's an example of a JSX element:

<a> Hello guys, We are allocateam!</a>

This JSX element looks exactly like HTML. The only noticeable difference is that you would find it in a JavaScript file, instead of in an HTML file. Other than that, you guys will learn about attributes in JSX. JSX elements can have attributes, just like HTML elements. A JSX attribute is written using HTML-like syntax. Example of it is: 

<a href="http://www.allocateam.com"> Hello guys, We are allocateam!</a>

href="http://www.allocateam.com" is example of attribute in JSX. href is a name and the http is a value of the attribute. A single JSX element can have many attributes like HTML. You will also learn about nested, outer elements, rendering and passing variables in JSX. Then you will move to the React Component section. 

React applications are made out of codes that are responsible for one job called component. before you make components, you have to import React and ReactDOM library first. There is one class of JavaScript called React.Component, you have to use it for making your own component class. You can make a class by using this code:

class YourComponentNameGoesHere extends React.Component {}

You do really have to open codeacademy because it will tell you a lot about Component Class Instructions and all about rendering in React. Remember, you have to code all the instructions all by your self.

That all about the intro of React. You want to know more? Trust me, the time that I took for studying about react is so worthy. I thank Codeacademy for the good things on there! 

Thank you! See you on the next post!

pict source: https://www.youtube.com/watch?v=yc8fg7gWbBA

Hey, everyone! Glory is back. Now, let me share about my exciting journey of migrating from the one who always works on the back side to be the one who should perform on the front side!

Basically, in every group project I have done during my uni life, I always got the responsibility to develop the back-end system of some applications. And I admittedly really interested about any back-end technologies, so if I have leisure times, I often try to learn about another back-end technology that I haven't learned before. Those reasons bring me to be the careless one about front-end things.

But, in this PPL journey, I think this is the right time to try something outside my truly comfort zone. Since my team is dominated of back-end people, it increasingly strengthen myself to dare to re-dealing with front-end things. And now.. I'm here, with some front-end tasks to be done 😂

To you guys who already comfortable with back-end things and really don't want to have an affair with front-end things, if the reason is only limited to "I'm lazy to learn", here I want to invite you guys to learn with me together. I'm still also a newbie, but it isn't that bad, guys, please.

The first 2 days of learning front-end, specifically I chose to learn React JS, because this framework will be used for allocateam's project, I followed the tutorial given by codecademy (I'll put the link on the reference section below). I love learning from that site because it give the materials step-by-step clearly and easy to follow. That site isn't only serve the course about React JS, but also some interesting courses mostly in tech field. Very recommended for you tech-guys! After finished the course, I tried to practice about what I have learned by creating a simple user interface web and.. the result is good enough! Really proud of myself that time 😎 You can try yourself and I'm sure you will get the pride I felt that time.

Then, I was about to start the development of allocateam. My friend, Bthari, who already has more knowledge about front-end things, told me that we will use React Boilerplate to help our front-end development easier. I ask her, "Hah? What's React Boilerplate?" Then she answered, "Kind of framework of React." The conclusion is "React is a JavaScript's framework. Boilerplate is a React's framework. So, the boilerplate is framework of framework!!?!" Really confusing huh.

But, I'm trying to not complaining things. I have to learn more. I believe that learning is never wrong. After took some times to learn the boilerplate, evidently, boilerplate is very amazing! Just like after we learn a new framework, although it will be hard in the beginning to understand the architecture, after we understand, it has a lot of helpful things inside. Boilerplate makes us easier to manage our component, container, even unit test! Everything is already built-in the architecture, so we don't have to install every dependency that we are about to use. Bthari also said that there are a lot of React Framework out there. Boilerplate is only one of them. Wow! So exciting, right?

One thing, I'm really grateful that I dare to take the decision to re-dealing with front-end things again. I'm happy that I learn a lot of exciting useful knowledges. I wish that I can learn more and more things ahead during the development of allocateam. Wish me luck everyone! And stay tuned for more another exciting story from every allocateam's member.

See you on another post!


Reference
https://www.codecademy.com/learn/react-101
https://www.codecademy.com/learn/react-102

Hello allocaters, It's me again aye,from the flask post before. If you remembered from the post before I told you in the next post I am going to tell you about how I will generate the dummy data for our system. Well wait no longer,cause now I am going to tell you all about the generation of that data,but before that I will give you an extra story of my days as a hustler in allocateam  up until now. 

So first of all I am going to tell you about my days as a hustler in allocateam. In the first week of PPL class, we were given our partner and also his contact number,of course as a hustler it's my duty to establish the relation for our team. So I contacted our project owner which is mas wawan through email. At first he replied that he is out of town ,which got us panicking a bit. We also were scared because all of the other team already contacted their project owner. But is okay we got a solution. We set up a confrence call, and we contacted him by phone to get all the requirements needed for our project and after that we contacted through whatsapp so we can have a better connection. So that is the first few weeks of our days in PPL more stories regarding our partne in the next blog post.

As a huster in allocateam. I also have to think big and also make daily improvements. So we as a team decided to think of innovations that our team can make that others don't have.
So we as a team have created an Instagram page. So every body can see what we are up to all the time. I know there is a blog, but we think an Instagram page will reach more people and get more people to know about our product. If you want to check us out visit

https://www.instagram.com/alloca.team/

Now let's get to the generation of data.  I have created the generation of data using mockaroo.

what is mockaroo? its an api that helps you of generating data. Interested in mockaroo visit the site here.

https://www.mockaroo.com/

 That is it for now allocaters leave any questions or coments in the comment section below , I am Ahmad Yazid Harharah hustler of allocateam Signing out :)