How to install Ruby on Rails on macOS Sierra 10.12

  1. Install Homebrew. Homebrew simplifies the installation of software on Apple’s macOS operating system. Open Terminal and run the following command:
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  2. Install Xcode. Xcode is a software package to help you develop iOS and OS X applications. You don’t need the full Xcode package to get the Command Line Tools. Check if the full Xcode package is already installed:
    xcode-select -p

    if you see:

    /Applications/Xcode.app/Contents/Developer

    it means the full package is already installed. If you don’t have it, type this command to install:

    xcode-select --install

    then will appear this :

    xcode-select: note: install requested for command line developer tools.

    An update popup window will appear to install the command line developer tools. You can choose to confirm by clicking “install”. Wait for the Command Line Tools package download to complete.

     

  3. Install Ruby. Run the following commands in your Terminal:
    brew install rbenv ruby-build
    rbenv install 2.4.1
    rbenv global 2.4.1
    ruby -v

    #ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin15]

     

  4. Install Rails
    gem install rails -v 5.0.1

    installingrailinstallingrail2

  5. Execute the Rails with this command:
    rbenv rehash
  6. Verify Rails version:
    rails -v

    #Rails 5.0.1

  7. Setting up a database using mySQL
    brew install mysql

    installingmysql
    To have launchd start mysql now and restart at login:
    brew services start mysql
    Or, if you don’t want/need a background service you can just run:
    mysql.server start

  8. Final steps to create your first Rails application:
    rails new myfirstapp
    rails new myfirstapp -d mysql
    #move to the folder directory
    cd myfirstapp
    #Create the database
    rake db:create
    rails server
  9. Open your browser and type http://localhost:3000 to view your website.localhost.png

How to set up micro:bit and start your adventure

What is micro:bit?

micro:bit is a pocket-sized codeable computer with motion detection, a built-in compass and Bluetooth technology.

There are many micro:bit kit available out there. One of the samples is Tea Brewer Kit.

Please refer here for the instructions.

If you’re just getting started with the Micro Bit, we recommend you check out a few of the tutorials, uploaded by the BBC and its partners to the Micro Bit website.

OK. Let’s Get Started!

Connect the micro:bit to the battery holder and follow the instructions on the LED display.

  1. The LED display will light up, with the word “HELLO”
  2. The arrow signs pointing to the left button, and you’ll be asked to press the A button on the left, and next it will point to the right button, which is B button.
  3. It will display “SHAKE”
  4. CHASE THE DOT
  5. GREAT!. NOW GET CODING!

This sequence will run each time you power up until you upload your own program to it.

Now, it’s time to start making your own program.

You can go to www.microbitworld.me. There are lots of tutorials and information on the website. You can select your coding editor that you would like to code with.
codingeditor

Let’s try to make a simple code to display word “ONVINETECH”.

  1. Open a web browser and type https://pxt.microbit.org/
  2. Click Input and drag “on button A pressed”
    input
  3. Click Basic and drag a Show String block from the sidebar to the stage
    showstringcode
  4. Click the A button on a micro:bit simulator.
  5. Give it a name and click save, it will automatically download the file to your “Downloads” folder.
  6. Open the Downloads folder click and drag .hex file into microbit drive.
  7. Disconnect it and press the A button, it will display the word “ONVINETECH” across the LED Display.

Let’s follow another tutorial from this website how to create a compass with “If Statement.”

The micro:bit has an on board compass. This compass has to be calibrated the first time that it is used, so that the readings that it produces are accurate. When you load a program into the micro:bit and your program tries to read from the compass, it will scroll the words ‘DRAW A CIRCLE’ on the screen. Hold the micro:bit horizontally and tilt it on the spot trying to fill in the circle, until all the dots are filled and then you see a smiley face. After you have done this, your program will run.

compasscode

Thanks for reading. Have fun and start to coding. Do share with me about your projects using micro:bit.

How to use Adobe XD CC beta version

What is Adobe Experience Design CC?

Have you ever imagine if you have a client that ask you to design mobile apps, website or anything else with interactivity and then traditionally maybe you are using illustrator, photoshop or event third party apps to design it, then you have to show it to a client’s and ask them to imagine if you will click this button it takes you to this page.

Then now, Adobe is building an application that actually lets you, not to only design it but actually put that interaction so your clients don’t have to imagine if they click this button it goes to other pages that can actually click and go to that page.

It’s not an app builder, it’s not a web builder it doesn’t write HTML, and didn’t write any code at all. It just basically allows you to create your design very similar to what you would do in photoshop or illustrator and then let you prototype or send your designs as a working model to your clients. That’s what Adobe XD is.

Let’s take a look at how it works.

    1. Create the new project.
      welcomescreen.png
      Welcome screen Adobe XD beta version

      You can start with a mobile phone with a prompt to default to an iPhone 6/7 but you can switch to different iPhone, you can switch to an iPad or Web or you can choose a custom size.

      The workspace is divided into two views, Design and Prototype. In the design view, you can use a number of tools and features to create design layout, add artboards and import resources from other applications.

      In the Design view, you can use a number of tools and features to create design layout, add artboards and import resources from other applications.

      In the Prototype view, you can link between artboards (pages) and define the relationship between them through interactions.

      Once it’s done, you can preview it by clicking the play button on the top right.

    2. Choose the artboard, for instance, iPhone 6/7.
    3. Setup the Welcome Page, click rectangle icon from the Tools panel on the right. If you want to make the round edge, click and drag the dot inside the rectangle. Click File > Import, choose any picture for your background.
    4. Build the content area, repeat the same step.
    5. Add the Content.
    6. Creating content.
      You can create multiple contents without duplicating them manually. Click Rectangle, then click repeat grid button in the properties panel. You can drag the grid to the right or bottom.ss_okinawa_grid.png
    7. Build the linkage between pages. In order to link between the pages, select the page, click on the blue arrow to the right page. The target floating menu appears; select the target page, and set the transition animation type (for example “Dissolve”). Repeat this step to link between the other pages.linked
    8. There are two main methods to preview it. First, is the preview feature within Adobe XD itself just click the play button. Second, you can preview it from your device connected via USB.preview.png
    9. You can record your prototype which allows you to record the flow between pages and save to .Mov format.
    10. Sharing the prototype.We’re done! Now we can share the prototype with other team members who aren’t necessarily using XD. Just click share and copy the link and shared between team members.You can see the sample from here

