Blink lamp with Arduino, Node.Js And Johnny-five.js

Halo temen-temen,

Kali ini saya akan mengimplementasikan blink lamp arduino dengan menggunakan node.js dan Johnny-five. karena kebetulan kemarin saya menghadiri meetup Jakarta JS, dan salah satu pemateri membahas tentang IoT meggunakan Node.js saya di materi itu pembicara mendemokan subuah control device dengan menggunakan salah satu framework js yaitu Johnny-five.js dan it’s cool :D. Seperti yang kita tau bahwa arduino sebenarnya mempunyai IDE dan bahasa pemrograman sendiri, yang menarik disini adalah kita akan embeded framework Johnny-five ke dalam board arduino untuk membuat projek yang sangat sederhana yaitu blink lamp. dengan kata lain kita akan memprogram arduino dengan menggukanak bahasa pemrograman js. wow.. kelihatannya keren ya.. 😀

oke kita langsung saja mempersiapkan alat dan bahan. yang harus disiapkan adalah sebagai berikut:

1. Board Arduino
2. IDE Arduino
3. Node
4. 1 buah Led Ultra

oke, setelah semua siap mari kita mulai setup board arduino mulai dari COM Port. pada tutorial ini saya menggunakan COM1 untuk komunikasi antara board Arduino dengan laptop. pada saat kita konekkan board Arduino secara otomatis IDE Arduino akan mendeteksi perangkat arduino yang kita gukakan pada Tools > Board dan untuk melihat port yg digunakan pada board Arduino pada Tools > Port. 

Selanjutnya kita biat projek baru pada IDE Arduino dengan sempel Standart Firmata.

Setelah projek terbuat lalu embeded projek tersebut ke dalam board Arduino.

Selanjutnya, kita masuk ke direktori tempat menyimpan projek Arduino tersebut. pada tutorial ini saya menaruhnya di D:\Arduino\Johnny-five. Kemudian install Johnny-five pada direktori tersebut dengan cara sebagai berikut.

$ npm install johnny-five

Apabila install johnny-five sukses maka akan ada folder node_module di dalam folder projek arduino tersebut.

dan selanjutnya kita buat file blink.js didalam direktori projek Arduino. Kemudian isikan sintaks ini didalam file blink.js tersebut.

var five = require('johnny-five');

var board = new five.Board();

board.on('ready', function() {

  var led = new five.Led(13); // pin 13

  led.blink(500); // 500ms interval

});

kemudian save dan jalankan blink.js di cmd dengan sintaks berikut.

$ node blink.js

dan jika berhasil maka lampu akan berkedip secara otomatis.

sekian tutorial dari saya.

thanks.

Android : Structuring and Delivering Data Using Firebase

Halo, Kali ini saya akan memcoba mengimplementasikan fitur baru dari Google yaitu FIREBASE. Apa itu firebase? Firebase adalah penyedia layanan cloud dengan backend sebagai servis yang berbasis di San Fransisco, California. Perusahaan ini membuat sejumlah produk untuk pengembangan aplikasi mobile ataupun web. Firebase di dirikan oleh Andrew Lee dan James Tamplin pada tahun 2011 dan diluncurkan dengan cloud database secara realtime di tahun 2012. Produk utama dari Firebase yakni suatu database yang menyediakan API untuk memungkinkan pengembang menyimpan dan mensinkronisasi data lewat multiple client. Perusahaan ini diakusisi oleh Google pada Oktober 2014. (https://idevangelist.com/informasi/)  

Nah sekarang kita lanjut membuat applikasi untuk mengirimkan data ke cloud databasenya  Firebase. hal pertama yang harus dilakukan adalah

1. Membuat akun firebase tentunya, bisa akses di https://firebase.google.com/ dan kemudian registrasi terlebih dahulu.
2. Jika sudah Registreasi kita langsung membuat project di https://console.firebase.google.com/ .
3. Okey, setelah itu beri naka dan Negara.
4. kemudian pilih “Tambahkan Firebase ke aplikasi Android Anda”.
5. Kemudian daftarkan package name dari projek android kita dalam tutorial ini saya menggunakan nama paket “nekadlabs.chatmessage”.
6. Ikui langkah selanjutnya sampai finish.
7. Dan untuk selanjutnya kita create new project di Android Studio dan jangan lupa beri nama package namenya “nekadlabs.chatmessage”.
8. Jika sudah berhasil create project, kemudian kita aktifkan fitur Firebase pada Android Studio dengan cara sebagai berikut,.
   1. File
   2. Project Structure
   3. kemudian select menu Cloud -> checklist Firebase. yang menandakan kalau kita mengaktifkan fitur firebase pada project ini. kemudian OK.
   4. ketika click ok secara otomatis repository pada gradle akan terupdate, dan manifest juga akan mengaktifkan permission Internet.
9. Pada activity__main.xml ketikan sintak sebagai berikut.

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
       tools:context="chatmessage.nekadlabs.chatmessage.MainActivity">
   
   
   
       <LinearLayout
           android:layout_alignParentBottom="true"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="horizontal">
   
           <EditText
               android:layout_width="259dp"
               android:layout_height="wrap_content"
               android:id="@+id/textInput"/>
   
           <Button
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:id="@+id/sendButton"
               android:text="Send"/>
   
       </LinearLayout>
   </RelativeLayout>

10. kemudian buat Class model dengan nama ChatMessage dan ketikkan sintak sebagai berikut.

    package nekadlabs.chatmessage;
    
    /**
     * Created by Nekadlabs on 5/19/2016.
     */
    public class ChatMessage {
    
        private String author;
        private String message;
        
        public ChatMessage() {
        }
    
        public ChatMessage(String author, String message) {
            this.author = author;
            this.message = message;
        }
    
        public String getAuthor() {
            return author;
        }
    
        public void setAuthor(String author) {
            this.author = author;
        }
    
        public String getMessage() {
            return message;
        }
    
        public void setMessage(String message) {
            this.message = message;
        }
    }

11. dan pada MainActivity.class sintaksnya sebagai berikut

    package nekadlabs.chatmessage;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.KeyEvent;
    import android.view.View;
    import android.view.inputmethod.EditorInfo;
    import android.widget.EditText;
    import android.widget.TextView;
    
    import com.firebase.client.Firebase;
    
    import java.util.Random;
    
    public class MainActivity extends AppCompatActivity {
        private static final String FIREBASE_URL = "https://project-4291869323989811987.firebaseio.com/chartmessage";
        private Firebase firebaseRef;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Firebase.setAndroidContext(this);
            firebaseRef = new Firebase(FIREBASE_URL);
    
            EditText inputText = (EditText) findViewById(R.id.textInput);
            inputText.setOnEditorActionListener(new TextView.OnEditorActionListener(){
    
                @Override
                public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                    if (actionId == EditorInfo.IME_ACTION_SEND){
                        sendMessage();
                    }
                    return true;
                }
            });
    
            findViewById(R.id.sendButton).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    sendMessage();
                }
            });
        }
    
        public void sendMessage(){
            EditText textInput = (EditText) findViewById(R.id.textInput);
            String message = textInput.getText().toString();
            if (!message.equals("")){
                Random rand = new Random();
                String author = "TestUser" + rand.nextInt(1000);
                ChatMessage cMessage = new ChatMessage(author, message);
                firebaseRef.push().setValue(cMessage);
                textInput.setText("");
            }
        }
    }

