Ionic 2 + Laravel API – Running on the device

I am working on an app using Ionic Native Facebook plugin & Laravel Socialite.
The native facebook plugin works with Cordova so I needed to test it on the actual device. I will write a detailed post on how I achieved this (if I ever do) but for now I want to talk about some issues I ran into.

First things first.

• I have all the appropriate headers set in my Laravel App. Allow Origin is set to * so this is not a CORS issue.
• I have Cordova Whitelist plugin (installed and configured to allow all domains while creating the ionic project)

Okay so here goes.

ionic run android –device -l -c
Okay so the command above starts a server on your device and then serves the file using the server. This is not how the app will run when in production. The app will be served from the filesystem so my test environment was incorrect. I had to drop the “-l” flag and just do “ionic run android –device”

Update: I tried running this again after using “php artisan serve –host 0.0.0.0” and it worked. So this was not really an issue. Of course it is going to be an issue for CORS because now you’re service files from a server running on your mobile so CORS comes into play. When files are served from the local filesystem – Cors is not really an issue. Either way didn’t matter for me because I have the right headers set on my api. If CORS is bothering you here is a great blog entry from ionic explaining the unknowns.

Laravel Valet messes things up
With Postman I was accessing my api using the convenient .dev domain name that valet offers. Guess what – Cannot be accessed on the device (see next point).

Laravel sites/api’s hosted on dev machines are not accessible by the mobile device
With or without using Valet laravel sites are not accessible from other devices on your network. This includes your mobile phone. A side note : It’s a good idea to have your mobile connected to the same network while testing.. Anyway, so the problem is that valet creates this convenient domain *.dev but its not registered on your local network. Only your dev machine understands it. This makes things complex.

So there can be two possible solutions.

1. Don’t use Valet. Use “php artisan serve” instead.

2. Use valet but then try and fix things by following this answer on stackoverflow (I have not tried this yet).

php artisan serve won’t work either!
Okay so here’s the problem. PHP Artisan Serve basically sets up the app on “localhost:8000” or “127.0.0.1:8000”. This is done on the development machine (my laptop in this case). When I try and access this url from the ionic code running on my device it doesn’t find a server running on localhost (the mobile in this case). Thus it throws an error “Connection Refused”.

The Solution!!
For the time being (during dev) I figured out that the best way to test on device is to run “php artisan serve –host 0.0.0.0” , By doing this your Laravel site/app is magically accessible on your local network by accessing the IP address of the host machine. So in my case running “php artisan serve –host 0.0.0.0” on my laptop with Ip (192.168.1.3) – I was able to successfully access the Laravel App by make HTTP requests from Ionic to the url “192.168.1.3:8000”. YAY!

I’m sure there are going to be more issues as I progress but so far so good.

Cheers!
SyntaxScrewer

References:
http://blog.ionic.io/handling-cors-issues-in-ionic/
http://stackoverflow.com/questions/30675025/access-to-laravel-5-app-locally-from-an-external-device
http://blog.ionic.io/handling-cors-issues-in-ionic/
http://stackoverflow.com/questions/36035717/use-local-apache-api-from-laravel

 

Infinite Scrolling – iPad Web App

Hey Guys,

I came across a splendid library called Infinity.js that allows you to build infinite
scrollable lists in your web apps.

Basically, what the library does is dynamically add/remove items (called ListItems) from
the list (called ListView). The documentation explains what the library does very well but
I found a lack of simple examples.

So here’s a simple implementation using iScroll.js with a lot of comments!

But before the code, checkout these references:
Checkout the library here
The annotated source code is very helpful in understanding what is happening behind the scenes. Check it out.
A helpful concise explanation : http://nerds.airbnb.com/introducing-infinityjs-a-uitableview-for-the/

Without further ado, here’s my simple example.

     /*Style needed for iScroll*/
        #scrollerWrapper {
            position: absolute;
            z-index: 1;
            top: 45px;
            bottom: 48px;
            left: 0;
            width: 100%;
            background: #ccc;
            overflow: hidden;
        }

        /* Style needed for iScroll*/
        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            width: 100%;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
        }

        /*Style for the list container*/
        #myList {
            width: 300px;
            height: 400px;
            border: 5px solid red;
            position: relative;
        }

        /* I don't like page margins 🙂 */
        body {
            margin: 0;
        }