Tips for Mac OS-X user

  1. Adding a signature to your picture. Open a picture in Preview and click Tools->Annotate ->Signature ->Manage Signature.
    Follow the on-screen instructions to add a signature. You can save your signature for future use as well.

  2. You can get exchange rate and convert currency with Spotlight in El Capitan. The currency conversions are done with Calculator app by gathering exchange rates from Yahoo, but the data is obviously aggregated into Spotlight for convenience.converter.png
  3.  Built-in emoji Press ctrl ++ space to open the window. This window contains an exhaustive list of special characters. You can choose the special characters and emoticons that you need from this window.emoji.png
  4. Speech to text conversion you can convert your speech-to-text by pressing the function (fn) key twice and begin speaking. Your voice gets converted to text when you press function (fn) key one more time. The OS X types out as you speak.speech.png
  5.  Hot Corners.
    You can enable hot corner setting from System Preferences -> Desktop & Screen Savers ->Screen Saver Tab -> Hot Corners
    There are 9 options you can select of Start Screen Saver, Disable Screen Saver, Mission Control, Application Windows, Desktop, Dashboard, Notification Center, Launchpad and Put Display to Sleep.hot-corners

How to fill your Mac screen with split view

Enter the split view

  1. Hold down the full-screen button   in the upper-left corner of a window.screen-shot-2017-02-22-at-11-37-40-am
  2. When you hold the button, you can drag it to the left or right side of the screen.
  3. Release the button and do it for another window and put side by side.
  4. To exit split view you can move the pointer to the top of the screen to show the window buttons, then click the full-screen button  .

The result:

Screen Shot 2017-02-22 at 11.52.04 AM.png

How to create Facebook Messenger Bot

This tutorial will guide you through the process of creating a simple messenger bot, using the Facebook Messenger API, node.js, and ngrok.

Create a Facebook Page.

Create a Facebook App, Click Add a New App. There are a few platform for you to select, for this tutorial I will choose the basic setup, type the display name, contact email and choose a category for your app.

From Product Setup dashboard, select Messenger then click the “Get Started” button. Select the page you just created, and this will generate a Page Access Token.

Download Node.js source code or a pre-built installer for your platform. Then, open up terminal, navigate to the directory you want to host your project in, and run: npm install messenger-bot.

Create a new file called app.js and copy-paste in this code, originally taken and modified from messenger-bot’s examples directory.

'use strict'
const http = require('http')
const Bot = require('messenger-bot')

let bot = new Bot({
  token: 'PAGE_TOKEN',
  verify: 'VERIFY_TOKEN'
})

bot.on('error', (err) => {
  console.log(err.message)
})

bot.on('message', (payload, reply) => {
  let text = payload.message.text

  bot.getProfile(payload.sender.id, (err, profile) => {
    if (err) throw err

    reply({ text }, (err) => {
      if (err) throw err

      console.log(`Echoed back to ${profile.first_name} ${profile.last_name}: ${text}`)
    })
  })
})

http.createServer(bot.middleware()).listen(3000)

Go back to your Facebook app page, copy the Page Access Token, and replace PAGE_TOKEN in your app.js file with your actual token.

Open terminal, run the server, type node app.js, if there are no error messages, it means the server is working.

Since this is a demo using your local server, we can use ngrok to creates a secure public URL to a local webserver on your machine.

Open new terminal and run ./ngrok http 3000. You will see a screen displaying details about the tunnel. Copy the https url forwarding to your clipboard. Please be reminder, if you turn off the ngrok, your bot won’t work either.

Go back to your Product Setup dashboard, to receive messages sent by messenger,the app should enable webhooks integration. Click Setup Webhooks.Paste the https url forwarding to Callback URL , and for Verify Token, you can type VERIFY_TOKEN.

For a demo purpose I just tick message_deliveries, messaging_optins, messages and messaging_postbacks. Click Verify and Save.

Next step, we need to subscribe your app to the page. Open up your terminal and run

curl -ik -X POST “https://graph.facebook.com/v2.7/me/subscribed_apps?access_token=<token>&#8221;

Replacing <token> with your Page Access Token.

If no error, then you can start message your bot. Go to your bot’s Facebook page, click Message and type anyhing. It should echo back whatever you send it.

Yes..your own messenger bot! Try editing app.js and customize your bot.

Thanks for reading.

You can see the video from here.

Embedding a 360 panorama in a wordpress website

Recently I read this article about embedding VR view from Google VR documentation, so I thought I will give it a try to embed the picture to a website page using one sample taken by Cardboard Camera App.

1.Download the open source code for VR view on the web via GitHub.

github_vrview

2. Copy vrview-master.zip file to your wordpress and extracted it, mine is in cPanel.

3. Convert your picture taken by Cardboard Camera App.

4. Copy paste this and edit accordingly.

//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true

Here is the result

Enjoy..