12. jangan lupa mengimport google-services.json
13. dan di copy kedalam project app kita.
14. setelah itu coba lah run project anda dan lihat hasilnya di
15. jangan lupa di tab Rule (Aturan) ubah sintaks jadi seperti ini.
    {
    “rules”: {
    “.read”: “true”,
    “.write”: “true”
    }
    }
16. dan selamat! anda sudah berhasil membuat applikasi sederhana. dan pada artikel selanjutnya saya akan melanjutkan aplikasi ini untuk menjadi sebuah applikasi chatting yang realtime. 😀

 

download project di github saya.

Send string parameter in Activity to Fragment On Android

This time I will discuss how do I send a string parameter of activity to fragment the turn layout (Intent).  I experienced this problem just now because I have just started using a fragment in my activity.

What is the fragment?

Fragment basically like activity that handle a layout, but the difference is the fragment can not walk alone fragment need activity to show a component.

We further discussed how to send a string parameter of activity to another activity that use fragment.

So I have a second activity that one without the other fragment by fragment, on the Activity 1 is currently set at the event onclick button perform as usual intent.

Intent intent = new Intent(Activity1.this, Activity2.class);
intent.putExtra("valueString", message);
startActivity(intent);

Kemudian pada Activity2 getting value string dari Activity1.

Intent intent = getIntent();
String strValue = intent.getStringExtra("valueString");

And to send the String parameter value to add syntax fragment such as the following syntax previous intent.

FragmentClass classFragement = new FragmentClass ();
Bundle bundle = new Bundle();
bundle.putString("valueString", strValue);
classFragement .setArguments(bundle);

And for the class fragment add the following syntax.

Bundle bundle = getArguments();
String selected = getActivity().getIntent().getStringExtra("valueString");
textValue.setText(selected);

In this tutorial I show you the results of parameters in a EditText that I named textValue.

okay so this tutorial may be useful: D

 

 

Test Driven Development (TDD)

What is TDD?  TDD (Test Driven Development) is a concept of application development where scripts for testing the application is made earlier than the main program code. Script is meant here is a program code that tests to test the parameter, the value of output produced by a function.

why should use TDD? 

If you have a web development team then the team member you commit the modules they have created by using version control (ex : git). You are sure that the modules they created is going well and there is no error. However, how do you know if they make the module does not cause error module / other existing class? whether you will check his one-on-one for each of the modules? What if there are many (tens to hundreds) modules in your application? what if everyone in your development team commit more than once in a day.

using TDD you do not need to check one by one for each module. You just stay the execution of test scripts that have been made previously. With one whole test script execution that there is going to run your fund will determine more quickly which modules I needed to be fixed.

 

 

Get Started React Native

Hello!
Now I wont to teach you how to install and config React Native for your Windows 7. All process run in Command Prompt.

First. you open Command Prompt

$ pm install -g react-native-cli

$ react-native init AwesomeProject

After your install and create project React native you get the folder project. Now you can follow next step. you run project to android emulator. Now i use Genymotion.

$ cd AwesomeProject

$ react-native run-android

Okey you finish to run project to android emulator. And next you start project.

$ react-native start

And you reload JS on your emulator.

Okey you finish to create first App with React Native 😀

 

Material Design – Cara custom Floating Button