<div id="myList">
    <div id="scrollerWrapper">
        <div id="scroller">
            <div id="infinityWrapper">
            </div>
        </div>
    </div>
</div>

        $(function () {
            var counter = 0;
            var TOTAL_RECORDS = 500; // Useful for a bound check.
            //How many pages should infinity build per screen? Don't know what a page is? Checkout the references above.
            infinity.config.PAGE_TO_SCREEN_RATIO = 3;
            //Get a reference to our wrapper.
            var $el = $('#infinityWrapper');
            //Build the infinity list view on the wrapper.
            var listView = new infinity.ListView($el);
            //Add a data property "listView" to the wrapper element (ie. #infinityWrapper)
            $($el).data('listView', listView);
            //A boolean flag.
            var updateScheduled = false;
            var myScroll;

            /* ================== ISCROLL STUFF =====================*/
            //Disable touchmove on document. Let iScroll catch the events.
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            //Instantiate iscroll and pass the wrapper div to it.
            //iScroll works with a nested div setup. Check out its documentation.
            //It is not necessary to use iScroll. But I want my example to work on iOS!
            //In case myScroll returns null/undefined for you after this statement.
            //Checkout the iscroll example source: http://lab.cubiq.org/iscroll/examples/simple/
            myScroll = new IScroll('#scrollerWrapper');
            /*=========================================================*/

            //The BOMB!: This method creates n item rows.
            //For an infinite scrolling list, you would ideally keep calling bomb on each scrollEnd.
            //In this example, I just call it once to create 100 elements.
            bomb(100);
            //Must refresh the iScroll after adding elements.
            //NOTE: In case you plan to bomb on each scrollEnd, remember to refresh the iscroll too.
            myScroll.refresh();

            function bomb(num) {
                var index;
                if (num <= 0) return;
                for (index = 0; index < num; index++) {
                    //The row() method is a helper method which creates a new div and appends it to our listView.
                    row();
                }
            }


            function row() {
                //Just keeping a count. 
                counter++;
                //Create a new div element and add the word "item" as text in it.
                var newContent = $('<div></div>');
                newContent.html("item : " + counter);
                //Append the new div to the listView.
                //NOTE: This append is different from the jquery append method.
                listView.append(newContent);

            }
        });
    

Archiving Cordova/Phonegap 2.9 Project – file not found: /Users/…/../libCordova.a

Hey folks,

So recently we bumped into a weird issue while archiving a cordova 2.9 web project using xcode 4.6.3.
The stubborn error read as follows:

file not found: /Users/admin/…/libCordova.a

It was pretty apparent that it was some path issue. Even libCordova.a showed up highlighted in red.
After searching through a LOT of stackoverflow posts, we finally found a solution.

Follow these steps to fix this problem:

1. Go to project settings and Build Tab. Search for “Other Linker Flags”
2. Double click on the linker flags for Release and Change “$(TARGET_BUILD_DIR)/libCordova.a” to “$(BUILT_PRODUCTS_DIR)/libCordova.a”
3. Do the same for Debug
4. Clean and build archive again

Reference: http://stackoverflow.com/questions/17401478/libcordova-a-file-missing-in-phonegap-2-9
Reference: http://stackoverflow.com/questions/17351446/building-an-archive-for-xcode-4-6-release-with-phonegap-v-2-9-fails/17372031#17372031

Cheers!
SyntaxScrewer

Hello,

So I’ve been struggling to get an example going using Backbone Relational and Require.js.
Lack of documentation and simple examples on the web made it really difficult for me to wrap my head around the implementation.
Moreover, Require.js was having scoping issues. Anyway, it works now and I can finally leverage this fantastic Backbone plugin 🙂 .

A few things to keep in mind

1) Make sure you have the updated version of Underscore.js
2) Make sure you have the updated version of Backbone
3) Make sure you have the updated version of Backbone-Relational
4) Test your example on a web server! install xampp, wamp or whateverYouWant! web browser have security restrictions to directly ajax local files.

The example I have below works with 1 Cinema JSON file which has a collection of movie objects inside it.
Here’s the JSON

    {
        "cinemaID":"1",
        "name":"Cinema 1",
        "movies":[
            {
                "movieID":"1",
                "name":"Bag It"
            },
            {
                "movieID":"2",
                "name":"Lost Boy: The Next Chapter"

            },
            {
                "movieID":"3",
                "name":"To Live & Ride in L.A."

            }]
    }

