SyntaxScrewer's Blog

April 22, 2017

Ionic 2 + Laravel API – Running on the device

Filed under: Ionic 2,Laravel — geekymaira @ 7:04 pm

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

 

Advertisements

August 5, 2013

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

Filed under: iOS,Mobile — geekymaira @ 9:40 am

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

May 2, 2012

PhoneGap – iPad – Disable app container scrolling

Filed under: iOS,Mobile,Uncategorized — geekymaira @ 12:42 am
Tags: , , , , , ,

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

May 1, 2012

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

Filed under: iOS — geekymaira @ 5:32 pm
Tags: , , , , , , ,

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

October 11, 2011

Fast Masked! Scrolling! MovieClips – iPAD

Filed under: Mobile — geekymaira @ 11:58 am

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

 

 

Create a free website or blog at WordPress.com.