Next comes the MovieModel.js This is a simple extension of the Backbone.RelationalModel

define([],function () {
       var MovieModel = Backbone.RelationalModel.extend({
            idAttribute: 'movieID'
        });
        return MovieModel;
    }
);

Now the CinemaModel.js. This is where the relation with MovieModel is specified. The Backbone Relational documentation
shows that the “relatedModel” attribute should be set to the Model object. The name of this model object is shown to
be in single quotes. I think scoping issues were happening here. The MovieModel for me was being passed by Require.js
using define up top. However, when I had “relatedModel”:”MovieModel”, it didn’t find the Model in scope. So the solution
was to remove the quotes and have it set like “relatedModel”:MovieModel. Since we’re getting a reference to the MovieModel
object using require.js define() anyway.

define(['models/MovieModel','collections/MoviesCollection'],function (MovieModelClass,MoviesCollection) {
        var CinemaModel = Backbone.RelationalModel.extend({
            idAttribute:'cinemaID',
            url:'scripts/data/cinemamodel.json',
            relations: [
                {
                    type: Backbone.HasMany,
                    key: "movies",
//Scoping issue happening here. The documentation for Backbone-Relational has this in quotes!
                    relatedModel:MovieModelClass, 
                    //TODO: Figure out what this attribute does!
                    includeInJSON:Backbone.Model.prototype.movieID,
                    reverseRelation:{
                        key:'inCinema',
                        includeInJSON:Backbone.Model.prototype.cinemaID
                    }
                }
            ]});

        return CinemaModel;
    }
);

Finally, the implementation:

define(['models/CinemaModel'], function (CinemaModel) {

    $(function () {
       init();
    });

    function init() {

        /*Instantiating the CinemaModel*/
       cinemaModel = new CinemaModel();
        cinemaModel.fetch({success:function (collection,response) {
            console.log("Woohooo!: Fetch Cinema Model!");
            console.log ("Relational Model : " + cinemaModel.get('movies').at(0).get('name'));
            console.log ("Reverse Relation : " + cinemaModel.get('movies').at(0).get('inCinema').get('name'));
        },
            error:function (collection, response) {
                console.log("Error: Fetch Cinema Collection!");
            }
        });



    }


});

That’s it!! It works :). Next! I’m going to try and throw collections into the mix and see how I can have a cinemaCollection
with each collection model holding multiple MovieModel objects.

Should be fun 🙂

Cheers!
SyntaxScrewer

PhoneGap – iPad – Disable app container scrolling

Hey,

A common issue that one might face while building html/js phonegap applications for the iPad is that
when the application launches on the device, one can actually scroll it up/down and left/right. The scrolling
reveals the fact that phonegap loads all of it up in a webview container, which is not the best thing to
reveal to the end user.

The good thing is , that there is a pretty easy and straightforward fix for it.

The first thing to do is to add a few meta tags to your page.
Note: The 3rd one might affect the scrolling and the size. Other one’s can be ignored.
Are more useful if you’re running the app in device browser. Still no harm throwing em
in there!

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name = "viewport" content = "user-scalable=no,width=device-width" />

Next in the tag add the following script block

<script type="text/javascript">
 document.ontouchmove = function(e){
	e.preventDefault();
 }
 </script>

That should do it 🙂

Cheers!
SyntaxScrewer

iPad – Mobile Safari – Resizes High Resolution Images to fit the browser window size.

Hey guys,

I ran into an issue with Mobile Safari and its quirky behavior which forces a re size of a high resolution image.
The issue occurs even when doing any of the following simple things.

1) Load up the image as the body background
2) Load up the image as a div background
3) Load up the image in an img tag in the body.

In all the above, if the image resolution > that the browser’s it resizes the image to fit in.
In cases of the div/img, it resizes the div/img containers which cause the background-image/src to size automatically.

I kept searching for solutions online and found other important information pertaining to iPad web development
in the Apple Docs.

Lot of useful information there. I STRONGLY recommend that everyone goes through it.

The parts relevant to this post were found here :
Optimizing Content for Ipad Development – Apple Docs

Anyway, coming quickly to the solution – it was pretty straightforward. I’ll explain what worked for the body and the div background images.

Ok so this is how we had the body setup first (which didn’t work)

<html><head>
<style>
body{
background: URL("media/test.jpg") no-repeat;
}
</style></head>
<body></body>
</html>

The problem with the above is that the image does not load up in its original size. Safari Mobile scales it down.

The solution is to give the body a background-size in the CSS which equals the size of the image.

<html><head>
<style>
body{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
}
</style></head>
<body></body>
</html>

The following code creates issues for the background image on the div.

<html><head>
<style>
#img{
background: URL("media/test.jpg") no-repeat;
width:1934px;
height:1612px;
}
</style></head>
<body>
<div id="img"></div>
</body>
</html>

The issue with the above is the same – The background image resizes.
The problem here doesn’t get fixed by applying a background-size to the css.
You also need to set the widht and height to a 100% each!!

<html><head>
<style>
#img{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
width:100%;
height:100%;
}
</style></head>
<body>
<div id="img"></div>
</body>
</html>

The above fixes the div too…
But another problem arises… What if you don’t want the div to be a 100% and a 100% width? What if you want to show only a part of the background image?
Like in case you’re loading up or animating a spritesheet? How does all of that work then ?

Well, you take a container div which houses your image div. And on the container div set the desired size you want.
Everything then falls in place.

Here’s how :

<html>
<head>
<style>
#imgHolder{
width:320px;
height:320px;
}
#img{
background: URL("media/test.jpg") no-repeat;
background-size:1934px 1612px;
width:100%;
height:100%;
}
</style>
<body>
<div id="imgHolder">
	<div id="img">
	</div>
</div>
</body>

Hope that helps!! I know its going to serve me as a reference next time I get stuck with iPad!

Cheers!

SyntaxScrewer

Javascript : Unable to load up image files locally – Firefox / Chrome

Hello!

So I found out that for some reason Firefox / Chrome do not allow Javascript to load up local files from the disk.
This is some sort of security restriction.  Maybe its the same with Safari but I haven’t found out a solution for that yet.

Solution (Chrome)  :  For local files to work on Chrome, it has to be started with--allow-file-access-from-files command line flag.
Solution (Firefox)   : For Firefox, there is a similar parameter security.fileuri.strict_origin_policy accessible via about:config.

reference : https://github.com/mrdoob/three.js/issues/343

Hope this helps!

Cheers

SyntaxScrewer

Linking fl.* package in FDT

Hello fellows,

This is a rather simple post. It shows two methods in which you can use the fl.* package in your NON Flash IDE.

Method 1:
http://troyworks.com/blog/2008/01/04/using-flcontrols-with-fdt-and-flash-cs3/

Method 2:
http://evolve.reintroducing.com/2007/10/30/tips-n-tricks/fl-package-swc/

Hope this works.

Thanks

SyntaxScrewer!

Fast Masked! Scrolling! MovieClips – iPAD

Hello people,

I was asked to develop a dynamic 360 degree product viewer for the iPAD using a PNG sequence. I created the component but it was slugging on the device. I wasn’t getting the 60FPS that I should
have. After brainstorming with a few colleagues, I came across a new  Greensock API that did the job BRILLIANTLY. They claim upto 1000% smoother animations.

It’s called BlitMask.
Here’s the link
http://www.greensock.com/blitmask/

Another method to do the same thing is using
https://github.com/theflashbum/BitmapScroller
Here’s an example by Lee BrimeLow  using the above.
http://www.leebrimelow.com/?p=2839

Other interesting links for Spriting/Blitting/Smooth Scrolling
http://www.greensock.com/throwprops/
http://www.gotoandlearn.com/play.php?id=140
http://gotoandlearn.com/play.php?id=141
http://gotoandlearn.com/play.php?id=142

Cheers!

SyntaxScrewer

 

 

How the hell do I deselect a RadioButton using code in as3?

Ola!

So I found the need to use the RadioButton component the other day in one of the projects I was building.
I made it a part of the RadioButtonGroup and thus only one out of them could be selected at a time.

I wanted to reset all the radio buttons in a group once the group lost focus. ie. Wanted the icon to be blank.
I tried using btnInstance.selected=false. But that didn’t work.

After hunting for a solution on the internet for a while I came across this little trick that works fabulously well.

1) Just create another radio button and assign it to the same group.
2) When you want to set the selection of any of your groups radio buttons to false, just set the selected property of the new radio button added in step 1 to true!
3) Since this is a part of the RadioButtonGroup which means only 1 radiobutton can be active at all times, it deactivates all the other ones.

Short & Sweet 🙂

Cheers!
SyntaxScrewer